* {
    margin: 0;
    padding: 0;
    /* 锚点跳转设置平滑滚动 */
    scroll-behavior: smooth;
}
/* #region 二、图片展示区  */
.box {
    width: 90vw;
    height: 85vh;
    background-color: #044a8c;
    margin: 110px auto;
}

.swiper-container {
    width: 100%;
    height: 100%;
    background-color: rgb(108, 167, 209);
    transition: 1s background-color 1.3s;
}

.swiper-wrapper {
    transition-delay: 1s;
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.title {
    transition-delay: 1s;
    z-index: 10;
}

.title h3 {
    font-weight: 700;
    font-size: calc(55px + 54 * ((53vw + 53vh) - 520px) / 820);
    letter-spacing: -1px;
    color: rgba(255, 255, 255, 0);
    -webkit-text-stroke: 2px #fff;
}

.img-box {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: scale(0.6, 0.6);
    transition-duration: 1s;
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
    opacity: 0.9;
    overflow: hidden;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2, 1.2) translateX(50%);
    transition-timing-function: cubic-bezier(0.5, 0, 0, 1);
    transition-property: transform;
}

.button-prev,
.button-next {
    transition: 0.5s;
    outline: none;
    position: absolute;
    width: 140px;
    z-index: 10;
    top: 65vh;
    transform: translateY(-34px);
    cursor: pointer;
}

.button-prev {
    left: 4vw;
}

.button-next {
    right: 4vw;
}

.button.disabled {
    opacity: 0.2;
    cursor: default;
}

#arrow-svg-home {
    transform: translateY(353px);
}

.button-next #arrow-svg-home {
    transform: translateY(353px) rotateY(180deg);
    transform-origin: 80px 0px 0px;
}

svg {
    transition: 0.5s;
}

.cls-1 {
    transition: 0.5s;
    opacity: 0.4;
    transform-origin: -20px 40px;
    opacity: 1;
}

.cls-4 {
    transition: 0.5s;
    stroke-width: 2px;
    stroke: #fff;
    /* color: rgb(2, 81, 116); */
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0.4;
    transform-origin: 0px 0px 0px;
}

#arrow-trg {
    transition: 0.5s;
    fill: #fff;
    transform: rotateY(180deg) translate(-53px, 39px);
}

#line {
    transition: 0.5s;
    stroke: #fff;
    transform: translate(50px, 42px);
}

.button-prev:not(.disabled):hover svg {
    transform: translateX(-25px);
}

.button-next:not(.disabled):hover svg {
    transform: translateX(25px);
}

.button:not(.disabled):hover .cls-1 {
    transform: scale(1.1);
}

.button:not(.disabled):hover .cls-4 {
    stroke-dasharray: 2px;
    stroke-dashoffset: 2px;
    opacity: 1;
}

.button:not(.disabled):hover #arrow-trg {
    transform: rotateY(180deg) translate(-37px, 39px);
}

.button:not(.disabled):hover #line {
    transform: translate(35px, 42px) scaleX(0.33);
}



/* #endregion*/

/* #region 三、游艇介绍区  */
.introduce {
    margin-top: 100px;
    width: 100%;
    background-color: rgba(173, 202, 228, 0.406)
}

.i-box {
    color: #fff;
    width: 100%;
    height: 80vh;
    background-color: rgb(2, 81, 116);

    display: flex;
    /* 多列的 用 align-items */
    align-items: center;
    justify-content: center;
}

.i-box .part2 {
    margin-right: 5%;
    width: 38%;
    height: 55%;
}

.i-box .part1 {
    width: 38%;
    height: 90%;
    border-radius: 1.3em;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    background-position: top 0 right -150px;

    /* 动画 */
    animation: showcontent 0.5s ease-in-out 0.1s 1 forwards;
}


@keyframes showcontent {
    from {
        opacity: 0.1;
        transform: translate(0, 100px);
        filter: blur(1px);
    }

    to {
        opacity: 1;
        transform: translate(0, 0);
        filter: blur(0);
    }
}



.i-box .part2 article {
    /* background-color: beige; */
    margin-left: 8%;
    width: 95%;
    height: 100%;
    /* background-color: #e0faff; */
    font-style: italic;
}


/* 强调字设置 */
.i-box .part2 article strong {
    font-style: initial;
    text-shadow: 1px 1px 3px #f00;
    letter-spacing: 8px;
    font: 2.7em "华文新魏", serif;
    color: rgb(243, 227, 0);
}

.i-box .part2 article p {
    line-height: 1.4em;
    font-style: normal;
    font-size: 18px;

}

.i-box .part2 article p b {
    color: rgb(241, 237, 0);
    font-size: 1.4em;
}

.i-box .part2 article a {
    width: 190px;
    height: 40px;
    line-height: 40px;
    display: block;
    border: 2px solid #fff;
    color: rgb(255, 255, 255);
    text-align: center;
    text-decoration: none;
    font-size: 1.5em;
    border-radius: 30px;
    transition: all .27s ease;
}


.i-box .part2 article a:hover {
    background-color: rgb(243, 251, 255);
    color: rgb(6, 76, 107);
    font-weight: 900;
    /* transition: 2s; */
}


/* (1) i-box1 —— 第一部分 */
.i-box1 .part1 {
    /* 重复属性换到上面，特定属性留下 */
    background-image: url(../images/ql9_t.jpg);
}


