/*


!important;

a{color: #fff; text-decoration: none;}
设置a对象在未被访问前的样式表属性

a:link{color: #fff;text-decoration: none;}
设置a对象在其链接地址已被访问过时的样式表属性。

a:visited{color: #fff;text-decoration: none;}

设置对象在其鼠标悬停时的样式表属性。
a:hover{color: #fff;text-decoration: none;}

设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性。
a:active{color: #fff;text-decoration: none;}

table a{text-decoration: none;}
table a:link{text-decoration: none;}
table a:visited{text-decoration: none;}
table a:hover{text-decoration: none;}
table a:active{text-decoration: none;}


h1. Bootstrap heading     Semibold 36px
h2. Bootstrap heading     Semibold 30px
h3. Bootstrap heading     Semibold 24px
h4. Bootstrap heading     Semibold 18px
h5. Bootstrap heading     Semibold 14px
h6. Bootstrap heading     Semibold 12px

*/




/* 重置默认样式，消除body的边距和滚动条 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 让html和body占满整个浏览器窗口 */
html, body {
    height: 100%;
    overflow: hidden; /* 防止出现滚动条 */
    background-color: #000000; /* 黑边的核心：容器背景设为黑色 */
}


.img-fluid{
    width: 100%;
}

/* 图片容器：作为居中的载体 */
.main-wrapper {
    width: 100%;
    /* 让容器占满body，实现垂直居中的基础 */
    height: 100%;
    /* Flex布局：最简单的水平垂直居中方式 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

/* 核心：控制图片的自适应规则 */
.main-background-image {
    /* 图片最大宽度不超过容器（窗口）的宽度 */
    max-width: 100%;
    /* 图片最大高度不超过容器（窗口）的高度 */
    max-height: 100%;
    /* 保持图片的宽高比，避免拉伸变形 */
    object-fit: contain;
    opacity: 0.1;
}

.video-box{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.video-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}



.pager-background-image{
    position: absolute;
    top: 0;
    left: 0;
}


/* ==================================================================================================== */
/* 果实页面信息面版 ================================================== */
/* ==================================================================================================== */
.fruit-modal-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0, 0.9) 100%);
    /*pointer-events: none;*/
}

.fruit-modal-info-panel{
    position: absolute;
    width: 70%;
    top: 50%;
    left: 50%;
    -webkit-transform:translate(-50%, -50%);
       -moz-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
         -o-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
    /*background-color: rgba(46, 167, 224, 0.5);*/
}

.fruit-modal-close-button{
    position: absolute;
    width: 4%;
    top: 3%;
    left: 98.5%;
    -webkit-transform:translate(-100%, 0%);
       -moz-transform:translate(-100%, 0%);
        -ms-transform:translate(-100%, 0%);
         -o-transform:translate(-100%, 0%);
            transform:translate(-100%, 0%);
    cursor: pointer;
}

.fruit-modal{display: none;}


/* ==================================================================================================== */
/* home 首页 ==================================================================================== */
/* ==================================================================================================== */
.home-title-box{
    color: #ffffff;
}

.home-title{
    position: absolute;
    top: 17.5%;
    left: 5%;
    font-weight: bold;
    white-space: nowrap;
    text-shadow: 8px 8px 8px #000000;
}

.home-title-1{font-size: 8rem;}
.home-title-2{font-size: 5rem;}
.home-title-3{font-size: 2.5rem;font-weight: normal;line-height: 5;}



/* ==================================================================================================== */
/* over 尾页 ==================================================================================== */
/* ==================================================================================================== */
.over-logo{
    position: absolute;
    width: 70%;
    top: 45%;
    left: 50%;
    -webkit-transform:translate(-50%, -50%);
       -moz-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
         -o-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
}

