@charset "uft-8";

html,body{height:100%;}
/* people_video_section */
/* .people_video_section{ height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #071b3e;}
.people_video_area{ width: 100%; max-width: 900px; margin: 0 auto;}
.people_video_area .video_wrap{ margin: 25px auto;}

.video_text.people{ text-align: center; line-height: 1.5; color: #fff;}
.video_text.people strong{ display: block; font-size: 35px;}

@media all and (min-width:480px){
    .video_text.people strong{ display: inline;}
}
@media all and (min-width:480px) and (orientation: landscape){
    .people_video_section{ height: auto; padding: 80px 0 50px 0;}
}
@media all and (min-width: 640px){
    .people_video_area .video_wrap{ margin: 35px auto;}

    .video_text.people{ font-size: 20px;}
    .video_text.people strong{ display: inline-block; font-size: 40px;}
}
@media all and (min-width: 768px){
    .video_text.people{ font-size: 25px;}
    .video_text.people strong{ font-size: 50px;}
}
@media all and (min-width: 1024px){
    .video_text.people strong{ font-size: 55px;}
}
@media all and (min-width: 1280px){
    .video_text.people{ font-size: 28px;}
    .video_text.people strong{ font-size: 60px;}
}
@media all and (min-width: 1440px){
   .video_text.people{ font-size: 30px;}
   .video_text.people strong{ font-size: 69px;}
}
@media all and (min-width: 1680px) and (orientation: landscape){
    .people_video_section{ height: 100%; padding: 50px 0 0 0;}
    .people_video_area .video_wrap{ margin: 40px auto;}
}
@media all and (min-width: 1680px){
    .video_text.people{ font-size: 36px;}
    .video_text.people strong{ font-size: 73px;}
} */

/* 애니메이션 */
.people_down{transform:scale(0.8); opacity:0; transition:0.5s; transform-origin:50% 50%;}
.people_up{transform:scale(1); opacity:1; transition:0.5s; transform-origin:50% 50%;}


/* people_img_section */
.people_img_section{background-image:url(../images/people_m_bg.jpg); background-repeat:no-repeat; background-position:50% 50%; background-size:cover;}

@media all and (min-width:640px) and (orientation: landscape){
    .people_img_section{background-image:url(../images/people_bg.jpg);}
}

/* genius_section */
.genius_section{position:relative; height:100%; position:relative;}
.genius_section_bg{position: absolute; right: 0; bottom: 0; width:100%; height:100%; background-image: url(../images/genius_bg.png); background-position: 100% 100%; background-repeat: no-repeat; background-attachment:fixed; background-size:contain; opacity:0.05; z-index:-1;}

.genius_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%; max-width:1200px; margin:0 auto; width:92%;}

