/* 主视图框 */
.ray_Carousel{
    position:relative;
    width:100%;
    height:380px;
    background-color:transparent;
    overflow:hidden;
}


/* 图片视图框 */
.ray_Carousel>.ray_Carousel_imgView {
    position:absolute;
    width:1240px;
    height:100%;
    background-color:transparent;
    overflow:hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}


/* 子图片视图框 - 公共基础属性 */
.ray_Carousel_imgSubViewBase {
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
/* 子图片 - 公共基础属性 */
.ray_Carousel_imgDtlLeft {
    background-color: white;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.ray_Carousel_imgDtlRight {
    background-color: white;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}


/* 子图片视图框 - 中部视图框 */
.ray_Carousel_imgSubViewMiddle {
    position:absolute;
    width:420px;
    height:270px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    perspective: 150px;
    -webkit-perspective: 150px; /* Safari and Chrome */
    transition:all 0.3s ease-in-out;
    z-index:3
}
/* 子图片视图框 - 中部视图框 - 左图 */
.ray_Carousel_imgSubViewMiddle>.ray_Carousel_imgDtlLeft{
    width:50%;height:75%;
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:0px;
}
/* 子图片视图框 - 中部视图框 - 右图 */
.ray_Carousel_imgSubViewMiddle>.ray_Carousel_imgDtlRight{
    width:49%;height:75%;
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:0px;
}


/* 子图片视图框 - 左侧视图框 */
.ray_Carousel_imgSubViewLeft {
    position:absolute;
    width:200px;
    height:350px;
    top: 50%;
    left: 50%;
    transform: translate(-205%, -50%);
    perspective: 150px;
    -webkit-perspective: 150px; /* Safari and Chrome */
    -webkit-filter: grayscale(0.8);
    -moz-filter: grayscale(0.8);
    -o-filter: grayscale(0.8);
    filter: grayscale(0.8);
    transition:all 0.3s ease-in-out;
    z-index:2
}
/* 子图片视图框 - 左侧视图框 - 左图 */
.ray_Carousel_imgSubViewLeft>.ray_Carousel_imgDtlLeft{
    width:50%;height:43%;
    transform: rotateY(15deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:10px;
}
/* 子图片视图框 - 左侧视图框 - 右图 */
.ray_Carousel_imgSubViewLeft>.ray_Carousel_imgDtlRight{
    width:45%;height:38%;
    transform: rotateY(6deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:0px
}


/* 子图片视图框 - 左侧视图框2 */
.ray_Carousel_imgSubViewLeft2 {
    position:absolute;
    width:200px;
    height:350px;
    top: 50%;
    left: 50%;
    transform: translate(-305%, -50%);
    perspective: 150px;
    -webkit-perspective: 150px; /* Safari and Chrome */
    -webkit-filter: grayscale(0.8);
    -moz-filter: grayscale(0.8);
    -o-filter: grayscale(0.8);
    filter: grayscale(0.8);
    transition:all 0.3s ease-in-out;
    z-index:2
}
/* 子图片视图框 - 左侧视图框2 - 左图 */
.ray_Carousel_imgSubViewLeft2>.ray_Carousel_imgDtlLeft{
    width:40%;height:65%;
    transform: rotateY(20deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:13px;
}
/* 子图片视图框 - 左侧视图框2 - 右图 */
.ray_Carousel_imgSubViewLeft2>.ray_Carousel_imgDtlRight{
    width:60%;height:53%;
    transform: rotateY(15deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:13px
}


/* 子图片视图框 - 右侧视图框 */
.ray_Carousel_imgSubViewRight {
    position:absolute;
    width:200px;
    height:350px;
    top: 50%;
    left: 50%;
    transform: translate(105%, -50%);
    perspective: 150px;
    -webkit-perspective: 150px; /* Safari and Chrome */
    -webkit-filter: grayscale(0.8);
    -moz-filter: grayscale(0.8);
    -o-filter: grayscale(0.8);
    filter: grayscale(0.8);
    transition:all 0.3s ease-in-out;
    z-index:2;
}
/* 子图片视图框 - 右侧视图框 - 左图 */
.ray_Carousel_imgSubViewRight>.ray_Carousel_imgDtlLeft{
    width:45%;height:38%;
    transform: rotateY(-6deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:0px;
}
/* 子图片视图框 - 右侧视图框 - 右图 */
.ray_Carousel_imgSubViewRight>.ray_Carousel_imgDtlRight{
    width:50%;height:43%;
    transform: rotateY(-15deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:-10px;
}


/* 子图片视图框 - 右侧视图框2 */
.ray_Carousel_imgSubViewRight2 {
    position:absolute;
    width:200px;
    height:350px;
    top: 50%;
    left: 50%;
    transform: translate(205%, -50%);
    perspective: 150px;
    -webkit-perspective: 150px; /* Safari and Chrome */
    -webkit-filter: grayscale(0.8);
    -moz-filter: grayscale(0.8);
    -o-filter: grayscale(0.8);
    filter: grayscale(0.8);
    transition:all 0.3s ease-in-out;
    z-index:2;
}
/* 子图片视图框 - 右侧视图框2 - 左图 */
.ray_Carousel_imgSubViewRight2>.ray_Carousel_imgDtlLeft{
    width:60%;height:53%;
    transform: rotateY(-15deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left: -13px;
}
/* 子图片视图框 - 右侧视图框2 - 右图 */
.ray_Carousel_imgSubViewRight2>.ray_Carousel_imgDtlRight{
    width:40%;height:65%;
    transform: rotateY(-20deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:-13px;
}


/* 子图片视图框 - 左边外视图框 */
.ray_Carousel_imgSubViewLeftOut {
    position:absolute;
    width:200px;
    height:500px;
    top: 50%;
    left: 50%;
    transform: translate(-405%, -50%);
    perspective: 150px;
    -webkit-perspective: 150px; /* Safari and Chrome */
    -webkit-filter: grayscale(0.8);
    -moz-filter: grayscale(0.8);
    -o-filter: grayscale(0.8);
    filter: grayscale(0.8);
    transition:all 0.3s ease-in-out;
    z-index:1
}
/* 子图片视图框 - 左边外视图框 - 左图 */
.ray_Carousel_imgSubViewLeftOut>.ray_Carousel_imgDtlLeft{
    width:50%;height:76%;
    transform: rotateY(28deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:22px;
}
/* 子图片视图框 - 左边外视图框 - 右图 */
.ray_Carousel_imgSubViewLeftOut>.ray_Carousel_imgDtlRight{
    width:50%;height:57%;
    transform: rotateY(20deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:12px;
}


/* 子图片视图框 - 右边外视图框 */
.ray_Carousel_imgSubViewRightOut {
    position:absolute;
    width:200px;
    height:500px;
    top: 50%;
    left: 50%;
    transform: translate(305%, -50%);
    perspective: 150px;
    -webkit-perspective: 150px; /* Safari and Chrome */
    -webkit-filter: grayscale(0.8);
    -moz-filter: grayscale(0.8);
    -o-filter: grayscale(0.8);
    filter: grayscale(0.8);
    transition:all 0.3s ease-in-out;
    z-index:1
}
/* 子图片视图框 - 右边外视图框 - 左图 */
.ray_Carousel_imgSubViewRightOut>.ray_Carousel_imgDtlLeft{
    width:50%;height:57%;
    transform: rotateY(-20deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:-12px;
}
/* 子图片视图框 - 右边外视图框 - 右图 */
.ray_Carousel_imgSubViewRightOut>.ray_Carousel_imgDtlRight{
    width:50%;height:76%;
    transform: rotateY(-28deg);
    transition:all 0.3s ease-in-out;
    z-index: 9;
    position:relative;
    left:-22px;
}


/*视图框隐藏*/
.imgSubViewHide {
    dislapy:none;
}
/*图隐藏*/
.imgHide {
    dislapy:none;
}


/* 一些特效 ====================================================== */
/* 一些特效 - 中部彩图鼠标样式 */
.ray_Carousel_imgSubViewMiddle>.ray_Carousel_imgDtlLeft{
    cursor: pointer;
}
.ray_Carousel_imgSubViewMiddle>.ray_Carousel_imgDtlRight{
    cursor: pointer;
}
/* 左右两侧图添加蒙版 */
.ray_Carousel_imgSubViewBase>div>div{
    width: 100%;
    height: 100%;
    opacity:0.6;
    background-color: black;
    transition:all 0.3s ease-in-out;
}
.ray_Carousel_imgSubViewMiddle>div>div{
    opacity: 0.0;
    transition:all 0.3s ease-in-out;
}
/* 一些特效 ====================================================== */


/* 图片池============================================== */
.ray_Carousel_imgPool{
    display:none;
}
/* 图片池============================================== */


/* 按钮区域============================================ */
.ray_Carousel_btnView {
    color:#aaaaaa;
    position:absolute;
    width:700px;
    height:100px;
    background-color:transparent;
    overflow:hidden;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 200;
    display: flex;
    justify-content: space-between;
}
/* 按钮左 */
.ray_Carousel_btnLeft {
    cursor:pointer;
    width:100px;
    height:100px;
    border-radius:20px;
    font-size:65px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    text-align:center;
}
/* 按钮右 */
.ray_Carousel_btnRight {
    cursor:pointer;
    width:100px;
    height:100px;
    border-radius:20px;
    font-size:65px;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    text-align:center;
}
/* 按钮区域============================================ */


/* 文字区域的渐隐渐现动画============================== */
.fadeIn {
    opacity : 1.0;
    transition:all 0.15s ease-in-out;
}
.fadeOut {
    opacity : 0.0;
    transition:all 0.15s ease-in-out;
}
/* 文字区域的渐隐渐现动画============================== */