@charset "utf-8";
/* CSS Document */
 
.banner-load{position:absolute;top:0px;left:0px;width:100%;height:100%;text-align:center;background-position:50% 50%;background-repeat:no-repeat;background-image:url('bannerFile/double-tail-spin-x.svg');background-color:rgba(0, 0, 0, 0.7);background-size:40px 40px;}
.banner-img{left:786px;top:0px;width:1120px;height:720px;position:absolute;max-width:1120px;  }
.card{transform-style: preserve-3d;}
.banner-title{left:130px;top:192px;width:600px;height:93px;position:absolute;color:#000000;font-size:32px;line-height:1.2;text-align:left;
font:42px 'Poppins-Semibold'; line-height: 52px; color: #0c3d64;}
.banner-title span{font-family: 'Poppins-ExtraBold'; color: #597f95;}
.banner-btn{left:118px;top:343px;width:200px;height:auto;position:absolute;color:#000000;font-size:32px; display: flex; justify-content: center; align-items: center;text-align:center;
	font: 20px 'Poppins-Bold'; background-color: #0c3d64; color: #fff; padding: 8px 12px; border-radius: 12px;-webkit-border-radius: 12px;-moz-border-radius: 12px;}

        /*jssor slider bullet skin 131 css*/
.jssorb131 {position: absolute; transform: rotate(90deg) !important; margin-top: 16px; margin-left: -14px;}
.jssorb131 .i {position: absolute; cursor: pointer;}
.jssorb131 .i .b {fill: #000; fill-opacity: 0.6; stroke: #fff; stroke-width: 2000; stroke-miterlimit: 10; stroke-opacity: 0.7;}
.jssorb131 .i:hover .b {fill: #fff; fill-opacity: .5; stroke: #000; stroke-width: 2000; stroke-opacity: 0.7;}
.jssorb131 .iav .b {fill: #fff; stroke: #000; stroke-width: 2000; fill-opacity: 1; stroke-opacity: 1;}
.jssorb131 .i.idn {opacity: 0.3;}

/*jssor slider arrow skin 051 css*/
.jssora051 {display: block; position: absolute; cursor: pointer;}
.jssora051 .a {fill: none; stroke: #fff; stroke-width: 360; stroke-miterlimit: 10;}
.jssora051:hover {opacity: .8;}
.jssora051.jssora051dn {opacity: .5;}
.jssora051.jssora051ds {opacity: .3; pointer-events: none;}

/* Bullet Navigation Styling */
/* Bullet Navigation Styling */
.jssorb131 .i {
    position: relative;font: 19px 'Akrobat-Bold';
    width: 44px;  
    height: 44px;
    background-color: transparent; border: 1px solid #fff; /* Default background color (inactive) */
    border-radius: 50%; /* Circular shape */
    display: flex; transform: rotate(-90deg);
    align-items: center;
    justify-content: center;
    font-size: 16px; /* Number size */
    color: white; /* Number color */
    font-weight: bold;
    margin-right: 0; /* Add space between bullets */
}

/* Active state (highlight active bullet with white background and black text) */
.jssorb131 .iav {
    background-color: #fff; /* White background for active item */
    color: #000; /* Black text for active item */
}

/* Rotate the text inside the bullet (90 degrees counterclockwise) */
.jssorb131 .i span {
    transform: rotate(-90deg); /* Rotate text */
    display: block; /* Make sure the text is displayed as a block for rotation */
}

/* Optional: If you want to increase space between the bullets, you can adjust the margin */
.jssorb131 .i {
    margin-right: 15px; /* Increase space between the circles */
}