*{
    margin:0;
    outline:0;
    padding:0;
}
body{
    font: 14px/1.6 Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
    color:#275477;
    /* text-rendering: optimizeLegibility;
    image-rendering: -webkit-optimize-contrast;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; */
}

ul,li{
    margin:0;
    padding:0;
    list-style: none;
}

@-webkit-keyframes starRotate {
    0%, 80%, 100% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: rotate3d(0, 0, 1, -200deg);
      transform: rotate3d(0, 0, 1, -200deg);
      opacity: 0;
    }
  
    20% {
      -webkit-transform-origin: center;
      transform-origin: center;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  
  @keyframes starRotate {
    0%, 80%, 100% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: rotate3d(0, 0, 1, -200deg);
        transform: rotate3d(0, 0, 1, -200deg);
        opacity: 0;
      }
    
      20% {
        -webkit-transform-origin: center;
        transform-origin: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        opacity: 1;
      }
  }

@-webkit-keyframes pulse {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    50% {
      -webkit-transform: scale3d(1.05, 1.05, 1.05);
      transform: scale3d(1.05, 1.05, 1.05);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  
  @keyframes pulse {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    50% {
      -webkit-transform: scale3d(1.05, 1.05, 1.05);
      transform: scale3d(1.05, 1.05, 1.05);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

#pagepiling{
    width:100%;
    max-width:600px;
    margin:auto;
}

.section{
    width:100%;
    max-width:600px;
    margin:auto;
    opacity:0;
    background-color:#FFF;
    overflow:hidden;
}

.section.active{
    opacity:1;
}

.section .wrap{
    padding:40px 30px 15px;
    position:relative;
}

.section.sec-int .wrap{
    padding:40px 15px 15px;
}

img{
    max-width:100%;
    max-height:100%;
}

.loading,
img.animated,
.artList li.animated,
.music{
    opacity:1;
}

#preload{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    height:100%;
    width:100%;
    max-width:600px;
    margin:auto;
    z-index:99;
    display:flex;
    background-image:url('../images/cover/bg.jpg?v=1.1');
    background-position: top center;
    background-size:cover;
    background-repeat: no-repeat;
    align-items: center;
    justify-content: center;
}

.loading{
    width: 10%;
}

.audioControl{
    position:absolute;
    right:20px;
    top:30px;
    z-index: 999;
    cursor:pointer;
}

.audioControl .music{
    width:30px;
    height:30px;
}

@-webkit-keyframes rotating{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(1turn);
    }
}

@keyframes rotating{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(1turn);
    }
}

.audioControl .music.rotate{
    -webkit-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite;
}

.arrowMoveToBtn{
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 150;
    width: 40px;
    height: 33px;
    margin-left: -20px;
    cursor:pointer;
}

