/*---------------gnb--------------*/


#gnb {
    width: 100vw;
    height: 20px;
    position: absolute;
    left: 0;
    top: 50px;
    z-index: 99999;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    transition: all 1s;
}

#gnb.on{
    transform: translateY(-100px);
}

#gnb .left {
    width: 400px;
    display: flex;
    justify-content: space-between;
    margin: 0 80px;
    position: absolute;
    left: 13px;
}

#gnb .right {
    width: 400px;
    display: flex;
    justify-content: space-between;
    margin: 0 80px;
    position: absolute;
    right: 106px;
}

#btn_list {
    width: 38px;
    height: 10px;
    position: absolute;
    right: 80px;
    top: 50px;
    z-index: 999999;
}

#btn_list .btn_circle {
    width: 75px;
    height: 75px;
    border: 1px solid white;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -38px;
    margin-top: -36px;
    background: black;
}

#btn_list .btn_01 {
    width: 38px;
    height: 1px;
    background: #fff;
    margin-bottom: 8px;
    transition: all 1s;
    transform-origin: 10px 6px;
    position: relative;
    z-index: 100;
}

#btn_list .btn_01.on {
    transform: rotate(45deg);
}

#btn_list .btn_02 {
    width: 38px;
    height: 1px;
    background: #fff;
    transition: all 1s;
    position: relative;
    z-index: 100;
}

#btn_list .btn_02.on {
    transform: rotate(-45deg);
}


/*---------------gnb--------------*/


/*#gnb{*/
/*    width: 100vw;*/
/*    height: 20px;*/
/*    position: absolute;*/
/*    left: 0;*/
/*    top: 50px;*/
/*    z-index: 99999;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    overflow: hidden;*/
/*    transition: all 1s;*/
/*}*/
/*#gnb.on{*/
/*    transform: translateY(-100px);*/
/*}*/

/*#gnb .left {*/
/*    width: 400px;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    margin: 0 80px;*/
/*}*/

/*#gnb .right {*/
/*    width: 400px;*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    margin: 0 80px;*/
/*}*/

/*#gnb .btn_list {*/
/*    width: 38px;*/
/*}*/

/*#gnb .btn_01 {*/
/*    width: 38px;*/
/*    height: 1px;*/
/*    border: 1px solid white;*/
/*    background: #fff;*/
/*    margin-bottom: 8px;*/
/*    box-sizing: border-box;*/
/*}*/

/*#gnb .btn_02 {*/
/*    width: 38px;*/
/*    height: 1px;*/
/*    background: #fff;*/
/*    border: 1px solid white;*/
/*    box-sizing: border-box;*/
/*}*/






/*---------------menu--------------*/

#menu {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999;
    background: #000;
    display: none;
    overflow: hidden;
}

#menu .mu_dim {
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
    background: #000;
    opacity: 0.75;
}




#menu .mu_img_list_01{
    width: 291px;
    height: 1239px;
    position: absolute;
    left: 40px;
    top: 0;
    z-index: 10;
}

#menu .mu_img_list_01 .mu_inner_01{
    animation: menu_inner01 20s linear infinite;
}

@keyframes menu_inner01 {
    100%{
        transform: translateY(-1239px);
    }
}




#menu .mu_img_list_02{
    width: 291px;
    height: 1242px;
    position: absolute;
    left: 372px;
    top: -1239px;
    z-index: 10;
}

#menu .mu_img_list_02 .mu_inner_02{
    animation: menu_inner02 20s linear infinite;
}

@keyframes menu_inner02 {
    100%{
        transform: translateY(1239px);
    }
}

#menu .mu_title_list {
    width: 663px;
    height: 571px;
    position: absolute;
    top: 50%;
    right: 287px;
    margin-top: -331px;
    z-index: 10;
}

#menu .mu_title_01 {
    width: 655px;
    height: 59px;
    position: absolute;
    right: 0;
}

#menu .mu_title_list .mu_text_box{
    width: 663px;
    height: 571px;
    position: relative;
}

#menu .mu_title_list .mu_text_box > div{
    transition: all 1s;
}

#menu .mu_title_list .mu_text_box > div.on{
    filter: brightness(300%);
}

#menu .mu_title_02 {
    width: 349px;
    height: 70px;
    position: absolute;
    top: 139px;
    right: 0;
}

#menu .mu_title_03 {
    width: 237px;
    height: 59px;
    position: absolute;
    top: 278px;
    right: 0;
}

#menu .mu_title_04 {
    width: 252px;
    height: 71px;
    position: absolute;
    top: 417px;
    right: 0;
}

#menu .mu_title_05 {
    width: 461px;
    height: 71px;
    position: absolute;
    top: 556px;
    right: 0;
}





#menu .mu_sub_list {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 280px;
}

#menu .mu_sub_01 {
    width: 97px;
    height: 26px;
    position: absolute;
}

#menu .mu_sub_02 {
    width: 90px;
    height: 23px;
    position: absolute;
    top: 40px;
}

