.pg{
    width: 100%;
    position: relative;
    padding-top: 54.1%;
}
.content-all{
    width: 85%;
    height: 100%;
    position: absolute;
    top: 0;
    padding-top: 4%;
}
.p1{
    background: url(../img/bg1.jpg) no-repeat top center;
    background-size: cover;
    background-position-y: -1.8rem;
}
.p2{
    background: url(../img/bg2.jpg) no-repeat top center;
    background-size: cover;
}
.p3{
    background: url(../img/bg3.jpg) no-repeat top center;
    background-size: cover;
}
.p4{
    background: url(../img/bg4.jpg) no-repeat top center;
    background-size: cover;
}
.p5{
    background: url(../img/bg5.jpg) no-repeat top center;
    background-size: cover;
}
/* ////////////nav////////////// */
.jump-all{
    z-index: 9;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: #c7faffe3;
}
.box-nav{
    width: 24rem;
    height: 40rem;
    position: relative;
    background: url(../img/bg_nav.png) no-repeat top center;
    background-size: contain;
    margin-top: 4rem;
    padding: 2% 4%;
}
.box-nav li{
    width: 100%;
    position: relative;
    margin-bottom: 6%;
}
/* ////////////1////////////// */
.box1-banner{
    width: 19.5%;
    position: absolute;
    top: 7%;
    right: .5%;
    z-index: 1;
}
.slogan {
    width: 77%;
    position: absolute;
    top: 50%;
}
.pc-slogan{
    display: block;
}
.mb-slogan{
    display: none;
}
.carousel-indicators {
    text-align: center;
    list-style: none;
    width: 100%;
    height: auto;
    position: absolute;
    bottom: .4rem;
    z-index: 10;
}
.carousel-indicators>li{
    width: 1.4rem;
    height: .3rem;
    position: relative;
    display: inline-block;
    border-radius: 10px;
    border: none;
    background-color: #929292;
    vertical-align: top;
}
.carousel-indicators .active,.carousel-indicators [data-bs-target] {
    border: 0;
    width: 1.5rem;
    height: .2rem;
    margin: 0 0.2rem;
}
.carousel-indicators>li.active{
    width: 1.4rem;
    height: .3rem;
    position: relative;
    display: inline-block;
    border-radius: 10px;
    border: none;
    background-color: #fff;
}
/* ////////////2////////////// */
.title{
    width: 28.5%;
    position: relative;
    margin-bottom: 0%;
}
.fb-wrapper {
    position: relative;
    display: block;
    margin: 3% auto;
    text-align: center;
}
.btn2-link {
    width: 21.3%;
    position: relative;
    display: block;
}
.fb-wrapper-mb1,.fb-wrapper-mb2,.fb-wrapper-mb3,.fb-wrapper-mb4{
    display: none;
}
/* ////////////3////////////// */
.box3-cha{
    width: 100%;
    height: 80%;
    position: relative;
    text-align: center;
}
.btn3-icon-box{
    width: 24%;
    height: 100%;
    position: absolute;
    left: 0;
}
.btn3-icon-box li{
    width: 33%;
    height: 18%;
    position: absolute;
    display: block;
}
.btn3-lo1 {
    top: 0%;
}
.btn3-lo2 {
    top: 18.5%;
}
.btn3-lo3 {
    top: 37%;
}
.btn3-lo4 {
    top: 55.5%;
}
.btn3-lo5 {
    top: 10%;
    left: 28%;
}
.btn3-lo6 {
    top: 28.5%;
    left: 28%;
}
.btn3-lo7 {
    top: 47%;
    left: 28%;
}
.btn3-lo8 {
    top: 20.1%;
    left: 56%;
}
.btn3-lo9 {
    top: 38.5%;
    left: 56%;
}
.btn3-lo10 {
    top: 57%;
    left: 56%;
}
.btn3-lo11 {
    top: 11%;
    left: 84.5%;
}
.btn3-lo12 {
    top: 30%;
    left: 84.5%;
}
.btn3-lo13 {
    top: 49%;
    left: 84.5%;
}
.btn3-lo14 {
    top: 67%;
    left: 84.5%;
}
.btn3-icon-box li>button{
    width: 100%;
    height: 100%;
    position: relative;
}
.btn3-icon1{
    background: url(../img/btn3_ch1.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon2{
    background: url(../img/btn3_ch2.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon3{
    background: url(../img/btn3_ch3.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon4{
    background: url(../img/btn3_ch4.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon5{
    background: url(../img/btn3_ch5.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon6{
    background: url(../img/btn3_ch6.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon7{
    background: url(../img/btn3_ch7.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon8{
    background: url(../img/btn3_ch8.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon9{
    background: url(../img/btn3_ch9.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon10{
    background: url(../img/btn3_ch10.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon11{
    background: url(../img/btn3_ch11.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon12{
    background: url(../img/btn3_ch12.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon13{
    background: url(../img/btn3_ch13.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon14{
    background: url(../img/btn3_ch14.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon1.on,.btn3-icon1:hover{
    background: url(../img/btn3_ch1_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon2.on,.btn3-icon2:hover{
    background: url(../img/btn3_ch2_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon3.on,.btn3-icon3:hover{
    background: url(../img/btn3_ch3_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon4.on,.btn3-icon4:hover{
    background: url(../img/btn3_ch4_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon5.on,.btn3-icon5:hover{
    background: url(../img/btn3_ch5_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon6.on,.btn3-icon6:hover{
    background: url(../img/btn3_ch6_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon7.on,.btn3-icon7:hover{
    background: url(../img/btn3_ch7_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon8.on,.btn3-icon8:hover{
    background: url(../img/btn3_ch8_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon9.on,.btn3-icon9:hover{
    background: url(../img/btn3_ch9_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon10.on,.btn3-icon10:hover{
    background: url(../img/btn3_ch10_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon11.on,.btn3-icon11:hover{
    background: url(../img/btn3_ch11_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon12.on,.btn3-icon12:hover{
    background: url(../img/btn3_ch12_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon13.on,.btn3-icon13:hover{
    background: url(../img/btn3_ch13_on.png) no-repeat top center;
    background-size: contain;
}
.btn3-icon14.on,.btn3-icon14:hover{
    background: url(../img/btn3_ch14_on.png) no-repeat top center;
    background-size: contain;
}
.pic3-cha{
    width: 30.5%;
    position: absolute;
}
.pic3-txt{
    width: 31%;
    position: absolute;
    top: 12%;
    right: 0%;
}
.pic3-cha-mb{
    display: none;
}

/* ////////////4////////////// */
.pic4-story{
    width: 40%;
    position: relative;
    margin-bottom: 3%;
    transition: all 0.3s ease;
}
.btn4-click{
    width: 9%;
    position: relative;
    display: block;
}

/* ////////////5////////////// */
#p5-event{
    width: 79%;
    position: relative;
}
.pic5-event{
    width: 100%;
}
#p5-event-mb,.arrow-mb{
    display: none;
}
@media screen and (max-width:1380px){
    .fb-wrapper {
        margin: 1% auto;
    }
}
@media screen and (max-width:1280px){
    .fb-wrapper-pc {
        display: none;
    }
    .fb-wrapper-mb1{
        display: block;
    }
    .pg{
        padding-top: 54.2%;
    }
    .content-all {
        width: 96%;
    }
}
@media screen and (max-width:1024px){
    .pg {
        padding-top: 55.8%;
    }
}
@media screen and (max-width:1024px) and (min-height:1000px){
    .box-nav {
        width: 45rem;
        height: 75rem;
        margin-top: 8rem;
        padding: 5% 8%;
    }
}
@media screen and (max-width:820px){

}
@media screen and (max-width:768px){
    .pg {
        padding-top: 181%;
    }
    .fix-top{
        height: 9rem;
    }
    .btnf-box-bottom li.mb-hide{
        display: none;
    }
    .fix-bottom,.array-bottom {
        height: 9.6rem;
        max-height: initial;
    }
    .btnf-box-bottom {
        width: 100%;
    }
    .btnf-box-bottom li {
        width: 26%;
        margin: 0 2.2%;
    }
    .btnf-box-top {
        width: 72%;
        right: 10.5%;
    }
    .btnf-box-top li {
        margin-right: 4%;
        width: 19.3rem;
    }
    .box-nav {
        width: 59rem;
        height: 96rem;
        padding: 4% 10%;
        margin-top: 10rem;
    }
    .p1 {
        background: url(../img/mb/bg1.jpg) no-repeat top center;
        background-size: cover;
    }
    .p2 {
        background: url(../img/mb/bg2.jpg) no-repeat top center;
        background-size: cover;
    }
    .p3 {
        background: url(../img/mb/bg3.jpg) no-repeat top center;
        background-size: cover;
    }
    .p4 {
        background: url(../img/mb/bg4.jpg) no-repeat top center;
        background-size: cover;
    }
    .p5 {
        background: url(../img/mb/bg5.jpg) no-repeat top center;
        background-size: cover;
    }
    .fb-wrapper-mb1{
        display:none;
    }
    .fb-wrapper-mb2{
        display: block;
    }
    .title {
        width: 48.5%;
        position: relative;
        margin-bottom: 4%;
    }
    .btn2-link {
        width: 39.3%;
    }
    .fb-wrapper {
        margin: 7% auto 8%;
    }
    .pic4-story {
        width: 98%;
    }
    #p5-event{
        display: none;
    }
    #p5-event-mb {
        display: block;
        width: 98%;
        position: relative;
    }
    .arrow-mb{
        display: block;
    }
    .pc-slogan{
        display: none;
    }
    .mb-slogan{
        display: block;
    }
    .slogan {
        width: 52%;
        top: 80%;
    }
    .box1-banner {
        width: 35.5%;
        top: 5.5%;
    }
    .carousel-indicators>li.active,.carousel-indicators>li {
        width: 3.4rem;
        height: .5rem;
    }
    .carousel-indicators{
        height: .8rem;
    }
    .btn3-icon-box {
        width: 100%;
        height: 19%;
    }
    .btn3-icon-box li {
        width: 13%;
        height: 42%;
        position: relative;
        display: inline-block;
    }
    .btn3-lo2,.btn3-lo3,.btn3-lo4,.btn3-lo5,.btn3-lo6,.btn3-lo7,.btn3-lo8,.btn3-lo9,.btn3-lo10,
    .btn3-lo11,.btn3-lo12,.btn3-lo13,.btn3-lo14 {
        top: 0;
        left: 0;
        right: 0;
    }
    .pic3-txt,.pic3-cha{
        display: none;
    }
    .pic3-cha-mb {
        display: block;
        width: 89.5%;
        top: 22%;
        position: absolute;
    }
}
@media screen and (max-width:680px){
    .carousel-indicators .active, .carousel-indicators [data-bs-target] {
        width: 3.5rem;
    }
}
@media screen and (max-width:580px){
    .fb-wrapper-mb3{
        display: block;
    }
    .fb-wrapper-mb2{
        display: none;
    }
}
@media screen and (max-width:480px){
    .box-nav {
        width: 69rem;
        height: 114rem;
        padding: 5% 12%;
        margin-top: 17rem;
    }
    .title {
        width: 67.5%;
    }
    .slogan {
        top: 71%;
    }
    .btnf-box-bottom li {
        width: 30%;
        margin: 0 1%;
    }
    .fix-bottom, .array-bottom {
        height: 11.6rem;
    }
}
@media screen and (max-width:414px){
    .fb-wrapper {
        margin: 1% auto 3%;
    }
    .fb-wrapper-mb3{
        display: none;
    }
    .fb-wrapper-mb4{
        display: block;
    }
}

@media screen and (min-height:800px) and (max-width:414px){

}
@media screen and (min-height:812px) and (max-width:375px){

}
@media screen and (min-height:720px) and (max-width:360px){

}
@media screen and (orientation: landscape) and (max-width:1024px) {
    /* .pg {
        padding-top: 136%;
    } */

}
@media screen and (orientation: landscape) and (max-width:680px) {
    .pg {
        padding-top: 183%;
    }

}
@media screen and (orientation: landscape) and (max-width:570px) {
    html, body {
        min-width: 570px;
    }
}