@-webkit-keyframes arrowMove{
    0%, 30%{
        opacity:0;
        transform: translateY(-8px);
    }
    60%{
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes arrowMove{
    0%, 30%{
        opacity:0;
        transform: translateY(-8px);
    }
    60%{
        opacity: 1;
        transform: translateY(0);
    }
    100%{
        opacity: 0;
        transform: translateY(10px);
    }
}

.arrowMoveToBtn .wrap{
    width: 40px;
    height: 33px;
    position: relative;
    -webkit-animation: arrowMove 1.5s infinite ease-in-out;
    animation: arrowMove 1.5s infinite ease-in-out;
}

.arrowMoveToBtn .wrap .arrow{
    background-image: url('../images/arrow.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 40px;
    height: 33px;
}

/* .arrowMoveToBtn .wrap .b1:before{
    transform: rotate(130deg);
    -webkit-transform: rotate(130deg);
    left: 1px;
}

.arrowMoveToBtn .wrap .b2{
    left:10px;
}

.arrowMoveToBtn .wrap .b2:before{
    left: -4.5px;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
} */


@keyframes bigZoomIn {
    from {
        opacity: 0;
        -webkit-transform: scale3d(2.3, 2.3, 2.3);
        transform: scale3d(2.3, 2.3, 2.3);
    }
    50% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    70% {
        opacity:0.7;
        -webkit-transform: scale3d(1.15, 1.15, 1.15);
        transform: scale3d(1.15, 1.15, 1.15);
    }
    80% {
        -webkit-transform: scale3d(0.85, 0.85, 0.85);
        transform: scale3d(0.85, 0.85, 0.85);
    }
    90% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.bigZoomIn {
    -webkit-animation-name: bigZoomIn;
    animation-name: bigZoomIn;
}

@keyframes loveZoomIn {
    0% {
        position:absolute;
        z-index:999;
        opacity: 0;
        -webkit-transform: scale3d(1.6, 1.6, 1.6);
        transform: scale3d(1.6, 1.6, 1.6);
        animation-timing-function: cubic-bezier(0.55, 0.675, 0.35);
        top:-300px;
    }
    10% {
        opacity: 1;
    }
    70%{
        position:absolute;
        top:0;
        -webkit-transform: scale3d(1.6, 1.6, 1.6);
        transform: scale3d(1.6, 1.6, 1.6);
    }
    100% {
        position:relative;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

.loveZoomIn {
    -webkit-animation-name: loveZoomIn;
    animation-name: loveZoomIn;
}

#cv-bg, .int-bg{
    position:absolute;
    z-index:0;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-position: top center;
    background-size:cover;
    background-repeat: no-repeat;
}


#section-cover{
    
}

    #section-cover img{
        position:absolute;
    }

    #cv-bg{
        background-image:url('../images/cover/bg2v2.jpg');
    }

    #cv-bg img{
        top:0;
        left:0;
        right:0;
    }

    #cv-date{
        font-size:12px;
        position:absolute;
        right:15px;
        bottom:20px;

    }

    @-webkit-keyframes cvBgAni01 {
        0% {
            opacity:0;
        }
        50% {
            opacity:1;
            transform: cubic-bezier(.17,.67,.91,.36);
        }
        100% {
            opacity:0;
        }
    }

    @keyframes cvBgAni01 {
        0% {
            opacity:0;
        }
        50% {
            opacity:1;
            transform: cubic-bezier(.17,.67,.91,.36);
        }
        100% {
            opacity:0;
        }
    }

    @-webkit-keyframes cvBgAni02 {
        0% {
            opacity:0;
        }
        50% {
            opacity:1;
            transform: cubic-bezier(.21,.97,.92,.36);
        }
        100% {
            opacity:0;
        }
    }

    @keyframes cvBgAni02 {
        0% {
            opacity:0;
        }
        50% {
            opacity:1;
            transform: cubic-bezier(.21,.97,.92,.36);
        }
        100% {
            opacity:0;
        }
    }

    @-webkit-keyframes cvBgAni03 {
        0% {
            opacity:0;
        }
        50% {
            opacity:1;
            transform: cubic-bezier(.4,.14,.92,.36);
        }
        100% {
            opacity:0;
        }
    }

    @keyframes cvBgAni03 {
        0% {
            opacity:0;
        }
        50% {
            opacity:1;
            transform: cubic-bezier(.4,.14,.92,.36);
        }
        100% {
            opacity:0;
        }
    }

    .cv-bg-01{
        opacity:0.3;
        -webkit-animation: cvBgAni01 8s infinite;
        animation: cvBgAni01 8s infinite;
    }

    .cv-bg-02{
        opacity:0.6;
        -webkit-animation: cvBgAni02 12s infinite;
        animation: cvBgAni02 12s infinite;
    }

    .cv-bg-03{
        opacity:0.45;
        -webkit-animation: cvBgAni03 5s infinite;
        animation: cvBgAni03 5s infinite;
    }

    #cv-logo{
        top:8vw;
        width:65%;
        left:0;
        right:0;
        margin:auto;
    }

    #cv-title-line{

    }

    #cv-title-line img{
        top:20vw;
    }

    #cv-title-01{
    }

    #cv-title-02{
        animation: cvBgAni02 3s infinite;
    }

    #cv-title{
        top:20vw;
        -webkit-filter: drop-shadow(0 0 6px #333);
        filter: drop-shadow(0 0 6px #333);
    }

    #cv-line{
        
    }
    
        #cv-line img{
            top:40vw;
            
        }

        #cv-left{

        }

        #cv-right{

        }

    #cv-tag-wrap{
        position:absolute;
        top:70vw;
        width:100%;
        height:80px;
    }

    #cv-tag{
        width:58%;
        left:0;
        right:0;
        margin:auto;
        opacity:1;
        -webkit-filter: drop-shadow(5px 5px 6px #001f52);
        filter: drop-shadow(5px 5px 6px #001f52);
        /* -webkit-animation: pulse 2s infinite;
        animation: pulse 2s infinite; */
    }

    #cv-building{
        bottom:0;
        width:90%;
        left:0;
        right:0;
        margin:auto;
    }

    #cv-bottom{
        bottom:0;
    }