#menu .mu_sub_03 {
    width: 78px;
    height: 22px;
    position: absolute;
    top: 81px;
}





/*-------------se01-------------*/



#section01 {
    height: 1857px;
    position: relative;
}

#section01 .se01_circle {
    width: 100vw;
    height: 1478px;
    position: absolute;
    top: 199px;
}
#section01 .se01_bg01 {
    width: 1478px;
    height: 1478px;
    background: #a5a5a5;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    margin-left: -739px;
    overflow: hidden;
}

#section01 .se01_watch_01 {
    height: 1917px;
    position: absolute;
    top: 25px;
    left: -45px;
}

#section01 .se01_watch_02 {
    height: 1446px;
    position: absolute;
    top: 158px;
    right: -178px;
}





/*----------sub----------*/

#section01 .se01_sub_list {
    width: 100vw;
    height: 262px;
    position: absolute;
    display: flex;
    top: 50%;
    justify-content: space-between;
    z-index: 1000;
    margin-top: -131px;
}

#section01 .se01_left {
    position: absolute;
    left: 80px;
    display: flex;
    justify-content: space-between;
}

#section01 .se01_sns {
    width: 32px;
    height: 262px;
    position: absolute;
}

#section01 .se01_text_left {
    width: 290px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 180px;
    margin-top: 121px;
}

#section01 .se01_right {
    position: absolute;
    right: 80px;
    display: flex;
    justify-content: space-between;
}

#section01 .se01_text_right {
    width: 263px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 180px;
    margin-top: -10px;
}

#section01 .se01_btn_list {
    height: 262px;
    margin-left: 180px;
}

#section01 .se01_btn_list > div {
    width: 18px;
    height: 18px;
    border: 1px solid white;
    border-radius: 50%;

}

#section01 .se01_btn_01 {
    background: #fff;
    margin-bottom: 101px;
}

#section01 .se01_btn_02 {
    margin-bottom: 40px;
}

#section01 .se01_btn_03 {
    margin-bottom: 40px;
}



/*----------------top--------------*/


#section01 .se01_top {
    height: 90px;
    position: absolute;
    top: 63px;
    left: 50%;
    margin-left: 18px;
}

#section01 .se01_title_01 {
    height: 437px;
    position: absolute;
    top: 1341px;
    left: 171px;
}

#section01 .se01_title_02 {
    height: 311px;
    position: absolute;
    top: 224px;
    left: 1252px;
}






/*-----------se02------------*/

#section02 {
    height: 3140px;
    background: black;
    position: relative;
}
#section02 .se02_clock {
    width: 1024px;
    height: 1024px;
    position: absolute;
    top: 0;
    left: 757px;
    background: #000;
}

#section02 .se02_circle_01 {
    width: 666px;
    height: 666px;
    background: #a5a5a5;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -333px;
    margin-top: -333px;
    /*transform: translate(-50%,-50%);*/
}

#section02 .se02_img_01 {
    width: 1024px;
    height: 1024px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -512px;
    margin-top: -512px;
    /*transform: translate(-50%,-50%);*/
}

#section02 .se02_img_02 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

#section02 .se02_img_03 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}


#section02 .se02_circle_02 {
    width: 1032px;
    height: 1032px;
    position: absolute;
    top: 940px;
    left: 82px;
    background: #a5a5a5;
    border-radius: 50%;
    overflow: hidden;
}

#section02 .se02_img_05 {
    width: 690px;
    height: 1072px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -305px;
    margin-top: -546px;
}

#section02 .se02_circle_03 {
    width: 938px;
    height: 1007px;
}

#section02 .se02_img_06 {
    width: 938px;
    height: 1007px;
    position: absolute;
    top: 1745px;
    right: 91px;
}

#section02 .se02_text_01 {
    width: 466px;
    height: 520px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: 160px;
    margin-top: 399px;
}

#section02 .se02_btn {
    height: 402px;
    position: absolute;
    top: 2633px;
    left: 86px;
    transform: rotate(-45deg);
}

#section02 .se02_circle_04 {
    width: 402px;
    height: 402px;
    background: #676767;
    border-radius: 50%;
}

#section02 .se02_img_07 {
    width: 87px;
    height: 70px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -43px;
    margin-top: -35px;
}

#section02 .se02_title_01 {
    width: 489px;
    height: 319px;
    position: absolute;
    top: 498px;
    left: 80px;
    opacity: 0;
    transition: all 1s;
    transform: translateY(50px);
    z-index: 100;
}

#section02 .se02_title_01.on {
    opacity: 1;
    transform: translateY(0);
}

#section02 .se02_title_02 {
    width: 481px;
    height: 261px;
    position: absolute;
    top: 2146px;
    left: 80px;
    opacity: 0;
    transition: all 1s;
    transform: translateY(50px);
    z-index: 100;
}

#section02 .se02_title_02.on {
    opacity: 1;
    transform: translateY(0);
}