@media all and (max-width:768px){

    /* 전체적 모바일 헤더 */

    /* ul_flying */
    #wrap{
        overflow:hidden;
    }
    #ui_flying{
        display:none;
    }
    /* .fp-viewing-second #wrap .mo_bt button span{
        background:#262626;
    } */
    #wrap .header.plus{
        background:#fff !important;
    }
    #wrap .header.plus .inner .logo_wrap a .logo_black{
        display:block;
    }
    #wrap .header.plus .inner .logo_wrap a .logo_white{
        display:none !important;
    }
    .mo_bt.plus button span{
        background:#000;
    }

    #wrap .header{
        width:100%;
        height:80px;
        background:none;
    }
    #wrap .header .menu_wrap{
        display:none;
    }

    #wrap .header .logo_wrap{
        float:left;
        position: absolute;
        top:50%;
        left:10px;
        transform:translatey(-50%);
    }
    
    .fp-viewing-first #wrap .header{
        background:none;
    }
    
    #wrap .header .inner{
        width:100%;
        margin:0 auto;
        padding:0 0 0 10px;
        height:100%;
        
    }
    .mo_header{
        background:url(../img/tapmenubg.jpg) no-repeat center/cover;
    }
    .mo_header .think{
        position: absolute;
        top:10px;
        left:100px;
        
        text-align: center;
    }
    .mo_header .think img{
        width:180px;
        height:auto;
        
    }

    .mo_header .logo_wrap{
        position: absolute;
        top:15px;
        left:10px;
    }

    .mo_bt{
        position: fixed;
        top:20px;
        right:10px;
        z-index: 991;
       
    }
  
    /* .fp-viewing-first .mo_bt button span.on{
        background:#262626;
    }
    .fp-viewing-first .mo_bt button span{
        background:#fff;
    } */

    .mo_header .inner{
       
        width:90%;
        height:100%;
    }
    .menu_wrap{
        position: fixed;
        top:25%;
        left:55%;
        width:100%;
        transform: translatex(-50%);
        
    }
    .mo_header .inner .menu_wrap>ul>li a .minus{
        display:none !important;
    }
    .mo_header .inner .menu_wrap>ul>li:first-child>a .minus{
        display:none;
    }
    .mo_header .inner .menu_wrap>ul>li:last-child>a .minus{
        display:none;
    }

    .mo_header .inner .menu_wrap>ul>li:first-child i{
        display:none;
    }
    .mo_header .inner .menu_wrap>ul>li i{
        display:none;
    }
    .mo_header .inner .menu_wrap>ul>li:last-child i{
        display:none;
    }
    .mo_header .inner .menu_wrap>ul>li{
        font-size:30px;
        line-height: 46px;
        border-bottom:none;
        text-align: center;
    }
    .mo_header .inner .menu_wrap>ul>li>ul{
       
    }
    .mo_header .inner .menu_wrap>ul>li>ul>li{
        font-size:24px;
        line-height: 36px;
        text-align: left;
    }
    .mo_header .inner .menu_wrap>ul>li>ul>li>a{
        display:block;
        line-height: 36px;
        color:#fff !important;
      
    }
    
    .mo_header .inner .menu_wrap>ul>li:nth-child(2){
        margin:0px 0;
    }
    .mo_header .inner .menu_wrap>ul>li>a{
        padding:20px 0;
        color:#fff !important;
    }
    /* sns */
    .mo_header .inner .sns_wrap{
        position: absolute;
        bottom:15%;
        left:60%;
        transform: translatex(-50%);
        width:100%;
        margin:0 auto;
    }
    .mo_header .inner .sns_wrap .social-links {
        width:100%;
        margin:0 auto;
        display:flex;
        justify-content:space-between;
    }
    .mo_header .inner .sns_wrap .social-links a{
        padding:10px;
       
        margin:0;
    }
    .mo_header .inner .sns_wrap .social-links a:last-child{
        margin-right:0;
    }
    .mo_header .inner .sns_wrap .social-links a img.icowhite{
        display:block;
    }
    .mo_header .inner .sns_wrap .social-links a img.icoblack{
        display:none;
    }
    #wrap .mo_bt.on button span{
        background:#fff !important;
    }
   
    .mo_bt button span.on {
        background:#fff;
    }

    /* markup start */

    /* se0 */

    #wrap .container .section.se0 .txt_wrap{
        width:100%;
        margin:0 20px;
    }

    #wrap .container .section.se0 .txt_wrap .img_wrap{
        right:-40px;
    }

    #wrap .container .section.se0 .txt_wrap .img_wrap img{
        width:70%;
    }

    /* se1 */
    #wrap .container .section.se1 .txt_wrap{
        width:350px;
        top:85%;
    }

    /* se2 */
      
    .se2 .inner{
        width:100%;
        margin:0 auto;
        padding-top:0;
    }
    .se2 .inner:before{
        display:block;
        clear:both;
        content:'';
        width:100%;
        height:60px;
        background:url(../img/record_ruler.png) no-repeat center/97%;
        position:absolute;
        top:30px;
        left:0;
        
    }
    .se2 .inner .fin{
        width:17px;
       height:30px;
       background:url(../img/record_fin.png) no-repeat center/70%;
       position:absolute;
       top:80px;
       left:3%;
       transition:all 0.4s;
       text-indent:-9999px;
   }
    .se2 .inner h3{
        font-size:40px;
        line-height: 26px;
        margin-top:20px;
        text-align: left;
        margin-left:10px;
    }
    .se2 .inner .years{
        margin-top:80px;
    }
    
    .se2 .inner .years li{
        display:inline-block;
        margin:0 5px;
        cursor: pointer;
       
    }
    .se2 .inner .years li.on .icon_wrap{
        background:#f08300;
    }
    .se2 .inner .years li:hover .icon_wrap{
        
    }
    .se2 .inner .years li .icon_wrap{
        background:#808080;
        width:40px;
        height:40px;
        border-radius: 50%;
        vertical-align: bottom;
        transition:all 0.4s;
    }
    .se2 .inner .years li .icon_wrap img{
        margin-top:12px;
        width:60%;
    }
    .se2 .inner .years li .tit_wrap{
        margin-top:10px;
        opacity: 1;
        font-size:14px;
    }
    .se2 .inner .re_wrap{
        width:100%;
    }
    .se2 .inner .re_wrap li{
        display:none;
    }
    .se2 .inner .re_wrap li.on{
        display:block;
    }
    
    .se2 .inner .record_wrap{
        float:left;
        position: relative;
        width:60%;
        margin-top:40px;
        cursor: pointer;
        height: auto;
        margin-left:20%;
    }
    .se2 .inner li:first-child .record_wrap{
        width:100%;
        margin-left:0;
    }
    .se2 .inner .record_wrap .box{
        padding:20px 30px 30px;
        /* border:solid 3px #000; */
        box-sizing: border-box; 
    }
    /* .se2 .inner .record_wrap .box:after{
        display:block;
        clear: both;
        content:'';
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width:58px;
        height:58px;
        border-radius: 50%;
        background:#fff;
    } */
    @keyframes rota{
        0%{
            transform: rotate(0deg);
            transform-origin: 50% 50%;
        }
       
        100%{
            transform: rotate(360deg);
            transform-origin: 50% 50%;
        }
    }
    
    .se2 .inner .record_wrap .record{
        animation:rota 30s infinite linear;
        transition: all ease 0.5s;
        transform-origin: 50% 50%;
    }
    .se2 .inner .record_wrap .record img{
        width:80%;
    }
    /* .se2 .inner .record_wrap:after{
        display:block;
        content:'';
        clear: both;
        width:40px;
        height:30px;
        background:#fff;
        position: absolute;
        bottom:20px;
        left:20px;
        box-sizing: border-box;
        box-shadow: 2px 4px 10px rgba(0,0,0,0.5);
    } */
    
    .se2 .inner .record_wrap:hover .record{
        animation-play-state: paused;
        transition: all ease 0.5s;
        
    }
    
    .se2 .inner .record_wrap:hover .updown{
        
    }
    .se2 .inner .record_wrap .updown{
        position: absolute;
        top:0px;
        right:0px;
        transform: rotate(0);
        transition:all 0.4s;
    }
    .se2 .inner .record_wrap:hover .updown .record_player{
        transform: rotate(-25deg);
       right:-12px;
       top:-8px;
      
    }
    
    .se2 .inner .record_wrap .updown .record_play{
        display:none;
        position: absolute;
        top:10px;
        right:10px;
        width:80px;
    }
    .se2 .inner .record_wrap .updown .record_player{
        display:block;
        position: absolute;
        top:-10px;
        right:4px;
        transition:all 0.4s;
       width:140px;
       transform: rotate(-10deg);
    }
    .se2 .inner .record_wrap .updown .record_core{
        display:block;
        position: absolute;
        top:34px;
        right:34px;
        width:30px;
    }
    .se2 .inner .txt_wrap{
        float:left;
        width:100%;
        margin-top:30px;
        margin-left:0%;
        padding-bottom: 20px;
       
    }
    .se2 .inner .txt_wrap{}
    .se2 .inner .txt_wrap .tit{
        font-size:20px;
        line-height:26px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    .se2 .inner ul li:first-child .txt_wrap .txt{
        font-size:16px;
    }
    .se2 .inner .txt_wrap .txt{
        font-size:16px;
        line-height: 24px;
        color:#555;
        display: -webkit-box; 
        display: -ms-flexbox; 
        display: box; 
        margin-top:1px;
         max-height:100px; 
        overflow:hidden;
        vertical-align:top;
        text-overflow: ellipsis;
         word-break:break-all; 
        -webkit-box-orient:vertical; 
        -webkit-line-clamp:4;
        margin:0 10px;
        word-break: keep-all;

    }
    .se2 .inner .txt_wrap button{
        margin-top:40px;
        border:none;
        outline: none;
    }
    .se2 .inner .txt_wrap button a{
        display:block;
        width:150px;
        height:30px;
        background:#000;
        color:#fff !important;
        font-size:16px;
        line-height: 30px;
    }

    /* se3 */
     /* 비대칭 박스 */
     #wrap .container .section.se3 .inner{
        padding-top:0vh;
        min-width:0;
    }

    #wrap .container .section.se3 .inner ul li a .txt_wrap .number{
        font-size:40px;
        line-height:70px;
        font-weight:bold;
        
    }
    #wrap .container .section.se3 .inner ul li a .txt_wrap .number img{
        width:40px;
        height:40px;
    }
    #wrap .container .section.se3 .inner ul .box1{
        background:url(../img/50th_bclass.jpg) no-repeat 0 0/cover;
        width:100%;
        height:50vh;
    }
    
    #wrap .container .section.se3 .inner ul .box1 a .txt_wrap{
        top:80%;
        left:50%;
        transform:translate(-50%,-50%);
        text-align:center;
    }
    #wrap .container .section.se3 .inner ul .box1 a .txt_wrap .tt1{
        font-size:30px;
        line-height:40px;
        width:100%;
        font-weight:300;
    }
    #wrap .container .section.se3 .inner ul .box1 a .txt_wrap .tt1 .tt2{
        font-size:40px;
        line-height:46px;
        font-weight:bold;
    }
    
    #wrap .container .section.se3 .inner ul .box1:hover{
        transform: scale(1);
        transition:all 0.4s;
    }
    #wrap .container .section.se3 .inner ul .box2{
        width:48%;
        height:40vh;
    }
    #wrap .container .section.se3 .inner ul .box2 .tt1{
        bottom:10px;
        left:10px;
        position:absolute;
        font-size:24px;
        line-height:40px;
    }
    #wrap .container .section.se3 .inner ul .box2 .number{
        position:absolute;
        top:0;
        right:10px;
    }
    #wrap .container .section.se3 .inner ul .box3{
        background:url(../img/50th_letter.jpg) no-repeat center/cover;
        width:52%;
        height:40vh;
        
    }

    #wrap .container .section.se3 .inner ul .box3 .txt_wrap{
        left:10px;
    }
    #wrap .container .section.se3 .inner ul .box3 .tt1{
        font-size:20px;
        line-height:30px;
    }
    #wrap .container .section.se3 .inner ul .box4{
        background:url(../img/50th_hope.jpg) no-repeat center/cover;
        width:55%;
        height:40vh;
    }
    #wrap .container .section.se3 .inner ul .box4 .txt_wrap{
        left:10px;
    }
    #wrap .container .section.se3 .inner ul .box4 .tt1{
        position:absolute;
        font-size:24px;
        line-height:40px;
        bottom:10px;
        
    }
    #wrap .container .section.se3 .inner ul .box5{
        
        width:45%;
        height:40vh;
    }

    #wrap .container .section.se3 .inner ul .box5 .txt_wrap{
        left:10px;
        top:0px;
    }
    #wrap .container .section.se3 .inner ul .box5 .tt1{
        font-size:24px;
        line-height:40px;
    }
    

    #wrap .container .section.se3 .inner ul li:after{
        display:none;
    }
    #wrap .container .section.se3 .inner ul li a .txt_wrap{
        opacity: 1;
    }

    /* se4 */

     /* 현재2 */

     .se4{
        overflow:hidden;
    }
    .se4 h3{
        position: absolute;
        top:13%;
        left:50%;
        transform:translatex(-50%);
        font-size:130px;
        line-height: 70px;
        white-space: nowrap;
        opacity: 0.2;
        color:#ccc;
    }
    .se4 .inner{
        width:100%;
        margin:0 auto;
    }
    .se4 .inner .txt_wrap{
        float:left;
        width:100%;
        text-align: left;
    }
    .se4 .inner .txt_wrap .tit{
        font-size:40px;
        line-height: 46px;
        font-weight: bold;
        text-align: center;
        margin-top:50px;
        
    }
    .se4 .inner .txt_wrap .tit .dsds{
        display:none;
    }
    .se4 .inner .txt_wrap .txt{
        font-size: 26px;
        line-height: 36px;
        margin:10px 0 30px;
        color:#666;
        font-weight: 300;
        text-align: center;
    }
    .se4 .inner .txt_wrap .btn_wrap{
        width:45%;
        margin:0 auto;
        
    }
    .se4 .inner .txt_wrap button{
        background:none;
        border:none;
        margin:0 auto;
    }
    .se4 .inner .txt_wrap button a{
        display:block;
        width:150px;
        font-weight: 500;
        height:40px;
        border:solid 1px #000;
        font-size:16px;
        line-height: 40px;
    }
    
    .se4 .inner .slick_wrap{
        float:left;
        width:100%;
        margin-top:20px;
    } 
    .se4 .inner .slick_wrap ul{
        width:100%;
        height:100%;
    } 
    .se4 .inner .slick_wrap ul li{
        height:auto;
        width:33.3%;
        margin:0 10px;
        transition:all 0.4s;
    } 
    
    .se4 .inner .slick_wrap ul li img{
        width:100%;
        height:100%;
    }
    .se4 .inner .slick_wrap ul li.slick-center {
        
    }
    .se4 .inner .slick_wrap ul li a{
        display:block;
        width:100%;
        height:auto;
        outline:none;
    }
    .se4 .inner .slick_wrap ul li a span{
        display:block;
        width:100%;
        height:100%;
    }
    .se4 .inner .slick_wrap ul li.s1{
        background:red;
    } 
    .se4 .inner .slick_wrap ul li.s2{
        background:blue;
    } 
    .se4 .inner .slick_wrap ul li.s3{
        background:green;
    } 
    .se4 .inner .slick_wrap ul li.s4{
        background:purple;
    } 
    .se4 .inner .slick_wrap ul li.s5{
        background:gray;
    } 
    
    .se4 .inner .txt_wrap .btn_wrap .prev,
    .se4 .inner .txt_wrap .btn_wrap .next{
        width:40px;
        height:40px;
        border-radius: 50%;
        border:solid 1px #000;
        outline:none;
        box-sizing: border-box;
        cursor: pointer;
        margin-left:0px;
    }

    /* se5 iphone */

     /* 나아갈 50년 */

     .se5{
       
        position: relative;
        width:100%;
    }
        .se5 h3{
        position: absolute;
        top:2%;
        left:50%;
        transform: translatex(-50%);
        font-size:40px;
        line-height: 46px;
        color:#fff;
    }
    .se5 .img_wrap{
        width:100%;
        
        height:50%;
        position: absolute;
        top:0;
        transform: translatey(0) rotate(180deg);
        left:0;
    }
    .se5 .img_wrap ul{
        position: absolute;
        top:20%;
        transform:translatey(-50%);
        left:0;
        width:100%;
    }
    .se5 .img_wrap ul li{
        width:33.3%;
        height:auto;
        overflow: hidden;
        position: relative;
        
    }
    .se5 .img_wrap ul li img{
        text-align: center;
        
        border-radius: 50%;
        display:block;
        width:100%;
        height:100%;
    }
    .se5 .img_wrap ul li .overlay{
        position: absolute;
        width:160px;
        height:160px;
       
        top:0;
        left:0;
       
    }

    .se5 .inner{
        width:100%;
        margin:0 auto;
        
    }
    .se5 .inner .tit_wrap{
        float:none;
        text-align: left;
        width:100%;
        margin-top:100px;
        padding-left:10px;
    }
    .se5 .inner .tit_wrap .t1{
        color:#fff;
        font-size:26px;
        font-weight: 500;
        line-height: 36px;
    }
    .se5 .inner .tit_wrap .t2{
        font-size:36px;
        font-weight: bold;
        color:#ffe266;
        line-height:40px;
        margin-top:10px;
        
    }
    .se5 .inner .iphone{
        position: relative;
        background:url(../img/se5_mockup.png) no-repeat center/80%;
       
        top:-20px;
        left:0;
        transform: translate(0, 0);
        z-index: 1;
        margin:0 auto;
    }
    .se5 .inner .iphone ul{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        width:100%;
    }
    .se5 .inner .iphone ul li{
        display:none;
   
    }
    .se5 .inner .iphone ul li.on{
        display:block
    }
    .se5 .inner .iphone ul li .txt{
        margin-top:0;
    }
    .se5 .inner .iphone ul li .txt .t1{
        color:#ddd;
        font-style: italic;
        font-size:14px;
        padding:0 15px;
        line-height: 18px;
    }
    .se5 .inner .iphone ul li .txt .t2{
        font-size:24px;
        font-weight: bold;
        line-height:30px;
        color:#fff;
        margin: 10px 0 40px;
        padding:0 15px;
    }
    .se5 .inner .iphone ul li .btn{
        border:none;
        background:none;
    }
    .se5 .inner .iphone ul li .btn a{
        display:block;
        color:#fff;
        padding:5px 15px;
        border-radius: 10px;
        font-size:14px;
    }
    .se5 .inner .iphone ul li .pic_wrap{
        width:150px;
        height:150px;
        border-radius: 50%;
        margin:0 auto;
        margin-top:40px;
      
    }

    .se5 .inner .txt_wrap{
        float:none;
        width:100%;
        color:#fff;
        padding-top:0px;

    }
    .se5 .inner .txt_wrap p{
        text-align: left;
        font-size: 26px;
        padding-bottom: 15px;
        margin-bottom:15px;
        position: relative;
        padding-left:20px
    }
    .se5 .inner .txt_wrap p:after{
        display:block;
        clear:both;
        content:'';
        width:100%;
        height:16px;
        background:url(../img/se5_arrow.png) no-repeat center/100%;
        bottom:-5px;
        left:0;
        position: absolute;
    }
    .se5 .inner .txt_wrap ul{
        
    }
    .se5 .inner .txt_wrap ul li{
        float:left;
        width:50%;
        text-align: center;
        margin-bottom: 10px;
        padding-bottom: 10px;
        cursor: pointer;
        font-size: 18px;
        line-height: 20px;
        border-bottom:solid 1px rgba(255,255,255,0.2);
        box-sizing: border-box;
        
    }

    #foot .inner{
        margin:0 10px;
       
    }

}