.artList{
    padding-left:30px;
}

.artList li{
    opacity:0;
    margin-bottom:10px;
    padding-left:30px;
}

.artList li .alIcon{

}

.artList li:before, .itemList li > div:before{
    content:'';
    transform: scale(0) rotate(-360deg);
    background-color:#013991;
    width:8px;
    height:8px;
    float:left;
    margin-top:8px;
    margin-left:-30px;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

.artList li.animated:before, .itemList li > div.animated:before{
    transform: scale(1) rotate(0);
}

#sec-text-item-hd-1,
#sec-text-item-hd-2{
    text-align:center;
    font-size:16px;
    font-weight:bold;
}

#sec-text-item-hd-1{

}

#sec-text-item-ct-2{
    font-size:13px;
    padding:10px;
    margin-top:20px;
    border-radius:6px;
    background-color:rgba(255, 255, 255, 0.85);
    box-shadow:0 0 6px #a7a7a7;
}

hr{
    margin:15px 0;
    border: none;
    background: #CCC;
    height: 2px;
}

#sec-text-item-hd-2{
    
}

#sec-text-item-subhd-1,
#sec-text-item-subhd-2{
    text-align:center;
    font-size:15px;
    font-weight:bold;
    margin-bottom:10px;
}

#sec-text-item-subhd-1{
    
}

#sec-text-item-subhd-2{
    
}

.pointList{
    position:relative;
    text-align:center;
}

    .pointList li{
        
    }

    .pointList li:after{
        content:'';
        clear:both;
        display:block;
    }

    .pointList li > div{
        color:#FFF;
        box-shadow:0 0 8px #CCC;
        border-radius:20px;
        display:inline-block;
        padding:7px 15px;
        position:relative;
        font-size:14px;
        text-align:center;
    }

    #sec-text-item-4a,
    #sec-text-item-4d{
        display:block;
        margin-bottom:10px;
    }

    #sec-text-item-4b,
    #sec-text-item-4e{
        float:left;
    }

    #sec-text-item-4c,
    #sec-text-item-4f{
        float:right;
    }

    #sec-text-item-4b,
    #sec-text-item-4c,
    #sec-text-item-4e,
    #sec-text-item-4f{
        display:inline-block;
        width:calc(44% - 15px);
    }

    #sec-text-item-4a{
        background-color:#2777b1;
    }

    #sec-text-item-4b{
        background-color:#155c27;
    }

    #sec-text-item-4c{
        background-color:#c40d44;
    }

    #sec-text-item-4d{
        background-color:#531db6;
    }

    #sec-text-item-4e{
        background-color:#db981b;
    }

    #sec-text-item-4f{
        background-color:#0178cc;
    }

    /* .pointList li > div div{
        position:absolute;
        left:0;
        right:0;
        top:0;
        bottom:0;
        display:flex;
        flex-wrap:wrap;
        align-items: center;
        justify-content: center;
        word-break: break-word;
        padding:0 10px;
    } */

