@charset "UTF-8";

.m_year_wrap{
    display:none;
}

#container{
    margin-top:150px;
    position:relative;
    height:6000px;
}
#container .infor{
    position:fixed;
    height:7000px;
    top:0;
    left:0;
    width:100%;
}

.infor .inner{
    width:1200px;
    margin:0 auto;
}
.infor .inner h3{
    font-size:40px;
    line-height: 40px;
    position:relative;
    top:200px;
    left:0;
    z-index: 1;
   
}
.infor .inner h3:after{
    display:block;
    clear:both;
    content:'KDI Life';
    position:absolute;
    top:-60px;
    left:0;
    font-size:18px;
}
.infor .inner h3:before{
    display:block;
    clear:both;
    content:'';
    width: 35%;
    height:1px;
    background:#000;
    position:absolute;
    right:0;
    top:50%;
    transform: translatey(-50%);
    z-index: -1;
}
.infor .inner h3 img{
    vertical-align: middle;
    width:70px;
    height:auto;
    display:none;
}
.infor .inner h3 span{
    color:#f08300;
    
}

.year_wrap{
    width:100%;
    margin-top:120px;

}
.year_wrap .p1,
.year_wrap .p2{
    width:120px;
    height:150px;
    color:#fff;
    font-size:32px;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    display:inline-block;
    position:absolute;
}
.year_wrap .p1 span{
    margin-top:12px;
    display:block;
}
.year_wrap .p2 span{
    margin-top:12px;
    display:block;
}
.year_wrap .p1{
    background:#727171;
    top:0;
    left:50%;
    margin-left:-600px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.year_wrap .p2{
    background:#dc4f1d;
    bottom:0;
    left:50%;
    margin-left:-600px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.year_wrap .year_list{
    width:100%;
    position:relative;
    font-size:0;
    white-space: nowrap;
    margin-top:285px;
}
.year_wrap .year_list>li{
   display:inline-block;
    width:100%;
    height:100%;
    font-size:12px;
}
.year_wrap .year_list li .change{
    width:100%;
    height:230px;
    background:#bfc0c0;
    position:relative;
}
.year_wrap .year_list li .change .changeList{
    width:72%;
    height:100%;
    position:absolute;
    top:50%;
    left:60%;
    transform: translatey(-50%);
    margin-left:-600px;
}

.year_wrap .year_list li .change .changeList li{
    height:100%;
    vertical-align: bottom;
    position:relative;
    width:25%;  
    border-left:solid 1px #000;
    float:left;
}
.year_wrap .year_list li .change .changeList li.cl1{
    width:30%;
    border:none;
}

.year_wrap .year_list li .change .changeList li.cl2{
    width:33%;
}
.year_wrap .year_list li .change .changeList li.cl3{
    width:17%;
}
.year_wrap .year_list li .change .changeList li.cl4{
 
}
.year_wrap .year_list li .change .changeList li img{
   position:absolute;
    right:0;
    bottom:0;
}
.year_wrap .year_list li .years{
    width:100%;
    height:30px;
    background:#aaabab;
    border-top:solid 10px #fff;
    border-bottom:solid 10px #fff;
    position:relative;
}
.year_wrap .year_list li .years .y{
    position:absolute;
    top: 50%;
    left:50%;
    transform: translatey(-50%);
    margin-left:-600px;
    font-size:30px;
    width:120px;
    height:120px;
    border:solid 4px #000;
    background:#fff;
    color:#000;
    border-radius: 50%;
    z-index: 1;
    font-weight: bold;
    text-align: center;
    line-height: 110px;
    box-sizing: border-box;
}
.year_wrap .year_list li .years .dots{
    position:absolute;
    left:60%;
    margin-left:-600px;
    top:50%;
    transform: translatey(-50%);
    width:100%;
    overflow: hidden;
}
.year_wrap .year_list li .years .dots:after{
    display:block;
    clear:both;
    content:'····································································································';
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    letter-spacing: 18px;
    color:#fff;
    width:100%;
}
.year_wrap .year_list li .years .dots li{
    float:left;
    color:#fff;
    font-size:18px;
    position:relative;
    overflow: hidden;
    line-height: 18px;
    float:left;
    background:#aaabab;
    z-index: 1;
    
}
/* .year_wrap .year_list li .years .dots li:after{
    display:block;
    clear:both;
    content:'············';
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    letter-spacing: 10px;
} */

.year_wrap .year_list li .years .dots li.sv1{
    margin-right:20%;
}
.year_wrap .year_list li .years .dots li.sv2{
    margin-right:11%;
}
.year_wrap .year_list li .years .dots li.sv3{
    margin-right:11%;
}
.year_wrap .year_list li .years .dots li.sv4{
    margin-right:11%;
}
.year_wrap .year_list li .years .dots li.sv5{
    margin-right:11%;
}
.year_wrap .year_list li .goal{
    width:100%;
    height:230px;
    background:#f5aa53;
    position:relative;
}
.year_wrap .year_list li .goal .goalList{
    position:absolute;
    top:50%;
    left:60%;
    transform: translatey(-50%);
    margin-left:-600px;
    width:72%;
    height:100%;
}
.year_wrap .year_list li .goal .goalList:after,
.year_wrap .year_list li .goal .changeList:after
{
    display:block;
    clear:both;
    content:'';
}
.year_wrap .year_list li .goal .goalList li{
    vertical-align: bottom;
    position:relative;
    height:100%;
    width:15%;
    float:left;
    border-left:solid 1px #000;
}
.year_wrap .year_list li .goal .goalList li.gl1{
    width:30%;
}
.year_wrap .year_list li .goal .goalList li.gl2{
    width:16%;
}
.year_wrap .year_list li .goal .goalList li.gl3{
    width:17%;
}
.year_wrap .year_list li .goal .goalList li.gl4{
    width:17%;
}
.year_wrap .year_list li .goal .goalList li.gl5{}
.year_wrap .year_list li .goal .goalList li img{
    position:absolute;
    bottom:0;
    right:0;
}
.year_wrap .year_list li>div>ul>li .txt{
    margin:50px 0 0 10px;
    font-size:16px;
    line-height: 20px;
}
.year_wrap .year_list li>div>ul>li .txt p{
    position:relative;
}
.year_wrap .year_list li>div>ul>li .txt p:nth-child(2){
    margin-top:20px;
}
.year_wrap .year_list li>div>ul>li .txt p:after{
    display:block;
    clear:both;
    content:'';
    width:10px;
    height:10px;
    border-radius: 50%;
    background:#000;
    position:absolute;
    left:-15px;
    top:5px;
   
}

.year_wrap .year_list li.sectionLi .change .changeList{
    width:90%;
    left:43%;
}
.year_wrap .year_list li.sectionLi .change .changeList li.cl1{
    width:31%;
}
.year_wrap .year_list li.sectionLi .change .changeList li.cl2{
    width:14%;
}
.year_wrap .year_list li.sectionLi .change .changeList li.cl3{
    width:15%;
}
.year_wrap .year_list li.sectionLi .change .changeList li.cl4{
    width:19%;
}
.year_wrap .year_list li.sectionLi .change .changeList li.cl5{
    width:18%;
}
.year_wrap .year_list li.sectionLi .goal .goalList li.gl1{
    width:16%;
}
.year_wrap .year_list li.sectionLi .goal .goalList li.gl2{
    width:45%;
}
.year_wrap .year_list li.sectionLi .goal .goalList li.gl3{
  
}
.year_wrap .year_list li.sectionLi .goal .goalList{
    width:89%;
    left:43%;
}
.year_wrap .year_list li.sectionLi .years{
    
}
.year_wrap .year_list li.sectionLi .years .dots{
    left:57%;
    width:81%;
    
}
.year_wrap .year_list li.sectionLi .years .y{
    left:40%;
}
.year_wrap .year_list li.sectionLi .years .dots li.sv1{
    margin-right:15%;
}
.year_wrap .year_list li.sectionLi .years .dots li.sv2{
    margin-right:15%;
}
.year_wrap .year_list li.sectionLi .years .dots li.sv3{
    margin-right:15%;
}
.year_wrap .year_list li.sectionLi .years .dots li.sv4{
    margin-right:20%;
}
.year_wrap .year_list li.sectionLi .years .dots li.sv5{}


.year_wrap .year_list li.sectionLi .change .changeList li.cl1{
    border-left:solid 1px #000 !important;
}
.year_wrap .year_list li.sectionLi .goal .goalList li.gl3{
    width:30%;
}

.year_wrap .year_list li.lis3 .change .changeList li.cl1{
    width:16%;
}
.year_wrap .year_list li.lis3 .change .changeList li.cl2{
    width:12%;
}
.year_wrap .year_list li.lis3 .change .changeList li.cl3{
    width:12%;
}
.year_wrap .year_list li.lis3 .change .changeList li.cl4{
    width:12%;
}
.year_wrap .year_list li.lis3 .change .changeList li.cl5{
    width:12%;
}
.year_wrap .year_list li.lis3 .change .changeList li.cl6{
    width:12%;
}
.year_wrap .year_list li.lis3 .change .changeList li.cl7{
    width:20%;
}
/* 00 */
.year_wrap .year_list li.lis4 .change .changeList li.cl7{
    width:11%;
}
.year_wrap .year_list li.lis4 .change .changeList li.cl8{
    width:10%;
}
/* 10 */
.year_wrap .year_list li.lis5 .change .changeList li.cl3{
    width:33%;
}

.year_wrap .year_list li.lis3 .years .dots li.sv1{
    margin-right:12%;
}
.year_wrap .year_list li.lis3 .years .dots li.sv2{
    margin-right:12%;
}
.year_wrap .year_list li.lis3 .years .dots li.sv3{
    margin-right:12%;
}
.year_wrap .year_list li.lis3 .years .dots li.sv4{
    margin-right:12%;
}
.year_wrap .year_list li.lis3 .years .dots li.sv5{
    margin-right:12%;
}
.year_wrap .year_list li.lis3 .years .dots li.sv6{
    margin-right:12%;
}

.year_wrap .year_list li.lis5 .years .dots li.sv3{
    margin-right:22%;
}

.year_wrap .year_list li.lis3 .goal .goalList li.gl2{
    width:12%;
}
.year_wrap .year_list li.lis3 .goal .goalList li.gl3{
    width:49%;
}

/*  */
.year_wrap .year_list li.lis4 .goal .goalList li.gl1{
    width:28%;
}
.year_wrap .year_list li.lis4 .goal .goalList li.gl3{
    width:12%;
}
.year_wrap .year_list li.lis4 .goal .goalList li.gl4{
    width:12%;
}
.year_wrap .year_list li.lis4 .goal .goalList li.gl5{
    width:30%;
}
/* 10 */
.year_wrap .year_list li.lis5 .goal .goalList li.gl3{
    width:12%;
}
.year_wrap .year_list li.lis5 .goal .goalList li.gl4{
    width:22%;
}
.year_wrap .year_list li.lis5 .goal .goalList li.gl4 img{
    width:90%;
}
.year_wrap .year_list li.lis5 .goal .goalList li.gl5{
    width:12%;
}
.year_wrap .year_list li.lis5 .goal .goalList li.gl6{
    width:12%;
}
.year_wrap .year_list li.lis5 .goal .goalList li.gl7{
    width:12%;
}

/*  */
.year_wrap .year_list li.lis6{
   
}
.year_wrap .year_list li.lis6 .goal .goalList li.gl2{
    width:30%;
}

@keyframes upText{
    0%{
        opacity: 0;
        padding-left:20px;
    }
    100%{
        
    }
}

#foot{
    position:fixed;
    left:0;
    bottom:0;
    height:70px !important;
    padding:30px 0;
}

@media all and (min-width:320px) and (max-width:700px){
    #foot{
        position:static;
    }
    #container{
        margin-top:0;
        height:auto;
    }
    #container .infor{
        height:auto;
        position:static;
    }
    .infor .inner{
        width:100%;
    }
    .infor .inner h3{
        top:120px;
        font-size:14px;
        line-height: 30px;
        width:100%;
        text-align: center;
    }
    .infor .inner h3 img{
        width:50px;

    }
    .infor .inner h3:after{
        left:50%;
        transform: translatex(-50%);
        top:-30px;
    }
    .infor .inner h3:before{
        bottom:0;
        
    }
    .infor .inner h3:before{
        display:none;
       
    }
    .year_wrap{
        margin-top:20px;
        display:none;
    }
    .year_wrap .year_list{
        margin-top:170px;
    }
    #skrollr-body{
        float:left;
        width:100%;
        height:100%;
    }
    .m_year_wrap{
        display:block;
        margin-top:150px;
        padding:0 10px;
    }
    .m_year_wrap:after{
         display:block;
         clear:both;
         content:'';
     }
    .m_year_wrap>div{
        float:left;
        width:50%;
        font-size:14px;
    }
    .mWrap ul p{
        position:relative;
    }
    .mWrap ul p:after{
        display:block;
        clear:both;
        content:'';
        width:5px;
        height:5px;
        border-radius: 50%;
        background:#000;
        position:absolute;
        top:50%;
        transform: translatey(-50%);
        left:-7px;
        z-index: 1;
    }
    .m_year_wrap .mChange{
        background:#727171;
        width:30%;
        text-align:center;
        color:#fff;
        height:32px;
        line-height: 32px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .m_year_wrap .mGoal{
        text-align:center;
        float:right;
        background:#dc4f1d;
        width:30%;
        color:#fff;
        height:32px;
        line-height: 32px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    .mWrap{
        margin-top:20px;
    }
    .mWrap .ys{
        margin-top:40px;
    }
    .mWrap h3{
        text-align: center;
        margin:50px 0 20px;
    }
    .mWrap .iBox{
        width:100%;
        
        overflow:hidden;
    }
    .mWrap .cBox{
        float:left;
        background:#bfc0c0;
        width:45%;
    }
    .mWrap .cBox li{
        padding:10px;
        border-bottom: solid 1px #000;
        box-sizing: border-box;
    }
    .mWrap .cBox li.c1{
        height:160px;
    }
    .mWrap .cBox li.c2{
        height:190px;
    }
    .mWrap .cBox li.c3{
        height:120px;
    }
    .mWrap .cBox li.c4{
        height:120px;
    }
    .mWrap .list2 .cBox li.c1{
        height:250px;
    }
    .mWrap .list2 .cBox li.c2{
        height:120px;
    }
    .mWrap .list2 .cBox li.c3{
        height:140px;
    }
    .mWrap .list2 .cBox li.c4{
        height:140px;
    }
    .mWrap .list2 .cBox li.c5{
        height:135px;
    }
    .mWrap .list2 .cBox li.c5 img{
        width:50%;
    }
    .mWrap .list3 .cBox li.c1{}
    .mWrap .list3 .cBox li.c2{
        height:100px;
    }
    .mWrap .list3 .cBox li.c3{
        height:100px;
    }
    .mWrap .list3 .cBox li.c4{
        height:150px;
    }
    .mWrap .list3 .cBox li.c5{
        height:100px;
    }
    .mWrap .list3 .cBox li.c6{
        height:100px;
    }
    .mWrap .list3 .cBox li.c7{height: 175px;}

    .mWrap .list4 .cBox li.c1{}
    .mWrap .list4 .cBox li.c2{}
    .mWrap .list4 .cBox li.c3{
        height:150px;
    }
    .mWrap .list4 .cBox li.c4{
        height:100px;
    }
    .mWrap .list4 .cBox li.c5{}
    .mWrap .list4 .cBox li.c6{
        height:150px;
    }
    .mWrap .list4 .cBox li.c7{
        height:100px;
    }
    .mWrap .list4 .cBox li.c8{
        height:150px;
    }
    .mWrap .list5 .cBox li.c3{
        height:200px;
    }
    .mWrap .list5 .cBox li.c4{
        height:100px;
    }
    .mWrap .list5 .cBox li.c5{
        height:150px;
    }
    .mWrap .list5 .cBox li.c6{
        height:145px;
    }
    .mWrap .list5 .cBox li.c6 img{
        width:50%;
    }

    .mWrap .list6 .cBox li.c1{
        height:255px;
    }
   
    .mWrap .yearBox{
        float:left;
        width:8%;
        background:#aaabab;
        margin-left:1%;
        position:relative;
    }
    .mWrap .yearBox:after{
        display:block;
        clear:both;
        content:'';
        position:absolute;
        left:50%;
        transform: translatex(-50%); 
        top:0;
        height:100%;
      

    }
    .mWrap .yearBox li{
        text-align: center;
        color:#fff;
        font-size:13px;
        line-height: 16px;
        font-weight: bold;
        
    }
    .mWrap .yearBox li.y1{
        height:150px;
    }
    .mWrap .yearBox li.y2{
        height:95px;
    }
    .mWrap .yearBox li.y3{
        height:95px;
    }
    .mWrap .yearBox li.y4{
        height:130px;
    }
    .mWrap .yearBox li.y5{
        height:120px;
    }
    
    .mWrap .list2 .yearBox li.y1{
        height:120px;
    }
    .mWrap .list2 .yearBox li.y2{
        height:120px;
    }
    .mWrap .list2 .yearBox li.y3{
        height:125px;
    }
    .mWrap .list2 .yearBox li.y4{
        height:140px;
    }
    .mWrap .list2 .yearBox li.y5{
        height:140px;
    }
    .mWrap .list2 .yearBox li.y6{
        height:140px;
    }

    .mWrap .list3 .yearBox li.y1{
    }
    .mWrap .list3 .yearBox li.y2{
        height:100px;
    }
    .mWrap .list3 .yearBox li.y3{
        height:100px;
    }
    .mWrap .list3 .yearBox li.y4{
        height:150px;
    }
    .mWrap .list3 .yearBox li.y5{
        height:100px;
    }
    .mWrap .list3 .yearBox li.y6{
        height:100px;
    }
    .mWrap .list3 .yearBox li.y7{
        height:65px;
    }
    .mWrap .list3 .yearBox li.y8{
        height:120px;
    }
    .mWrap .list4 .yearBox li.y1{}
    .mWrap .list4 .yearBox li.y2{
        
    }
    .mWrap .list4 .yearBox li.y3{
        height:150px;
    }
    .mWrap .list4 .yearBox li.y4{
        height:100px;
    }
    .mWrap .list4 .yearBox li.y5{}
    .mWrap .list4 .yearBox li.y6{
        height:150px;
    }
    .mWrap .list4 .yearBox li.y7{
        height:100px;
    }
    .mWrap .list4 .yearBox li.y8{
        height:160px;
    }
    .mWrap .list5 .yearBox li.y1{
        
    }
    .mWrap .list5 .yearBox li.y4{
        height:100px;
    }
    .mWrap .list5 .yearBox li.y7{
        height:150px;
    }
    .mWrap .list5 .yearBox li.y6{
        height:155px;
    }

    .mWrap .list6 .yearBox li.y1{
        height:100px;
    }
    .mWrap .list6 .yearBox li.y2{
        height:155px;
    }

    .mWrap .gBox{
        float:right;
        background:#f5aa53;
        width:45%;
        height:100%;
    }
    .mWrap .gBox li{
        padding:10px;
        border-bottom: solid 1px #000;
        box-sizing: border-box;
    }
    .mWrap .gBox li.g1{
        height:160px;
    }
    .mWrap .gBox li.g2{
        height:95px;
    }
    .mWrap .gBox li.g3{
        height:95px;
    }
    .mWrap .gBox li.g4{
        height:120px;
    }
    .mWrap .gBox li.g5{
        height:120px;
    }
    .mWrap .list2 .gBox li.g1{
        height:130px;
    }
    .mWrap .list2 .gBox li.g2{
        height:380px;
    }
    .mWrap .list2 .gBox li.g3{
        height:275px;
    }
    .mWrap .list3 .gBox li.g1{}
    .mWrap .list3 .gBox li.g2{}
    .mWrap .list3 .gBox li.g3{
        height:520px;
    }
    .mWrap .list3 .gBox li.g4{
        height:110px;
    }

    .mWrap .list4 .gBox li.g1{
        height:260px;
    }
    .mWrap .list4 .gBox li.g2{
        height:150px;
    }
    .mWrap .list4 .gBox li.g3{
        height:100px;
    }
    .mWrap .list4 .gBox li.g4{
        height:100px;
    }
    .mWrap .list4 .gBox li.g5{
        height:400px;
    }
    .mWrap .list4 .gBox li.g5{}

    .mWrap .list5 .gBox li.g1{}
    .mWrap .list5 .gBox li.g2{}
    .mWrap .list5 .gBox li.g3{
        height:100px;
    }
    .mWrap .list5 .gBox li.g4{
        
    }
    .mWrap .list5 .gBox li.g5{
        height:100px;
    }
    .mWrap .list5 .gBox li.g6{
        height:150px;
    }
    .mWrap .list5 .gBox li.g7{
        height:140px;
    }
    .mWrap .list6 .gBox li.g1{
        height:110px;
    }
    .mWrap .list6 .gBox li.g2{
        height:145px;
    }
    .mWrap li img{
        width:70%;
        right:0;
    }

    #foot{
        height:140px !important;
    }
    #foot .inner .link_down .address p{
        margin-bottom: 0 !important;
    }
}