/*.over-title-box{
    color: #ffffff;
    text-align: center;
}

.over-title{
    position: absolute;
    top: 20%;
    left: 50%;
    font-weight: bold;
    white-space: nowrap;
    text-shadow: 8px 8px 8px #000000;
    -webkit-transform:translate(-50%, 0%);
       -moz-transform:translate(-50%, 0%);
        -ms-transform:translate(-50%, 0%);
         -o-transform:translate(-50%, 0%);
            transform:translate(-50%, 0%);
}

.over-title .title-text.text-1{font-size: 8rem;}
.over-title .title-text.text-2{font-size: 6.5rem;}
.over-title .title-text.text-3{font-size: 2.5rem;font-weight: normal;line-height: 5;}*/









/* ==================================================================================================== */
/* pager1 种子 ==================================================================================== */
/* ==================================================================================================== */
.seed{
    position: absolute;
    /*width: 31%; 原大小*/
    width: 25%;
    top: 45%;
    left: 52.5%;
    -webkit-transform:translate(-50%, -50%);
       -moz-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
         -o-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
}

.seed-title{
    position: absolute;
    color: #ffffff;
    text-shadow: 8px 8px 8px #000000;
    font-weight: bold;
    white-space: nowrap;
    -webkit-transform:translate(0%, -50%);
       -moz-transform:translate(0%, -50%);
        -ms-transform:translate(0%, -50%);
         -o-transform:translate(0%, -50%);
            transform:translate(0%, -50%);
}

.seed-title.title{
    font-size: 4.5rem;
    top: 45%;
    left: 5%;
}


/*.seed-title.title-1{
    font-size: 7rem;
    top: 57%;
    left: 25.1%;
}

.seed-title.title-2{
    font-size: 6rem;
    top: 70%;
    left: 50%;

}*/


/* ==================================================================================================== */
/* pager2 CCP 介绍信息面板 ==================================================================================== */
/* ==================================================================================================== */
.ccpinfo-title{
    /*font-weight: bold;*/
    white-space: nowrap;
    position: absolute;
    font-size: 3rem;
    text-shadow: 2px 2px 4px #ffffff;
    top: 43%;
    left: 4%;
    color: #071D49;
    -webkit-transform:translate(0%, -50%);
       -moz-transform:translate(0%, -50%);
        -ms-transform:translate(0%, -50%);
         -o-transform:translate(0%, -50%);
            transform:translate(0%, -50%);
}


.ccpinfo-background-image{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.ccp-modal-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0, 0.9) 100%);
    /*pointer-events: none;*/
}

.ccp-modal-info-panel{
    position: absolute;
    width: 70%;
    top: 50%;
    left: 50%;
    -webkit-transform:translate(-50%, -50%);
       -moz-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
         -o-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
}

.ccp-modal-close-button{
    position: absolute;
    width: 4%;
    top: 3%;
    left: 98.5%;
    -webkit-transform:translate(-100%, 0%);
       -moz-transform:translate(-100%, 0%);
        -ms-transform:translate(-100%, 0%);
         -o-transform:translate(-100%, 0%);
            transform:translate(-100%, 0%);
    cursor: pointer;
}

.ccp-button{
    position: absolute;
    width: 5%;
    left: 97%;
    -webkit-transform:translate(-100%, 0%);
       -moz-transform:translate(-100%, 0%);
        -ms-transform:translate(-100%, 0%);
         -o-transform:translate(-100%, 0%);
            transform:translate(-100%, 0%);
    cursor: pointer;
}

.ccp-button.button-1{top: 25%;}

.ccp-button .ccp-button-background{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(46, 167, 224, 0.2);
    /*border: 1px solid #ffffff;*/
    /*background-color: transparent;*/
    border-radius: 50%;
}

.ccp-button:hover .ccp-button-background{
    background-color: rgba(46, 167, 224, 0.5);
}







/* ==================================================================================================== */
/* pager2 CCP 介绍信息面板 ==================================================================================== */
/* ==================================================================================================== */

