/***************************/
/*        1. Header        */
/***************************/
header {
    background: url(../imgs/khgl_banner_bg_lg.png) center center / cover no-repeat, rgb(43, 88, 249);
}
header .header_content {
	padding: 12.5rem 0 8.125rem;
	display: flex;
	align-items: center;
    color: #ffffff;
}
header .txt_box{
	display: flex;
	flex-direction: column;
}
header .txt_box h1 {
    font-size: 3rem;
    line-height: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
}
header .txt_box .des{
	font-size: 1.5rem;
	line-height: 2.25rem;
}
header .btn_box{
    margin-top: 4rem;
	display: flex;
}
header .btn_box > a{
    display: block;
    cursor: pointer;
    text-align: center;
    width: 10rem;
    height: 3rem;
    font-size: 1rem;
    line-height: 3rem;
    font-weight: bold;
    border: 1px solid #fff;
    border-radius: 10px;
    box-sizing: border-box;
    margin-right: 2rem;
}
header .btn_box > a:first-child{
    background: #fff;
    border: none;
    color: #0f49ad;
}
header .row > div:nth-child(2){
	position: relative;
}
header .row > div:nth-child(2) > img:nth-child(2){
	position: absolute;
	top: 0;
	left: 12.5rem;
}

/**************************/
/*          2. s1         */
/**************************/
.s1{
    padding: 8rem 0 7rem;
}
.s1>.container>.tit{
    margin-bottom: 3rem;
    text-align: center;
    font-size: 2.25rem;
    line-height: 2.25rem;
    font-weight: bold;
}
.s1 .row>div{
    padding: 0;
}
.s1 .row>div>.content{
    min-height: 11.5rem;
    padding: 32px 20px;
    color: #fff;
}
.s1 .row>div:nth-child(1)>.content{
    background: url(../imgs/khgl_s1p1.png) center center / cover no-repeat;    
}
.s1 .row>div:nth-child(2)>.content{
    background: url(../imgs/khgl_s1p2.png) center center / cover no-repeat;    
}
.s1 .row>div:nth-child(3)>.content{
    background: url(../imgs/khgl_s1p3.png) center center / cover no-repeat;    
}
.s1 .row>div:nth-child(4)>.content{
    background: url(../imgs/khgl_s1p4.png) center center / cover no-repeat;    
}
.s1 .row>div>.content>.tit{
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
}
.s1 .row>div>.content>.des{
    font-size: 14px;
    line-height: 24px;
}

/**************************/
/*          3. s2         */
/**************************/
.s2 .tit{
    text-align: center;
    font-size: 2.25rem;
    line-height: 2.25rem;
    font-weight: bold;
    margin-bottom: 10rem;
}
.s2 .sw_box{
    background-color: #f8fbff;
}
.s2 .sw_box .row{
    margin: 0;
}
.s2 .sw_box .swiper-container{
    margin-top: -8rem;
}
.s2 .sw_box .swiper-pagination{
    position: relative;
    top: -10rem;
    left: 0;
    margin: 3rem 0 2rem;
}
.s2 .sw_box .sp-custom-list{
    display: flex;
    justify-content: center;
}
.s2 .sw_box .sp-custom-item{
    position: relative;
    padding: 20px 50px;
    margin: 0 1rem;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
}
.s2 .sw_box .sp-custom-item.active{
    color: #0f49ad;
    box-shadow: 0px 0px 10px #9e9e9e;
}
.s2 .sw_box .box_animate{
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #0f49ad;
    animation: border_lt 5s linear;
}
@keyframes border_lt{
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}

