@import url('../../assets/css/main.movie_dcb6e41307.css');
@import url('../../assets/css/main.music_3f3136dffc.css');
@import url('../../assets/css/main.bravo_34d5990e5b.css');
@import url('../../assets/css/main.studio_37c3c451e9.css');
@import url('../../assets/css/main.panda_6d65b49582.css');
@import url('../../assets/css/main.cineq_9226da0041.css');
@import url('../../assets/css/main.sub.common_e47b8263a1.css');

body {overflow-y:scroll;}
body img {max-width:none;}
.wrap {position:relative; width:100%; display: none; overflow:hidden;}
.minWSize {min-width: 1300px;}
#white_dimmed {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#fff; z-index:9999;}
#white_dimmed.hide {opacity:0; visibility: hidden; transition:all 1s;}

#CIRCLE.main_circle {position:fixed; top:0; left:0; width:100%; height:100vh; z-index:99; min-height:700px; pointer-events: none; margin:0 auto; }
#CIRCLE.main_circle  .circle_box {position:absolute; top:50%; left:50%;}
#CIRCLE.main_circle  .circle_box li svg {position:absolute; top:50%; left:50%; width:580px; height:580px; transform:translate(-50%, -50%) rotate(80deg); }
#CIRCLE.main_circle  .circle_box li svg circle {display:block;transform:scale(0.8); opacity:0; transform-origin: 50% 50%;}
#CIRCLE.main_circle.on  .circle_box li svg circle {transform:scale(1); opacity:1; transition:all 1s;}
#CIRCLE.main_circle.on  .circle_box li:nth-child(1) svg circle {transition-delay: 0.2s;}
#CIRCLE.main_circle.on  .circle_box li:nth-child(2) svg circle {transition-delay: 0.4s;}
#CIRCLE.main_circle.on  .circle_box li:nth-child(3) svg circle {transition-delay: 0.6s;}

#MAIN {position:fixed; top:0; left:0; width:100%; height:100vh;min-height:700px;}
#MAIN .bgs {position:relative; width:100%; height:100%; background-color:#000;}
#MAIN .bgs li {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; z-index:0;}
#MAIN .bgs li.prev {opacity:1; z-index:1;}
#MAIN .bgs li.on {opacity:1; z-index:2; animation:main-rolling-bg-animate 1s forwards;}
#MAIN .bgs video{object-fit: cover;}
#MAIN .bgs video{min-width: 100%;min-height: 100%;width: auto;height: auto;position:absolute;top:50%;left:50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#MAIN .main_copys {position:absolute; top:0; left:0; width:100%; height:100%; text-align: center; z-index:3;}
#MAIN .main_copys > li {position:absolute; top:0; left:0; width:100%; height:100%; display: table; opacity:0; visibility: hidden;}
#MAIN .main_copys > li .copy_inner {display: table-cell; vertical-align: middle;}
#MAIN .main_copys > li.on {opacity:1; visibility: visible;}
#MAIN .main_copys .copy1 .title {position:relative; display:inline-block; font-size:80px; font-weight: 100; color:#fff; line-height:86px;}
#MAIN .main_copys .copy1 .desc { color:#fff; font-size:20px; font-weight: 400; line-height:32px; display: block; margin-top:32px; opacity:0;}
#MAIN .main_copys .copy1 .title .logo {position:absolute; top:170px; left:13px;}
#MAIN .main_copys .copy1 .title .logo img {position:absolute; top:0; left:0; width:218px; height:87px;}
#MAIN .main_copys .copy1 .title > div {display: inline-block;}
#MAIN .main_copys .copy1 .title > div > span{display: block;}
#MAIN .main_copys .copy1 .title > div > span.last {text-indent: 240px;}
#MAIN .main_copys .copy2 span {display: block;}
#MAIN .main_copys .copy2 .title {position:relative; font-size:80px; font-weight: 300; color:#fff; letter-spacing: -1px; margin:30px 0 33px; display: inline-block;}
#MAIN .main_copys .copy2 .desc {font-size:20px; line-height:33px; color:#fff; font-weight: 400;}
#MAIN .main_copys .copy3 span {display: block;}
#MAIN .main_copys .copy3 .title {position:relative; font-size:80px; font-weight: 300; color:#fff; letter-spacing: -1px; margin:30px 0 33px; display: inline-block;}
#MAIN .main_copys .copy3 .desc {font-size:20px; line-height:33px; color:#fff; font-weight: 400;}
#MAIN .main_copys .copy4 span {display: block;}
#MAIN .main_copys .copy4 .title {position:relative; display:inline-block; font-size:80px; line-height:86px; font-weight: 300; color:#fff; letter-spacing: -1px; margin:30px 0 33px;}
#MAIN .main_copys .copy4 .desc {font-size:20px; line-height:33px; color:#fff; font-weight: 400;}
#MAIN .main_copys .copys .desc {opacity:0; transform:translate(0,30px);}
#MAIN .main_copys .copys .desc .bold {font-weight: 800; display: inline-block;}
#MAIN .main_copys .copys.on .desc {opacity:1; transform:translate(0,0); transition:all 1s; transition-delay: 0.6s;}
#MAIN .main_copys .copys .title > div > span {transform:translate(0,50px); opacity:0;}
#MAIN .main_copys .copy1 .title .logo {transform:translate(50px,0); opacity:0;}
#MAIN .main_copys .copy1 .title > div > span.copy3 {transform:translate(-50px,0);}
#MAIN .main_copys .copys.on .title > div > span {transform:translate(0,0); opacity:1; transition:all 1s; }
#MAIN .main_copys .copys.on .title > div > span.copy1 {transition-delay: 0.2s;}
#MAIN .main_copys .copys.on .title > div > span.copy2 {transition-delay: 0.4s;}
#MAIN .main_copys .copys.on .title > div > span.copy3 {transition-delay: 0.6s;}
#MAIN .main_copys .copy1.on .title .logo {transform:translate(0,0); opacity:1; transition:all 1s; transition-delay: 0.6s;}