/* ========== 果 ========== */
.fruit-img{
    position: absolute;
    width: 43.1%;
    top: 30%;
    left: 50%;
    -webkit-transform:translate(-50%, 0%);
       -moz-transform:translate(-50%, 0%);
        -ms-transform:translate(-50%, 0%);
         -o-transform:translate(-50%, 0%);
            transform:translate(-50%, 0%);
}



.fruit{
    position: absolute;
    width: 5%;
    -webkit-transform:translate(-50%, -50%);
       -moz-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
         -o-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
    cursor: pointer;
}


.fruit img{opacity: 0;}

.fruit.fruit-1{
    top: 54.5%;
    left: 32.5%;
}

.fruit.fruit-2{
    top: 37.5%;
    left: 41.9%;
}

.fruit.fruit-3{
    top: 37.5%;
    left: 59.5%;
}

.fruit.fruit-4{
    top: 54.6%;
    left: 68.8%;
}

/*.fruit.fruit-5{
    top: 44%;
    left: 61.75%;
}
.fruit.fruit-6{
    top: 26.5%;
    left: 48%;
}
.fruit.fruit-7{
    top: 32%;
    left: 61%;
}
.fruit.fruit-8{
    top: 52%;
    left: 57%;
}*/


.fruit.fruit-1 .animation{
    -webkit-animation: light-zoomup 4s infinite linear;
       -moz-animation: light-zoomup 4s infinite linear;
         -o-animation: light-zoomup 4s infinite linear;
            animation: light-zoomup 4s infinite linear;
}


.fruit.fruit-2 .animation{
    -webkit-animation: light-zoomup 5s infinite linear;
       -moz-animation: light-zoomup 5s infinite linear;
         -o-animation: light-zoomup 5s infinite linear;
            animation: light-zoomup 5s infinite linear;
}

.fruit.fruit-3 .animation{
    -webkit-animation: light-zoomup 4.5s infinite linear;
       -moz-animation: light-zoomup 4.5s infinite linear;
         -o-animation: light-zoomup 4.5s infinite linear;
            animation: light-zoomup 4.5s infinite linear;
}

.fruit.fruit-4 .animation{
    -webkit-animation: light-zoomup 5.5s infinite linear;
       -moz-animation: light-zoomup 5.5s infinite linear;
         -o-animation: light-zoomup 5.5s infinite linear;
            animation: light-zoomup 5.5s infinite linear;
}

.fruit-border-box{
    position: relative;
    width: 100%;
    height: 100%;
}
.fruit-background-box{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform:translate(-50%, -50%);
       -moz-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
         -o-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
}

.fruit-background-box .fruit-border{
    width: 100%;
    height: 100%;
    border: 1px solid #ffffff;
    border-radius: 50%;
    background-color: transparent;
}
.fruit-background-box .fruit-border.animation{
    -webkit-animation: zoom_out_fade 1s infinite linear;
       -moz-animation: zoom_out_fade 1s infinite linear;
         -o-animation: zoom_out_fade 1s infinite linear;
            animation: zoom_out_fade 1s infinite linear;
}



.fruit-info-panel{
    position: absolute;
    width: 22.5%;
    background-color: rgba(46, 167, 224, 0.4);
    -webkit-transform:translate(-50%, 0%);
       -moz-transform:translate(-50%, 0%);
        -ms-transform:translate(-50%, 0%);
         -o-transform:translate(-50%, 0%);
            transform:translate(-50%, 0%);
    cursor: pointer;
}

.fruit-info-panel.panel-1{top: 30%;left: 16%;}
.fruit-info-panel.panel-2{top: 65%;left: 35%;}
.fruit-info-panel.panel-3{top: 65%;left: 65%;}
.fruit-info-panel.panel-4{top: 30%;left: 84%;}

.fruit-info-panel.panel-5{top: 12%;left: 16%;}
.fruit-info-panel.panel-6{top: 12%;left: 84%;}
.fruit-info-panel.panel-7{top: 55%;left: 50%;}










