@charset "utf-8";
/* CSS Document */

body{font-family: "Source Han Sans CN";font-weight: bold;}
ul, ol {list-style: none;list-style-type: none;margin-block-start: 0;padding-inline-start: 0;}
.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}

.almain{width: 100%;}
.almain-a{width: 100%;margin: 0 auto;}

.almain-at{width: 100%;}
.almain-at li{float: left;height: calc(26.24vw * 321 / 504);margin-top: 1%;overflow: hidden;}


.almain-at li:nth-child(1){width: 14%;margin-right: 1%;border-radius: 40px 10px;-webkit-border-radius: 40px 10px 40px 10px;-moz-border-radius: 40px 10px 40px 10px;-o-border-radius: 40px 10px 40px 10px;}
.almain-at li:nth-child(2){width: 51.2%;margin-right: 1%;border-radius: 10px 40px;-webkit-border-radius: 10px 40px 10px 40px;-moz-border-radius: 10px 40px 10px 40px;-o-border-radius: 10px 40px 10px 40px;}
.almain-at li:nth-child(3){width: 32.8%;border-radius: 40px 10px;-webkit-border-radius: 40px 10px 40px 10px;-moz-border-radius: 40px 10px 40px 10px;-o-border-radius: 40px 10px 40px 10px;}
.almain-at li:nth-child(4){width: 32.6%;margin-right: 1%;border-radius: 10px 40px;-webkit-border-radius: 10px 40px 10px 40px;-moz-border-radius: 10px 40px 10px 40px;-o-border-radius: 10px 40px 10px 40px;}
.almain-at li:nth-child(5){width: 32.6%;margin-right: 1%;border-radius: 40px 10px;-webkit-border-radius: 40px 10px 40px 10px;-moz-border-radius: 40px 10px 40px 10px;-o-border-radius: 40px 10px 40px 10px;}
.almain-at li:nth-child(6){width: 32.8%;border-radius: 10px 40px;-webkit-border-radius: 10px 40px 10px 40px;-moz-border-radius: 10px 40px 10px 40px;-o-border-radius: 10px 40px 10px 40px;}
.almain-at li:nth-child(7){width: 32.6%;margin-right: 1%;border-radius: 40px 10px;-webkit-border-radius: 40px 10px 40px 10px;-moz-border-radius: 40px 10px 40px 10px;-o-border-radius: 40px 10px 40px 10px;}
.almain-at li:nth-child(8){width: 32.6%;margin-right: 1%;border-radius: 10px 40px;-webkit-border-radius: 10px 40px 10px 40px;-moz-border-radius: 10px 40px 10px 40px;-o-border-radius: 10px 40px 10px 40px;}
.almain-at li:nth-child(9){width: 32.8%;border-radius: 40px 10px;-webkit-border-radius: 40px 10px 40px 10px;-moz-border-radius: 40px 10px 40px 10px;-o-border-radius: 40px 10px 40px 10px;}