.s2 .con_box{
    display: flex;
    align-items: center;
    padding: 4rem 0;
}
.s2 .con_box .sub_tit{
    font-size: 1.5rem;
    line-height: 1.5rem;
    font-weight: bold;
    color: #0f49ad;
    margin-bottom: 1.5rem;
}
.s2 .con_box .sub_des{
    font-size: 16px;
    line-height: 28px;
    color: #535353;
}
.s2 .btn_box{
    display: flex;
    justify-content: center;
    margin-bottom: 7rem;
}
.s2 .btn_box > a{
    display: block;
    cursor: pointer;
    text-align: center;
    width: 10rem;
    height: 3rem;
    font-size: 1rem;
    line-height: 3rem;
    font-weight: bold;
    border: 1px solid #fff;
    border-radius: 10px;
    box-sizing: border-box;
    margin-right: 6rem;
}
.s2 .btn_box>a:nth-child(1){
    background: #046CFF linear-gradient(269deg, #00ACFF 0%, #046CFF 100%);
}
.s2 .btn_box>a:nth-child(2){
    border: 1px solid #0f49ad;
    color: #0f49ad;
}
/**************************/
/*       4. useage        */
/**************************/
.useage{
    background: url(../imgs/khgl_useage_bg.jpg) center center / cover no-repeat;
    /*background-color: rgba(0, 153, 255, .9);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%2300eeff' stroke-width='1' stroke-opacity='0.2'%3E%3Crect x='-40' y='40' width='75' height='75'/%3E%3Crect x='-35' y='45' width='65' height='65'/%3E%3Crect x='-30' y='50' width='55' height='55'/%3E%3Crect x='-25' y='55' width='45' height='45'/%3E%3Crect x='-20' y='60' width='35' height='35'/%3E%3Crect x='-15' y='65' width='25' height='25'/%3E%3Crect x='-10' y='70' width='15' height='15'/%3E%3Crect x='-5' y='75' width='5' height='5'/%3E%3Crect width='35' height='35'/%3E%3Crect x='5' y='5' width='25' height='25'/%3E%3Crect x='10' y='10' width='15' height='15'/%3E%3Crect x='15' y='15' width='5' height='5'/%3E%3Crect x='40' width='75' height='75'/%3E%3Crect x='45' y='5' width='65' height='65'/%3E%3Crect x='50' y='10' width='55' height='55'/%3E%3Crect x='55' y='15' width='45' height='45'/%3E%3Crect x='60' y='20' width='35' height='35'/%3E%3Crect x='65' y='25' width='25' height='25'/%3E%3Crect x='70' y='30' width='15' height='15'/%3E%3Crect x='75' y='35' width='5' height='5'/%3E%3Crect x='40' y='80' width='35' height='35'/%3E%3Crect x='45' y='85' width='25' height='25'/%3E%3Crect x='50' y='90' width='15' height='15'/%3E%3Crect x='55' y='95' width='5' height='5'/%3E%3Crect x='120' y='-40' width='75' height='75'/%3E%3Crect x='125' y='-35' width='65' height='65'/%3E%3Crect x='130' y='-30' width='55' height='55'/%3E%3Crect x='135' y='-25' width='45' height='45'/%3E%3Crect x='140' y='-20' width='35' height='35'/%3E%3Crect x='145' y='-15' width='25' height='25'/%3E%3Crect x='150' y='-10' width='15' height='15'/%3E%3Crect x='155' y='-5' width='5' height='5'/%3E%3Crect x='120' y='40' width='35' height='35'/%3E%3Crect x='125' y='45' width='25' height='25'/%3E%3Crect x='130' y='50' width='15' height='15'/%3E%3Crect x='135' y='55' width='5' height='5'/%3E%3Crect y='120' width='75' height='75'/%3E%3Crect x='5' y='125' width='65' height='65'/%3E%3Crect x='10' y='130' width='55' height='55'/%3E%3Crect x='15' y='135' width='45' height='45'/%3E%3Crect x='20' y='140' width='35' height='35'/%3E%3Crect x='25' y='145' width='25' height='25'/%3E%3Crect x='30' y='150' width='15' height='15'/%3E%3Crect x='35' y='155' width='5' height='5'/%3E%3Crect x='200' y='120' width='75' height='75'/%3E%3Crect x='40' y='200' width='75' height='75'/%3E%3Crect x='80' y='80' width='75' height='75'/%3E%3Crect x='85' y='85' width='65' height='65'/%3E%3Crect x='90' y='90' width='55' height='55'/%3E%3Crect x='95' y='95' width='45' height='45'/%3E%3Crect x='100' y='100' width='35' height='35'/%3E%3Crect x='105' y='105' width='25' height='25'/%3E%3Crect x='110' y='110' width='15' height='15'/%3E%3Crect x='115' y='115' width='5' height='5'/%3E%3Crect x='80' y='160' width='35' height='35'/%3E%3Crect x='85' y='165' width='25' height='25'/%3E%3Crect x='90' y='170' width='15' height='15'/%3E%3Crect x='95' y='175' width='5' height='5'/%3E%3Crect x='120' y='160' width='75' height='75'/%3E%3Crect x='125' y='165' width='65' height='65'/%3E%3Crect x='130' y='170' width='55' height='55'/%3E%3Crect x='135' y='175' width='45' height='45'/%3E%3Crect x='140' y='180' width='35' height='35'/%3E%3Crect x='145' y='185' width='25' height='25'/%3E%3Crect x='150' y='190' width='15' height='15'/%3E%3Crect x='155' y='195' width='5' height='5'/%3E%3Crect x='160' y='40' width='75' height='75'/%3E%3Crect x='165' y='45' width='65' height='65'/%3E%3Crect x='170' y='50' width='55' height='55'/%3E%3Crect x='175' y='55' width='45' height='45'/%3E%3Crect x='180' y='60' width='35' height='35'/%3E%3Crect x='185' y='65' width='25' height='25'/%3E%3Crect x='190' y='70' width='15' height='15'/%3E%3Crect x='195' y='75' width='5' height='5'/%3E%3Crect x='160' y='120' width='35' height='35'/%3E%3Crect x='165' y='125' width='25' height='25'/%3E%3Crect x='170' y='130' width='15' height='15'/%3E%3Crect x='175' y='135' width='5' height='5'/%3E%3Crect x='200' y='200' width='35' height='35'/%3E%3Crect x='200' width='35' height='35'/%3E%3Crect y='200' width='35' height='35'/%3E%3C/g%3E%3C/svg%3E");*/
    padding: 4.5rem 0 5rem;
}
.useage .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}
.useage .content>.tit{
    font-size: 1.875rem;
    line-height: 1.875rem;
    font-weight: bold;
}
.useage .content>.des{
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin: 1.5rem 0 2rem;
    display: flex;
}
.useage .content>.des>div{
    margin: 0 20px;
}
.useage .content>.line{
    background-color: #fff;
    width: 10rem;
    height: 2px;
}
.useage .content>.sub_tit{
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin: 1.5rem 0 2rem;
}
.useage .btn_box{
    margin-top: 2rem;
    display: flex;
}
.useage .btn_box > a{
    display: block;
    cursor: pointer;
    text-align: center;
    width: 10rem;
    height: 3rem;
    font-size: 1rem;
    line-height: 3rem;
    font-weight: bold;
    /*border: 1px solid #fff;*/
    border-radius: 10px;
    box-sizing: border-box;
    margin-right: 2rem;
}
.useage .btn_box>a:nth-child(1){
    background-color: #fff;
    color: #0f49ad;
}
.useage .btn_box>a:nth-child(2){
    border: 1px solid #fff;
    color: #fff;
}