/* ==================================================================================================== */
/* ========== 图标提示动画 圆从小放大至循环 ========== */
/* ==================================================================================================== */
/* Safari 和 Chrome */
@-webkit-keyframes zoom_out_fade {
    0%   { opacity: 0;-webkit-transform: scale(0);   }
    50%  { opacity: 1;-webkit-transform: scale(1); }
    100% { opacity: 0;-webkit-transform: scale(1.2);   }
}
/* Firefox */
@-moz-keyframes zoom_out_fade { 
    0%   { opacity: 0;-webkit-transform: scale(0);   }
    50%  { opacity: 1;-webkit-transform: scale(1); }
    100% { opacity: 0;-webkit-transform: scale(1.2);   }
}
/* Opera */
@-o-keyframes zoom_out_fade { 
    0%   { opacity: 0;-webkit-transform: scale(0);   }
    50%  { opacity: 1;-webkit-transform: scale(1); }
    100% { opacity: 0;-webkit-transform: scale(1.2);   }
}
@keyframes zoom_out_fade { 
    0%   { opacity: 0;-webkit-transform: scale(0);   }
    50%  { opacity: 1;-webkit-transform: scale(1); }
    100% { opacity: 0;-webkit-transform: scale(1.2);   }
}











/* ================================================== */
/*顺时针clockwise*/
/* ================================================== */
/* Safari 和 Chrome */
@-webkit-keyframes sun_rotate_clockwise_animation { 
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
/* Firefox */
@-moz-keyframes sun_rotate_clockwise_animation { 
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
/* Opera */
@-o-keyframes sun_rotate_clockwise_animation { 
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes sun_rotate_clockwise_animation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}


/* ================================================== */
/* 逆时针 anticlockwise */
/* ================================================== */
/* Safari 和 Chrome */
@-webkit-keyframes sun_rotate_anticlockwise_animation { 
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
    }
}
/* Firefox */
@-moz-keyframes sun_rotate_anticlockwise_animation { 
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
    }
}
/* Opera */
@-o-keyframes sun_rotate_anticlockwise_animation { 
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
    }
}
@keyframes sun_rotate_anticlockwise_animation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
    }
}



/* ==================================================================================================== */
/* 左右播放键 ==================================================================================== */
/* ==================================================================================================== */
.home-start-button,
.pager-jump-button.prev,
.pager-jump-button.next{
    position: absolute;
    -webkit-transform:translate(-50%, -50%);
       -moz-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
         -o-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
    cursor: pointer;
}
.pager-jump-button.prev{
    width: 2%;
    top: 92.5%;
    left: 2%;
}

.home-start-button,
.pager-jump-button.next{
    width: 7.5%;
    top: 12.5%;
    left: 95%;
}


.pager-jump-button.prev .animation{
    -webkit-animation: prev_move_animation 1.5s infinite ease-in-out;
       -moz-animation: prev_move_animation 1.5s infinite ease-in-out;
         -o-transform: prev_move_animation 1.5s infinite ease-in-out;
            animation: prev_move_animation 1.5s infinite ease-in-out;
}


/* Safari 和 Chrome */
@-webkit-keyframes prev_move_animation { 
    0% {
        opacity: 0.1;
        -webkit-transform: translate3d(16px, 0, 0);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate3d(8px, 0, 0);
    }
    100% {
        opacity: 0.1;
        -webkit-transform: translate3d(0px, 0, 0);
    }
}
/* Firefox */
@-moz-keyframes prev_move_animation { 
    0% {
        opacity: 0.1;
        -webkit-transform: translate3d(16px, 0, 0);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate3d(8px, 0, 0);
    }
    100% {
        opacity: 0.1;
        -webkit-transform: translate3d(0px, 0, 0);
    }
}
/* Opera */
@-o-keyframes prev_move_animation { 
    0% {
        opacity: 0.1;
        -webkit-transform: translate3d(16px, 0, 0);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate3d(8px, 0, 0);
    }
    100% {
        opacity: 0.1;
        -webkit-transform: translate3d(0px, 0, 0);
    }
}
@keyframes prev_move_animation {
    0% {
        opacity: 0.1;
        transform: translate3d(16px, 0, 0);
    }
    50% {
        opacity: 1;
        transform: translate3d(8px, 0, 0);
    }
    100% {
        opacity: 0.1;
        transform: translate3d(0px, 0, 0);
    }
}