.genius_area{color:#888;}
.genius_title{color:#111; margin-bottom:10px; font-size:22px;}
.genius_title strong{font-size:;}

.genius_text_small_area{line-height:1.5;}

.genius_text_big_area{margin:20px 0; font-size:22px; color:#111; line-height:1.4;}

@media all and (min-width: 640px){
    .genius_title{ font-size: 40px; margin-bottom:15px;}
    .genius_title strong{ font-size: 40px;}

    .genius_text_small_area{font-size:20px;}
    .genius_text_small_area .break{display:block;}
    
    .genius_text_small_area span.break{display:block;}
    
    .genius_text_big_area{margin:30px 0; font-size:26px;}
    .genius_text_big_area .break{display:inline;}
    .genius_text_big_area span.break{display:block;}

    .genius_text_blod{display:inline-block;}
}
@media all and (min-width: 640px) and (orientation:landscape){
    .genius_section{height:auto;}
    .genius_wrap{height:auto; padding:30px 0 50px 0;}
    
    .genius_title{font-size:24px; margin-bottom:15px;}
    .genius_title strong{ font-size:24px;}
    
    .genius_text_small_area{font-size:16px;}
    .genius_text_small_area .break{display:inline;}
    
    .genius_text_small_area span.break{display:inline;}
    .genius_text_small{display:inline;}
    
    .genius_text_big_area{margin:10px 0; font-size:20px;}
}

@media all and (min-width: 1024px){
    .genius_section{height:100%;}
    .genius_section_bg{background-position:100% 65%; background-size:100%; opacity:1;}
    .genius_wrap{-webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start; height:100%; padding:0}

    .genius_title{font-size:32px; margin-bottom:12px;}
    .genius_title strong{font-size:32px;}
    .genius_text_small_area{font-size:18px; line-height:1.5;}    
    .genius_text_big_area{margin:20px 0; font-size:23px; line-height:1.4;}
    
    .genius_text_small_area span.break{display:block;}
    .genius_text_small{display:block;}
}
@media all and (min-width: 1280px){
    .genius_title{font-size:40px; margin-bottom:15px;}
    .genius_title strong{font-size:40px;}
    .genius_text_small_area{font-size:19px;}    
    .genius_text_big_area{margin:25px 0; font-size:24px;}
}
@media all and (min-width: 1440px){
    .genius_title{font-size:40px;}
    .genius_title strong{font-size:40px;}
    .genius_text_small_area{font-size:20px;}    
    .genius_text_big_area{margin:25px 0; font-size:26px;}
}
@media all and (min-width: 1680px){
    .genius_wrap{width:100%;}

    .genius_title{font-size:48px;}
    .genius_title strong{font-size:48px;}
    .genius_text_small_area{font-size:22px;}    
    .genius_text_big_area{margin:35px 0; font-size:28px;}
}
@media all and (min-width:1921px){
    .genius_section_bg{right:calc(50% - 960px); bottom:auto; top:calc(50% - 283px); width:1920px; height:667px; background-position:100% 50%; background-size:contain;}
}

/* book_section */
.book_section{background:url(../images/book_m_bg.png) no-repeat 92% 97% fixed; background-size:45%; background-color:#071b3e; height:100%;}
.book_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; height:100%;}

.book_title_wrap{line-height:1.4; color:#fff; text-align:center; margin-bottom:30px;}
.book_title_learn{font-size:18px;}
.book_title_study{ font-size:22px; font-weight: 500;}
.book_title_do{ font-size:26px; font-weight: 700;}

.book_text_area{color: #fff; line-height:1.6; font-size:15px;}
.book_text_area > div{ margin-bottom:30px;}
.book_text_area > div:last-child{ margin-bottom: 0px;}

.book_text_area h3{ display: block; margin-bottom:5px; font-size:19px;}
.book_text_area .space{padding:5px 0; display:block;}

.book_down_1{transform:scale(0.8); opacity:0; transition:all 0.6s;}
.book_up_1{transform:scale(1); opacity:1; transition:all 0.6s;}
.book_down_2{position:relative; top:200px; opacity:0; transition:all 0.6s;}
.book_up_2{position:relative; top:0; opacity:1; transition:all 0.6s;}

@media all and (min-width: 640px){   
    .book_title_wrap{line-height:1.4; margin-bottom:50px;}
    .book_title_learn{font-size:26px;}
    .book_title_study{font-size:32px;}
    .book_title_do{font-size:38px;}
    
    .book_contents_wrap{margin-left:-20%;}

    .book_text_area{font-size:18px;}
    .book_text_area > div{margin-bottom:30px;}
    .book_text_area p{padding-left:10px;}

    .book_text_area h3{margin-bottom:5px; font-size:22px;}
    .book_text_area .space{padding:10px 0;}
}
@media all and (min-width: 640px) and (orientation:landscape){
    .book_section{height:auto; background-size:30%;}
    .book_wrap{height:auto; padding:20px 0 50px 0;}
    
    .book_title_wrap{margin-bottom:20px;}
    .book_title_learn{font-size:18px;}
    .book_title_study{font-size:22px;}
    .book_title_do{font-size:26px;}
    
    .book_contents_wrap{margin-left:-35%;}
    
    .book_text_area{font-size:14px;}
    .book_text_area h3{font-size:16px; margin-bottom:5px;}
    .book_text_area .space{padding:2px 0;}
    .book_text_area > div{margin-bottom:5px;}
}
@media all and (min-width:1024px){
    .book_section{height:100%;}
    .book_wrap{height:100%;}    
    .book_section{background-position:90% 90%; background-size:40%;}
    .book_title_wrap{line-height:1.3; margin-bottom:20px;}
    .book_title_learn{font-size:20px; font-weight:300; display:block;}
    .book_title_study{font-size:24px; font-weight:500; display:block; padding:0;}
    .book_title_do{font-size:28px; font-weight:700; display:block;}
    
   .book_contents_wrap{margin-left:0; width:850px;}
    
    .book_text_area{font-size:16px;}
    .book_text_area > div{margin-bottom:15px;}

    .book_text_area h3{margin-bottom:5px; font-size:19px;}
    .book_text_area .space{padding:5px 0;}
}
@media all and (min-width:1280px){
    .book_title_wrap{margin-bottom:25px;}
    .book_title_learn{font-size:24px;}
    .book_title_study{font-size:28px;}
    .book_title_do{font-size:32px;}
    
   .book_contents_wrap{width:770px;}
    
    .book_text_area{font-size:17px;}
    .book_text_area > div{margin-bottom:20px;}

    .book_text_area h3{margin-bottom:5px; font-size:20px;}
    .book_text_area .space{padding:5px 0;}
}
@media all and (min-width:1440px){
    .book_title_wrap{margin-bottom:40px;}
    .book_title_learn{font-size:30px;}
    .book_title_study{font-size:35px;}
    .book_title_do{font-size:40px;}
    
   .book_contents_wrap{width:800px;}
    
    .book_text_area{font-size:18px;}
    .book_text_area > div{margin-bottom:20px;}

    .book_text_area h3{margin-bottom:5px; font-size:21px;}
    .book_text_area .space{padding:8px 0;}
}
@media all and (min-width: 1680px){
    .book_title_wrap{margin-bottom:60px; padding-top:18px;}
    .book_title_learn{font-size:38px;}
    .book_title_study{font-size:42px;}
    .book_title_do{font-size:46px;}
    
    .book_contents_wrap{width:820px;}

    .book_text_area{font-size:18px;}
    .book_text_area > div{margin-bottom:25px;}

    .book_text_area h3{margin-bottom:5px; font-size:21px;}
    .book_text_area .space{padding:10px 0;}
}
@media all and (min-width:1920px){
    .book_section{background:none; background-color:#071b3e;}
    .book_area{width:100%; height:100%;}
    .book_title_wrap{margin-bottom:25px;}
    
    .book_section_bg{ position: relative; margin: 0 auto; max-width:1920px; height:637px; background-image: url(../images/book_bg.png); background-position: center bottom; background-repeat: no-repeat; background-size:100%;}
    
    .book_down_2{position:static; opacity:1; transition:0;}
    .book_up_2{position:static; transition:0;}

    .book_cover{position:absolute; top:0; width:50%; height:100%; z-index:50; background-color:#071b3e;}
    .book_cover.left{ left: 0;}
    .book_cover.right{ right: 0;}

    .book_cover.left.active{ animation: BookleftOut 1.8s forwards; animation-delay:0.4s;}
    .book_cover.right.active{ animation: BookrightOut 1.8s forwards; animation-delay:0.4s;}

    @keyframes BookleftOut {
        from{width:50%;}
        to{width:0%;}
    }
    @keyframes BookrightOut {
        from{width:50%;}
        to{width:0%;}
    }

    .book_img_area{ display: none;}
 
    .book_text_area{width:350px; position: absolute; left:34.5%; top:13.8%; transform: rotate(46deg); font-size:12.5px; letter-spacing:-0.5px;}
    
    .book_text_area > div{margin-bottom:10px;}

    .book_text_area h3{margin-bottom:2px; font-size:15px;}
    .book_text_area .space{padding:5px 0;}
}

/* onebitetree_section */
.onebitetree_section{height:100%; position:relative;}
.onebitetree_wrap{position:absolute; bottom:0; left:0; width:100%;}
.onebitetree_title{ padding-bottom:60px; font-size: 35px; line-height: 1.3; text-align: center; color: #111;}
.onebitetree_title strong{ display: block;}

.onebitetree_img{ position: relative; width: 100%;}
.tree_img{display:block; width:90%; margin:0 auto;}

.onebitetree_section_bg{position:absolute; left:0; top:0; background-color:#fff; width:100%; height:100%;}
.onebitetree_section_bg.active{animation:TreefadeIn 1.2s forwards; animation-delay:0.4s;}
@keyframes TreefadeIn{
    from{ height: 100%;}
    to{ height: 0%;}
}

.onebitetree_text{ padding: 15px 0; font-size: 25px; font-weight: 700; color: #fff; text-align: center; font-family: 'Montserrat', sans-serif; background-color: #071b3e;}

@media all and (min-width: 640px){
    .onebitetree_title{padding-bottom:70px; font-size:40px;}
    .onebitetree_title strong{display:inline;}
}
@media all and (min-width: 640px) and (orientation:landscape){
    .onebitetree_title{padding-bottom:20px; font-size:32px;}
    .tree_img{width:20%;}
}
@media all and (min-width:1024px){
    .onebitetree_title{padding-bottom:40px; line-height:1; font-size:36px;}
    
    .tree_img{width:42%;}
    .onebitetree_text{padding:20px 0; font-size:26px;}
}
@media all and (min-width:1280px){
    .onebitetree_title{font-size:38px;}
    .tree_img{width:38%;}
    .onebitetree_text{font-size:28px;}
}
@media all and (min-width:1440px){
    .onebitetree_title{font-size:42px;}
    .onebitetree_text{padding:25px 0; font-size:34px;}
}
@media all and (min-width:1680px){
    .onebitetree_title{padding-bottom:45px; font-size:46px;}
    .tree_img{width:674px;}
    .onebitetree_text{padding:28px 0; font-size:40px;}
}

/* channel_section */
.channel_section{background:url(../images/engpeople_5.jpg) no-repeat; background-position:50% 50%; background-size:cover;}
.channel_wrap{display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; color: #fff; position:relative; height:100%; max-width:1200px; margin:0 auto;}

.channel_title{padding-bottom:30px; font-size:36px; text-align: center; line-height:1.3;}
.channel_title strong{display: block;}
.channel_text{text-align:center; line-height:1.6; font-size:17px;}
.channel_text span{display:block;}

.channel_section_bg.active{animation:opacity 2s forwards;}

@keyframes opacity {
    from{ opacity: 0;}
    to{ opacity: 1;}
}

@media all and (min-width: 640px){
    .channel_title{font-size:48px;}
    .channel_text{font-size:25px;}
}
@media all and (min-width: 640px) and (orientation:landscape){
    .channel_title{font-size:36px;}
    .channel_text{font-size:18px;}
}
@media all and (min-width: 1024px){
    .channel_wrap{-webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start;}
    .channel_area{padding-left:6%;}
    
    .channel_title{font-size:48px;}
    .channel_text{font-size:25px;}
}
@media all and (min-width: 1280px){
    .channel_title{font-size:50px;}
    .channel_text{font-size:26px;}
}
@media all and (min-width: 1440px){
    .channel_area{padding-left:0;}
    .channel_title{font-size:58px;}
    .channel_text{font-size:28px;}
}
@media all and (min-width: 1680px){
    .channel_title{font-size:64px;}
    .channel_text{font-size:29px;}
}

/* brain_section */
.brain_section{height:100%; position:relative; background-color:#f7f7f7;}
.brain_wrap{position:absolute; left:0; bottom:0; width:100%;}
.brain_text_wrap{padding: 0 0 20px 0; text-align:center; color:#111;}
.brain_title{padding-bottom: 15px; font-size:28px; font-weight:700; line-height:1.2;}
.brain_text{ line-height: 1.3; font-size:18px;}
.brain_text strong{ display: block;}

.brain_img_area{width:80%; max-width:602px; margin:0 auto; position:relative;}

.brain_cover{position:absolute; left:0; top:0; background-color:#f7f7f7; width:100%; height:100%;}
.brain_cover.active{animation:BrainfadeIn 1.2s forwards; animation-delay:0.4s;}
@keyframes BrainfadeIn{
    from{ height: 100%;}
    to{ height: 0%;}
}

.brain_img{width:100%;}

.brain_img_text{position:absolute; font-size:26px; text-align: center; color: #fff; line-height:1.3; left:15%; right:15%; bottom:14%; top:62%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; align-items:center; border:1px solid #;}
.brain_img_text strong{width:100%; display:block;}

@media all and (min-width: 640px){
    .brain_title p{ display: inline-block;}
    .brain_title{padding-bottom:20px; font-size:32px;}
    .brain_text{font-size:20px;}
    .brain_text strong{display:inline;}

    .brain_img_text{font-size:38px;}
}
@media all and (min-width: 640px) and (orientation:landscape){
    .brain_img_area{width:25%;}
    
    .brain_title{padding-bottom:5px; font-size:20px;}
    .brain_text_wrap{padding-bottom:10px;}
    .brain_text{font-size:16px;}
    
    .brain_img_text{font-size:17px;}
}
@media all and (min-width: 1024px){
    .brain_title{font-size:36px; padding-bottom:12px;}
    .brain_text{font-size:22px;}
    .brain_img_area{width:38%;}     
    .brain_img_text{font-size:32px;}
}
@media all and (min-width:1280px){
    .brain_title{font-size:40px; padding-bottom:15px;}
    .brain_text{font-size:24px;} 
    .brain_img_area{width:33%;} 
    .brain_img_text{font-size:34px;}
}
@media all and (min-width:1440px){
    .brain_text_wrap{padding-bottom:35px;}
    .brain_title{font-size:44px; padding-bottom:20px;}
    .brain_text{font-size:25px;} 
    .brain_img_text{font-size:36px;}
}
@media all and (min-width: 1680px){
    .brain_text_wrap{padding-bottom:30px;}
    .brain_title{font-size:48px; padding-bottom:18px;}
    .brain_text{font-size:26px;} 
    .brain_img_area{width:602px;} 
    .brain_img_text{font-size:44px;}
}