#MAIN .carousel {position:absolute; top:50%; left:0; width:100%; text-align: center; margin-top:206px; z-index:3; opacity:0;}
#MAIN .carousel a {position:relative; display: inline-block; width:8px; height:8px; background-color:rgba(255,255,255,0.3); border-radius: 50%; margin:0 5px; transition:all 0.3s;}
#MAIN .carousel a:before {content:""; display: block; position:absolute; top:50%; left:50%; width:20px; height:20px; transform:translate(-50%, -50%);}
#MAIN .carousel a:after {content:""; position:absolute; top:0; left:0; width:8px; height:8px; border-top:8px solid rgba(255,255,255,0);}
#MAIN .carousel a span {display:block; position:relative; width:100%; height:100%; overflow: hidden; border-radius: 10px;}
#MAIN .carousel a span:after {content:""; position:absolute; top:0; left:-34px; width:100%; height:100%; background-color:#fff; border-radius: 10px;}
#MAIN .carousel a.active {width:34px; border-radius: 10px;}
#MAIN .carousel a.active span:after {left:0; transition:left 8s linear;}
#MAIN .carousel.on {opacity:1; transition:opacity 1s; transition-delay:0.5s;}
#MAIN .scroll {position:absolute; bottom:48px; left:0; width:100%; text-align: center; z-index:3;}
#MAIN .scroll .copy {display:block; font-size:13px; color:#fff; font-weight: 500; margin-bottom:14px; letter-spacing: 1.2px;}
#MAIN .scroll .arrow {animation:scroll-arrow-animate 1.5s infinite;}


#SUB {position:relative;}
#SUB:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; z-index:3; background-color:#fff;}

#CONTENTS {position:relative; width:100%; height:100vh; min-height:700px; margin-top:100vh; z-index:99;}
#CONTENTS .bg {position:absolute; top:0; left:0; width:100%; height:100%; background-color:#fff; transition:all 1s;}
#CONTENTS .sub_main_bgs {position:absolute; top:0; left:0; width:100%; height:100%; visibility: hidden; opacity:0;}
#CONTENTS .sub_main_bgs ul {position:absolute; top:0; left:0; width:100%; height:100%;}
#CONTENTS .sub_main_bgs ul li {position:absolute; top:0; left:0; width:52px; height:52px; border-radius:50%; overflow:hidden; visibility: hidden; opacity:0;}
#CONTENTS .sub_main_bgs ul li .sub_main_bg {position:absolute; top:0; left:0; width:100%; height:100%;}
#CONTENTS .sub_main_bgs ul li .sub_main_bg1 {background:url('../../assets/images/main_bg_8513570dc7.jpg') center center no-repeat; background-size:cover;}
#CONTENTS .sub_main_bgs ul li .sub_main_bg2 {background:url('../../assets/images/main_bg_6f583060c8.jpg') center center no-repeat; background-size:cover;}
#CONTENTS .sub_main_bgs ul li .sub_main_bg3 {background:url('../../assets/images/main_bg_f59e4f3d8c.jpg') center center no-repeat; background-size:cover;}
#CONTENTS .sub_main_bgs ul li .sub_main_bg4 {background:url('../../assets/images/main_bg_6aa0e8aea7.jpg') center center no-repeat; background-size:cover;}
#CONTENTS .sub_main_bgs ul li .sub_main_bg5 {background:url('../../assets/images/main_bg_f0f7c8973d.jpg') center center no-repeat; background-size:cover;}
/*#CONTENTS .sub_main_bgs ul li .sub_main_bg6 {background:url("/_resource/images/main/sub/new_id/main_bg.jpg") center center no-repeat; background-size:cover;}*/

