.hnews {
    position: relative
}

.hnews::before {
    position: absolute;
    content: '';
    inset: 0;
    height: calc(100% + 3rem);
    -webkit-transform: translateY(-3rem);
    transform: translateY(-3rem);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(2.03%, #f2fdff), color-stop(45.62%, rgba(242, 253, 255, 0)));
    background: linear-gradient(180deg, #f2fdff 2.03%, rgba(242, 253, 255, 0) 45.62%);
    z-index: -1
}

.hnews .title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.6rem
}

@media screen and (max-width:575px) {
    .hnews .title {
        text-align: center
    }
}

.hnews .title .btn-pri,
.hnews .title .txt {
    opacity: 1;
    visibility: visible;
    margin: 0 !important
}

.hnews .title .title-pri {
    color: #004188;
    margin: 0
}

.hnews-grid {
    --it-pd: 1.6rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[4];
    grid-template-columns: repeat(4, 1fr);
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    margin: calc(-1 * var(--it-pd))
}

@media screen and (max-width:1199px) {
    .hnews-grid {
        --it-pd: .8rem
    }
}

.hnews-grid .hnews-item {
    padding: var(--it-pd);
    grid-column: span 1
}

.hnews-grid .hnews-item:nth-child(6n+1),
.hnews-grid .hnews-item:nth-child(6n+2) {
    grid-column: span 2
}

@media screen and (max-width:650px) {

    .hnews-grid .hnews-item:nth-child(6n+1),
    .hnews-grid .hnews-item:nth-child(6n+2) {
        grid-column: span 4
    }

    .hnews-grid .hnews-item:nth-child(6n+1) .newsit-tt,
    .hnews-grid .hnews-item:nth-child(6n+2) .newsit-tt {
        font-size: 1.6rem !important
    }
}

@media screen and (max-width:768px) {

    .hnews-grid .hnews-item:nth-child(6n),
    .hnews-grid .hnews-item:nth-child(6n+3),
    .hnews-grid .hnews-item:nth-child(6n+4),
    .hnews-grid .hnews-item:nth-child(6n+5) {
        grid-column: span 2
    }
}

@media screen and (max-width:575px) {

    .hnews-grid .hnews-item:nth-child(6n),
    .hnews-grid .hnews-item:nth-child(6n+3),
    .hnews-grid .hnews-item:nth-child(6n+4),
    .hnews-grid .hnews-item:nth-child(6n+5) {
        grid-column: span 4
    }
}

.hnews-grid .hnews-item:nth-child(6n) .newsit-tt,
.hnews-grid .hnews-item:nth-child(6n+3) .newsit-tt,
.hnews-grid .hnews-item:nth-child(6n+4) .newsit-tt,
.hnews-grid .hnews-item:nth-child(6n+5) .newsit-tt {
    font-size: 1.6rem !important
}

.hevents {
    position: relative
}

.hevents-slider {
    position: relative
}

@media screen and (max-width:768px) {
    .hevents-slider .swiper-slide {
        width: 50%
    }
}

@media screen and (max-width:450px) {
    .hevents-slider .swiper-slide {
        width: 100%
    }
}

.hevents-slider .swiper-next,
.hevents-slider .swiper-prev {
    top: calc((192 / 384) * 50% + 2rem)
}

@media screen and (max-width:600px) {

    .hevents-slider .swiper-next,
    .hevents-slider .swiper-prev {
        display: none !important
    }
}

.hevents-slider .swiper-pagination {
    bottom: -2rem !important
}

@media screen and (min-width:1201px) {
    .hevents-slider .swiper-pagination {
        display: none
    }
}

.hinfo {
    position: relative
}

.hinfo .gr-nest .nest.nestL {
    top: -5%;
    left: 25%
}

.hinfo .gr-nest .nest.nest-1 {
    top: 10%;
    left: 5%;
    width: 6vw
}

.hinfo .gr-nest .nest.nest-1 img {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.hinfo .gr-nest .nest.nestR {
    top: 15%;
    right: 0;
    width: 6vw
}

.hinfo .gr-nest .nest.nest-2 {
    top: 0;
    left: 70%;
    width: 3vw
}

.hinfo .gr-nest .nest.nest-2 img {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.hinfo-wr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    row-gap: 7rem
}

@media screen and (max-width:1199px) {
    .hinfo-wr {
        row-gap: 4rem
    }
}

.hinfo-head {
    margin-bottom: 4rem
}

.hinfo-bdy {
    position: relative;
    margin-bottom: 3rem
}

.hinfo-bg {
    position: absolute;
    left: 0;
    right: 0;
    top: 10%;
    z-index: -1
}

@media screen and (max-width:1200px) {
    .hinfo-bg {
        top: auto;
        bottom: 0;
        -webkit-transform: translateY(5%);
        transform: translateY(5%)
    }
}

@media screen and (max-width:600px) {
    .hinfo-bg {
        top: auto;
        bottom: 0;
        -webkit-transform: translateY(2%);
        transform: translateY(2%)
    }
}

.hinfo-bg img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block
}

.hinfo-inner {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.hinfo-img .inner {
    width: 100%
}

.hinfo-img .inner img {
    display: block;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

.hinfo-list {
    z-index: 1
}

@media screen and (min-width:1201px) {
    .hinfo-list {
        position: absolute;
        inset: 0
    }
}

.hinfo-list.is-inview .hinfo-item {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1);
    opacity: 1;
    -webkit-transition-delay: var(--delay);
    transition-delay: var(--delay)
}

.hinfo-list.is-inview .hinfo-item .in {
    -webkit-animation-delay: var(--delay);
    animation-delay: var(--delay)
}

@media screen and (min-width:1201px) {
    .hinfo-list.is-inview .hinfo-item .in {
        -webkit-animation: shakeY-cus 10s ease infinite;
        animation: shakeY-cus 10s ease infinite
    }
}

.hinfo-list.is-inview .hinfo-item .des {
    opacity: 1;
    -webkit-transition-delay: calc(1s + var(--delay)*1.3);
    transition-delay: calc(1s + var(--delay)*1.3)
}

@media screen and (max-width:1200px) {
    .hinfo-list {
        width: 72rem;
        max-width: 100%;
        margin: 0 auto;
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        margin-bottom: 2rem
    }
}

.hinfo-item {
    -webkit-transition: all 1s cubic-bezier(.55, .085, .68, .53);
    transition: all 1s cubic-bezier(.55, .085, .68, .53)
}

@media screen and (min-width:1201px) {
    .hinfo-item {
        position: absolute;
        width: var(--whitem);
        height: var(--whitem);
        opacity: 0
    }

    .hinfo-item:nth-child(1) {
        left: 15%;
        top: -20%;
        --whitem: 11vw;
        --delay: .2s;
        -webkit-transform: translate(15vw, 15vh) scale(.4);
        transform: translate(15vw, 15vh) scale(.4)
    }

    .hinfo-item:nth-child(2) {
        left: 0;
        top: 6%;
        --delay: .1s;
        --whitem: 10vw;
        -webkit-transform: translate(25vw, 5vh) scale(.4);
        transform: translate(25vw, 5vh) scale(.4)
    }

    .hinfo-item:nth-child(3) {
        left: 7%;
        top: 50%;
        --whitem: 12vw;
        --delay: .4s;
        -webkit-transform: translate(15vw, -15vh) scale(.4);
        transform: translate(15vw, -15vh) scale(.4)
    }

    .hinfo-item:nth-child(4) {
        left: 70%;
        top: -20%;
        --whitem: 11vw;
        --delay: .6s;
        -webkit-transform: translate(-20vw, 15vh) scale(.4);
        transform: translate(-20vw, 15vh) scale(.4)
    }

    .hinfo-item:nth-child(5) {
        left: 66%;
        top: 40%;
        --whitem: 14vw;
        --delay: .4s;
        -webkit-transform: translate(-20vw, -15vh) scale(.4);
        transform: translate(-20vw, -15vh) scale(.4)
    }
}

@media screen and (max-width:1200px) {
    .hinfo-item {
        padding: 1.6rem 1.2rem;
        background: -webkit-gradient(linear, left top, left bottom, from(#0fbff1), color-stop(54.3%, #ade1f9), to(#0fbff1));
        background: linear-gradient(180deg, #0fbff1 0, #ade1f9 54.3%, #0fbff1 100%);
        grid-row: span 1;
        grid-column: span 1;
        border-radius: 1.2rem
    }
}

@media screen and (max-width:600px) {
    .hinfo-item {
        grid-column: span 2;
        padding: 1.2rem
    }
}

.hinfo-item-block {
    height: 100%;
    width: 100%;
    position: relative;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.hinfo-item .in {
    height: 100%;
    width: 100%
}

.hinfo-item .icon {
    position: absolute;
    inset: 0;
    z-index: -1
}

@media screen and (max-width:1200px) {
    .hinfo-item .icon {
        display: none
    }
}

.hinfo-item .icon img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block
}

.hinfo-item .des {
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all .75s ease;
    transition: all .75s ease
}

@media screen and (min-width:1201px) {
    .hinfo-item .des {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 16.7rem;
        height: 65%;
        max-width: 80%;
        opacity: 0
    }
}

.hinfo-item .des .content {
    max-height: 100%;
    overflow: hidden auto
}

.hinfo-item .des .txt {
    text-align: center;
    --f-sz: 1.6rem;
    font-size: var(--f-sz);
    font-weight: 600
}

@media screen and (max-width:800px) {
    .hinfo-item .des .txt {
        --f-sz: 1.4rem
    }
}

@media screen and (max-width:1440px) {
    .hinfo-item .des .txt {
        font-size: 1.4rem
    }
}

@media screen and (max-width:1200px) {
    .hinfo-item .des .txt {
        text-align: left
    }
}

.hpduct {
    position: relative
}

.hpduct .gr-nest .nest.nestL {
    top: 0;
    left: 0;
    width: 10vw
}

.hpduct .gr-nest .nest.nestL img {
    -webkit-transform: rotateX(0) rotateY(180deg);
    transform: rotateX(0) rotateY(180deg)
}

.hpduct-it {
    padding: 0 3rem
}

.hpduct .hpductThumb-slider {
    position: relative;
    overflow: hidden;
    padding-bottom: 4rem
}

@media screen and (max-width:1200px) {
    .hpduct .hpductThumb-slider {
        display: none
    }
}

.hpduct .hpductThumb-slider .hpduct-bf {
    position: absolute;
    top: calc(100% - 2.5rem);
    border-bottom: 2.5rem solid #15c1f2;
    border-right: 4rem solid transparent;
    border-left: 4rem solid transparent;
    transition: transform .75s cubic-bezier(.075, .82, .165, 1), -webkit-transform .75s cubic-bezier(.075, .82, .165, 1)
}

.hpduct .hpductThumb-slider .swiper-slide {
    cursor: pointer
}

.hpduct-bdy {
    position: relative
}

@media screen and (max-width:1200px) {
    .hpduct-slider {
        position: relative
    }
}

.hpduct-slider .swiper {
    position: relative;
    z-index: 2
}

.hpduct-slider .swiper-slide .hpductIt::before {
    content: "";
    position: absolute;
    z-index: 2;
    pointer-events: none;
    top: 2%;
    left: 1.2rem;
    background-image: url(/template/assets/images/island.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 45%;
    height: 45%
}

@media screen and (max-width:1200px) {
    .hpduct-slider .swiper::before {
        display: none
    }
}

.hpduct-slider .swiper-slide .hpductIt {
    height: 100%
}

.hpduct-slider .swiper-slide .hpductIt-inner {
    height: 100%
}

.hpduct-slider .swiper-slide .hpductIt-row {
    height: 100%
}

.hpduct-slider .swiper-slide .hpductIt-logo {
    -webkit-transition: all .75s ease;
    transition: all .75s ease;
    opacity: 0;
    -webkit-transform: translate(3rem, 0);
    transform: translate(3rem, 0)
}

.hpduct-slider .swiper-slide .hpductIt-tt {
    -webkit-transition: all .75s ease;
    transition: all .75s ease;
    opacity: 0;
    -webkit-transform: translate(3rem, 0);
    transform: translate(3rem, 0)
}

.hpduct-slider .swiper-slide .hpductIt .mona-content {
    color: #0c4ca3;
    -webkit-transition: all .75s ease;
    transition: all .75s ease;
    opacity: 0;
    -webkit-transform: translate(3rem, 0);
    transform: translate(3rem, 0)
}

.hpduct-slider .swiper-slide .hpductIt-btn {
    -webkit-transition: all .75s ease;
    transition: all .75s ease;
    opacity: 0;
    -webkit-transform: translate(3rem, 0);
    transform: translate(3rem, 0)
}

.hpduct-slider .swiper-slide .hpductIt .btn-wrap {
    -webkit-transition: all .75s ease;
    transition: all .75s ease;
    opacity: 0;
    -webkit-transform: translate(3rem, 0);
    transform: translate(3rem, 0)
}

.hpduct-slider .swiper-slide-active .hpductIt-logo {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition-delay: .6s;
    transition-delay: .6s
}

.hpduct-slider .swiper-slide-active .hpductIt-tt {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition-delay: .8s;
    transition-delay: .8s
}

.hpduct-slider .swiper-slide-active .hpductIt .mona-content {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition-delay: 1s;
    transition-delay: 1s
}

.hpduct-slider .swiper-slide-active .hpductIt .btn-wrap {
    opacity: 1;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition-delay: 1.2s;
    transition-delay: 1.2s
}

@media screen and (min-width:1201px) {

    .hpduct-slider .swiper-next,
    .hpduct-slider .swiper-prev {
        top: 10%
    }
}

@media screen and (max-width:1200px) {

    .hpduct-slider .swiper-next,
    .hpduct-slider .swiper-prev {
        opacity: 0
    }
}

@media screen and (max-width:600px) {

    .hpduct-slider .swiper-next,
    .hpduct-slider .swiper-prev {
        display: none !important
    }
}

.hpduct-slider .swiper-pagination {
    bottom: -2rem !important
}

@media screen and (min-width:1201px) {
    .hpduct-slider .swiper-pagination {
        display: none
    }
}

.hpduct-img {
    width: 100%
}

.hpduct-img .in {
    display: block;
    padding-top: calc((272 / 282) * 100%);
    position: relative;
    overflow: hidden;
    width: 100%;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.hpduct-img .in img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block
}

.hpductIt {
    position: relative;
    border-radius: 1.6rem;
    background: -webkit-gradient(linear, left top, left bottom, from(#0fbff1), color-stop(54.3%, #ade1f9), to(#0fbff1));
    background: linear-gradient(180deg, #0fbff1 0, #ade1f9 54.3%, #0fbff1 100%);
    overflow: hidden;
    padding: 2rem 0
}

@media screen and (min-width:1201px) {
    .hpductIt {
        padding: 4rem 0
    }
}

.hpductIt-img {
    width: 60%;
    display: block;
    margin-left: auto;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

@media screen and (max-width:1200px) {
    .hpductIt-img {
        width: 100%
    }
}

.hpductIt-img .inner {
    display: block;
    padding-top: calc((412 / 548) * 100%);
    position: relative;
    overflow: hidden;
    width: 100%;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none
}

.hpductIt-img .inner img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    display: block
}

.hpductIt-des {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 2.4rem
}

@media screen and (min-width:1201px) {
    .hpductIt-des {
        width: 90%
    }
}

@media screen and (max-width:1200px) {
    .hpductIt-des {
        padding: 1.6rem
    }
}

.hpductIt-des-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 1.6rem
}

.hpductIt-des .btn-wrap .btn-red-cus .icon {
    max-width: 1rem
}

.hpductIt-logo {
    width: 18.7rem
}

@media screen and (max-width:800px) {
    .hpductIt-logo {
        width: 12rem
    }
}

.hpductIt-logo img {
    width: 100%;
    display: block;
    -o-object-fit: contain;
    object-fit: contain
}

.hpductIt-tt {
    --f-sz: clamp(1.9rem, calc(0.9rem + 1.25vw), 2.4rem);
    font-size: var(--f-sz);
    font-weight: 600;
    color: #0c4ca3;
    text-wrap: pretty;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

.hpductIt-tt:hover {
    color: #ed1c24
}

.hpductIt-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: .8rem
}

.hpductIt-btn:hover img {
    -webkit-transform: translate(.4rem, 0);
    transform: translate(.4rem, 0)
}

.hpductIt-btn .txt {
    font-size: 1.6rem;
    font-weight: 600;
    color: #ed1c24;
    position: relative;
    z-index: 1
}

.hpductIt-btn .txt::before {
    position: absolute;
    content: attr(data-btn);
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    font-size: 1.6rem;
    font-weight: 600;
    color: #ed1c24;
    -webkit-text-stroke-width: .1rem;
    -webkit-text-stroke-color: #fef200;
    z-index: -1
}

.hpductIt-btn img {
    width: 1rem;
    height: 1rem;
    display: block;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transition: all .3s ease;
    transition: all .3s ease
}

@media screen and (max-width:700px) {
    .hpductIt-col {
        width: 100%
    }
}

.habout.pd-80 {
    padding-bottom: 0
}

.habout .habout-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

@media screen and (max-width:768px) {
    .habout .habout-content {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

@media screen and (max-width:768px) {
    .habout .col-6 {
        width: 100%
    }
}