@media screen and (min-width: 750px) {
    body {
        background: url(/ctgenglish/template/common/img/homebg.png) no-repeat center;
        background-size: 100% 100%;
        background-position: 0 100px;
    }
    .carousel-item {
        width: 100%;
        height: 100%;
    }
    .carousel-item img {
        width: 100%;
        height: 100%;
    }
    .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #014F9B;
        margin-right: 20px;
        border: 0;
    }
    .carousel-indicators {
        width: 200px;
        height: 20px;
        padding: 5px 20px;
        background: #FFFFFF;
        border-radius: 20px;
        margin: 0 auto;
        display: flex;
        bottom: -10px;
    }
    .contentWarp {
        width: 1260px;
        margin: 0 auto;
        height: 4100px;    
    }
    .contetn {
        width: 100%;
        padding-top: 120px;
        box-sizing: border-box;
    }
    .contetn .imgWarp {
        width: 100%;
    }
    .contetn .imgWarp img {
        width: 100%;
    }
    .info {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 80px;
    }
    .info .left {
        width: 660px;
        text-align: left;
    }    
    .info .left .title {
        font-size: 60px;
        font-family: Roboto Condensed;
        font-weight: bold;
        color: #84BED9;
        text-align: left;
    }
    .info .left .title span{
        color: #317EBA
    }
    .info .left .img {
        width: 100%;
        overflow: hidden;
    }
    .info .left .img img{
        width: 100%;
        transition: all 0.5s;
    }
    .info .left .img img:hover {
        transform:scale(1.2);
    }
    .info .left .bot {
        font-size: 32px;
        font-family: Roboto Condensed;
        line-height: 35px;
        color: #383838;
        margin-top: 5px;
        text-align: left;
    }
    .info .left .bot:hover {
        color: #007aff;
        cursor: pointer;
    }
    .date {
        font-size: 14px;
        line-height: 14px;
        font-family: Roboto Condensed;
        color: #9D9D9D;
        margin-top: 9.5px;
        text-align: left;
    }
    .info .right {
        width: 540px;
        padding-top: 60px;
        box-sizing: border-box;
    }
    .info .right .text {
        font-size: 25px;
        font-family: Roboto Condensed;
        font-weight: 400;
        line-height: 25px;
        color: #383838;
        margin-top: 28px;
        text-align: left;
    }
    .info .right .text:hover {
        color: #007aff;
        cursor: pointer;
    }
    .info .right .more{
        font-size: 20px;
        text-align: left;
        font-family: Roboto Condensed;
        font-weight: 400;
        margin-top: 28px;
        color: #84BED9;
        line-height: 20px;
    }
    .info .right .more:hover {
        cursor: pointer;
        color: #73c8f0
    }
    .business {
        width: 50%;
        margin-top: 140px;
        text-align: left;
    }
    .business .title {
        font-size: 60px;
        width: 100%;
        font-family: Roboto Condensed;
        font-weight: 700;
        color: #317EBA;
    }
    .business .text {
        width: 437px;
        font-size: 16px;
        line-height: 19px;
        margin-top: 9px;
        font-family: Roboto Condensed;
        font-weight: 400;
        color: #509AA4;
    }
    .energy {
        width: 100%;
        margin-top: 288px;
    }
    .energy .title{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    .energy .title .tleft {
        width: 50%;
        text-align: left;
    }
    .energy .title .tright {
        width: 50%;
        text-align: right
    }
    .energy .imgList{
        width: 100%;
    }
    .energy .imgList .imgItem {
        display: flex;
        margin-top: 10px;
        justify-content: space-between;
        position: relative;
    }
    .energy .imgItem a {
        width: 740px;
    }
    .energy .imgItem img{
        width: 100%;
    }
    .energy .imgItem a:nth-child(2) {
        position: absolute;
        left: 517px;
        top: 0;
    }
    .sustai {
        width: 50%;
        margin-top: 100px;
        text-align: left;
    }
    .sustai .title {
        font-size: 70px;
        font-family: Roboto Condensed;
        font-weight: 700;
        color: #41ADB2;
    }
    .sustai .title1 {
        font-size: 30px;
        font-family: Roboto Condensed;
        font-weight: 400;
        color: #65C1B4;
        margin-top: 6px;
    }
    .sustai .text {
        font-size: 16px;
        font-family: Roboto Condensed;
        font-weight: 400;
        color: #65C1B4;
        line-height: 24px;
        margin-top: 10px;
    }
    .sustai .btnWarp {
        width: 100%;
        display: flex;
        margin-top: 30px;
    }
    .sustai .btnWarp .left{
        width: 100px;
        font-size: 16px;
        border-radius: 20px;
        font-family: Roboto Condensed;;
        font-weight: 400;
        color: #65C1B4;
        border: 1px solid #65C1B4;
        text-align: center;
        line-height: 32px;
    }
    .sustai .btnWarp .left:hover{
        background: #0d6efd;
        color: #fff;
        cursor: pointer;
    }
    .sustai .btnWarp .right{
        margin-left: 10px;
        width: 150px;
        font-size: 16px;
        border-radius: 20px;
        font-family: Roboto Condensed;;
        font-weight: 400;
        color: #65C1B4;
        border: 1px solid #65C1B4;
        text-align: center;
        line-height: 32px;
    }
    .sustai .btnWarp .right:hover{
        background: #0d6efd;
        color: #fff;
        cursor: pointer;
    }
}
.swiper-pagination-custom {
    bottom: 0rem;
}
.pagination-indicators {
    width: 2rem;
    height: 0.13rem;
    background: #FFFFFF;
    border-top-left-radius:0.2rem;
    border-top-right-radius: 0.2rem;
    margin: 0 auto;
}
.swiper-pagination-customs {
    width: 0.1rem;
    height: 0.1rem;
    display: inline-block;
    border-radius: 50%;
    background: #014F9B;
    opacity: .2;
    margin: 0.03rem 0.1rem 0.1rem 0.1rem;
}
.swiper-pagination-customs-active {
    opacity: 1;
    background: #014F9B;
}
@media screen and (max-width: 750px) {
    body {
        background: url(/ctgenglish/template/common/img/bg04.png) no-repeat center;
        background-size: 100% 100%;
        background-position: 0 -1rem;
    }
    .carousel-item {
        width: 100%;
        height: 100%;
    }
    .carousel-item img {
        width: 100%;
        height: 100%;
    }
    .carousel-indicators [data-bs-target] {
        width: .1rem;
        height: .1rem;
        border-radius: 50%;
        background: #014F9B;
        border: 0;
    }
    .carousel-indicators {
        width: 1.5rem;
        height: .2rem;
        border-radius: .2rem;
        margin: 0 auto;
        bottom: -.4rem;
    }
    .contentWarp {
        width: 100%;  
        height: 49rem;
    }
    .contetn {
        width: 100%;
        padding-top: 1.2rem;
        box-sizing: border-box;
    }
    .contetn .imgWarp {
        width: 100%;
        padding: 0 .4rem;
        box-sizing: border-box;
    }
    .contetn .imgWarp img {
        width: 100%;
    }
    .info {
        width: 100%;
        padding: 0 .4rem;
        margin-top: 1.4rem;
        box-sizing: border-box;
    }
    .info .title {
        display: flex;
    }
    .info .title .left {
        width: 50%;
        text-align: left;
        font-size: .46rem;
        font-family: Roboto Condensed;
        font-weight: bold;
        color: #84BED9;
    }   
    .info .title .left span{
        color: #317EBA
    } 
    .info .title .right {
        font-size: .28rem;
        line-height: .7rem;
        width: 50%;
        text-align: right;
        font-family: Roboto Condensed;;
        font-weight: 400;
        color: #84BED9
    }
    .info .img img{
        width: 100%;
    }
    .info .bot {
        font-size: .36rem;
        font-family: Roboto Condensed;;
        font-weight: bold;
        color: #383838;
        line-height: .48rem;
        margin-top: .1rem;
        text-align: left;
    }
    .date {
        font-size: .24;
        font-family: Roboto Condensed;;
        font-weight: bold;
        color: #9D9D9D;
        margin-top: .05rem;
        text-align: left;
    }
    .info .text {
        font-size: .24rem;
        font-family: Roboto Condensed;;
        font-weight: 400;
        color: #383838;
        margin-top: .1rem;
        text-align: left;
    }
    .info .text:hover {
        color: #007aff;
        cursor: pointer;
    }
    .info .date {
        font-size: .24rem;
        font-family: Roboto Condensed;;
        font-weight: bold;
        color: #9D9D9D;
        margin-top: .05rem;
        text-align: left;
    }
    .business {
        width: 100%;
        margin-top: 1rem;
        padding: 0 .4rem;
        text-align: left;
        box-sizing: border-box;
    }
    .business .title {
        font-size: .8rem;
        width: 100%;
        font-family: Roboto Condensed;
        font-weight: bold;
        color: #317EBA;
    }
    .business .text {
        width: 100%;
        font-size: .24rem;
        line-height: .36rem;
        font-family: Roboto Condensed;;
        font-weight: 400;
        color: #509AA4;
    }
    .energy {
        width: 100%;
        margin-top: 1.6rem;
    }
    .energy .title{
        width: 100%;
        padding: 0 .6rem;
        display: flex;
        box-sizing: border-box;
        justify-content: space-between;
    }
    .energy .title .tleft {
        width: 40%;
        text-align: left;
    }
    .energy .title .tleft img {
        width: 100%;
    }
    .energy .title .tright {
        width: 40%;
        text-align: right
    }
    .energy .title .tright img {
        width: 100%;
    }
    .energy .imgList{
        width: 100%;
    }
    .energy .imgList .imgItem {
        display: flex;
        margin-top: .1rem;
        margin-right: .1rem;
        justify-content: space-between;
        position: relative;
    }
    .energy .imgItem a {
        width: 4.6rem;
    }
    .energy .imgItem img{
        width: 100%;
    }
    .energy .imgItem a:nth-child(2) {
        position: absolute;
        left: 2.9rem;
        top: 0;
    }
    /* .energy .imgList img{
        width: 100%;
        height: 2.8rem;
        margin-top: 10px;
    } */
    .sustai {
        width: 100%;
        margin-top: 1rem;
        text-align: left;
        padding: 0 0.4rem;
        box-sizing: border-box;
    }
    .sustai .title {
        font-size: .8rem;
        font-family: Roboto Condensed;
        font-weight: bold;
        color: #41ADB2;
    }
    .sustai .title1 {
        font-size: .4rem;
        font-family: Roboto Condensed;;
        font-weight: 400;
        color: #65C1B4;
        margin-top: .06rem;
    }
    .sustai .text {
        font-size: .24rem;
        font-family: Roboto Condensed;;
        font-weight: 400;
        color: #65C1B4;
        line-height: .32rem;
        margin-top: .1rem;
    }
    .sustai .btnWarp {
        width: 100%;
        display: flex;
        margin-top: .2rem;
    }
    .sustai .btnWarp .left{
        width: 1.3rem;
        font-size: .24rem;
        border-radius: .5rem;
        font-family: Roboto Condensed;;
        font-weight: 400;
        color: #65C1B4;
        border: 1px solid #65C1B4;
        text-align: center;
        line-height: .52rem;
    }
    .sustai .btnWarp .left:hover{
        background: #ffff;
        border: 1px solid #0d6efd;
        color: #0d6efd;
        cursor: pointer;
    }
    .sustai .btnWarp .right{
        margin-left: .05rem;
        width: 2rem;
        font-size: .24rem;
        border-radius: .5rem;
        font-family: Roboto Condensed;;
        font-weight: 400;
        color: #65C1B4;
        border: 1px solid #65C1B4;
        text-align: center;
        margin-left: .3rem;
        line-height: .52rem;
    }
    .sustai .btnWarp .right:hover{
        background: #ffff;
        border: 1px solid #0d6efd;
        color: #0d6efd;
        cursor: pointer;
    }
    .carousel-phone-img {
        height:200px;
        overflow:hidden;
        position:relative;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .carousel-phone-img img {
        flex:0;
        width:600px !important;
    }
    .swiper-pagination-custom {
        bottom: 0.2rem;
    }
    .pagination-indicators {
        width: 100%;
        height: 0.13rem;
        background: none;
        border-top-left-radius:0.2rem;
        border-top-right-radius: 0.2rem;
        margin: 0 auto;
    }
    .swiper-pagination-customs {
        width: 0.15rem;
        height: 0.15rem;
        display: inline-block;
        border-radius: 50%;
        background: #014F9B;
        opacity: .2;
        margin: 0.03rem 0.1rem 0.1rem 0.1rem;
    }
    .swiper-pagination-customs-active {
        opacity: 1;
        background: #014F9B;
    }
}