.index-body{position:relative;width:100%;background-color:white}

section{margin-bottom:clamp(20px, 3vw,40px);margin-bottom:60px}
.s1{width:100%;height:500px;display:flex;justify-content:center;align-items:center;background: url('../img/info/hero-bk.jpg');background-size:100% 100%; background-repeat: no-repeat;color:#fff}
.s1-text{max-width:min(600px,98%)}
    h1 span:nth-child(1){font-size:28px} h1.zh span:nth-child(1){font-size:46px}
    h1 span:nth-child(2){font-size:24px} h1.zh span:nth-child(2){font-size:40px}
    .s1 p,.s1 a{font-size: 22px} .s1.zh p,.s1.zh a{font-size: 24px}
h1{font-size:1em;text-align:center;font-weight:normal}
h1.zh,.s1.zh p{text-align: left}
h1 span{display:block;font-size:1em;width:100%}
    h1 span:first-child{margin-bottom:40px} h1.zh span{margin:0}
h1 span+span{color:#87d2ee;text-shadow:1px 1px 3px black}
.s1 p,.s1 a{margin-top:40px}
.s1 a{display:inline-block;padding:5px 30px;color:inherit; background-color: transparent;border: 1px solid white;transition: background-color 0.3s ease;border-radius:20px}
.s1 a:hover{background-color: white;color:#333;font-weight: bold;}

.s2{display:inline-flex;justify-content:space-around;align-items:center;width:100%;max-width:900px;position:relative}
.s2 img{height:150px}
.s2>div{width:60%;border-left:2px solid black;padding-left:9%;text-align:left}
.s2-text p{font-size:20px;text-align:justify;margin-top:20px}
h2{font-size:20px}
.s2-text{padding-top:10px;padding-bottom:10px}
.s2-text p{text-align:justify}

h2{font-size:22px;margin-bottom:20px;display: none}
.slider-parent{display:inline-flex;align-items:center;justify-content:space-evenly;width:min(1100px, 100%);height:210px;margin:0;position:relative}
footer{margin:0}
.button-carousel{width:50px;height:100px;background-size:40px;background-position:center;background-repeat:no-repeat;cursor:pointer;border:0;background-color:transparent;background-image:url("../img/info/arrow-left.svg")}
.button-right{transform:rotate(180deg)}
.button-carousel:active{opacity:0.7}
#slider,#slider2{width:90%;height:100%;display:flex;overflow:hidden;justify-content:space-between}
.caja{position:relative;height:100%;overflow:hidden;box-sizing:border-box;transition:left 1s ease;left:0;border-radius:8px;border:1px solid #777}
.caja:hover{border:1px solid #000}
.caja img{width:100%;height:100%;display:block;position:absolute}
.caja h3{width:100%;padding:5px;line-height:25px;box-sizing:border-box;background-color: rgba(17,17,17,0.1);text-shadow: 1px 1px 3px black;z-index: 10;font-size:16px}
.caja a{height:100%;color:#fff;display:flex;flex-direction:column-reverse;box-sizing:border-box}
.caja.rev a{flex-direction:column}

.cases-parent{display:flex;justify-content: center;align-items: stretch}
.cases-first-case{width:50%;position: relative;display:flex;flex-direction:column;justify-content: flex-end;z-index: 1;box-sizing: border-box;text-align: left;padding: 25px;color:white;text-shadow: 1px 1px 4px black;background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%)}
.cases-first-case::before{content: '';position: absolute;top:0;left:0;right:0;bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/><line x1="0" y1="50" x2="100" y2="50" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/><line x1="50" y1="0" x2="50" y2="100" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></svg>') repeat;background-size: 100px 100px;}
.cases-first-case img{position: absolute;left:0;top:0;width:100%;height:100%;z-index: -1}
.cases-first-case p:first-child{font-size:14px;margin-bottom: 15px;color:#ffd700;font-weight:bold;letter-spacing:1px}
.first-case-title{font-size:24px;font-weight: bold;line-height: 1.2;margin-bottom: 12px}
.first-case-subtitle{font-size:16px;opacity:0.9;line-height: 1.6}
.cases-list{width:50%;overflow-y:scroll;max-height:400px;background-color: #f8f9fa;padding:20px 0;border-top:1px solid #bbb;border-bottom:1px solid #bbb}
.cases-item{margin:0 20px 1px 20px;padding:25px;border-left: 3px solid transparent;background-color:#fff;transition:all 0.3s ease;text-align: left}
.cases-item:hover{background-color: #fafafa;border-left-color:#c41230;padding-left:30px}
.cases-item p{font-size:14px;color:#1a237e;margin-bottom:8px;font-weight: bold;letter-spacing:0.5px}
.cases-item h3{font-size:16px;color:#333;line-height:1.2;margin-bottom:8px;font-weight: bold}

/* .cases-item h3{font-size:1em;margin-top:10px}
.cases-item p{display:inline;border-bottom:1px solid black;padding-bottom:1px} */
.cases-parent a{color:inherit;cursor:pointer}
.cases-parent a:visited,.cases-item a{color:inherit}
.cases-parent a:hover{text-decoration: underline;}
.cases-list::-webkit-scrollbar{width:6px}
.cases-list::-webkit-scrollbar-track{background-color:#fefdf6}
.cases-list::-webkit-scrollbar-thumb{background-color:#dbc079;border-radius:3px}
.cases-list::-webkit-scrollbar-thumb:hover{background-color:#bb8802}

@media(min-width:1649px){
.slider-parent{width:min(1700px,100%)}
.caja{width:19%;min-width:19%;margin-right:1.25%}
}

@media(max-width:1650px){
.slider-parent{width:min(1350px,100%)}
.caja{width:24%;min-width:24%;margin-right:1.33%}
}

@media(max-width:1300px){
.slider-parent{width:min(1050px,100%)}
.caja{width:32%;min-width:32%;margin-right:2%}
}

@media(max-width:1010px){
.s1-img{opacity:0.6;position:absolute}
h1{text-align: center}
.slider-parent{width:min(800px,100%)}
.caja{width:32%;min-width:32%;margin-right:2%}
.button-carousel{position:absolute;z-index:999;width:45px;filter:drop-shadow(0px 0px 4px white)}
.button-right{right:0;transform:rotate(180deg)}
.button-left{left:0;transform:none}
#slider,#slider2{width:100%}    
}

@media(max-width:800px){
.slider-parent{width:min(600px,100%)}
.caja{width:48%;min-width:48%;margin-right:4%}
.button-carousel{height:50px;margin:0}
.caja h3{font-size:15px;padding:2px;line-height:20px}
.link{padding:2px 10px}
h2{font-size:17px}
.s2>div{border:0;margin:0;padding-left:5px}
.s2>div>p{font-size:17px}
.cases-parent{flex-direction: column;flex-direction: column;align-items:center}
.cases-first-case{width:100%;height:300px}
.cases-list{width:100%}
.first-case-date,.first-case-title{margin-bottom:10px}
.first-case-date{font-size:16px}
.first-case-title{font-size:18px}
.first-case-subtitle{font-size:16px}
.cases-list{max-height:300px}
.cases-item{font-size:14px;padding:10px 15px}
.cases-item h3{margin:5px 0}
.cases-item:hover{padding-left:20px}
}

@media(max-width:500px){
    h1 span:nth-child(1){font-size:21px} h1.zh span:nth-child(1){font-size:28px}
    h1 span:nth-child(2){font-size:19px} h1.zh span:nth-child(2){font-size:24px}
    .s1 p,.s1 a{font-size: 17px} .s1.zh p,.s1.zh a{font-size: 18px}
.s1-text{max-width:min(350px,98%)}
    h1.zh{text-align: center}
.slider-parent{height:160px;width:98%}
.button-carousel{background-size: 30px}
}

@media(max-width:420px){
.s2{flex-direction:column}
.s2 img{margin-bottom:20px}
.s2>div{padding:0;width:90%;text-align:center}
.s2>div h2{font-size:16px}
}