*{
    margin: 0;
    padding: 0;
   cursor: default;
}
.bg{
    background-size: 100%;
    background-repeat: no-repeat;
}

header{
    color: white;
    position: absolute;
    width: 1920rem;
    height: 84rem;
    background-color: #4c5fff;
    display: flex;
    align-items: center;
    font-size: 24rem;
    line-height: 29rem;
}

.logo{
    width: 36rem;
    height: 36rem;
    background-image: url('./img/icon.png');
    margin-left: 324rem;
}

.iconText{
    margin-left: 20rem;
    margin-right: 646rem;
}

.btn{
    padding: 10rem;
    margin-right: 20rem;
    height: 36rem;
    width: fit-content;
    position: relative;
}
.btn::after{
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 8rem;
    background-color: white;
    top:62rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2rem;
}

.btnAct::after,.btn:hover::after{
    animation: long .5s forwards;
    
}
@keyframes long {
    0%{
        width: 0rem;
    }
    100%{
        width:100%;
    }
}

main{
    width: 1920rem;
    display: none;
}
.act{
    display: block;
}

.p1Banner{
    color: white;
    width: 100%;
    height: 1080rem;
    padding-top: .1rem;
    background-image: url('./img/banner.png');
}

.p1H1{
    width: 802rem;
    height: 228rem;
    font-size: 59rem;
    line-height: 76rem;
    margin-left: 324rem;
    margin-top: 284rem;
}

.p1H2{
    width: 424rem;
    height: 58rem;
    font-size: 21rem;
    line-height: 29rem;
    margin-left: 324rem;
    margin-top: 12rem;
}

.p1B1{
    border: none;
    width: 120rem;
    height: 48rem;
    background-color: #4c5fff;
    background-image: url('./img/button.png');
    border-radius: 8rem;
    margin-left: 324rem;
    margin-top: 68rem;
    background-size: 66%;
    background-position: 20rem 12rem;
    background-repeat: no-repeat;
    transition: all .5s;
}



.p1Container{
    padding:88rem 0 88rem 324rem;
    width: 1272rem;
    
}

.p1H3{
    font-size: 40rem;
    line-height: 48rem;
    color: #0C0810;
    font-weight: bold;
}

.p1Hr1{
    width: 100%;
    height: 4rem;
    border:none;
    background-color:#0C0810;
    margin-top: 40rem;
    margin-bottom: 40rem;
}

.p1H4{
    width: 100%;
    height: 87rem;
    font-size: 21rem;
    line-height: 29rem;
    color: #0C0810;
}

.p1Banner2{
    width: 100%;
    height: 504rem;
    margin-top: 80rem;
    margin-bottom: 80rem;
    background-image: url('./img/p1b1.png');
}

.p1T{
    width: 692rem;
    height: 328rem;
    box-sizing: border-box;
    padding-left: 102rem;
    background-color: #E8F1FF;
    display: inline-block;
    margin-bottom: 20rem;
    
    vertical-align: top;
}

.p1P{
    width: 536rem;
    height: 328rem;
    display: inline-block;
    margin-bottom: 20rem;
}

.p1LT{
    border-left: 12rem solid #4C5FFF;
    border-radius:0 12rem 12rem 0;
    margin-right: 10rem;
}
.p1RT{
    border-right: 12rem solid #4C5FFF;
    border-radius: 12rem 0 0 12rem;
    margin-left: 10rem;
}

.p1Bc{
    background-color: #F3EEFF;
    border-color: #753BFF;
}

.p1P1{
    background-image: url('./img/p1p1.png');
}
.p1P2{
    background-image: url('./img/p1p2.png');
}
.p1P3{
    background-image: url('./img/p1p3.png');
}
.p1P4{
    background-image: url('./img/p1p4.png');
}

.p1LT1{
   
    color: #4C5FFF;
    font-size: 30rem;
    line-height: 38rem;
    margin-top: 68rem;
    margin-bottom: 22rem;
}
.p1LT2{
    color: #343E93;
    width: 514rem;
    font-size: 19rem;
    line-height: 24rem;
}
.p1LT11{
    width: 422rem;
    margin-top: 56rem;
}
.p1LT21{
    width: 510rem;
}
.p1LT22{
    width: 527rem;
}