.itemList{

}

    .itemList li{
        padding:15px 0 15px 30px;
    }

    .itemList li > div{
        
    }

    #sec-text-item-1a, 
    #sec-text-item-1b,
    #sec-text-item-2a,
    #sec-text-item-2b,
    #sec-text-item-5a,
    #sec-text-item-5b{
        font-size:16px;
        font-weight:bold;
    }

    #sec-text-item-1a .letters, 
    #sec-text-item-1b .letters,
    #sec-text-item-2a .letters,
    #sec-text-item-2b .letters,
    #sec-text-item-5a .letters,
    #sec-text-item-5b .letters{
        display:flex;
        flex-wrap:wrap;
    }

    #sec-text-item-1a span, 
    #sec-text-item-1b span,
    #sec-text-item-2a span, 
    #sec-text-item-2b span,
    #sec-text-item-5a span,
    #sec-text-item-5b span{
        color: #fff;
        background-color:#2777b1;
    }

    #sec-text-int-1{
        text-align:justify;
        font-size:12px;
        padding:15px;
        position:relative;
        box-shadow:0 0 8px #8e8e8e;
        background-color:#FFF;
    }

    #sti-line-l,
    #sti-line-t,
    #sti-line-r,
    #sti-line-b{
        position:absolute;
        transform: scale(0);
        -webkit-transition: all 1s linear;
        -moz-transition: all 1s linear;
        -ms-transition: all 1s linear;
        -o-transition: all 1s linear;
        transition: all 1s linear;
    }

    #sti-line-l,
    #sti-line-r{
        background: rgba(243,226,199,1);
        background: -moz-linear-gradient(top, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 45%, rgba(233,212,179,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(243,226,199,1)), color-stop(45%, rgba(182,141,76,1)), color-stop(100%, rgba(233,212,179,1)));
        background: -webkit-linear-gradient(top, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 45%, rgba(233,212,179,1) 100%);
        background: -o-linear-gradient(top, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 45%, rgba(233,212,179,1) 100%);
        background: -ms-linear-gradient(top, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 45%, rgba(233,212,179,1) 100%);
        background: linear-gradient(to bottom, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 45%, rgba(233,212,179,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3', GradientType=0 );
    }

    #sti-line-t,
    #sti-line-b{
        background: rgba(243,226,199,1);
        background: -moz-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 45%, rgba(233,212,179,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(243,226,199,1)), color-stop(45%, rgba(182,141,76,1)), color-stop(100%, rgba(233,212,179,1)));
        background: -webkit-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 45%, rgba(233,212,179,1) 100%);
        background: -o-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 45%, rgba(233,212,179,1) 100%);
        background: -ms-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 45%, rgba(233,212,179,1) 100%);
        background: linear-gradient(to right, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 45%, rgba(233,212,179,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3', GradientType=1 );
    }

    #sti-line-l{
        left:5px;
        top:5px;
        bottom:5px;
        width:4px;
        transform-origin: left bottom;
    }

    #sti-line-t{
        left:5px;
        top:5px;
        right:5px;
        height:4px;
        transform-origin: left top;
    }

    #sti-line-r{
        right:5px;
        top:5px;
        bottom:5px;
        width:4px;
        transform-origin: right top;
    }

    #sti-line-b{
        left:5px;
        right:5px;
        bottom:5px;
        height:4px;
        transform-origin: right bottom;
    }

    .animated #sti-line-l,
    .animated #sti-line-t,
    .animated #sti-line-r,
    .animated #sti-line-b{
        transform: scale(1);
        transition: transform 3s linear 3.5s;
    }