.home-start-button .animation,
.pager-jump-button.next .animation{
    -webkit-animation: next_move_animation 1.5s infinite ease-in-out;
       -moz-animation: next_move_animation 1.5s infinite ease-in-out;
         -o-transform: next_move_animation 1.5s infinite ease-in-out;
            animation: next_move_animation 1.5s infinite ease-in-out;
}


/* Safari 和 Chrome */
@-webkit-keyframes next_move_animation { 
    0% {
        opacity: 0.1;
        -webkit-transform: translate3d(-16px, 0, 0);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate3d(-8px, 0, 0);
    }
    100% {
        opacity: 0.1;
        -webkit-transform: translate3d(0px, 0, 0);
    }
}
/* Firefox */
@-moz-keyframes next_move_animation { 
    0% {
        opacity: 0.1;
        -webkit-transform: translate3d(-16px, 0, 0);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate3d(-8px, 0, 0);
    }
    100% {
        opacity: 0.1;
        -webkit-transform: translate3d(0px, 0, 0);
    }
}
/* Opera */
@-o-keyframes next_move_animation { 
    0% {
        opacity: 0.1;
        -webkit-transform: translate3d(-16px, 0, 0);
    }
    50% {
        opacity: 1;
        -webkit-transform: translate3d(-8px, 0, 0);
    }
    100% {
        opacity: 0.1;
        -webkit-transform: translate3d(0px, 0, 0);
    }
}
@keyframes next_move_animation {
    0% {
        opacity: 0.1;
        transform: translate3d(-16px, 0, 0);
    }
    50% {
        opacity: 1;
        transform: translate3d(-8px, 0, 0);
    }
    100% {
        opacity: 0.1;
        transform: translate3d(0px, 0, 0);
    }
}






/* ==================================================================================================== */
/* 左右播放键 ==================================================================================== */
/* ==================================================================================================== */
/*#prev,
#next,*/


/*#home,
#home .home-title,
#home .home-text,
#home .home-start-button,*/

#pager1,
#pager1 .seed-title,
#pager1 .seed,
#pager1 .seed-separation,
#pager1 .seed-button,
#pager1 .info-panel,

#pager2,
#pager2 .sun,

#pager3,
#pager3 #pager3-canvas,
#pager3 #pager3-rain-button,

#pager4,
#pager4 .fence,

#pager5,
#pager5 .scissors,

#pager6,
/*#pager6 .flower,*/
#pager6 .fruit,
#pager6 .fruit-info-panel,

#over .over-title,
#over .over-text
{
    /*display: none;*/
}







/* ==================================================================================================== */
/* ========== 放大缩小动画 ==================================================================================== */
/* ==================================================================================================== */
/* Safari 和 Chrome */
@-webkit-keyframes light-zoomup {
    0%   { -webkit-transform: scale(1);   }
    50%  { -webkit-transform: scale(1.1); }
    100% { -webkit-transform: scale(1);   }
}
/* Firefox */
@-moz-keyframes light-zoomup { 
    0%   { -moz-transform: scale(1);   }
    50%  { -moz-transform: scale(1.1); }
    100% { -moz-transform: scale(1);   }
}
/* Opera */
@-o-keyframes light-zoomup { 
    0%   { -o-transform: scale(1);   }
    50%  { -o-transform: scale(1.1); }
    100% { -o-transform: scale(1);   }
}
@keyframes light-zoomup { 
    0%   { transform: scale(1);   }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1);   }
}