/*banner*/
.banner-wrap {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-width: 1200px;
    height: 678px;
    padding: 0 calc((100% - 1200px)/2);
    background-image: url("../images/image_gcb/banner.png");
    background-size: 100% 678px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    margin-bottom: 140px;
}
.bw-left > h2 {
    font-size:46px;
    font-family:MicrosoftYaHei-Bold;
    font-weight:bold;
    color:rgba(134,129,243,1);
    line-height:80px;
    margin-top: 180px;
}
.bw-left > h5 {
    width:333px;
    height:43px;
    background:rgba(139,131,240,1);
    font-size:24px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(255,255,255,1);
    line-height:43px;
    text-align: center;
    margin-bottom: 50px;
}
.bw-left > p {
    font-size:18px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(61,61,61,1);
    line-height:36px;
}
.bw-left > p:nth-of-type(2){
    margin-bottom: 120px;
}
.bw-left > .to-down {
    display: flex;
    justify-content: center;
    width:50px;
    height:50px;
    padding-top: 12px;
    box-sizing: border-box;
    background:rgba(139,131,240,1);
    border-radius:50%;
    animation: myupdown 1s linear infinite;
}
@keyframes myupdown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0);
    }
}
.bw-left > .to-down:after {
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    border-left: 3px solid white;
    border-bottom: 3px solid white;
    transform: rotate(-45deg);
}
.bw-right {
    margin-top: 136px;
    width: 709px;
    height: 515px;
}

.container-wrap {
    width: 100%;
    min-width: 1200px;
    background-image: url("../images/image_gcb/background01.png");
    background-repeat: no-repeat;
    background-size: 100% 2751px;
}
/*定制流程*/
.gcb-title > h4{
    height:24px;
    background-image: url("../images/image_gcb/title_background.png");
    background-repeat: no-repeat;
    background-size: 615px 18px;
    background-position: center center;
    font-size:24px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(124,119,243,1);
    line-height:24px;
    text-align: center;
    margin-bottom: 30px;
}
.gcb-title > p {
    font-size:16px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(183,183,183,1);
    line-height:54px;
    text-align: center;
    margin-bottom: 54px;
}

.flow-line {
    width: 1010px;
    margin: 0 auto;
    background-image: url("../images/image_gcb/flow-line.png");
    background-repeat: no-repeat;
    background-size: 564px 1383px;
    background-position: 24px 56px;
}
.fl {
    display: flex;
    justify-content: space-between;
}
.fl-number {
    width:50px;
    height:50px;
    transform: rotate(45deg);
    background:rgba(139,131,240,1);
    border-radius:10px;
    font-size:24px;
    font-family:MicrosoftYaHei-Bold;
    font-weight:bold;
    color:rgba(255,255,255,1);
    line-height:54px;
    text-align: center;
}
.fl-number  > p {
    transform: rotate(-45deg);
}
.fl-content > h3 {
    font-size:20px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(92,92,92,1);
    line-height:54px;
}

.fl-content > p {
    width:356px;
    font-size:16px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(101,101,101,1);
}
.fl-01 .fl-content{
    margin-left: -225px;
}
.fl-01 .fl-image {
    margin-right: 50px;
}
.fl-03 .fl-content{
    margin-left: -240px;
}
.fl-03 .fl-image {
    margin-right: 86px;
}
.fl-05 .fl-content {
    margin-left: -175px;
}
.fl-05 .fl-image {
    margin-right: 40px;
}
.fl-02 .fl-number{
    margin-left: 150px;
}
.fl-02 .fl-image {
    margin-left: 120px;
}
.fl-04 .fl-number{
    margin-left: 118px;
}
.fl-04 .fl-image {
    margin-left: 112px;
}
.fl-06 .fl-number{
    margin-left: 165px;
}
.fl-06 .fl-image {
    margin-left: 160px;
}

.fl-01 {
    margin-bottom: 64px;
}
.fl-02 {
    margin-bottom: 118px;
}
.fl-03 {
    margin-bottom: 64px;
}
.fl-04 {
    margin-bottom: 92px;
}
.fl-05 {
    margin-bottom: 80px;
}
.fl-06 {
    margin-bottom: 238px;
}