@-webkit-keyframes bounce {
    from,
    5%,
    10%,
    20%,
    30%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    14% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    
    26% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    from,
    5%,
    10%,
    20%,
    30%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    14% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    
    26% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@-webkit-keyframes bounce2 {
    from,
    10%,
    15%,
    25%,
    40%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    19% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    
    31% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce2 {
    from,
    10%,
    15%,
    25%,
    40%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    19% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    
    31% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@-webkit-keyframes bounce3 {
    from,
    15%,
    20%,
    30%,
    45%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    24% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    
    36% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce3 {
    from,
    15%,
    20%,
    30%,
    45%,
    to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    
    24% {
        -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    
    36% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

.itemListS2{

}

    .itemListS2 li{
        padding:10px 0;
    }

    .itemListS2 li:nth-child(1){
        animation: bounce 2s ease-in-out 3s;
    }

    .itemListS2 li:nth-child(2){
        animation: bounce2 2s ease-in-out 4s;
    }

    .itemListS2 li:nth-child(3){
        animation: bounce3 2s ease-in-out 5s;
    }

    .itemListS2 li:nth-child(4){
        animation: bounce3 2s ease-in-out 6s;
    }

    .itemListS2 li > div{
        background: rgba(255,255,255,1);
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 21%, rgba(246,246,246,1) 58%, rgba(237,237,237,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(21%, rgba(255,255,255,1)), color-stop(58%, rgba(246,246,246,1)), color-stop(100%, rgba(237,237,237,1)));
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 21%, rgba(246,246,246,1) 58%, rgba(237,237,237,1) 100%);
        background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 21%, rgba(246,246,246,1) 58%, rgba(237,237,237,1) 100%);
        background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 21%, rgba(246,246,246,1) 58%, rgba(237,237,237,1) 100%);
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 21%, rgba(246,246,246,1) 58%, rgba(237,237,237,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed', GradientType=0 );
        border-radius:6px;
        border:1px solid #FFF;
        box-shadow:0 0 8px #CCC;
        padding:10px 15px;
        position:relative;
        overflow:hidden;
    }

    .itemListS2 li > div:before{
        content:'';
        position:absolute;
        width:90px;
        height:90px;
        top:-10px;
        left:-30px;
        border-radius:45px;
        background-color:#97c2f7;
        opacity:0.2;
        z-index:2;
        transform:scale(0);
        transform-origin: left;
    }

    .itemListS2 li div.animated:before{
        transform: scale(1);
        transition: transform 1.5s linear 1s;
    }


.letters{

}

.letters.bold{
    font-weight:bold;
    font-size:16px;
}

.letter{
    opacity:0;
}

.sec-text-point .letters.bold{
    font-size:14px;
}

.sec-text-point .letter{
    font-size:12px;
}

@keyframes intBgAni {
    0% {
        opacity:0;
    }
    20% {
        opacity:1;
    }
    40% {
        opacity:0;
    }
}

.int-bg,.int-bg .ani{
    background-repeat: no-repeat;
    background-position: center top;
    background-size:cover;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:0;
}

.int-bg.ibg-01{
    background-image: url('../images/celebration_bg_o_1.jpg');
}

.int-bg.ibg-02{
    background-image: url('../images/celebration_bg_o_2.jpg');
}

.int-bg.ibg-03{
    background-image: url('../images/intro/bg.jpg');
}

.int-bg.ibg-04{
    background-image: url('../images/celebration_bg_o.jpg');
}

.int-bg.ibg-04 .ani{
    opacity:0;
    background-image:url('../images/celebration_bg.jpg');
    animation: intBgAni 1.5s ease-in infinite alternate;
}

#sec-int-h-4 img,
#sec-int-h-4 img,
#sec-int-t-5 img{
    opacity:1;
}

#int1-bg-1a,
#int1-bg-1b,
#int1-bg-1c,
#int1-bg-1d,
#int2-bg-1a,
#int2-bg-1b,
#int2-bg-1c,
#int2-bg-1d{
    background-repeat: no-repeat;
    background-position:center bottom;
    background-size:100%;
    position:absolute;
    z-index:0;
    bottom:0;
    display:flex;
    align-items:baseline;
}

#int1-bg-1a{
    
}

#int1-bg-1b{
    
}

#int1-bg-1c{
    
}

#int1-bg-1d{
    
}

.sec-photo{

}

    .photo-bg{
        background-image:url('../images/inner_bg.jpg');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: cover;
        position:absolute;
        left:0;
        top:0;
        right:0;
        bottom:0;
        z-index:0;
    }

    .photo-bot{
        background-image:url('../images/inner_bottom2.png');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: cover;
        position:absolute;
        left:0;
        right:0;
        bottom:0;
        height:0;
        padding-top:29.06%;
    }

    .sec-photo img, #sec-int-t-5 img{
        border:6px solid #FFF;
        border-radius:6px;
        box-shadow:0 0 16px #001f52;
    }

    .sec-photo img{
        width:80%;
    }

    .sec-photo h2,
    .sec-photo h3{
        color:#FFF;
        text-shadow: 0 0 6px #001f52;
        text-align:center;
    }

    .sec-photo h2{
        font-size:24px;
    }

    .sec-photo h3{
        font-size:26px;
        margin-bottom:20px;
    }

    .sec-photo .wrap > div{
        position:relative;
    }
    .sec-photo #sec-photo-6-1 img{
        margin-left:5%;
    }
    .sec-photo #sec-photo-6-2 img{
        margin-left:15%;
    }
    .sec-photo #sec-photo-6a-1 img{
        margin-left:15%;
    }
    .sec-photo #sec-photo-6a-2 img{
        margin-left:3%;
    }
    .sec-photo #sec-photo-7-1 img{
        margin-left:15%;
    }
    .sec-photo #sec-photo-7-2 img{
        margin-left:4%;
    }
    .sec-photo #sec-photo-7a-1 img{
        margin-left:6%;
    }
    .sec-photo #sec-photo-7a-2 img{
        margin-left:14%;
    }
    .sec-photo #sec-photo-8-1 img{
        margin-left:5%;
    }
    .sec-photo #sec-photo-8-2 img{
        margin-left:15%;
    }
    .sec-photo #sec-photo-9-1 img{
        margin-left:15%;
    }
    .sec-photo #sec-photo-9-2 img{
        margin-left:5%;
    }
    .sec-photo #sec-photo-10-1 img{
        margin-left:25%;
        width:60%;
    }
    .sec-photo #sec-photo-10-2 img{
        margin-left:5%;
        width:60%;
    }
    .sec-photo #sec-photo-10-3 img{
        margin-left:15%;
        width:60%;
    }
    .sec-photo #sec-photo-11-1 img{
        margin-left:5%;
    }
    .sec-photo #sec-photo-11-2 img{
        margin-left:17%;
    }
    .sec-photo #sec-photo-12-1 img{
        margin-left:15%;
    }
    .sec-photo #sec-photo-12-2 img{
        margin-left:5%;
    }