#CONTENTS .sub_container {position:fixed; top:0; left:0; width:100%; height:100vh; z-index:99;}
#CONTENTS .sub_contents {position:absolute; top:50%; left:50%; width:1600px; height:1125px; margin:-563px 0 0 -800px;}
#CONTENTS .sub_contents .copys {position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; transform:translate(-100px, 0);}
#CONTENTS .sub_contents .copys > div {position:absolute; top:0; height:100%; display: table; opacity:0; visibility: hidden;}
#CONTENTS .sub_contents .copys > div.left {left:235px;}
#CONTENTS .sub_contents .copys > div.right {right:235px;}
#CONTENTS .sub_contents .copys > div.left.on {animation:copy-animate-left 1s forwards; animation-delay: 0.5s;}
#CONTENTS .sub_contents .copys > div.right.on {animation:copy-animate-right 1s forwards; animation-delay: 0.5s;}
#CONTENTS .sub_contents .copys ul {position:relative; display: table-cell; vertical-align: middle; padding-top:88px; max-width:360px; text-align: center;}
#CONTENTS .sub_contents .copys .logo img {width:300px; height:119px;}
#CONTENTS .sub_contents .copys .title {display:block; width:100%; font-size:52px; font-weight: 900; color:#595757; line-height:1; padding:30px 0 26px; white-space: nowrap; letter-spacing: -0.7px;}
#CONTENTS .sub_contents .copys .title span {display:block; position:relative; width:600px; top:0; left:50%; transform:translate(-50%, 0);}
#CONTENTS .sub_contents .copys .title > div {position:relative; display: inline-block;}
#CONTENTS .sub_contents .copys .title img {transition:all 0.3s;}
#CONTENTS .sub_contents .copys .title img.white {position:absolute; top:0; left:0; opacity:0;}
#CONTENTS .sub_contents .copys .title img.black {position:relative;}
#CONTENTS .sub_contents .copys .desc {display:block; width:100%; font-size:24px; color:#2e2e2e; line-height:40px;white-space: nowrap; font-weight: 300;}
#CONTENTS .sub_contents .copys .desc span {position:relative; width:600px; top:0; left:50%; transform:translate(-50%, 0); display:block; font-size: 20px;letter-spacing: -1px;line-height: 33px}
#CONTENTS .sub_contents .copys .btns {margin-top:40px;}
#CONTENTS .sub_contents .copys .btns a {display:block; width:136px; height:43px; line-height:43px; border:1px solid rgba(0,0,0,0.25); border-radius: 30px; font-size:13px; color:#222222; text-align: center; margin:0 auto; transition:all 0.3s;}
#CONTENTS .sub_contents .copys .btns a:hover {background-color:#222222; color:#fff;}
#CONTENTS .sub_contents .copys ul.active .title {color:#fff; transition:all 1s;}
#CONTENTS .sub_contents .copys ul.active .title .white {opacity:1;}
#CONTENTS .sub_contents .copys ul.active .title .black {opacity:0;}
#CONTENTS .sub_contents .copys ul.active .desc {color:#fff; transition:all 1s;}
#CONTENTS .sub_contents .copys ul.active .btns a {color:#fff; border:1px solid #fff; transition:all 1s;}

#CONTENTS .sub_contents .copy6 .btns a {width:176px}

