@charset "utf-8";
*,*::before,*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.af-wrap{
    width:100%;
    margin:0 auto;
    background-color:#fff;
    position:relative;
}
.af-he{
    width:100%;
    aspect-ratio:90.3/4;
    background: url(https://p-c.pw/aso-f/img/he-he.webp) center / cover no-repeat;
    position:sticky;
    top:84px;
    /* top:120px; */
    /* top:156px; */
    z-index:9;
    box-shadow:0 1px 8px rgba(0,0,0,.2);
}
.af-me>div{
    position:relative;
}
.af-me>div>a{
    display:block;
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}
.af-me>div>a:hover{
    background:rgba(255,245,61,0.15);
    cursor:pointer;
}
.af-me{
    width:37%;
    aspect-ratio:167/16.5;
    position: absolute;
    top:43%;
    left:65.5%;
    transform:translate(-50%,-50%) scale(1.2);
    transform-origin:top center;
    display:flex;
    justify-content:space-between;
}
.me1{
    width:11.1%;
    aspect-ratio:21/20;
}
.me1 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me2{
    width:13.14%;
    aspect-ratio:7/5;
}
.me2 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me3{
    width:17.16%;
    aspect-ratio:8/5;
}
.me3 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me4{
    width:13.63%;
    aspect-ratio:27/20;
}
.me4 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me5{
    width:14.64%;
    aspect-ratio:29/20;
}
.me5 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me6{
    width:15.15%;
    aspect-ratio:3/2;
}
.me6 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.me7{
    width:15.66%;
    aspect-ratio:33/20;
}
.me7 a:hover{
    cursor:pointer;
    background:rgba(255,245,61,0.15);
}
.af-he a:hover .bt-plan{
    cursor:pointer;
    filter:brightness(1.1);
    z-index:1;
    position: sticky;
}

.af-main{
    width:100%;
    background:#fff;
    /* margin-top:-42.9rem; */
    -webkit-overflow-scrolling:auto;
    overflow: visible;
}

.he-01{
    width:100%;
    aspect-ratio:100/23;
    background:url(https://p-c.pw/aso-f/img/he-01.jpg) center / cover no-repeat;
}

.bt-plan{
    width:3.89%;
    aspect-ratio:37/79;
    position:sticky;
    top:420px;
    left:100%;
    z-index:1;
    transition:filter .3s ease;
}
.af-main > a:hover .bt-plan,
.bt-plan:hover{
    cursor:pointer;
    filter:brightness(1.1);
}

.he-02{
    width:100%;
    aspect-ratio:500/443;
    background:url(https://p-c.pw/aso-f/img/he-02.jpg) center / cover no-repeat;
}

.he-03{
    width:100%;
    aspect-ratio:1000/1563;
    background:url(https://p-c.pw/aso-f/img/he-03.jpg) center / cover no-repeat;
}

.he-04{
    width:100%;
    aspect-ratio:2000/3791;
    background:url(https://p-c.pw/aso-f/img/he-04.jpg) center / cover no-repeat;
}

.he-05{
    width:100%;
    aspect-ratio:1000/1329;
    background:url(https://p-c.pw/aso-f/img/he-05.jpg) center / cover no-repeat;
}
.he-bt{
    display:block;
    width:15.6%;
    aspect-ratio:78/15;
    position:absolute;
    top:90.5%;
    left:42.2%;
}
.he-bt img{
    display:block;
    width:100%;
    height:100%;
}
.he-bt:hover{
    cursor:pointer;
}
.he-bt:active img{
    transform:translateY(3px);
}

.he-06{
    width:100%;
    aspect-ratio:250/97;
    background:url(https://p-c.pw/aso-f/img/he-06.jpg) center / cover no-repeat;
}
.af-fo{
    width:100%;
    aspect-ratio:1000/129;
    background:url(https://p-c.pw/aso-f/img/fo.webp) center / cover no-repeat;
    display:flex;
    justify-content:flex-end;
    align-items:flex-start;
}
.af-fo ul{
    width:36.84%;
    aspect-ratio:19/7;
    padding-top:3.9%;
    margin:0 0 0 65.6%;
    display:grid;
    grid-auto-flow:column;
    grid-template-rows:repeat(3,1.3rem);
    grid-auto-columns:25%;
    list-style:none;
}
.af-fo ul li{
    width:100%;
}
.af-fo ul li a{
    line-height:1.3rem;
    font-size:.65rem;
    text-decoration:none;
    letter-spacing:-.5px;
    color:#fff;
    white-space:nowrap;
    cursor:pointer;
}
.af-fo ul li a:hover{
    background:rgba(255,245,61,0.15);
}