.sec-text{
    background-image:url('../images/inner_bottom.gif');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size:100%;
}

.sec-text:before{
    content:'';
    background-image:url('../images/building.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size:100%;
    padding-top:59.53%;
    height:0;
    position:absolute;
    left:0;
    right:0;
    bottom:30vw;
    opacity:0.25;
    z-index:0;
}

.sec-text.no-bui:before{
    background-image:none;
}

.sec-text .wrap{
    padding-top:0;
    padding-bottom:0; 
}

.sec-text h4{
    margin-bottom:15px;
}

.sec-temp1-header{
    background-color:#FFF;
    overflow:hidden;
    color:#FFF;
    padding-top:39.6%;
    font-size:19px;
    font-size:5.4vw;
    overflow:hidden;
    position:relative;
    text-shadow: 0 0 6px #111;
}

.sec-temp1-header:before{
    content:'';
    background-image:url('../images/inner_top.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size:cover;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    z-index:0;

}

.sec-temp1-header:after{
    content:'';
    background-color:#FFF;
    box-shadow:0 0 10px #001f52;
    position:absolute;
    z-index:0;
    left:0;
    right:0;
    bottom:-50px;
    height:80px;
    transform:skewY(-5deg);
}

.sec-temp1-header div{
    position:absolute;
    top:15px;
    left:15px;
    z-index:4;
}

#sec-data-p1,
#sec-data-p1a,
#sec-data-p2,
#sec-data-p2a,
#sec-data-p3,
#sec-data-p3a,
#sec-data-p4,
#sec-data-p4a,
#sec-data-p5,
#sec-data-p5a,
#sec-data-p6,
#sec-data-p6a,
#sec-data-p7,
#sec-data-p7a,
#sec-data-p8,
#sec-data-p8a,
#sec-data-p9,
#sec-data-p10{
    position:absolute;
    left:0;
    right:0;
}

#sec-data-p1,
#sec-data-p1a,
#sec-data-p2,
#sec-data-p2a,
#sec-data-p3{
    top:35vw;
}

#sec-data-p3a,
#sec-data-p4,
#sec-data-p4a,
#sec-data-p5{
    top:58vw;
}

#sec-data-p5a{
    top:66vw;
}

#sec-data-p6{
    top:81vw;
}

#sec-data-p6a{
    top:83vw;
}

#sec-data-p7{
    top:95vw;
}

#sec-data-p7a{
    top:96vw;
}

#sec-data-p8{
    top:107vw;
}

#sec-data-p8a{
    top:110vw;
}

#sec-data-p9{
    top:117vw;
}

#star1,
#star2{
    position:absolute;
    width:20%;
}

#star1{
    left:5%;
    bottom:-15px;
}

#star2{
    top:-5px;
    right:5%;
}

#star1 img,
#star2 img{
    
}

#star1 img{
    animation: starRotate 2s infinite ease-in-out;
}

#star2 img{
    animation: starRotate 4s infinite ease-in-out;
}

#sec-data-p10{
    padding:0 35px;
    top:144vw;
    font-size:12px;
    color:#013991;
}

.sec-data-img{
    opacity:0;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}

.animated > .sec-data-img{
    opacity:1;
    -webkit-transition: all 1s linear 1s;
    -moz-transition: all 1s linear 1s;
    -ms-transition: all 1s linear 1s;
    -o-transition: all 1s linear 1s;
    transition: all 1s linear 1s;
}

.sec-thanks{

}

.sec-thanks .wrap{
    margin-top:-20px;
}