#CONTENTS .sub_contents .thumb {position:absolute; top:0; left:0; transform:translate(800px, 563px);}
#CONTENTS .sub_contents .thumb .thumb_mask_box {position:absolute; width:0; height:0; border-radius: 50%; overflow:hidden; top:50%; left:50%; transform:translate(-50%, -50%);}
#CONTENTS .sub_contents .thumb .thumb_mask_box div {position:absolute; top:50%; left:50%; background-size:cover; transform:translate(-50%, -50%); z-index:0; opacity:0;}
#CONTENTS .sub_contents .thumb .thumb_mask_box div.active {opacity:1;}
#CONTENTS .sub_contents .thumb .thumb_mask_box div.on {z-index:1; opacity:1;}
#CONTENTS .sub_contents .thumb .thumb_mask_box .thumb1 {width:896px; height:896px; background:url('../../assets/images/circle_thumb_f1232f0f06.png') center center no-repeat; background-size:cover;}
#CONTENTS .sub_contents .thumb .thumb_mask_box .thumb2 {width:840px; height:840px; background:url('../../assets/images/circle_thumb_5f13d6744e.png') center center no-repeat; background-size:cover;}
#CONTENTS .sub_contents .thumb .thumb_mask_box .thumb3 {width:904px; height:904px; background:url('../../assets/images/circle_thumb_8b6bc05653.png') center center no-repeat; background-size:cover;}
#CONTENTS .sub_contents .thumb .thumb_mask_box .thumb4 {width:720px; height:720px; background:url('../../assets/images/circle_thumb_df7ca840ac.png') center center no-repeat; background-size:cover;}
#CONTENTS .sub_contents .thumb .thumb_mask_box .thumb5 {width:760px; height:760px; background:url('../../assets/images/circle_thumb_f76093c570.png') center center no-repeat; background-size:cover;}
#CONTENTS .sub_contents .thumb .thumb_mask_box .thumb6 {width:824px; height:824px; background:url('../../assets/images/new_id_circle_thumbnail_c6e3b09dbb.png') center center no-repeat; background-size:cover;}
/*#CONTENTS .sub_contents .thumb .thumb_mask_box .thumb7 {width:824px; height:824px; background:url("/_resource/images/main/sub/engine_circle_thumbnail.jpg") center center no-repeat; background-size:cover;}*/

#CONTENTS .carousel {position:fixed; bottom:70px; left:0; width:100%; text-align: center; z-index:99;}
#CONTENTS .carousel a {position:relative; display: inline-block; height:52px; line-height:52px; clear:both; margin:0 15px; opacity:0; transform:translate(0,-100px);}
#CONTENTS .carousel a div {float:left; position:relative; display: inline-block;}
#CONTENTS .carousel a div:after {content:""; position:absolute; top:50%; left:50%; width:60px; height:60px; }
#CONTENTS .carousel a div canvas {position:absolute; top:50%; left:50%; width:66px; height:66px; margin:-33px;}
#CONTENTS .carousel a .on {position:absolute; top:50%; left:50%; width:60px; height:60px; margin:-30px; transform:scale(0); transition:transform 0.3s;}
#CONTENTS .carousel a:before {content:""; position:absolute; top:-20%; left:-7%; width:110%; height:140%; border-radius: 50px; background-color:rgba(181,181,181,0.82); opacity:0; transition:all 0.3s;}
#CONTENTS .carousel a:hover .on {transform:scale(1);}
#CONTENTS .carousel a.active .on {transform:scale(1); box-shadow: 0 3px 5px 1px rgba(0,0,0,0.1); border-radius: 50%;}
#CONTENTS .carousel a span {float:left; position:relative; font-size:16px; font-weight: 800; color:#fff; display: inline-block; white-space: nowrap; width:0; overflow:hidden; transition:all 0.3s;}
#CONTENTS .carousel a:hover:before {opacity:1;}
#CONTENTS .carousel a:nth-child(1):hover span {width:86px;}
#CONTENTS .carousel a:nth-child(2):hover span {width:86px;}
#CONTENTS .carousel a:nth-child(3):hover span {width:110px;}
#CONTENTS .carousel a:nth-child(4):hover span {width:140px;}
#CONTENTS .carousel a:nth-child(5):hover span {width:115px;}
#CONTENTS .carousel a:nth-child(6):hover span {width:170px;}


