@charset 'utf-8';

table{
    max-width: 1100px;
    margin: 10px auto 50px;
    line-height: 24px!important;
}
.products-item:hover{
    cursor: pointer;   
}
.products-item .close{
    position: absolute;
    top: -42px;
    right: 19px;
    font-size: 50px;
    display: inline;
    font-weight: 100;
}
.products-item .close:hover{
    cursor: pointer;
    color: #f33;
}

.products-item .close:after{
    content: "x";
    font-size: 20px;
    position: relative;
    top: -8px;
    right: 20px;
    font-weight: 700;
}
#products-choose-list{
    min-width: 350px;
    width: 400px;
    min-height: 100vh;
    float: left;
    box-shadow: 10px 0px 17px rgb(72 72 72 / 10%);
    margin-left: 130px;
    padding-bottom: 100px;
    position: relative;
    z-index: 999;
}
#products-choose-list .product-first-content{
    margin-left: 12px;

    transition: all 0.8s;
}

#products-choose-list .product-first-title>a i{
    float: right;
    transform: rotateZ(0deg);
    transition: all 0.8s;
}

#products-choose-list .product-first-title>a i:after{
    content: '>';
    font-family: auto;
}

#products-choose-list .active>a i{
    transform: rotateZ(90deg);
    transition: all 0.8s;
}

#products-choose-list .product-second-title>a i{
    float: right;
    transform: rotateZ(0deg);
    transition: all 0.8s;
}

#products-choose-list .product-second-title>a i:after{
    content: '>';
    font-family: auto;
}

#products-choose-list a{
    cursor: pointer;
}
#products-choose-list .active-second>a i{
    transform: rotateZ(90deg);
    transition: all 0.8s;
}

#products-choose-list .active{
    background: #f2f0f8;
}



#products-choose-list .active>a{
    color: #045586!important;
}
#products-choose-list .active-second{
    /*background-color: #bbbbe9;*/
}
#products-choose-list .active-second>a{
    color: #1072AD!important;
}
#products-choose-list .active-third{
    /*background-color: #f2f9ff;*/
}
#products-choose-list .active-third>a{
    color: #2BA3EB!important;
    transition: all 0.8s;
}

#products-choose-list .product-second-content{
    margin-left: 24px;
    transition: all 0.8s;
}

#products-choose-list a{
    display: block;
    line-height: 2em;
    padding: 12px 15px 12px 25px;
    text-align: left;
    transition: all 0.8s;
}

#products-choose-list a:hover{
    margin-left: 6px;
    transition: all 0.8s;
}

#product-choose-content a:hover{
    color: #84cff3;   
    transition: all 0.1s;
}
#product-choose-content img{
    transition: all 0.6s;
}
#product-choose-content img:hover{
    transform: scale(1.05);
    transition: all 0.6s ease-in-out;
}

.product-choose-content-title{
    line-height: 3em!important;
    margin: 60px 0 20px;
}

.product-choose-content-title a:after{
    content: "点击查看更多";
    color: #338FDC;
    font-size: 16px;
    text-align: center;
    
}
#product-img{
    width: 1700px;
    height: 320px;
    position: relative;
    top: 200px;
    left: 172px;
    z-index: 1;
}

#product-img .product-img-item{
    cursor: pointer;
    width: 210px;
    margin-right: 40px;
    height: 310px;
    float: left;
    box-shadow: 3px 2px 20px 5px #ccc;
    border-radius: 5px;
    background-image: linear-gradient(35deg, #d4a082 0%, #fac2a7 70%, #9d7862 100%);
}

#product-img .product-img-item-img{
    width: 190px;
    margin: 10px;
    height: 250px;
    background-color: #fff;
    border-radius: 5px;
}
#product-img .product-img-item-img img{
    width: 100%;
    height: 100%;
}
#product-img .product-img-item-header{
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    text-align: center;
}

#products-choose-list .product-first-title>a{
    font-weight: 700;
    font-size: 1.2em;
}