#bg-thanks{
    background-image:url('../images/photo/webwxgetmsgimg.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size:100%;
    position:relative;
    z-index:0;
    left:0;
    top:0;
    right:0;
    bottom:0;
    padding-top:39.8333%;
}

#sec-tempThanks-header{
    text-align:center;
    margin:-15px -15px 10px;
    padding:20px 20px 5px;
    color:#FFF;
    background: rgba(29,130,198,1);
    background: -moz-linear-gradient(top, rgba(29,130,198,1) 0%, rgba(29,130,198,1) 80%, rgba(14,88,138,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(29,130,198,1)), color-stop(80%, rgba(29,130,198,1)), color-stop(100%, rgba(14,88,138,1)));
    background: -webkit-linear-gradient(top, rgba(29,130,198,1) 0%, rgba(29,130,198,1) 80%, rgba(14,88,138,1) 100%);
    background: -o-linear-gradient(top, rgba(29,130,198,1) 0%, rgba(29,130,198,1) 80%, rgba(14,88,138,1) 100%);
    background: -ms-linear-gradient(top, rgba(29,130,198,1) 0%, rgba(29,130,198,1) 80%, rgba(14,88,138,1) 100%);
    background: linear-gradient(to bottom, rgba(29,130,198,1) 0%, rgba(29,130,198,1) 80%, rgba(14,88,138,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d82c6', endColorstr='#0e588a', GradientType=0 );
}

#sec-thanks-txt{
    line-height:1.4;
}

#sec-text-h-10{
    margin-bottom:5px;
}

#sec-text-subhd-10{
    margin-bottom:10px;
    font-size:14px;
    text-align:center;
}

#sec-text-subhd-10 span{
    color:#f7f503;
}

@keyframes maxHeight {
    from{
        max-height:0;
    }
    to{
        max-height:300px;
    }
}

.maxHeight{
    animation-name: maxHeight;
}


.sec-int{

}

.sec-int h2{
    font-size:36px;
    text-align:center;
    color:#FFF;
    text-shadow:0 0 6px #001f52;
    margin-bottom:10px;
}

.sec-int h4{
    box-shadow:0 0 16px #001f52;
    background-color:rgba(255, 255, 255, 0.85);
}

.sec-int h4 > div{
    position:relative;
}

.sec-int h4 > div:before,
.sec-int h4 > div:after{
    content:'';
    height:4px;
    max-width:0;
    margin:auto;
    left:0;
    right:0;
    position:absolute;
    background: rgba(243,226,199,1);
    background: -moz-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 43%, rgba(233,212,179,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(243,226,199,1)), color-stop(43%, rgba(182,141,76,1)), color-stop(100%, rgba(233,212,179,1)));
    background: -webkit-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 43%, rgba(233,212,179,1) 100%);
    background: -o-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 43%, rgba(233,212,179,1) 100%);
    background: -ms-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 43%, rgba(233,212,179,1) 100%);
    background: linear-gradient(to right, rgba(243,226,199,1) 0%, rgba(182,141,76,1) 43%, rgba(233,212,179,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3', GradientType=1 );
}

.sec-int.active h4 > div:before,
.sec-int.active h4 > div:after{
    max-width:500px;
    transition: max-width 1s linear 3s;
}

#sec-int-t-1 > div,
#sec-int-t-2 > div,
#sec-int-t-3 > div{
    padding:30px 15px 0;
}

#sec-int-t-2a > div,
#sec-int-t-3a > div{
    padding:30px 15px 15px;
}

#sec-int-t-1 > div:before,
#sec-int-t-2 > div:before,
#sec-int-t-3 > div:before{
    top:15px;
}

#sec-int-t-1 > div:after,
#sec-int-t-2 > div:after,
#sec-int-t-3 > div:after{
    bottom:0;
}

#sec-int-t-2a > div:before,
#sec-int-t-3a > div:before{
    top:0;
}

#sec-int-t-2a > div:after,
#sec-int-t-3a > div:after{
    bottom:15px;
}

#sec-int-t-4{
    text-align:justify;
    color:#FFF;
    font-weight:100;
    font-size:14px;
}

#sec-int-t-4 span{
    color:#ffe500;
}

@-webkit-keyframes fadeInZoom {
    0%, 80%, to {
        opacity: 0;
        transform: scale(0.7);
    }
    10%, 35% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity:0;
        transform: scale(1.3);
    }
}