#VIDEO {position:relative; width:100%; height:480px; background:url('../../assets/images/video_bg_b0a30e88c3.png') center center no-repeat; background-size:cover; margin:160px auto 0; z-index:99;}
#VIDEO .copy {position:absolute; top:0; left:50%; width:1080px; height:100%; margin-left:-540px; display: table;}
#VIDEO .copy .copy_box {display: table-cell; vertical-align: middle;}
#VIDEO .copy span {display: block; color:#fff;}
#VIDEO .copy .title {font-size:52px; font-weight: 500;}
#VIDEO .copy .desc {font-size:18px; font-weight: 300; margin-top:28px; line-height:27px;}
#VIDEO .copy .play_btn {position:absolute; top:50%; left:50%; margin:-40px;}
#VIDEO .copy .play_btn img {position:relative;}
#VIDEO .copy .play_btn:before {content:""; position:absolute; top:0; left:0; width:80px; height:80px; background-color:#fff; border-radius: 50%; transition:all 0.3s;}
#VIDEO .copy .play_btn:hover:before {transform:scale(1.1);}


#NEWS {position:relative; width:1080px; margin:160px auto 0; padding-bottom: 146px; text-align: center; z-index:99;}
#NEWS .top_copy .title {font-size:42px; color:#222222; line-height:1; margin-bottom:32px;}
#NEWS .top_copy .desc {font-size:18px; color:#222222; line-height:1; margin-bottom:46px; font-weight: 300;}
#NEWS .top_copy .detail_btn a {display:block; width:144px; height:43px; line-height:43px; font-size:13px; color:#222222; font-weight: 400; margin:0 auto; border-radius: 30px; border:1px solid rgba(34,34,34,0.5); text-align: center;}
#NEWS .list_box {margin-top:72px;}
#NEWS .list_box > div {display:inline-block; width:344px; margin-right:24px; vertical-align: top;}
#NEWS .list_box > div:last-child {margin-right:0;}
#NEWS .list_box > div > a {display: block;border:1px solid #e0e0e0;margin-bottom:22px;border-radius:5px;overflow:hidden;}
#NEWS .list_box > div ul {position:relative; display: block; margin-bottom:26px; background-color:#fff; text-align: left; overflow:hidden;}
#NEWS .list_box > div ul.big {width:344px; height:480px;}
#NEWS .list_box > div ul.small {width:344px; height:344px;}
#NEWS .list_box > div ul.big:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url('../../assets/images/news_over_big_b95689f96a.png') 0 0 no-repeat; opacity:0; transition:opacity 0.3s; z-index:1;}
#NEWS .list_box > div ul.small:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url('../../assets/images/news_over_small_b88fa8b77d.png') 0 0 no-repeat; opacity:0; transition:opacity 0.3s; z-index:1;}
#NEWS .list_box > div ul li {color:#fff;}
#NEWS .list_box > div ul .bg {width:100%; height:100%;}
#NEWS .list_box > div ul .bg .img_box{overflow:hidden;position:relative;}
#NEWS .list_box > div ul .bg .img_box > img {width:100%; transition:transform 0.8s;}
#NEWS .list_box > div ul .bg .img_box:after{content:"";width:100%;height:71px;background:url('../../assets/images/news_dim_597a55a76d.png') bottom left repeat-x;position:absolute;left:0;bottom:0;}
#NEWS .list_box > div ul .category {font-size:12px; color:#666; font-weight: 500; padding:20px 64px 10px 28px;}
#NEWS .list_box > div ul .desc {width:100%; font-size:15px; line-height:1.7; color:#222; padding:0 64px 0 28px; box-sizing: border-box; letter-spacing: -0.4px;}
#NEWS .list_box > div ul .desc span {display: block; font-size:12px; color:#666; margin-bottom: 10px; line-height:1;margin-top:50px;}
#NEWS .list_box > div ul .ico {position:absolute; bottom:20px; right:19px;}
#NEWS .list_box > div ul .ico img {vertical-align: bottom;}
#NEWS .list_box > div a:hover ul .bg .img_box > img{transform:scale(1.15);}
#NEWS .list_box > div a:hover ul:before {opacity: 1;}
#NEWS .list_box img{max-width:350px;}

#SUB.active {visibility: visible; opacity: 1;}
#SUB.active #CONTENTS {visibility: visible; opacity:1;}
#SUB.active #CONTENTS .bg {transform:translate(0,0);}