#products-choose-list .product-second-title>a{
    font-size: 1.1em;
    font-weight: 700;
}
#product-animation{
    position: relative;
    top: 75px;
    left: 300px;
}
.border_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
}
.line{
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(45deg, #702283 0%, #D396E2 47%, #7e3d90 100%);
    opacity: 0;
}
.line01{
    top: 0;
    left: 100%;
    width: 2px;
    height: 152px;
    transform-origin: bottom;
    animation: animation01_line01 0.2s linear 0.3s forwards;
}
.line03{
    top: 0;
    left: 0;
    width: 2px;
    height: 150px;
    transform-origin: bottom;
    animation: animation01_line01 0.2s linear 0.6s forwards;
}
@keyframes animation01_line01{
    0%{
        transform: scale3d(1,0,1);
        opacity: 1;
    }
    100%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
}
.line02{
    top: 100%;
    left: 0;
    width: 150px;
    height: 2px;
    transform-origin: right;
    animation: animation01_line02 0.2s linear 0.4s forwards;
}
.line04{
    top: 0;
    left: 0;
    width: 150px;
    height: 2px;
    transform-origin: left;
    animation: animation01_line02 0.2s linear 0.8s forwards;
}
@keyframes animation01_line02{
    0%{
        transform: scale3d(0,1,1);
        opacity: 1;
    }
    100%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
}

.circle{
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    border: 0.1vw solid #0066a4;
    border-radius: 50%;
    opacity: 0;
}
.circle01{
    top: 96%;
    left: 96%;
    margin: 0 auto;
    animation: animation01_circle 0.3s linear 0.3s forwards;
}
.circle02{
    top: 96%;
    left: -99%;
    margin: 0 auto;
    animation: animation01_circle 0.3s linear 0.45s forwards;
}
.circle03{
    top: -4%;
    left: -99%;
    margin: 0 auto;
    animation: animation01_circle 0.3s linear 0.65s forwards;
}
.circle04{
    top: -4%;
    left: 96%;
    margin: 0 auto;
    animation: animation01_circle 0.3s linear 0.85s forwards;
}
@keyframes animation01_circle{
    0%{
        transform: scale3d(0,0,1);
        opacity: 1;
    }
    40%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
    60%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
    100%{
        transform: scale3d(0,0,1);
        opacity: 1;
    }
}

.wave{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 135px;
    height: 135px;
    overflow: hidden;
}
.wave_wrapper{
    width: 200%;
    height: 150%;
    position: absolute;
    top: -25%;
    right: 0;
    bottom: 0;
    left: -50%;
    margin: 0 auto;
    animation: animation01_wave_wrapper 1s linear 1s forwards;
}
@keyframes animation01_wave_wrapper{
    0%{
        transform: rotate(0);
    }
    25%{
        transform: rotate(15deg);
    }
    50%{
        transform: rotate(0);
    }
    75%{
        transform: rotate(-15deg);
    }
    100%{
        transform: rotate(0);
    }
}
.wave_box{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(35deg, #33193d 0%, #0066a4 70%, #0066a4 100%);
    transform-origin: bottom;
    animation: animation01_wave_box 1s linear 1s forwards;
    opacity: 0;
}
@keyframes animation01_wave_box{
    0%{
        transform: scale3d(1,0,1);
        opacity: 1;
    }
    100%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
}
.animation_line{
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0 auto;
    background-color: #0066a4;
    opacity: 0;
}
.animation_line_wrapper{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}
.animation_line01{
    top: -15%;
    left: 0;
    width: 2px;
    height: 5px;
    animation: animation_line01 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: top;
}
.animation_line02_wrapper{
    transform: rotate(45deg)
}
.animation_line02{
    top: -35%;
    left: 0;
    width: 2px;
    height: 5px;
    animation: animation_line01 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: top;
}
@keyframes animation_line01{
    0%{
        transform: translateY(0);
        opacity: 1;
    }
    100%{
        transform: translateY(-1.5vw);
        opacity: 1;
    }
}
.animation_line03{
    top: 50%;
    left: 110%;
    width: 5px;
    height: 2px;
    animation: animation_line03 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: right;
}
.animation_line04_wrapper{
    transform: rotate(45deg)
}
.animation_line04{
    top: 50%;
    left: 128%;
    width: 5px;
    height: 2px;
    animation: animation_line03 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: right;
}
@keyframes animation_line03{
    0%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(15px);
        opacity: 1;
    }
}
.animation_line05{
    top: 110%;
    left: 0;
    width: 2px;
    height: 5px;
    animation: animation_line05 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: bottom;
}
.animation_line06_wrapper{
    transform: rotate(45deg)
}
.animation_line06{
    top: 128%;
    left: 0;
    width: 2px;
    height: 5px;
    animation: animation_line05 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: bottom;
}
@keyframes animation_line05{
    0%{
        transform: translateY(0);
        opacity: 1;
    }
    100%{
        transform: translateY(15px);
        opacity: 1;
    }
}
.animation_line07{
    top: 50%;
    left: -130%;
    width: 5px;
    height: 2px;
    animation: animation_line07 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: left;
}
.animation_line08_wrapper{
    transform: rotate(45deg)
}
.animation_line08{
    top: 50%;
    left: -162%;
    width: 5px;
    height: 2px;
    animation: animation_line07 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 1.9s;
    transform-origin: left;
}
@keyframes animation_line07{
    0%{
        transform: translateX(0);
        opacity: 1;
    }
    100%{
        transform: translateX(-15px);
        opacity: 1;
    }
}


.rhombus{
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rhombus 0.2s linear 2.2s forwards;
}
@keyframes rhombus {
    0%{
        transform: rotate(0)
    }
    100%{
        transform: rotate(45deg)
    }
}
.rhombus_small{
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rhombus_small 0.4s linear 2.55s forwards;
}
@keyframes rhombus_small {
    0%{
        transform: scale3d(1,1,1);
        opacity: 1;
    }
    99%{
        transform: scale3d(0.15,0.15,0.15);
        opacity: 1;
    }
    100%{
        transform: scale3d(0.15,0.15,0.15);
        opacity: 0;
    }
}

/*===================
animation02
====================*/

.rhombus_box{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 400px;
    height: 400px;
    animation: rhombus_box 0.4s linear 3.55s forwards;
}
.rhombus_item_wrapper{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 21px;
    height: 21px;
    opacity: 0;
}
.rhombus_item{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 21px;
    height: 21px;
    
    
}
.rhombus_item01_wrapper{
    animation: rhombus_item01 0.5s linear 2.95s forwards;
}

.rhombus_item02_wrapper{
    animation: rhombus_item02 0.5s linear 2.95s forwards;
}
@keyframes rhombus_item01{
    0%{
        transform: translateX(0);
        opacity: 1;
        background-image: linear-gradient(45deg, #702283 0%, #D396E2 47%, #7e3d90 100%);
    }
    100%{
        background-image: linear-gradient(45deg, #702283 0%, #D396E2 47%, #7e3d90 100%);
        transform: translateX(-185px) rotate(45deg);
        opacity: 1;

    }
}
@keyframes rhombus_item02{
    0%{
        transform: translateX(0);
        opacity: 1;

        background-image: linear-gradient(35deg, #33193d 0%, #0066a4 70%, #0066a4 100%);
    }
    100%{
        background-image: linear-gradient(35deg, #33193d 0%, #0066a4 70%, #0066a4 100%);
        transform: translateX(185px) rotate(45deg);
        opacity: 1;
        
    }
}
@keyframes rhombus_box{
    0%{
        transform: rotate(0)
    }
    100%{
        transform: rotate(360deg)
    }
}

.name{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30vw;
    height: 30vw;
    animation: name 1.0s cubic-bezier(0.165, 0.84, 0.44, 1) 3.8s forwards;
    opacity: 0;
}
.name p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*color: #0066a4;*/
    background-image: linear-gradient(90deg, #702283 0%, #fac2a7 50%, #0066A4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2em;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    letter-spacing: 0.1em;
}
@keyframes name {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

#product-choose-content img{
    animation: zoomInDown 0.8s forwards;
}
@keyframes zoomInDown{
    0% {
        opacity: 0;
        transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0);
        animation-timing-function: cubic-bezier(.55,.055,.675,.19);
    }
    60% {
        opacity: 1;
        transform: scale3d(.475,.475,.475) translate3d(0,60px,0);
        animation-timing-function: cubic-bezier(.175,.885,.32,1);
    }
}