/*--- menu ---*/
header {position: fixed; z-index: 9999; }
.mobile_header {display: none;}
.m_footer {text-align: center; position: absolute; bottom:100px; width:100%; font-weight: bold; font-size:12px; line-height: 20px; color:gray;}
.m_footer h2 {margin-top:10px;}
.menu_on {}


/*--- section ---*/

.section {position: relative;}
.section .section_title {color:white; width:800px; position: absolute; top:40%; left:10%;}
.section .img_box {float:left; position: absolute; top:30%; left:10%; width:100%; overflow: hidden;}
.section .box {float:left; margin-right:5px; margin-left:0; transition:0.7s; cursor: pointer;}
.section .box img {width:350px;}
.section div h1 {font-size:25px; font-family: "nanumB"; margin-bottom:20px;}
.section div h2 {font-size:18px; line-height: 30px;}
.section div h3 {margin-top:40px; width:250px;}
.section div h3 a {width:300px;}
.section div h3 img {width:150px; transition: 0.7s}
.section div h3 img:hover {margin-left:30px;}


/*--- #fp-nav ul li a span ---*/
#fp-nav ul li {padding:10px;}
#fp-nav ul li a {display: block;}
#fp-nav ul li a span {background:rgba(255,255,255,0.5); width:4px; height:4px;}
#fp-nav ul li:last-child {display: none;}

/*--- section1 ---*/
#section1 {background: url(../images/background.png)no-repeat center center; background-size:cover; transition: 0.8s;}
#section1 .section_title {top:40%;}
/*section1>div {width:800px; position: relative; top:40%; left:10%;}*/
#section1 img {width:40px;}

#section1 h1 {overflow: hidden; height:50px;  margin:0; position: relative;}
#section1 h1>p {font-size:30px; color:silver; font-family: "nanumL"; margin:0; position: absolute; top:50px;}

#section1 h2 {overflow: hidden; height:150px; margin:0; position: relative;}
#section1 h2>p {font-size:30px; font-family: "nanumB"; line-height: 50px; margin:0; position: absolute; top:140px;}

#section1 h3 {font-size:15px; letter-spacing: 3px; font-weight: bold; line-height: 40px; margin-top:30%;}
#section1 h3 img {float:left; margin-right:10px;}

#video {position: absolute; top:0; right:0; min-width:100%; min-height:100%; width:1900px; height:auto; z-index: -99; overflow: hidden;}

/*--- section2 ---*/
#section2 {background: url(../images/index_banner2.jpg)no-repeat center center; background-size:cover;}
#section2 .img_box .box {opacity: 0;}

/*--- section3 ---*/
#section3 {background: url(../images/index_banner3.jpg)no-repeat center center; background-size:cover;}
#section3 .img_box .box {opacity: 0;}

/*--- section4 ---*/
#section4 {background: url(../images/index_banner4.jpg)no-repeat center center; background-size:cover;}
#section4 .img_box .box {opacity: 0;}

/*--- footer ---*/
#footer {background:black; height:150px; text-align: center; padding-top:80px;}
#footer h1 {font-size:13px; font-family: "nanumL"; margin:0; margin-bottom:10px; font-weight: bold; color:#999;}
#footer h2 {font-size:13px; font-family: "nanumL"; font-weight: bold; color:#999;}


/*--- scroll ---*/

#scroll {overflow: hidden; width:150px; position: absolute; left:10%; bottom:10%;}
#scroll p {margin:0; margin-top:10px; color:white; font-family: "nanumL"; font-weight: bold; font-size: 15px; letter-spacing: 1px;}