/**************************/
/*        5. media        */
/**************************/
@media (max-width: 1024px){
    /* Header */
    header .txt_box h1 {
        font-size: 2.25rem;
        line-height: 2.25rem;
        margin-bottom: 2rem;
    }
    header .txt_box .des{
        font-size: 1.5rem;
        line-height: 2.25rem;
    }
    header .txt_box .sub_des{
        font-size: 1.25rem;
        line-height: 2rem;
        margin-bottom: 2rem;
    }
}
@media (max-width: 768px){
    /* header */
    header {
        background: url(../imgs/khgl_banner_bg_xs.png) center center / cover no-repeat, rgba(17, 81, 188, 1.0);
        height: 80vh;
        display: flex;
        padding-top: 70px;
    }
    header .header_content {
        padding: 0;
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }
    header .header_content>div{
        flex: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    header .pic_box>img{
        max-width: 300px;
        height: auto;
    }
    header .txt_box{
        align-items: center;
    }    
    /* s1 */
    .s1{
        padding: 5rem 0 4rem;
    }
    .s1 .row>div>.content{
        min-height: 12.5rem;
        padding: 32px 20px;
        color: #fff;
    }
    /* s2 */
    .s2 .sw_box .sp-custom-item{
        padding: 20px 0;
        margin: 0;
        flex: 1;
    }
    .s2 .con_box{
        flex-direction: column;
        justify-content: center;
        padding: 4rem 0;
    }
    .s2 .con_box>div:nth-child(2){
        margin-bottom: 40px;
    }
    .s2 .con_box .sub_tit{
        text-align: center;
    }
    /*.s2 .btn_box > a{
        width: 15rem;
        height: 5rem;
        font-size: 2rem;
        line-height: 5rem;
        margin-right: 4rem;
    }*/
}
@media (max-width: 540px){
    html{
        font-size: 8px;
    }

    /* header */
    header .txt_box h1 {
        font-size: 3rem;
        line-height: 3rem;
        margin-bottom: 3rem;
    }
    header .txt_box .des{
        font-size: 2rem;
        line-height: 3rem;
    }
    header .txt_box .sub_des{
        font-size: 2rem;
        line-height: 2.5rem;
        margin-bottom: 3rem;
    }
    header .btn_box {
        margin-top: 6rem;
    }
    header .btn_box > a{
        width: 15rem;
        height: 5rem;
        font-size: 2rem;
        line-height: 5rem;
        margin: 0 2rem;
    }
    /* s1 */
    .s1{
        padding: 6rem 0 5rem;
    }
    .s1>.container>.tit{
        width: 70%;
        margin: 0 auto 5rem;
        font-size: 3rem;
        line-height: 4.5rem;
    }
    .s1 .row>div>.content{
        min-height: 25.5rem;
    }
    .s1 .row>div>.content>.tit{
        font-size: 2.5rem;
        line-height: 2.5rem;
        margin-bottom: 3rem;
    }
    .s1 .row>div>.content>.des{
        font-size: 14px;
        line-height: 24px;
    }
    /* s2 */
    .s2 .tit{
        font-size: 3rem;
        line-height: 3rem;
        margin-bottom: 15rem;
    }
    .s2 .sw_box .swiper-container{
        margin-top: -15rem;
    }
    .s2 .sw_box .swiper-pagination{
        position: relative;
        top: -15rem;
        left: 0;
        margin: 6rem 0 4rem;
    }
    .s2 .sw_box .sp-custom-item{
        padding: 15px 0;
        font-size: 14px;
        line-height: 14px;
    }
    .s2 .con_box .sub_tit{
       font-size: 2.5rem;
       line-height: 2.5rem;
       margin-bottom: 5rem;
    }
    .s2 .con_box .sub_des{
        font-size: 14px;
        line-height: 20px;
    }
    .s2 .con_box>div:nth-child(2)>img{
        width: 70%;
    }
    /* useage */
    .useage .content>.tit{
        font-size: 3rem;
        line-height: 3rem;
    }
    .useage .content>.des{
        flex-direction: column;
        align-items: center;
        font-size: 2.25rem;
        line-height: 3.5rem;
        margin: 3rem 0 4rem;
    }
    .useage .content>.line{
        background-color: #fff;
        width: 10rem;
        height: 2px;
    }
}
@media (max-width: 414px){    
    /* s1 */
    .s1>.container>.tit{
        width: 90%;
    }
}
@media (max-width: 375px){
    /* header */
    header .txt_box .sub_des{
        font-size: 14px;
        line-height: 20px;
    }
    /* s1 */
    .s1 .row>div>.content>.tit{
        font-size: 2.25rem;
        line-height: 2.25rem;
        margin-bottom: 20px;
    }
    .s1>.container>.tit{
        font-size: 2.5rem;
        line-height: 4rem;
    }
}