/*-------------------- Cover (Start) --------------------*/
.mainCover .cover {
    height: 600px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    /* background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.25) 30%), url(../img/index/main_cover.jpg) center bottom no-repeat; */
    background: url(../img/24kGreen/24k_cover.jpg) right bottom no-repeat;
    background-size: cover;
}

@media screen and (min-width: 1367px) and (max-width: 1600px) {
}

@media screen and (min-width: 1201px) and (max-width: 1366px) {
    .mainCover .cover {
        background: url(../img/24kGreen/24k_cover.jpg) right bottom no-repeat;
        background-size: cover;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
}

@media screen and (min-width: 1px) and (max-width: 767px) {
    .mainCover .cover {
        background: url(../img/24kGreen/24k_cover.jpg) 93% bottom no-repeat;
        background-size: cover;
    }
}
/*-------------------- Cover (End) --------------------*/


/*-------------------- Section1 (Start) --------------------*/
.sect1 {
    background: linear-gradient(to right, #fff 66%, #a3f080 66%, #a3f080 100%);
}

.sect1 .ctx:nth-child(1) {
    padding: 20px 0 20px;
}

.sect1 .ctx:nth-child(2) {
    padding: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sect1 .ctxFullW {
    background: #a3f080;
}

.sect1 .ctxFullW .caption {
    width: 1200px;
    margin: auto;
}

.sect1 .ctx video {
    width: 100%;
    height: auto;
}

.sect1 .ctx p {
    line-height: 2em;
}

.sect1 .ctx .left {
    flex: 1 0 65%;
    padding: 40px 50px 40px 0;
    padding-right: 50px;
    box-sizing: border-box;
}

.sect1 .ctx .left .tit {
    margin: 30px 0 20px;
    font-weight: 500;
    font-size: 28px;
}

.sect1 .ctx .left .tit span {
    color: #a3f080;
}

.sect1 .ctx .left .vid {
    width: 100%;
}

.sect1 .ctx .right {
    flex: 1 0 35%;
    padding: 0 0 40px 30px;
    box-sizing: border-box;
    background: #a3f080;
}

.sect1 .ctx .right .topLine {
    border-bottom: solid 5px #fff;
}

.sect1 .ctx .right .tit {
    margin: 25px 0 0;
    line-height: 1.5em;
    text-align: left;
    font-weight: bold;
    font-size: 36px;
    color: #fff;
}

.sect1 .ctx .right .subTit {
    margin: 20px 0;
    letter-spacing: 1px;
    font-weight: 500;
    font-size: 24px;
}

.sect1 .ctx .right .imgBick {
    width: 100%;
}

.sect1 .ctx .right .noteTit {
    margin: 30px 0 -10px;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 24px;
}

.sect1 .ctx .right .noteTit img {
    width: 40px;
    margin: 0 10px 0 0;
    vertical-align: bottom;
}

.sect1 .ctx .right .note {
    padding: 10px 0;
    border-top: solid 1px #303030;
    border-bottom: solid 1px #303030;
}

.sect1 .ctx .right .insurance {
    font-size: 12px;
}

@media screen and (min-width: 1201px) and (max-width: 1366px) {
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .sect1 .ctx:nth-child(1) {
        padding: 20px 40px 10px;
    }

    .sect1 .ctx .left {
        padding: 40px 40px 0;
        padding-right: 40px;
    }

    .sect1 .ctx .right {
        padding: 0 40px 40px 40px;
    }

    .sect1 .ctx .right .tit {
        font-size: 32px;
    }

    .sect1 .ctx .right .subTit {
        font-size: 20px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .sect1 .ctx:nth-child(1) {
        padding: 20px 40px 10px;
    }

    .sect1 .ctx .left {
        padding: 40px 40px 0;
        padding-right: 40px;
    }

    .sect1 .ctx .right {
        padding: 0 40px 40px 40px;
    }

    .sect1 .ctx .right .tit {
        font-size: 26px;
    }

    .sect1 .ctx .right .subTit {
        font-size: 18px;
    }

    .sect1 .ctx .right .noteTit {
        font-size: 20px;
    }
}

@media screen and (min-width: 1px) and (max-width: 767px) {
    .sect1 {
        background: linear-gradient(to right, #fff 0%, #fff 100%);
    }

    .sect1 .ctx:nth-child(1) {
        padding: 20px 20px 10px;
    }
    
    .sect1 .ctx:nth-child(2) {
        padding: 0;
    }

    .sect1 .ctxFullW .caption {
        width: 100%;
    }

    .sect1 .ctx .left {
        flex: 1 0 100%;
        padding: 40px 20px 0;
        padding-right: 20px;
    }
    
    .sect1 .ctx .left .tit {
        margin: 30px 0 20px;
        font-weight: 500;
        font-size: 28px;
    }
    
    .sect1 .ctx .right {
        flex: 1 0 100%;
        padding: 0 20px 40px;
    }

    .sect1 .ctx .right .topLine {
        border-bottom: none;
    }

    .sect1 .ctx .right .tit {
        margin: 20px 0 0;
        font-size: 32px;
    }
    
    .sect1 .ctx .right .subTit {
        font-size: 20px;
    }
}
/*-------------------- Section1 (End) --------------------*/


/*-------------------- Section2 (Start) --------------------*/
.sect2 {
    background: #e2e2e2;
}

.sect2 .ctx {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.sect2 .ctx .left {
    flex: 1 0 52%;
    padding: 0 40px 0 0;
    box-sizing: border-box;
}

.sect2 .ctx .left img {
    width: 100%;
}

.sect2 .ctx .right {
    flex: 1 0 48%;
    padding: 0 0 0 40px;
    box-sizing: border-box;
    line-height: 2em;
}

.sect2 .ctx .right .year {
    margin: 0 0 10px;
    padding: 0 0 3px;
    display: inline-block;
    border-bottom: double 5px #a3f080;
    letter-spacing: -2px;
    font-weight: bold;
    font-size: 32px;
}

@media screen and (min-width: 1201px) and (max-width: 1366px) {
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .sect2 .ctx .left {
        flex: 1 0 48%;
        padding: 0 20px 0 0;
    }
    
    .sect2 .ctx .right {
        flex: 1 0 52%;
        padding: 0 0 0 20px;
        line-height: 1.75em;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .sect2 .ctx .left {
        flex: 1 0 100%;
        padding: 0;
    }
    
    .sect2 .ctx .right {
        flex: 1 0 100%;
        padding: 20px 0;
        letter-spacing: 1px;
    }
}

@media screen and (min-width: 1px) and (max-width: 767px) {
    .sect2 .ctx .left {
        flex: 1 0 100%;
        padding: 0;
    }
    
    .sect2 .ctx .right {
        flex: 1 0 100%;
        padding: 0;
    }

    .sect2 .ctx .right .year {
        margin: 10px 0;
    }
}
/*-------------------- Section2 (End) --------------------*/


/*-------------------- Section3 (Start) --------------------*/
.sect3 {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 80%), url(../img/24kGreen/24k_charger.jpg);
    background-size: cover, cover;
}

.sect3 .title {
    line-height: 1.6em;
    text-align: left;
    font-weight: bold;
    font-size: 24px;
}

.sect3 p {
    margin: 40px 0;
    line-height: 2em;
}

.sect3 .focus {
    line-height: 1.6em;
    text-align: left;
    font-weight: bold;
    font-size: 24px;
}

@media screen and (min-width: 1201px) and (max-width: 1366px) {
    .sect3 {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 80%), url(../img/24kGreen/24k_charger.jpg);
        background-position: center, 65% top;
        background-size: cover, cover;
    }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    .sect3 {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 0) 80%), url(../img/24kGreen/24k_charger.jpg);
        background-position: center, 60% top;
        background-size: cover, cover;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
        .sect3 {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 60%), url(../img/24kGreen/24k_charger.jpg);
        background-repeat: no-repeat, no-repeat;
        background-position: center, 95% top;
        background-size: cover, 200%;
    }

    .sect3 .title {
        margin: 500px 0 0;
        font-size: 20px;
    }
    
    .sect3 p {
        margin: 40px 0;
        line-height: 2em;
    }
    
    .sect3 .focus {
        font-size: 20px;
    }
}

@media screen and (min-width: 1px) and (max-width: 767px) {
    .sect3 {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 1) 30%), url(../img/24kGreen/24k_charger.jpg);
        background-repeat: no-repeat, no-repeat;
        background-position: center, 85% top;
        background-size: cover, 300%;
    }

    .sect3 .title {
        margin: 500px 0 0;
        font-size: 20px;
    }
    
    .sect3 p {
        margin: 40px 0;
        line-height: 2em;
    }
    
    .sect3 .focus {
        font-size: 20px;
    }
}

@media screen and (min-width: 1px) and (max-width: 280px) {
    .sect3 {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 20%), url(../img/24kGreen/24k_charger.jpg);
        background-repeat: no-repeat, no-repeat;
        background-position: center, 85% top;
        background-size: cover, 300%;
    }

    .sect3 .title {
        margin: 300px 0 0;
    }
}
/*-------------------- Section2 (End) --------------------*/