#INTRO {position:fixed; top:0; left:0; width:100%; height:100%; background-color:#fff; z-index:999; overflow:hidden;}
#INTRO canvas {min-width: 100%;min-height: 100%;width: auto;height: auto;position:absolute;top:50%;left:50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#INTRO video{min-width: 100%;min-height: 100%;width: auto;height: auto;position:absolute;top:50%;left:50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#INTRO .change_bgs {position:absolute; top:0; left:0; width: 100%; height:100%; opacity:0;}
#INTRO .change_bgs:before {content:""; display:block; position:absolute; top:50%; left:50%; width:160px; height:160px; border-radius: 100%; border:1500px solid #fff; margin:-1580px;}
#INTRO .change_bgs:after {content:""; position:absolute; top:0; left:0; width: 100%; height:100%; background:url('../../assets/images/intro_logo_ca476308c4.png') center center no-repeat; background-size:cover; }
#INTRO .change_bgs.active {opacity:1;}
#INTRO .change_bgs.active:before {transform:scale(25); transition:all 2s;}
#INTRO .change_bgs.active:after {opacity:0; transition:opacity 1s;}

#CAREERS {position:relative; background-color:#1a1a1a; width:100%; z-index:3; text-align: center; padding-top: 160px; padding-bottom:126px; }
#CAREERS .top_copy .title {font-size:42px; color:#ffffff; line-height:1; margin-bottom:32px;}
#CAREERS .top_copy .desc {font-size:18px; color:#ffffff; line-height:1; margin-bottom:88px; font-weight: 300;}
#CAREERS .list_box li {width:338px; display: inline-block; color:#fff; text-align: left; margin:0 15px;}
#CAREERS .list_box .top {width:100%; height:160px;}
#CAREERS .list_box .top .line {height:1px;}
#CAREERS .list_box .top span {font-size:32px; font-weight: 900; display: block; margin-top:30px; line-height:42px;}
#CAREERS .list_box .bottom {width:338px; height:338px;}
#CAREERS .list_box .bottom a {position:relative; display: block; width:100%; height:100%;}
#CAREERS .list_box .bottom a span {display: block;}
#CAREERS .list_box .bottom a .bgs {position:relative; top:8px; transition:all 0.3s;}
#CAREERS .list_box .bottom a .bgs img {transition:opacity 0.3s;}
#CAREERS .list_box .bottom a .bgs img.on {position:absolute; top:0; left:0; opacity:0;}
#CAREERS .list_box .bottom a .copy {position:absolute; top:-13px; left:0; font-size:32px; font-weight: 300; line-height: 48px;}
#CAREERS .list_box .bottom a .copy .copy_str {transition:all 0.3s;}
#CAREERS .list_box .bottom a .copy .detail {font-size:13px; line-height:1; margin-top:32px; display: inline-block;}
#CAREERS .list_box .bottom a .copy .detail:after {content:""; position:relative; top:-4px; width:0; height:1px; background-color:#fff; display: inline-block; transition:width 0.3s;}
#CAREERS .list_box .bottom a:hover .bgs {transform:translate(0, 10px);}
#CAREERS .list_box .bottom a:hover .bgs img.on {opacity:1;}
#CAREERS .list_box .bottom a:hover .copy .detail:after {width:100%;}
#CAREERS .list_box .bottom a:hover .copy .copy_str {transform:translate(0, -10px);}


/*************************************************** motion set *****************************************************************************/
/* motion set */
#VIDEO {width:70%; height:480px; transform:translate(0, 200px);}
#VIDEO .copy_box {transform:translate(100px, 0); opacity:0;}
#NEWS .top_copy li {opacity:0; transform:translate(0, 200px);}
#NEWS .list_box > div > a > ul {opacity:0; transform:translate(0, 200px);}
#CAREERS .top_copy li {opacity:0;}
#CAREERS .list_box li {opacity:0;}
/*************************************************** motion set *****************************************************************************/



@keyframes copy-animate-left {
    from {transform:translate(100px, 0); opacity:0; visibility: hidden;}
    to {transform:translate(0, 0); opacity:1; visibility: visible;}
}

@keyframes copy-animate-right {
    from {transform:translate(-100px, 0); opacity:0; visibility: hidden;}
    to {transform:translate(0, 0); opacity:1; visibility: visible;}
}

@keyframes scroll-arrow-animate {
    0% {transform:translate(0, 0);}
    50% {transform:translate(0, 10px);}
    100% {transform:translate(0, 0);}
}

@keyframes main-rolling-bg-animate {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes main-rolling-copy-animate-in {
    from {opacity:0; transform:scale(1.2);}
    to {opacity:1; transform:scale(1);}
}

@keyframes main-rolling-copy-animate-out {
    from {opacity:1; transform:scale(1);}
    to {opacity:0; transform:scale(0.8);}
}