.scroll-downs {
        width: 35px;
        height: 45px;
        float:left;
    }
    

    .mousey {
        width: 3px;
        padding: 5px 8px;
        height: 25px;
        border-radius: 25px;
        border: 2px solid #fff;
        box-sizing: content-box;
    }
    
    .scroller {
        width: 2px;
        height: 8px;
        border-radius: 50%;
        background-color: #fff;
        animation-name: scroll;
        animation-duration: 2.2s;
        animation-timing-function: cubic-bezier(.15, .41, .69, .94);
        animation-iteration-count: infinite;
    }
    
    @keyframes scroll {
        
        0% {
            opacity: 0;
        }
        
        10% {
            transform: translateY(0);
            opacity: 1;
        }
        
        100% {
            transform: translateY(15px);
            opacity:0;
        }
        
        @keyframes downup {
            
            0% {
                opacity: 0;
                transform: translateY(0, 100px);
            }
            
            100% {
                opacity: 1;
                transform: translate(0, 0);
            }
        }
        
        @keyframes bounce {
            
            from,
            to {
                margin-bottom: 0;
                animation-timing-function: ease-out;
            }
            
            50% {
                margin-bottom: 8px;
                animation-timing-function: ease-in;
            }
        }
    }
@media(min-width:601px) and (max-width:1199px) {
    header {border-bottom:0;}
    .mobile_header {display: block;}
    .section .section_title {width:95%; left:5%; top:30%;}
    .fp-tableCell {width:calc(100% - 20px); padding:10px;}
    
    #video {right:0; width:auto; height:100%; display: none;}
    #scroll {left:5%;}
    
    #footer {padding:10px 5px; padding-top:35px;}
    #footer h1 span:before {content:"\A"; white-space:pre; line-height: 40px;}
    #footer h1 {font-size:12px; line-height: 16px;}
    #footer h2 {font-size:12px; margin-right:0; width:100%;}
    
    .section div h1 {}
    .section div h2 {width:85%; line-height: 25px; transform: skew(0.03deg)}
    .section .box img {width:100%;}
    .section .img_box {left:5%; top:25%;}
    .section .img_box .box {width:40%;}
    .section .img_box .box:nth-of-type(3) {display: none;}
    #section1 {background:url(../images/index_banner1.png) center center no-repeat; background-size:cover;}
    _:-ms-input-placeholder, :root #section1 h1 {height:40%;}
    #section1 h1 {height:100%;  margin-bottom:10px;}
    #section1 h1>p {position: inherit; width:85%; line-height: 40px; font-size:25px;}
    #section1 h2 {height:100%;}
    #section1 h2>p {position: inherit; width:100%; line-height:40px; font-size:25px;}
    #section5 .fp-tableCell {padding:0;}
    
}


@media(max-width:600px) {
    header {border-bottom:0;}
    .mobile_header {display: block;}
    .section .section_title {width:80%; text-align: center; left:none; margin:auto; top:30%;}
    .fp-tableCell {width:calc(100% - 20px);}
    
    #scroll {left:40%;}
    #video {left:-100%; width:auto; height:100%; display: none;}
    
    #footer {padding:10px 5px; padding-top:35px;}
    #footer h1 {font-size:11px; line-height: 16px;}
    #footer h2 {font-size:11px; margin-right:0; width:100%;}
    
    .section div h1 {font-size:20px;}
    .section div h2 {font-size:15px; width:100%; line-height: 25px; transform: skew(0.03deg)}
    .section div h3 {margin:auto; margin-top:10%;}
    .section .box img {width:100%;}
    .section .img_box {top:15%;}
    .section .img_box .box {width:80%;}
    .section .img_box .box:nth-of-type(2) {display: none;}
    .section .img_box .box:nth-of-type(3) {display: none;}
    #section1 {background:url(../images/index_banner1.png) center center no-repeat; background-size:cover;}
    #section1 .section_title {width:80%; top:30%;}
    #section1 h1 {height:100%;  margin-bottom:10px;}
    #section1 h1>p {position: inherit; font-size:20px; width:100%; line-height: 30px;}
    #section1 h2 {height:100%;}
    #section1 h2>p {position: inherit; font-size:18px; width:100%; line-height:28px;}
    #section5 .fp-tableCell {padding:0;}
}