/*定制特点*/
.gcb-character {
    display: flex;
    justify-content: space-between;
    width: 1006px;
    margin: 0 auto 210px;
}
.gcb-character > li > div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 136px;
    margin-bottom: 20px;
}
.gcb-character > li > p {
    width:96px;
    font-size:24px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(124,119,243,1);
    line-height:54px;
    text-align: center;
}

.btn-row {
    display: flex;
    justify-content: space-between;
    width: 376px;
    margin: 0 auto 106px;
}
.btn-row > .btn-left,
.btn-row > .btn-right {
    position: relative;
    width:165px;
    height:51px;
    border-radius:26px;
    line-height:51px;
    font-size:20px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(255,255,255,1);
    text-align: center;
    background:rgba(139,131,240,1);
}

.btn-row > .selected{
    background:rgba(252,183,45,1);
}
.btn-row > .btn-left:hover,
.btn-row > .btn-right:hover {
    cursor: pointer;
}
.btn-row > .btn-left:active,
.btn-row > .btn-right:active {
    top: 2px;
}

.swiper-container {
    width: 1200px;
    height: 460px;
    margin: 0 auto 218px;
}

.gc-display .swiper-slide {
    width:300px!important;
    height:369px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 8px 2px rgba(139,131,240,0.17);
    border-radius:20px;
    margin: 0 50px;
}
.gc-display .swiper-slide .card-book-img{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    width:300px;
    height:220px;
    /*background: #a0a0a0;*/
    border-radius:20px 20px 0px 0px;
    margin-bottom: 26px;
}
.gc-display .swiper-slide .card-book-img > img {
    max-width: 100%;
    max-height: 100%;
}
.gc-display .swiper-slide:hover {
    cursor: pointer;
}

.gc-display .swiper-slide p {
    padding: 0 20px;
    font-size:18px;
    font-family:MicrosoftYaHei-Bold;
    font-weight:bold;
    color:rgba(112,112,112,1);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 42px;
}
.gc-display .swiper-slide a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width:196px;
    height:38px;
    padding-left: 60px;
    margin: 0 auto;
    border:1px solid rgba(227,226,252,1);
    border-radius:19px;
    font-size:18px;
    font-family:MicrosoftYaHei;
    font-weight:400;
    color:rgba(197,192,250,1);
}
.gc-display .swiper-wrapper {
    align-items: center;
}
.gc-display .swiper-slide a:active {
    top: 2px;
}
.gc-display .swiper-slide a .icon-arrow {
    margin-left: 16px;
}
.gc-display .swiper-slide a .icon-arrow,
.gc-display .swiper-slide a .icon-arrow > img {
    width: 18px;
    height: 18px;
}
.swiper-slide-active {
    transform: scale(1.2);
}
.gc-display .swiper-button-prev {
    width: 37px;
    height: 71px;
    background-image: url("../images/image_gcb/btn_toleft.png");
    background-size: 100% 100%;
}
.gc-display .swiper-button-next {
    width: 37px;
    height: 71px;
    background-image: url("../images/image_gcb/btn_toright.png");
    background-size: 100% 100%;
}

/*一些动效*/
.gcb-character > li:hover p{
    color: rgba(252,183,45,1);
}
.gcb-character > li:hover img{
    animation: myscale 1s linear;
}
@keyframes myscale {
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.fl:hover .fl-number{
    animation: myani01 1.5s linear;
}
@keyframes myani01 {
    0% {
        transform: translateY(0px) rotate(45deg);
    }
    10% {
        transform: translateY(10px) rotate(45deg);
    }
    20% {
        transform: translateY(25px) rotate(45deg);
    }
    30% {
        transform: translateY(50px) rotate(45deg);
    }
    40% {
        transform: translateY(25px) rotate(45deg);
    }
    50% {
        transform: translateY(10px) rotate(45deg);
    }
    60% {
        transform: translateY(0px) rotate(45deg);
    }
    70% {
        transform: translateY(-10px) rotate(45deg);
    }
    80% {
        transform: translateY(0px) rotate(45deg);
    }
    90% {
        transform: translateY(5px) rotate(45deg);
    }
    100% {
        transform: translateY(0px) rotate(45deg);
    }

}