.effects .img { position: relative;overflow: hidden;height: calc(26.24vw * 321 / 504);/*display: flex;align-items: center;*/}
.effects .img img {width: 100%;position: absolute;bottom: 0px; /*align-items: center;*/}
.overlay { display: block; position: absolute; z-index: 1; background: rgba(0, 0, 0, 0.47); overflow: hidden; -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 700; color: #fff; line-height: 45px; text-align: center; background-color: #3b3b3b; cursor: pointer; }
a.close-overlay.hidden { display: none; }
a.expand { display: block; position: absolute; z-index: 100; width: 60px; height: 60px; border: solid 5px #fff; text-align: center; color: #fff; line-height: 50px; font-weight: 700; font-size: 30px;  }
#effect-1 .overlay { bottom: 0; left: 0; right: 0; width: 100%; height: 0%; }
#effect-1 .overlay a.expand { left: 0; right: 0; bottom: 50%; margin: 0 auto -30px auto; }
#effect-1 .overlay h3 {width: 80%;font-size: 18px;color: #fff;text-align: left;margin-left: 50px;margin-top: 100px;}
#effect-1 .overlay p {width: 80%;color: #fff;text-align: right; margin-left: 50px;margin-top: 50px;border-bottom: 2px solid #ffffff;height: 40px;}
#effect-1 .overlay img { width: 40px; text-align: left;margin-left: 50px; margin-top: 40px; top:10px;}
#effect-1 .img:hover .overlay { height: 100%; }


.almain-atl{width: 100%;background: #CB0000;height: 100%;}
.almain-atl img{width: 30%;margin: 15% 0 1% 35%;text-align: center;}
.almain-atl h2{width: 30%;margin: 2% auto 0;font-size: 30px;text-align: center;color: #ffffff;}
.almain-atl h2{width: 30%;margin: 2% auto 0;font-size: 30px;text-align: center;color: #ffffff;}


@media only screen and (max-width:1780px){
    .almain-atl h2{font-size: 26px;}
}

@media only screen and (max-width:1600px){
    #effect-1 .overlay h3 {width: 90%;font-size: 15px;margin-top: 80px;}
    #effect-1 .overlay p {margin-top: 30px;}
    #effect-1 .overlay img {margin-top: 20px;top:10px;}

}

@media only screen and (max-width:1520px){
    .almain-atl h2{font-size: 24px;}
}
@media only screen and (max-width:1420px){
    .almain-atl h2{font-size: 22px;}
}
@media only screen and (max-width:1299px){
    .almain-atl h2{line-height: 30px;}
}
@media only screen and (max-width:1280px){
    .almain-at li{height: calc(29.52vw * 321 / 504);}
/*   
    .almain-at li:nth-child(1){border-radius: 40px 10px;-webkit-border-radius: 40px 10px 40px 10px;-moz-border-radius: 40px 10px 40px 10px;-o-border-radius: 40px 10px 40px 10px;}
    .almain-at li:nth-child(2){border-radius: 10px 40px;-webkit-border-radius: 10px 40px 10px 40px;-moz-border-radius: 10px 40px 10px 40px;-o-border-radius: 10px 40px 10px 40px;}
    .almain-at li:nth-child(3){border-radius: 40px 10px;-webkit-border-radius: 40px 10px 40px 10px;-moz-border-radius: 40px 10px 40px 10px;-o-border-radius: 40px 10px 40px 10px;}
    .almain-at li:nth-child(4){border-radius: 10px 40px;-webkit-border-radius: 10px 40px 10px 40px;-moz-border-radius: 10px 40px 10px 40px;-o-border-radius: 10px 40px 10px 40px;}
    .almain-at li:nth-child(5){border-radius: 40px 10px;-webkit-border-radius: 40px 10px 40px 10px;-moz-border-radius: 40px 10px 40px 10px;-o-border-radius: 40px 10px 40px 10px;}
    .almain-at li:nth-child(6){border-radius: 10px 40px;-webkit-border-radius: 10px 40px 10px 40px;-moz-border-radius: 10px 40px 10px 40px;-o-border-radius: 10px 40px 10px 40px;}
*/
    .almain-at li:nth-child(1){border-radius: 30px 10px;-webkit-border-radius: 30px 10px 30px 10px;-moz-border-radius: 30px 10px 30px 10px;-o-border-radius: 30px 10px 30px 10px;}
    .almain-at li:nth-child(2){border-radius: 10px 30px;-webkit-border-radius: 10px 30px 10px 30px;-moz-border-radius: 10px 30px 10px 30px;-o-border-radius: 10px 30px 10px 30px;}
    .almain-at li:nth-child(3){border-radius: 30px 10px;-webkit-border-radius: 30px 10px 30px 10px;-moz-border-radius: 30px 10px 30px 10px;-o-border-radius: 30px 10px 30px 10px;}
    .almain-at li:nth-child(4){border-radius: 10px 30px;-webkit-border-radius: 10px 30px 10px 30px;-moz-border-radius: 10px 30px 10px 30px;-o-border-radius: 10px 30px 10px 30px;}
    .almain-at li:nth-child(5){border-radius: 30px 10px;-webkit-border-radius: 30px 10px 30px 10px;-moz-border-radius: 30px 10px 30px 10px;-o-border-radius: 30px 10px 30px 10px;}
    .almain-at li:nth-child(6){border-radius: 10px 30px;-webkit-border-radius: 10px 30px 10px 30px;-moz-border-radius: 10px 30px 10px 30px;-o-border-radius: 10px 30px 10px 30px;}
    .almain-at li:nth-child(7){border-radius: 30px 10px;-webkit-border-radius: 30px 10px 30px 10px;-moz-border-radius: 30px 10px 30px 10px;-o-border-radius: 30px 10px 30px 10px;}
    .almain-at li:nth-child(8){border-radius: 10px 30px;-webkit-border-radius: 10px 30px 10px 30px;-moz-border-radius: 10px 30px 10px 30px;-o-border-radius: 10px 30px 10px 30px;}
    .almain-at li:nth-child(9){border-radius: 30px 10px;-webkit-border-radius: 30px 10px 30px 10px;-moz-border-radius: 30px 10px 30px 10px;-o-border-radius: 30px 10px 30px 10px;}
    
    .effects .img {height: calc(29.52vw * 321 / 504);}
    #effect-1 .overlay h3 { margin-left: 5%; }
    #effect-1 .overlay p { margin-left: 5%; }
    #effect-1 .overlay img { margin-left: 5%; }
    
}
@media only screen and (max-width:1200px){
    .almain-atl h2{font-size: 20px;}
    #effect-1 .overlay h3 {
    margin-top: 70px;
}
    #effect-1 .overlay p {
    margin-top: 10px;
}
    #effect-1 .overlay img {
    margin-top: 10px;
}
}
@media only screen and (max-width:1120px){
    .almain-atl h2{line-height: 28px;}
}
@media only screen and (max-width:960px){
    .almain-atl h2{line-height: 26px;}
}
@media only screen and (max-width:900px){
    .almain-atl h2{font-size: 19px;line-height: 25px;}
    .almain-atl img{margin: 10% 0 1% 35%;}
}
@media only screen and (max-width:800px){
    .almain-atl h2{font-size: 18px;line-height: 24px;}
    #effect-1 .overlay h3 { margin-top: 55px;}
    #effect-1 .overlay p { margin-top: 0;font-size: 13px;height: 30px;}
    #effect-1 .overlay img { width: 30px;}
}
@media only screen and (max-width:768px){
    .almain-at li{float: left;height: calc(48vw * 321 / 504);margin-top: 1%;overflow: hidden;}
    .effects .img {height: calc(48vw * 321 / 504);}
    .almain-at li:nth-child(1){width: 14%;margin-right: 1%;}
    .almain-at li:nth-child(2){width: 85%;margin-right: 0%;}
    .almain-at li:nth-child(3){width: 49%;margin-right: 1%;}
    .almain-at li:nth-child(4){width: 50%;margin-right: 0%;}
    .almain-at li:nth-child(5){width: 49%;margin-right: 1%;border-radius: 10px 30px;-webkit-border-radius: 10px 30px 10px 30px;-moz-border-radius: 10px 30px 10px 30px;-o-border-radius: 10px 30px 10px 30px;}
    .almain-at li:nth-child(6){width: 50%;margin-right: 0%;border-radius: 30px 10px;-webkit-border-radius: 30px 10px 30px 10px;-moz-border-radius: 30px 10px 30px 10px;-o-border-radius: 30px 10px 30px 10px;}
    .almain-at li:nth-child(7){width: 49%;margin-right: 1%;}
    .almain-at li:nth-child(8){width: 50%;margin-right: 0%;}
    .almain-at li:nth-child(9){display: none;}
    .almain-atl h2{font-size: 20px;line-height: 30px;margin-top: 5%;}
    .almain-atl img{margin: 20% 0 1% 35%;}
}
@media only screen and (max-width:580px){
    .almain-at li:nth-child(1){border-radius: 7px 25px;-webkit-border-radius: 7px 25px 7px 25px;-moz-border-radius: 7px 25px 7px 25px;-o-border-radius: 7px 25px 7px 25px;}
    .almain-at li:nth-child(2){border-radius: 25px 7px;-webkit-border-radius: 25px 7px 25px 7px;-moz-border-radius: 25px 7px 25px 7px;-o-border-radius: 25px 7px 25px 7px;}
    .almain-at li:nth-child(3){border-radius: 7px 25px;-webkit-border-radius: 7px 25px 7px 25px;-moz-border-radius: 7px 25px 7px 25px;-o-border-radius: 7px 25px 7px 25px;}
    .almain-at li:nth-child(4){border-radius: 25px 7px;-webkit-border-radius: 25px 7px 25px 7px;-moz-border-radius: 25px 7px 25px 7px;-o-border-radius: 25px 7px 25px 7px;}
    .almain-at li:nth-child(5){border-radius: 25px 7px;-webkit-border-radius: 25px 7px 25px 7px;-moz-border-radius: 25px 7px 25px 7px;-o-border-radius: 25px 7px 25px 7px;}
    .almain-at li:nth-child(6){border-radius: 7px 25px;-webkit-border-radius: 7px 25px 7px 25px;-moz-border-radius: 7px 25px 7px 25px;-o-border-radius: 7px 25px 7px 25px;}
    .almain-at li:nth-child(7){border-radius: 7px 25px;-webkit-border-radius: 7px 25px 7px 25px;-moz-border-radius: 7px 25px 7px 25px;-o-border-radius: 7px 25px 7px 25px;}
    .almain-at li:nth-child(8){border-radius: 25px 7px;-webkit-border-radius: 25px 7px 25px 7px;-moz-border-radius: 25px 7px 25px 7px;-o-border-radius: 25px 7px 25px 7px;}
    .almain-at li:nth-child(9){border-radius: 7px 25px;-webkit-border-radius: 7px 25px 7px 25px;-moz-border-radius: 7px 25px 7px 25px;-o-border-radius: 7px 25px 7px 25px;}
    .almain-atl h2{font-size: 17px;line-height: 28px;margin-top: 5%;}
    .almain-atl img{width: 40%;margin: 15% 0 1% 30%;}
}
@media only screen and (max-width:500px){
    .almain{margin: 30px auto;}
    .almain-atl h2{font-size: 16px;line-height: 24px;}
}
@media only screen and (max-width:450px){
    .almain-atl h2{font-size: 16px;line-height: 20px;}
}
@media only screen and (max-width:375px){
    .almain-atl h2{font-size: 14px;line-height: 18px;}
    #effect-1 .overlay h3{line-height: 15px;font-size: 14px;height: 30px;overflow: hidden;}
    #effect-1 .overlay p{display: none;}
    #effect-1 .overlay img{display: none;}
}