/*  i-box2 —— 第二部分 */
/* .i-box2 {
    margin-top: 8em;
} */

.i-box2 .part1 {
    background-image: url(../images/ql9_6.jpg);
}

/* #endregion   */



/* #region 四、游艇图片展示  */
.i-album {
    overflow: hidden;
    color: #fff;
    width: 100%;
    height: 94vh;
    background: linear-gradient(348deg, #025174 10%, #056995 100%), linear-gradient(70deg, #FFF1EB 0%, #ACE0F9 100%);
}

.i-album1 p {
    text-align: center;
    /* overflow: hidden; */
}

.i-album .title1 {
    margin-top: 80px;
}

.i-album .title2 {
    font-size: 2.6em;
    font-weight: bold;
}

.i-album1 .container {
    width: 85%;
    height: 60%;
    margin: 40px auto;
    display: flex;
    justify-content: space-between;
}

.i-album1 .container .item {
    width: 23.8%;
    height: 100%;
    border-radius: 22px 22px 22px 22px;
    overflow: hidden;
    position: relative;
    /* 动画 */
    animation: showcontent 0.5s ease-in-out 0.1s 1 forwards;
}

.i-album1 .container .item .i-word {
    position: absolute;
    width: 100%;
}

.i-album .container .item .i-photo {
    width: 100%;
    height: 100%;
    background-image: url(../images/ql9_3.jpg);
    background-size: cover;
    transition: 0.31s ease;
    background-position: center center;
}

.i-album .container .item:nth-child(2) .i-photo {
    background-image: url(../images/ql9_4.jpg);
    /* background-position: 50% 50%; */
}

.i-album .container .item:nth-child(3) .i-photo {
    background-image: url(../images/ql9_7.jpg);
}

.i-album .container .item:nth-child(4) .i-photo {
    background-image: url(../images/ql9_8.jpg);
}

.i-album .container .item:hover .i-photo {
    transform: scale(1.23);
}

.i-album .container .item .i-detail {
    display: block;
    width: 100%;
    position: absolute;
    top: -140px;
    padding: 10px;
    font-size: 1.3em;
    margin-left: 5px;
}

.i-album .container .item .i-word .i-detail p:first-child {
    /* display: inline; */
    font-size: 30px;
    font-weight: 900;
    margin-left: -200px;
    /* margin-top: 100%; */
}


/* #endregion */


/* #region 五、内容区2  */
.scroll-nav {
    width: 100%;
    height: 800px;
    /* background-color: rgb(0, 9, 136); */
    background-color: rgb(2, 81, 116);

    position: relative;
}

.scroll-nav nav {
    width: 350px;
    height: 600px;
    /* background-color: #054a87; */
    position: absolute;
    top: 10%;
    left: 18%;
}


.scroll-nav nav a {
    padding: 10px;
    display: block;
    color: rgb(2, 81, 116);
    font-weight: 900;
    font-family: "华文新魏";
    text-decoration: none;
    font-size: 50px;
    text-align: center;
    background-color: #fff;
    border-radius: 23px 23px 23px 23px;
}

/* 图片区 */
.scroll-nav .sc-photo {
    width: 40%;
    height: 45%;
    background-color: #fff;
    position: absolute;
    top: 46%;
    left: 4%;
    background-image: url(../images/ql9_t.jpg);
    background-size: cover;
    border-radius: 19px;
    border: 16px solid #FFFFFF;
}

/* 图片区2 */
.scroll-nav .sc-photo2 {
    z-index: 1;
    width: 22%;
    height: 24%;
    background-color: #fff;
    position: absolute;
    top: 69%;
    left: 74%;
    background-image: url(../images/ql9_3.jpg);
    background-size: cover;
    border-radius: 19px;
    border: 10px solid #FFFFFF;
}


.scroll-nav .sc-container {
    display: block;
    margin: 0 auto;
    /* text-align: center; */
    border-radius: 20px;
    position: relative;
}


.scroll-nav .sc-container .sc-strategy {
    padding: 20px;
    width: 86%;
    height: 86%;
    border-radius: 22px;
    background: linear-gradient(348deg, #025174 0%, #056995 100%), linear-gradient(90deg, #FFF1EB 0%, #ACE0F9 100%);
border: 5px dotted #0b5592;
    
}

.scroll-nav .sc-container .sc-strategy em {
    font: 900 5em "华文新魏", sans-serif;
    text-align: center;
    color: #f6fdff;
    margin-bottom: 20px;
}


.scroll-nav .sc-container .sc-strategy p {
    margin-top: 30px;
    color: #fff;
}

.scroll-nav .sc-container .sc-strategy article {
    font-size: 1.5em;
}

.sc-container {
    width: 550px;
    height: 600px;
    overflow-y: hidden;
    scroll-behavior: smooth;
    background-color: #fff;
    position: absolute;
    top: 15%;
    left: 18%;
}

.scroll-nav .sc-container .sc-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* font-size: 5em; */

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
/* #endregion */

footer {
	width: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
  background-color: #dcdcdc;
}

footer a {
	margin: 17px 0;
	color: #868686;
	padding-left: 25px;
	padding-right: 13px;
	text-decoration: none;
	font-weight: 500;
	font-size: 13.5px;
	border-right: 1px solid #757575 ;
}

footer a:last-child {
	border-right: 0;
}