@keyframes fadeInZoom {
    0%, 80%, to {
        opacity: 0;
        transform: scale(0.7);
    }
    10%, 35% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity:0;
        transform: scale(1.3);
    }
}

.ph-ic{
    font-size:36px;
    font-weight:bold;
    display:flex;
    align-items: center;
    justify-content: center;
    color:#FFF;
    position:absolute;
    opacity:0;
}

.animated > .ph-ic{
    opacity:1;
    transition: opacity 0.3s ease-in 4.5s;
}

.ph-ic span{
    position:relative;
}

/* .ph-ic span:before{
    content:'';
    height:10px;
    width:120%;
} */

#sec-photo-6-2 .ph-ic{
    top:-10px;
    left:10px;
    color:rgb(187, 9, 18);
    text-shadow:2px 2px 0 #fff;
    animation: bounce 2s infinite ease-in-out;
}

#sec-photo-6-2 .ph-ic span{
    transform: rotate(10deg);
}

#sec-photo-7-2 .ph-ic{
    bottom:20px;
    right:10px;
    color:#F44336;
    text-shadow:-2px -2px 0 #fff;
    animation: fadeInZoom 4s infinite ease-in-out;
}

#sec-photo-7-2 .ph-ic span{
    transform: rotate(-14deg);
}

#sec-photo-8-2 .ph-ic{
    top:-25px;
    right:0;
    color:#FF9800;
    text-shadow:-2px 2px 0 #fff;
    animation: bounce 2s infinite ease-in-out;
}

#sec-photo-8-2 .ph-ic span{
    transform: rotate(6deg);
}

#sec-photo-8a-1{

}

#sec-photo-8a-1 img{
    width:55%;
}

#sec-photo-8a-2{
    margin-left:15%;
}

#sec-photo-9-2 .ph-ic{
    bottom:5px;
    right:0;
    color:#00bcd4;
    text-shadow:-2px 2px 0 #fff;
    animation: bounce 2s infinite ease-in-out;
}

#sec-photo-9-2 .ph-ic span{
    transform: rotate(-9deg);
}

#sec-photo-10-3 .ph-ic{
    top:-65px;
    right:0;
    color:#F44336;
    text-shadow:-2px 2px 0 #fff;
    animation: fadeInZoom 4s infinite ease-in-out;
}

#sec-photo-10-3 .ph-ic span{
    transform: rotate(9deg);
}

#sec-photo-11-2 .ph-ic{
    top:-40px;
    right:0;
    color:#8bc34a;
    text-shadow:-2px 2px 0 #fff;
    animation: fadeIn 4s infinite ease-in-out;
}

#sec-photo-11-2 .ph-ic span{
    transform: rotate(-16deg);
}

#sec-photo-12-2 .ph-ic{
    bottom:-35px;
    right:0;
    color:#FF9800;
    text-shadow:-2px 2px 0 #fff;
    animation: bounce 2s infinite ease-in-out;
}

#sec-photo-12-2 .ph-ic span{
    transform: rotate(-11deg);
}

.hd-logo{
    text-align:left;
    position:absolute;
    left:10px;
    top:10px;
}

.hd-logo img{
    border:0;
    width:45%;
    box-shadow:none;
}



#section-end{
    background-image: url('../images/end/bg.jpg');
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center top;
    display:flex;
    justify-content: center;
    align-items: center;
    text-align:center;
}

    #sec-end-wrap{
        position:relative;
        width:70vw;
        padding:10px 30px 30px;
        box-shadow:0 0 12px #01395d;
    }

    #sec-end-bg{
        position:absolute !important;
        z-index:0;
        left:0;
        top:0;
        right:0;
        bottom:0;
        background-color:rgba(1, 70, 126, 0.76);
        -webkit-animation-duration: 4s;
        animation-duration: 4s;
        transform-origin: center center;
    }

    #sec-end-bg:before{
        content:'';
        border:2px solid #FFF;
        position:absolute;
        left:5px;
        top:5px;
        right:5px;
        bottom:5px;
    }

    #sec-end-wrap > div{
        position:relative;
    }

    #sec-end-title{

    }

    #sec-end-love{
        -webkit-animation-duration: 6s;
        animation-duration: 6s;
        left:0;
        right:0;
    }

    #sec-end-love img{
        border:2px solid #FFF;
    }

    #sec-end-ths{
        color:#FFF;
        padding-top:10px;
    }