.p2H1{
    font-size: 83rem;
    line-height: 114rem;
    text-align: center;
    margin-top: 310rem;
    font-weight: bold;
}
.p2H2{
    margin-top: 48rem;
    font-size: 62rem;
    line-height: 76rem;
    width: 1168rem;
    text-align: center;
    margin-left: 384rem;
}

.p2List{
    width: 100%;
    height: 8rem;
    background-color: #4C5FFF;
    border-radius: 2rem;
    transform: translateY(19rem);
}

.p2PointList{
    display: flex;
    padding-left: 44rem;
    width: 100%;
}

.p2PointBox{
    width: 184rem;
    margin-right: 66rem;
}

.p2Point{
    width: 32rem;
    height: 32rem;
    border-radius: 50%;
    background-color: #4C5FFF;
    margin-bottom: 32rem;
}

.p2Pp1{
    font-size: 32rem;
    line-height: 38rem;
    margin-bottom: 12rem;
    color: #4C5FFF;
    
}

.p2Pp2{
    font-size: 18rem;
    line-height: 24rem;
    color: #343E93;
}

.p2Banner2{
    width: 100%;
    height: 620rem;
    background-image: url('./img/p2b1.png');
    margin-top: 80rem;
}

.p2H3{
    font-size: 40rem;
    line-height: 43rem;
    color: #0C0810;
    margin-top: 80rem;
}

.p2Hr{
    width: 100%;
    height: 4rem;
    border: none;
    background-color: #0C0810;
    margin: 40rem 0;
}

.p2B{
    display: flex;
    width: 100%;
    height: 520rem;
    justify-content: space-between;
}
.p2R{
    width: 426rem;
    height: 520rem;
    background-image: url('./img/p2r.png');
}
.p2L1{
    display: inline-block;
    width: 164rem;
    height: 240rem;
    background-image: url('./img/p2l1.png');
    margin-right: 20rem;
}
.p2L2{
    background-image: url('./img/p2l2.png');
    margin-top: 40rem;
}
.p2LT1{
    width: 547rem;
    display: inline-block;
    color: #000;
    font-size: 15rem;
    line-height: 22rem;
}
strong{
    color: #000;
    font-size: 18rem;
}

.p2Banner3{
    height: 586rem;
    color: white;
    background-image: url('./img/p2b2.png');
}


.p3Banner{
    background-image: url('./img/banner2.png');
}

.p3B1{
    display: flex;
    align-items: center;
    margin-left: 892rem;
    margin-top: 455rem;
}

.p3I1{
    width: 80rem;
    height: 80rem;
    margin-right: 20rem;
    
    background-image: url('./img/p3i1.png');
}
.p3T1{
    color: #0C0810;
    font-size: 64rem;
    line-height: 76rem;

}
.p3T2{
    width: 704rem;
    height: 160rem;
    font-size: 19rem;
    line-height: 24rem;
    margin-top: 36rem;
    margin-left: 892rem;
    color: #201B25;
}

.p3B2{
    width: 1272rem;
    height: 301rem;
    background-image: url('./img/p3b1.png');
    margin-left: 324rem;
    margin-top: 35rem;
    box-sizing: border-box;
    padding-left: 567rem;
    padding-top: 40rem;
}

.p3Btn{
    color: #0C0810;
    width: 272rem;
    height: 64rem;
    box-sizing: border-box;
    padding-left: 32rem;
    padding-right: 28rem;
    background-color: white;
    font-size: 23rem;
    line-height: 64rem;
    border-radius: 16rem;
    display: inline-block;
    margin-right: 20rem;
    text-align: center;
}
.p3r{
    width: 24rem;
    height: 24rem;
    background-image: url('./img/p3r.png');
    float: right;   
    transform: translate(0,21rem);
}
.gg{
    width: 340rem;
    height: 101rem;
    margin-top: 40rem;
    background-image: url('./img/gg.png');
}

.p3p1{
    width: 496rem;
    height: 664rem;
    background-image: url('./img/p3p1.png');
    position: absolute;
    left: 360rem;
    top: 380rem;
    border-radius: 8rem;
}

.p3B3{
    display: flex;
}

