.section{position: relative;text-align: center;background: #fff;z-index: 2}
.section>.inner{position: relative;z-index: 1}
.section .copy{font-size: 20px;font-weight: 300;line-height: 34px;}
.section .title{font-size: 42px;letter-spacing: 1px;margin-bottom: 102px;}

/*.top {width:120%;position:relative;left:-10%;z-index:2;overflow:hidden;
    -webkit-border-radius: 0 0 50% 50%;
    -moz-border-radius: 0 0 50% 50%;
    border-radius: 0 0 50% 50%;}*/
.top .top_bg {background:#fff url('/_resource/images/movie/top_bg_about.jpg') no-repeat top center;}
.top .inner{height: 480px;display: table; *display:block; *overflow:hidden;text-align: center;width: 100%;}

.top .inner h2{font-size: 52px;font-weight: 900;color: #fff;line-height: 76px;letter-spacing: 2px;text-align: center;display: table-cell; *float:left;vertical-align: middle;padding-top: 88px;position:relative;z-index:2;}
.top .inner h2 span{display: block;transform: translateY(50px);opacity: 0;}
.top .inner h2 span.copy2{width:248px;height:150px;margin:8px auto 0;background:url('/_resource/images/movie/about_top_logo.svg') no-repeat 0 0;}
.top .inner h2.on span{transform: translateY(0);opacity: 1;transition: all 0.8s;}
.top .inner h2.on span.copy2{transition-delay: 0.3s;}

/*
.top .inner .bottom_bg{/!*position: absolute;width: 100%;height: 100%;left: 0;bottom: 0*!/}
.top .inner .bottom_bg>div{position: absolute;bottom: 0;width: 50%}
.top .inner .bottom_bg>div img{width: 100%}
.top .inner .bottom_bg .bottom_left{left: 0;transform-origin: 100% 95%}
.top .inner .bottom_bg .bottom_right{right: 0;transform-origin: 0 95%}
.section.top.active .inner .bottom_bg .bottom_left{
    -moz-transform: translateY(40px) rotate(-8deg);
    -webkit-transform: translateY(40px) rotate(-8deg);
    -o-transform: translateY(40px) rotate(-8deg);
    -ms-transform: translateY(40px) rotate(-8deg);
    transform: translateY(40px) rotate(-8deg);
}

.section.top.active .inner .bottom_bg .bottom_right{
    -moz-transform: translateY(40px) rotate(8deg);
    -webkit-transform: translateY(40px) rotate(8deg);
    -o-transform: translateY(40px) rotate(8deg);
    -ms-transform: translateY(40px) rotate(8deg);
    transform: translateY(40px) rotate(8deg);
}
*/

.top .inner .bottom_bg{
    position: absolute;z-index: 1;width: 2500px;height: 2500px;bottom: 0;left: 50%;margin-left: -1250px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    overflow: hidden;
    transform-origin: 50% 100%;

    transition: all 1s ;
    background: #fdfdfd;
}
.top .inner .bottom_bg img{width: 2000px;height: 800px;position: absolute;left: 50%;bottom: 0;margin-left: -1000px}
.top.active .inner .bottom_bg{
    width: 3000px;
    height: 1500px;
    margin-left: -1500px;
    transition-delay:0.2s;
}

.main_copy .inner{padding-top: 128px;text-align: center;padding-bottom: 142px;}
.main_copy .inner .sub_title{font-size: 52px;line-height: 68px;letter-spacing: -0.25px;margin-bottom: 40px}
.main_copy .inner>div{visibility: hidden;opacity: 0;transition: all 0.8s ;transform: translateY(50px);} .main_copy.on .inner .sub_title{visibility: visible;opacity: 1;transform: translateY(0px);transition-delay: 0.2s}
.main_copy.on .inner .copy{visibility: visible;opacity: 1;transform: translateY(0px);transition-delay: 0.4s}

.img_parallax{}
.img_parallax .inner{height: 480px;overflow: hidden;position: relative;padding: 0}
.img_parallax .inner .bg_area{position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%}
.img_parallax .inner .bg_area img{width: 100%}

.vision .bg_circle_area .bg_circle2{position: absolute;top:50%;left: 50%;margin-left: -240px;z-index: 1;margin-top: -215px}
.vision .bg_circle_area .bg_circle1{position: absolute;top:50%;left: 50%;margin-left: -230px;z-index: 1;margin-top: -220px}
/*.vision .bg_circle_area .bg_circle_vision1{position: absolute;bottom: 0;left: 50%;margin-left: -400px}*/
/*.vision .bg_circle_area .bg_circle_vision2{position: absolute;bottom: 0;left: 50%;margin-left: -40px}*/
.vision .bg_circle_area .bg_circle_vision1.active{
    -webkit-animation: moveY infinite 7.3s linear;
    -o-animation: moveY infinite 7.3s linear;
    -moz-animation: moveY infinite 7.3s linear;
    -ms-animation: moveY infinite 7.3s linear;
    animation: moveY infinite 7.3s linear;
}
.vision .bg_circle_area .bg_circle_vision2.active{
    -webkit-animation: moveY2 infinite 7.3s linear;
    -o-animation: moveY2 infinite 7.3s linear;
    -moz-animation: moveY2 infinite 7.3s linear;
    -ms-animation: moveY2 infinite 7.3s linear;
    animation: moveY2 infinite 7.3s linear;
}
.vision .inner{padding-top:200px;padding-bottom: 200px;}
.vision .inner>div{visibility: hidden;opacity: 0; transition: all 0.8s ; transform: translateY(50px);}
.vision .inner .sub_copy{font-size: 48px;font-weight: 900;line-height: 64px;letter-spacing: 0.7px;margin-bottom: 22px;}
.vision.on .inner .title{visibility: visible;opacity: 1;transform: translateY(0px);transition-delay: 0.2s}
.vision.on .inner .sub_copy{visibility: visible;opacity: 1;transform: translateY(0px);transition-delay: 0.4s}
.vision.on .inner .copy{visibility: visible;opacity: 1;transform: translateY(0px);transition-delay: 0.6s}

.mission .bg_circle_area .bg_circle1{position: absolute;top: -80px;left: 50%;margin-left: -643px;}
.mission .bg_circle_area .bg_circle2{position: absolute;top: 1100px;left: 50%;margin-left: 387px;}
.mission .bg_circle_area .bg_circle_vision1.active{
    -webkit-animation: moveY infinite 5.3s linear;
    -o-animation: moveY infinite 5.3s linear;
    -moz-animation: moveY infinite 5.3s linear;
    -ms-animation: moveY infinite 5.3s linear;
    animation: moveY infinite 5.3s linear;
}
.mission .bg_circle_area .bg_circle_vision2.active{
    -webkit-animation: moveY2 infinite 7.3s linear;
    -o-animation: moveY2 infinite 7.3s linear;
    -moz-animation: moveY2 infinite 7.3s linear;
    -ms-animation: moveY2 infinite 7.3s linear;
    animation: moveY2 infinite 7.3s linear;
}
.mission .inner{padding-top:152px;visibility: hidden;opacity: 0}
.mission .inner .title{visibility: hidden;opacity: 0;
    -moz-transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -o-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
    transition: all 0.8s ;
}
.mission.on .inner{visibility: visible;opacity: 1;}

.mission .inner ul{padding-bottom:176px;width: 1080px;margin: 0 auto}
.mission .inner ul li{float: left;margin-left: 33px;width: 338px;visibility: hidden;opacity: 0;
    -moz-transform: translateY(30px);
    -webkit-transform: translateY(30px);
    -o-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
    transition: all 0.8s ;
}
.mission .inner ul li:first-child{margin-left: 0}
.mission .inner ul li .line{width: 100%;height: 1px; margin-bottom: 64px;background: #222222 }
.mission .inner ul li .text{text-align: center;font-size: 28px;font-weight: 300;line-height: 40px;letter-spacing: -0.25px;margin-bottom: 54px}
.mission .inner ul li .img{width:328px;height: 328px;display: table; *display:block; *overflow:hidden;text-align: center;margin: 0 auto}
.mission .inner ul li .img .img_text{display: table-cell; *float:left;vertical-align: middle;font-weight: 900;color: #fff;font-size: 24px;line-height: 56px;letter-spacing: 0.7px}
.mission .inner ul li.mission1 .img{background: url("../../images/movie/mission1_bg.png") no-repeat 0 0}
.mission .inner ul li.mission2 .img{background: url("../../images/movie/mission2_bg.png") no-repeat 0 0}
.mission .inner ul li.mission3 .img{background: url("../../images/movie/mission3_bg.png") no-repeat 0 0}
.mission .inner ul li.mission1{transition-delay:0.4s }
.mission .inner ul li.mission2{transition-delay:0.6s }
.mission .inner ul li.mission3{transition-delay:0.8s }
.mission.on .inner .title{visibility: visible;opacity: 1;transform: translateY(0px);transition-delay: 0.2s}
.mission.on .inner ul li{visibility: visible;opacity: 1;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.history{background: #f4f4f4}
.history .bg_circle_area .bg_circle1{position: absolute;top: 0;left: 50%;margin-left: 170px;}/* 280 */
.history .bg_circle_area .bg_circle_vision1.active{
    -webkit-animation: moveY infinite 7.3s linear;
    -o-animation: moveY infinite 7.3s linear;
    -moz-animation: moveY infinite 7.3s linear;
    -ms-animation: moveY infinite 7.3s linear;
    animation: moveY infinite 7.3s linear;
}
.history .inner{padding-top: 152px;padding-bottom: 90px;}
.history .inner .title{visibility: hidden;opacity: 0;margin-bottom: 86px;
    -moz-transform: translateY(50px);
    -webkit-transform: translateY(50px);
    -o-transform: translateY(50px);
    -ms-transform: translateY(50px);
    transform: translateY(50px);
    transition: all 0.8s ;
}


.history .inner .year_ul{width: 1080px;margin: 0 auto;overflow: hidden;position: relative;padding-bottom: 40px;visibility: hidden;opacity: 0; transition: all 0.5s ;}
.history .inner .year_ul:before{content: '';width: 2px;background: url("../../images/common/history_line_bottom.png") no-repeat 0 0;position: absolute;left: 50%;margin-left: -1px ;bottom: 0;height: 83px}
.history .inner .year_ul:after{content: '';width: 2px;height: calc(100% - 93px);position: absolute;left: 50%;margin-left: -1px ;top: 10px;background: rgba(0,0,0,.1);z-index: -1}
.history .inner .year_ul li{float: left;position: relative;width: 540px;visibility: hidden;opacity: 0;
    -moz-transform: translateY(30px);
    -webkit-transform: translateY(30px);
    -o-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
    transition: all 0.8s ;
}
.history.on .inner .title{visibility: visible;opacity: 1;transform: translateY(0px);transition-delay: 0.2s}
.history.on .inner .year_ul{visibility: visible;opacity: 1;transition-delay: 0.4s}
.history.on .inner .year_ul li{visibility: visible;opacity: 1;transition-delay: 0.6s;
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
.history .inner .year_ul li.left_box{text-align: right;width:100%;padding-right:50%;box-sizing:border-box;}
.history .inner .year_ul li.right_box{text-align: left;width:100%;padding-left:50%;box-sizing:border-box;}
.history .inner .year_ul li .year_box .year{font-size: 32px;letter-spacing: -0.5px;line-height: 1;padding-bottom: 24px}
.history .inner .year_ul li .year_box .year_text{font-size: 20px;font-weight: 300;line-height: 34px;letter-spacing: 0.5px}

/* 추가 */
.history .inner .year_ul li .year_box .year_text dl{margin-bottom: 26px;}
.history .inner .year_ul li .year_box .year_text dt{display: block;width: 56px;line-height: 27px;vertical-align: top;font-size: 20px;color: #222;font-weight:500;}
.history .inner .year_ul li .year_box .year_text dd{display: block;width: calc(100% - 56px);line-height: 27px;vertical-align: top;font-size: 20px;color: #222;font-weight: 300;margin-top: 16px}
.history .inner .year_ul li .year_box .year_text dt+dd{margin-top: 0}
.history .inner .year_ul li.left_box .year_box .year_text dt{float: right}
.history .inner .year_ul li.left_box .year_box .year_text dd{float: left;text-align: right;}
.history .inner .year_ul li.right_box .year_box .year_text dt{float:left}
.history .inner .year_ul li.right_box .year_box .year_text dd{float: right;text-align: left;}
.history .inner .year_ul li.left_box .year_box .year_text.m_none dd{width: 100%}
.history .inner .year_ul li.left_box .year_box .year_text.m_none dd:first-child{margin-top: 0}
.history .inner .year_ul li.right_box .year_box .year_text.m_none dd{width: 100%}
.history .inner .year_ul li.right_box .year_box .year_text.m_none dd:first-child{margin-top: 0}
/* //추가 */

.history .inner .year_ul li.left_box .year_box{padding-right: 55px;;position: relative}
.history .inner .year_ul li.right_box .year_box{padding-left: 55px;;position: relative}

.history .inner .year_ul li.left_box .year_box:before{content: '';width: 12px;height: 12px;background: url("../../images/movie/ico_year.png") no-repeat 0 0;position: absolute;right: -6px;top: 10px;z-index: 1}
.history .inner .year_ul li.left_box .year_box:after{content: '';width: 21px;height: 3px;background: url("../../images/common/ico_year_dot.png") no-repeat 0 0;position: absolute;right: 18px;top: 14px}
.history .inner .year_ul li.right_box .year_box:before{content: '';width: 12px;height: 12px;background: url("../../images/movie/ico_year.png") no-repeat 0 0;position: absolute;left: -6px;top: 10px;z-index: 1}
.history .inner .year_ul li.right_box .year_box:after{content: '';width: 21px;height: 3px;background: url("../../images/common/ico_year_dot.png") no-repeat 0 0;position: absolute;left: 18px;top: 14px}

.history .inner .year_ul li.left_box .box1{margin-top: 130px}
.history .inner .year_ul li.left_box .box2{margin-top: 250px}
.history .inner .year_ul li.left_box .box3{margin-top: 200px}


.history .inner .year_ul li.right_box .box2{margin-top: 160px}
.history .inner .year_ul li.right_box .box3{margin-top: 170px}


@keyframes moveY {
    0% {
        -webkit-transform: rotate(0deg) translate(-15px) rotate(0deg);
        transform: rotate(0deg) translate(-15px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg) translate(-15px) rotate(-360deg);
        transform: rotate(360deg) translate(-15px) rotate(-360deg);
    }
}
@keyframes moveY2 {
    0% {
        -webkit-transform: rotate(0deg) translate(15px) rotate(0deg);
        transform: rotate(0deg) translate(15px) rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg) translate(15px) rotate(360deg);
        transform: rotate(-360deg) translate(15px) rotate(360deg);
    }
}