.p3Item{
    width: 400rem;
    height: 380rem;
    margin-right: 36rem;
    background-color: #F3EEFF;
    border-radius: 8rem;
    transition: all .5s;
}
.p3Item:nth-child(3n){
    margin-right: 0;
}

.p3It{
    width: 80rem;
    height: 80rem;
    margin-top: 108rem;
    margin-left: 160rem;
}
.p3IT{
    text-align: center;
    width: 304rem;
    font-size: 32rem;
    line-height: 38rem;
    color: #343E93;
    margin-left: 48rem;
    margin-top: 8rem;
}

.p3it1{
    background-image: url('./img/p3it1.png');
}
.p3it2{
    background-image: url('./img/p3it2.png');
}
.p3it3{
    background-image: url('./img/p3it3.png');
}
.p3it4{
    background-image: url('./img/p3it4.png');
}
.p3it5{
    background-image: url('./img/p3it5.png');
}
.p3it6{
    background-image: url('./img/p3it6.png');
}

.p3B11{
    margin-top: 160rem;
    margin-left: 80rem; 
}

.p3I11{
    background-image: url('./img/p3i2.png');
}


.p3T22{
    margin-left: 80rem;
    width: 668rem;
}

.p3B22{
    margin-left: 0;
    padding-left: 80rem;
    background-image: url('./img/p3b2.png');
    margin-bottom: 165rem;
}

.p3p2{
    width: 320rem;
    height: 680rem;
    position: absolute;
    top: 1691rem;
    left: 1156rem;
    background-image: url('./img/p3p2.png');
}
.p4Banner{
    height: 1280rem;
    background-image: url('./img/banner3.png');
}


.p4H1{
    color: #201B25;
    text-align: center;
    margin-top: 348rem;
    font-size: 20rem;
    line-height: 24rem;
}

.p4H2{
    width: 1018rem;
    height: 285rem;
    margin-left: 451rem;
    margin-top: 31rem;
    font-size: 80rem;
    line-height: 95rem;
    color: #0C0810;
    text-align: center;
    font-weight: bold;
}

.p4H3{
    margin-top: 197rem;
}

.p4D{
    width: 120rem;
    height: 120rem;
    margin-top: 40rem;
    margin-left: 900rem;
    background-image: url('./img/p4p1.png');
}

.p4Container{
    padding:96rem 0 325rem 324rem;
    width: 1272rem;
    display: flex;
    flex-wrap: wrap;
}

.p4Item{
    box-sizing: border-box;
    padding: 56rem 48rem 146rem;
    margin-bottom: 32rem;
    transition: all .5s;
}
.p4Item:hover,.p3Item:hover,.p1B1:hover{
    transform: scale(1.1);
    
}

.p4p1{
    font-size: 40rem;
    line-height: 48rem;
    color: #343E93;
    margin-bottom: 16rem;
}
.p4p2{
    font-size: 24rem;
    line-height: 29rem;
    margin-bottom: 8rem;
    color: #343E93;
}

footer{
    color: white;
    width: 1920rem;
    height: 400rem;
    background-color: #0C0810;
    box-sizing: border-box;
    padding: 80rem 0 0 324rem;
}
.fTitleBox{
    display:flex;
    align-items: center;
    margin-bottom: 12rem;
}
.fLogo{
    width: 32rem;
    height: 32rem;
    background-image: url('./img/logo.png');
}
.fTitle{
    font-size: 32rem;
    line-height: 38rem;
    margin-left: 12rem;
}
.fIcon{
    width: 24rem;
    height: 24rem;
}
.fIconT{
    margin-left: 16rem;
    font-size: 16rem;
    line-height: 19rem;
}
.fI1{
    background-image: url('./img/fi1.png');
}
.fI2{
    background-image: url('./img/fi2.png');
}
.fI3{
    background-image: url('./img/fi3.png');
}

.fTitleBox:first-child{
    margin-bottom: 40rem;
}

.fHr{
    width: 1272rem;
    border:none;
    height: 2rem;
    background-color: rgba(255, 255, 255, 0.27);
    margin-top: 38rem;
    margin-bottom: 40rem;
}

.ff{
    font-size: 20rem;
    text-align: center;
    width: 1272rem;
}



.click{
    cursor: pointer;
}

.black{
    color: #0C0810;
}