.container {position:relative; overflow: hidden; margin:0;} .container.last_min_height {min-height:860px;} .section {position:fixed; top:0; left:0; width:100%; height:100vh; padding:0; max-width:100%; min-height:inherit; visibility:hidden; opacity:0; z-index:0;} .section.on {visibility:visible; opacity:1; z-index:1;} .section .section_inner {position:relative; width:100%; height:100%;} .section .bg_box {position:absolute; bottom:0; left:0; width:100vw; height:100vh; box-sizing: border-box;} .section .bg_box .bg_box_inner {position:relative; width:100%; height:100%; overflow: hidden;} .section .bg_box .bg_box_inner:after {content:""; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); opacity:0;} .section .bg_box .bg_box_inner video {position: absolute; width: auto; height: auto; min-width: 100%; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .section .bg_box .bg_box_inner li {position:absolute; bottom:0; left:0; width:100%; height:0; overflow: hidden;} .section .bg_box .bg_box_inner li:first-child {height:100%;} .section .bg_box .bg_box_inner li > div {position:absolute; bottom:0; left:0; width:100%; height:100vh;} .section .bg_box .bg_box_inner li:first-child > div {height:100%;} #footer {display:none;} /*=== STEP1 ================================================================*/ #HISTORY_MAIN {transform:translate(0, 100%);} #HISTORY_MAIN .title {position:absolute; top:50%; width:100%; text-align: center; font-size:32px; color:#000; transform:translate(0, -50%);} #HISTORY_MAIN .title img {margin-bottom:40px;} #HISTORY_MAIN .title span {display:block;} #HISTORY_MAIN .mask_box {position: absolute; bottom: 0; left: 0; width: 100%; height:100%; overflow: hidden;} #HISTORY_MAIN .mask_box ul .fixed_copy {position:absolute; bottom:0; left:0; width:100%; height:100vh; display: table; text-align: center;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner {display: table-cell; vertical-align: middle;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .copy1 {font-size:32px; color:#fff; padding-bottom:50px;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .section_title br.desc_mob{display: none;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .copy1 img {margin-bottom:40px; width:150px;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .copy1 span {display: block;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .copy2 {font-size:16px; color:#cccccc; line-height:30px;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .copy2 span {display: block;} #HISTORY_MAIN .scroll {position:absolute; bottom:0; left:0; width:100%; text-align: center; color:#fff; font-size:14px;} #HISTORY_MAIN .scroll span {display: block; margin-bottom:20px;letter-spacing:1.4px;} #HISTORY_MAIN .scroll .line {position:relative; display: inline-block; width:3px; height:100px; overflow: hidden;} #HISTORY_MAIN .scroll .line:before {content:""; position:absolute; top:0; left:2px; width:1px; height:100%; background-color:rgba(255,255,255,0.3);} #HISTORY_MAIN .scroll .line:after {content:""; position:absolute; top:0; left:1px; width:2px; background-color:#fff; animation:step1_scroll_animate 3s infinite;} /*=== STEP1 ================================================================*/ /*=== STEP1 - ANIMATIONS ================================================================*/ /* SET */ #HISTORY_MAIN.on {transform:translate(0, 0);} /*#STORY_STEP1.on .bg_box {padding:0;}*/ #HISTORY_MAIN.on .bg_box {transform:scale(1);} #HISTORY_MAIN.on .bg_box .bg_box_inner:after {opacity:1; transition:opacity 1s 2.5s;} #HISTORY_MAIN .title img {transform:translate(0, 50px); opacity:0;} #HISTORY_MAIN .title span {transform:translate(0, 50px); opacity:0;} #HISTORY_MAIN .mask_box {height:0;} #HISTORY_MAIN .mask_box ul .fixed_copy .copy2 div {transform:translate(0, 150px); opacity:0;} /* STEP1 */ #HISTORY_MAIN.intro .title {opacity:0; transition:opacity 0s 3s;} #HISTORY_MAIN.intro .title img {transform:translate(0, 0); opacity:1; transition:all 1s 0.2s; width:150px;} #HISTORY_MAIN.intro .title span {transform:translate(0, 0); opacity:1; transition:all 1s 0.4s;} #HISTORY_MAIN.intro .title .left_copy span:nth-of-type(1) {transition-delay: 0s;} #HISTORY_MAIN.intro .title .left_copy span:nth-of-type(2) {transition-delay: 0.1s;} #HISTORY_MAIN.intro .title .left_copy span:nth-of-type(3) {transition-delay: 0.2s;} #HISTORY_MAIN.intro .title .left_copy span:nth-of-type(4) {transition-delay: 0.3s;} #HISTORY_MAIN.intro .title .left_copy span:nth-of-type(5) {transition-delay: 0.4s;} #HISTORY_MAIN.intro .title .left_copy span:nth-of-type(6) {transition-delay: 0.5s;} #HISTORY_MAIN.intro .title .left_copy span:nth-of-type(7) {transition-delay: 0.6s;} #HISTORY_MAIN.intro .title .right_copy span:nth-of-type(1) {transition-delay: 1.5s;} #HISTORY_MAIN.intro .title .right_copy span:nth-of-type(2) {transition-delay: 1.7s;} #HISTORY_MAIN.intro .mask_box {height:100%; transition:height 1.5s 1.3s cubic-bezier(.66,0,.34,1);} #HISTORY_MAIN.intro .mask_box ul .fixed_copy .copy2 div {transform:translate(0,0); opacity:1; transition:all 1s} #HISTORY_MAIN.intro .mask_box ul .fixed_copy .copy2 div:nth-of-type(1) {transition-delay: 2.3s;} #HISTORY_MAIN.intro .mask_box ul .fixed_copy .copy2 div:nth-of-type(2) {transition-delay: 2.4s;} #HISTORY_MAIN.intro .mask_box ul .fixed_copy .copy2 div:nth-of-type(3) {transition-delay: 2.5s;} #HISTORY_MAIN.intro .mask_box ul .fixed_copy .copy2 div:nth-of-type(4) {transition-delay: 2.6s;} #HISTORY_MAIN.intro .mask_box ul .fixed_copy .copy2 div:nth-of-type(5) {transition-delay: 2.7s;} /*=== STEP1 - ANIMATIONS ================================================================*/ /*=== SELECT ================================================================*/ #HISTORY_SELECT ul {font-size:0; width:100%; height:100%;} #HISTORY_SELECT ul li {position:relative; width:20%; height:100%; display: inline-block;} #HISTORY_SELECT ul li:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); opacity:0; transition:opacity 0.3s;} #HISTORY_SELECT ul li a {position:relative; display: block; width:100%; height:100%;} #HISTORY_SELECT ul li:nth-of-type(1) {background:url("../../../img/company/history/select_thumb1.jpg") no-repeat center/cover;} #HISTORY_SELECT ul li:nth-of-type(2) {background:url("../../../img/company/history/select_thumb2.jpg") no-repeat center/cover;} #HISTORY_SELECT ul li:nth-of-type(3) {background:url("../../../img/company/history/select_thumb3.jpg") no-repeat center/cover;} #HISTORY_SELECT ul li:nth-of-type(4) {background:url("../../../img/company/history/select_thumb4.jpg") no-repeat center/cover;} #HISTORY_SELECT ul li:nth-of-type(5) {background:url("../../../img/company/history/select_thumb5.jpg") no-repeat center/cover;} #HISTORY_SELECT ul li .copy_box {position:absolute; bottom:80px; width:100%; padding:0 40px; box-sizing: border-box; word-break: keep-all;} #HISTORY_SELECT ul li .copy_box .copy1 > span {display: block;} #HISTORY_SELECT ul li .copy_box .copy1 .year {font-size:20px; color:#cccccc; margin-bottom:20px;} #HISTORY_SELECT ul li .copy_box .copy1 .title {font-size:32px; color:#ffffff; line-height:46px; margin-bottom:48px;} #HISTORY_SELECT ul li .copy_box .copy2 {font-size:16px; color:#ffffff; line-height:30px; height:0; overflow: hidden; opacity:0; transition:all 0.5s;} #HISTORY_SELECT ul li .copy_box .copy2 span {display: block; padding-bottom:58px;} #HISTORY_SELECT ul li .copy_box .arrow {display: block; width:20px; height:13px; background:url("../../../img/company/history/select_arrow.png") no-repeat 0 0 / contain;} #HISTORY_SELECT ul li:hover .copy_box .copy2 {height:118px; opacity:1;} #HISTORY_SELECT ul li.dim:before {opacity:1;} /*=== SELECT ================================================================*/ /*=== DETAIL ================================================================*/ #HISTORY_DETAIL {margin-top:88px; height:calc(100vh - 88px); color:#fff;} #HISTORY_DETAIL .back_btn {position:absolute; top:40px; left:40px; z-index:4;} #HISTORY_DETAIL .back_btn a {font-size:16px; line-height: 13px; display:inline-block; vertical-align: top;} #HISTORY_DETAIL .back_btn a:before {content:""; position:relative; top:2px; display: inline-block; margin-right:12px; width:16px; height:13px; background:url("../../../img/company/history/back_arrow.png") no-repeat 0 0 / contain;} #HISTORY_DETAIL .back_btn a:after {content:""; position:absolute;bottom:-6px;left:0;width:0;height:1px;background:#fff; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 300ms ease-out;} #HISTORY_DETAIL .back_btn a:hover:after {width:100%;} #HISTORY_DETAIL .detail_container {position:relative; width:100%; height:100%;} #HISTORY_DETAIL .detail_container .hidden_scroll {position:fixed; top:0; left:0; width:100%; height:100%; overflow-x:hidden; overflow-y:scroll; opacity:0;} #HISTORY_DETAIL .detail_container .hidden_scroll .hidden_contents {display: block; width:100%; height:100%;} #HISTORY_DETAIL .detail_contents {position:absolute; top:0; left:0; width:100%; height:100%; box-sizing: border-box; visibility: hidden; opacity:0; z-index:0} #HISTORY_DETAIL .detail_contents.on {visibility: visible; opacity:1; z-index:1;} #HISTORY_DETAIL .detail_contents.change {animation:detail_change_animate 1s forwards cubic-bezier(.66,0,.34,1); visibility: visible; opacity:1; z-index:2;} #HISTORY_DETAIL .detail_contents .detail_inner {position:relative; margin-top:100px; height:100%;} #HISTORY_DETAIL .detail_contents .detail_inner .intro {position:absolute; top:100px; left:12vw; max-width:640px; word-break: keep-all;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.year {font-size:16px; color:#cccccc;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.year span {display: inline-block;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.year .year_str {font-size:20px;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.title {font-size:50px; line-height: 60px; margin-top:33px; margin-bottom:60px;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.desc {font-size:16px; line-height: 30px; color:#cccccc; margin-bottom:60px;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.scroll {font-size:14px;letter-spacing:1.4px;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.scroll .arrow {display: inline-block; position:relative; vertical-align: middle; top:-4px;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.scroll .arrow:before {content:""; position:absolute; top:0; left:7px; width:7px; height:7px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); animation:detail_scroll_arrow_animate 1.5s infinite;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.scroll .arrow:after {content:""; position:absolute; top:0; left:0; width:7px; height:7px; border-top:1px solid #fff; border-right:1px solid #fff; transform:rotate(45deg); animation:detail_scroll_arrow_animate 1.5s 0.1s infinite;} #HISTORY_DETAIL .detail_contents .detail_inner .lists {position:relative; font-size:0; white-space:nowrap; overflow-x:scroll; overflow-y:hidden; padding-top:10vw;padding-left:100%; -ms-overflow-style:none; height:100%;} #HISTORY_DETAIL .detail_contents .detail_inner .lists::-webkit-scrollbar {display:none;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a {position:relative; display: inline-block; vertical-align: top; margin-right:120px;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a:last-child {margin-right:243px;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a .thumb {width:400px;overflow:hidden;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a img {width:100%;transition:all 500ms ease-out;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a:hover .thumb img {transform:scale(1.1);} #HISTORY_DETAIL .detail_contents .detail_inner .lists a .copy_box {display: block; margin-top:40px; white-space: normal;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a .copy_box span {display: block;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a .copy_box .title {font-size:18px; margin-bottom:20px; line-height: 27px;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a .copy_box .year {font-size:16px; color:#999999;} #HISTORY_DETAIL .detail_contents1 {background:url("../../../img/company/history/detail_bg1.jpg") no-repeat center/cover;} #HISTORY_DETAIL .detail_contents2 {background:url("../../../img/company/history/detail_bg2.jpg") no-repeat center/cover;} #HISTORY_DETAIL .detail_contents3 {background:url("../../../img/company/history/detail_bg3.jpg") no-repeat center/cover;} #HISTORY_DETAIL .detail_contents4 {background:url("../../../img/company/history/detail_bg4.jpg") no-repeat center/cover;} #HISTORY_DETAIL .detail_contents5 {background:url("../../../img/company/history/detail_bg5.jpg") no-repeat center/cover;} body.ipad #HISTORY_DETAIL .detail_contents {padding-top:180px;} #HISTORY_DETAIL .progress {position:absolute; bottom:0; left:0; width:100%; height:120px; transform:translate(0, 45px); transition:transform 0.7s cubic-bezier(.66,0,.34,1); z-index:3;} #HISTORY_DETAIL .progress .progress_container {background-color:#222222; width:100%; height:100%;} #HISTORY_DETAIL .progress .progress_inner {font-size:0; padding:0 12vw; box-sizing: border-box;} #HISTORY_DETAIL .progress .progress_inner a {position:relative; width:20%; display:inline-block; margin-top:36px; text-align: center; vertical-align: top;} #HISTORY_DETAIL .progress .progress_inner a:before {content:""; position:absolute; top:0; left:0; width:18px; height:18px; margin:-9px; border:1px solid #fff; border-radius: 50%; opacity:0; box-sizing: border-box; z-index:1;} #HISTORY_DETAIL .progress .progress_inner a:after {content:""; position:absolute; top:0; left:0; width:18px; height:18px; margin:-9px; border:1px solid #fff; border-radius: 50%; opacity:0; box-sizing: border-box; z-index:1;} #HISTORY_DETAIL .progress .progress_inner a .line {position:relative; width:100%; height:1px; background-color:#444444; margin-bottom:36px;} #HISTORY_DETAIL .progress .progress_inner a .line .progress_line {position:absolute; top:0; left:0; width:0; height:1px; background-color:#fff;} #HISTORY_DETAIL .progress .progress_inner a:last-child .line:before {content:""; position:absolute; top:-4px; right:-7px; width:9px; height:9px; background:url("../../../img/company/history/progress_end_arrow.png") no-repeat 0 0; background-size:9px;} #HISTORY_DETAIL .progress .progress_inner a .line:after {content:""; position:absolute; top:-3px; left:-3px; width:7px; height:7px; background-color:#fff; border-radius: 50%;} #HISTORY_DETAIL .progress .progress_inner a span {position:relative; display: inline-block; font-size:16px; color:#fff; opacity:0.42; transform:translate(0, 40px); transition:transform 0.7s 0.2s, opacity 0.3s;} #HISTORY_DETAIL .progress .progress_inner a span:after {content:""; position:absolute; bottom:-6px; left:50%; width:0; height:1px; background-color:#fff; transition:all 0.3s;} #HISTORY_DETAIL .progress .progress_inner a.already .line .progress_line {width:100% !important;} #HISTORY_DETAIL .progress .progress_inner a.on span {opacity:1;} #HISTORY_DETAIL .progress .progress_inner a.on span:after {left:0; width:100%;} #HISTORY_DETAIL .progress .progress_inner a:hover span {opacity:1;} #HISTORY_DETAIL .progress .progress_inner a.on:before {animation:progress_on_animate 2s infinite;} #HISTORY_DETAIL .progress .progress_inner a.on:after {animation:progress_on_animate 2s 0.5s infinite;} #HISTORY_DETAIL .progress .progress_arrow {position:absolute; top:30px; right:30px; width:20px; height:12px; transform:rotate(180deg); transition:transform 0.3s;} #HISTORY_DETAIL .progress.on {transform:translate(0,0);} #HISTORY_DETAIL .progress.on .progress_inner a span {transform:translate(0,0);} #HISTORY_DETAIL .progress.on .progress_arrow {transform:rotate(0deg);} /*=== DETAIL ================================================================*/ /*=== DETAIL ANIMATION ================================================================*/ #HISTORY_DETAIL .progress .progress_container {transform:translate(0, 100px); opacity:0;} #HISTORY_DETAIL.on .progress .progress_container {transform:translate(0, 0); opacity:1; transition:all 1s 1s;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li .tw_box {transform:translate(0, 100px); opacity:0;} #HISTORY_DETAIL .detail_contents.change .detail_inner .intro li .tw_box, #HISTORY_DETAIL .detail_contents.on .detail_inner .intro li .tw_box {transform:translate(0, 0); opacity:1; transition:all 1s;} #HISTORY_DETAIL .detail_contents.change .detail_inner .intro li:nth-of-type(1) .tw_box, #HISTORY_DETAIL .detail_contents.on .detail_inner .intro li:nth-of-type(1) .tw_box {transition-delay:1s;} #HISTORY_DETAIL .detail_contents.change .detail_inner .intro li:nth-of-type(2) .tw_box, #HISTORY_DETAIL .detail_contents.on .detail_inner .intro li:nth-of-type(2) .tw_box {transition-delay:1.1s;} #HISTORY_DETAIL .detail_contents.change .detail_inner .intro li:nth-of-type(3) .tw_box, #HISTORY_DETAIL .detail_contents.on .detail_inner .intro li:nth-of-type(3) .tw_box {transition-delay:1.2s;} #HISTORY_DETAIL .detail_contents.change .detail_inner .intro li:nth-of-type(4) .tw_box, #HISTORY_DETAIL .detail_contents.on .detail_inner .intro li:nth-of-type(4) .tw_box {transition-delay:1.3s;} /*=== DETAIL ANIMATION ================================================================*/ /*=== ENDING ================================================================*/ #HISTORY_ENDING {background-color:#fff;} #HISTORY_ENDING .copy_box {position:absolute; top:50%; left:0; width:100%; text-align: center; transform:translate(0, -50%);} #HISTORY_ENDING .copy_box > div {display: block;} #HISTORY_ENDING .copy_box .copy {margin-top:62px;} #HISTORY_ENDING .copy_box .logo {transform:translate(0, 0); opacity:1; transition:all 1s 1.3s; display:inline-block;} #HISTORY_ENDING .copy_box .logo img {width:50%;} /*=== ENDING ================================================================*/ /*=== ENDING ANIMATION ================================================================*/ #HISTORY_ENDING {transform:translate(100%, 0);} #HISTORY_ENDING .copy_box .logo {transform:translate(0, 100px); opacity:0;} #HISTORY_ENDING .copy_box .copy {transform:translate(0, 100px); opacity:0;} #HISTORY_ENDING.on {transform:translate(0, 0); transition:transform 1s cubic-bezier(.66,0,.34,1);} #HISTORY_ENDING.on .copy_box .logo {transform:translate(0, 0); opacity:1; transition:all 1s 1.3s;} #HISTORY_ENDING.on .copy_box .copy {transform:translate(0, 0); opacity:1; transition:all 1s 1.5s;} #HISTORY_ENDING.small .copy_box {transform:translate(0, -216%); transition:transform 1s;} #HISTORY_ENDING.small .copy_box .logo {opacity:0; transition:all 1s;} /*=== ENDING ANIMATION ================================================================*/ #TRANSITION_BOX {position:fixed; top:0; left:0; width:100%; height:100%; font-size:0; visibility:hidden; opacity:0; z-index:2;} #TRANSITION_BOX.on {visibility: visible; opacity:1;} #TRANSITION_BOX div {display: inline-block; width:20%; height:100%; background-color:#fff; transform:translate(0, 100%); transition:none;} #TRANSITION_BOX.in div {transform:translate(0, 0); transition:transform 1s cubic-bezier(.66,0,.34,1);} #TRANSITION_BOX.in div:nth-of-type(1) {transition-delay:0s;} #TRANSITION_BOX.in div:nth-of-type(2) {transition-delay:0.1s;} #TRANSITION_BOX.in div:nth-of-type(3) {transition-delay:0.2s;} #TRANSITION_BOX.in div:nth-of-type(4) {transition-delay:0.3s;} #TRANSITION_BOX.in div:nth-of-type(5) {transition-delay:0.4s;} #TRANSITION_BOX.out div {transform:translate(0, -100%); transition:transform 1s cubic-bezier(.66,0,.34,1);} #TRANSITION_BOX.white div {background-color:#fff;} #TRANSITION_BOX.gray div {background-color:#1a1a1a;} #POPUP {position:fixed; top:89px; left:0; width:100%; height:calc(100% - 89px); background-color:rgba(0,0,0,0.8); z-index:3; overflow-y:auto; display: none;} #POPUP .popup_container {position:relative; width:100%; height:100%; display:table; text-align: center;} #POPUP .popup_inner {display: table-cell; vertical-align: middle;} #POPUP .popup_inner .thumb_box {position:relative; width:100%; max-width:784px; margin:0 auto; padding:60px 0;} #POPUP .popup_inner .thumb_box > img {width:100%;} #POPUP .popup_inner .thumb_box .popup_close {position:absolute; top:24px; right:0;width:21px;height:21px;} #footer {position:fixed; bottom:0; width:100%; transform:translate(0, 100%); z-index:5;} #footer.on {transform:translate(0, 0); transition:transform 1s cubic-bezier(.66,0,.34,1);} .isWeb {display: inline-block !important;} .isMob {display: none !important;} @keyframes step1_scroll_animate { 0%, 20% {height: 45%;top: -45%;} 80%, 100% {height: 45%;top: 145%;} } @keyframes detail_change_animate { 0% {transform:translate(100%,0);} 100% {transform:translate(0,0);} } @keyframes detail_scroll_arrow_animate { 0% {transform:translate(-5px,0) rotate(45deg); opacity:0;} 50% {transform:translate(0,0) rotate(45deg); opacity:1;} 100% {transform:translate(5px,0) rotate(45deg); opacity:0;} } @keyframes progress_on_animate { 0% {width:0; height:0; margin:0; opacity:0;} 10% {width:0; height:0; margin:0; opacity:1;} 90% {width:40px; height:40px; margin:-20px; opacity:0;} 100% {width:40px; height:40px; margin:-20px; opacity:0;} } /* mobile */ @media all and (max-width: 1024px) { #header.fixed .header-container {background-color:#fff;} .container {position:relative; width:100%; height:calc(100vh - 66px); min-height:100%; margin-top:66px;} .section {position:absolute; height:100%;} .section .bg_box .bg_box_inner video {top:0; left:0; width:100%; height:100%; min-width: inherit; min-height:inherit; transform:none; object-fit: cover;} #HISTORY_MAIN .title {font-size:22px;} #HISTORY_MAIN.intro .title img {width:110px;} #HISTORY_MAIN .title_box {position:absolute; bottom:0; left:0; width:100%; height:calc(100vh - 66px);} #HISTORY_MAIN .mask_box ul .fixed_copy {height:calc(100vh - 66px);} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .section_title br.desc_mob{display: none;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .copy1 {font-size:22px; padding-bottom:30px;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .copy1 img {width:110px;margin-bottom:30px;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .copy2 {font-size:14px; line-height:24px; letter-spacing: -0.3px;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .swipe_info {position:relative; height:72px;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .swipe_info .swipe_info_inner {position: absolute; top:30px; left: 50%; width: 29px; margin-left: -14px;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .swipe_info .swipe_info_inner .arrow {position:absolute; top:0; right:-16px; width:15px; animation:swipe-info-arrow-animate 1s infinite;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .swipe_info .swipe_info_inner .hand {animation:swipe-info-hand-animate 1s infinite; transform-origin: 20% 100%;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .swipe_info {opacity:0;} #HISTORY_MAIN.intro .mask_box ul .fixed_copy .fixed_copy_inner .swipe_info {opacity:1; transition:opacity 1s 3.3s;} #HISTORY_SELECT ul li {width:100%; height:20%;} #HISTORY_SELECT ul li .copy_box {bottom:auto; top:50%; padding:0 25px; transform:translate(0, -50%);} #HISTORY_SELECT ul li .copy_box .copy1 .year {font-size:14px;margin-bottom:15px;} #HISTORY_SELECT ul li .copy_box .copy1 .title {font-size:22px; line-height: 32px; margin-bottom:0;} #HISTORY_SELECT ul li .copy_box .copy2 {display: none;} #HISTORY_SELECT ul li .copy_box .arrow {position:absolute; top:50%; right:20px; transform:translate(0, -50%);} #HISTORY_SELECT ul li:nth-of-type(1) {background:url("../../../img/company/history/m_select_thumb1.jpg") no-repeat center/cover;} #HISTORY_SELECT ul li:nth-of-type(2) {background:url("../../../img/company/history/m_select_thumb2.jpg") no-repeat center/cover;} #HISTORY_SELECT ul li:nth-of-type(3) {background:url("../../../img/company/history/m_select_thumb3.jpg") no-repeat center/cover;} #HISTORY_SELECT ul li:nth-of-type(4) {background:url("../../../img/company/history/m_select_thumb4.jpg") no-repeat center/cover;} #HISTORY_SELECT ul li:nth-of-type(5) {background:url("../../../img/company/history/m_select_thumb5.jpg") no-repeat center/cover;} #TRANSITION_BOX div {width:100%; height:20%; transform:translate(100%, 0);} #TRANSITION_BOX.out div {transform:translate(-100%, 0);} #HISTORY_DETAIL {margin-top:0; height:100%;} #HISTORY_DETAIL .back_btn {top:30px; left:20px;} #HISTORY_DETAIL .back_btn a {font-size:12px;} #HISTORY_DETAIL .back_btn a:before {width:12px; height:11px; background-size:12px;} #HISTORY_DETAIL .back_btn a:hover:after {width:0;} #HISTORY_DETAIL .detail_contents .detail_inner {margin-top:0;} #HISTORY_DETAIL .detail_contents .detail_inner .intro {top:10%; left:20px; width:calc(100% - 40px);max-width:580px;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.title {font-size:26px; margin-top:20px; margin-bottom:40px; line-height: 1;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.desc {font-size:13px; line-height: 24px; word-break: keep-all; margin-bottom:30px;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.scroll {font-size:12px;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.scroll .swipe_info {position:relative; height:72px;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.scroll .swipe_info .swipe_info_inner {position: absolute; top:0; left: 0; width: 29px; margin-left: 12px;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.scroll .swipe_info .swipe_info_inner .arrow {position:absolute; top:0; right:-16px; width:15px; animation:swipe-info-arrow-animate 1s infinite;} #HISTORY_DETAIL .detail_contents .detail_inner .intro li.scroll .swipe_info .swipe_info_inner .hand {animation:swipe-info-hand-animate 1s infinite; transform-origin: 20% 100%;} #HISTORY_DETAIL .detail_contents .detail_inner .lists { padding-top:185px; width:100vw;top:10%;transform:translateY(-10%);} #HISTORY_DETAIL .detail_contents .detail_inner .lists a:last-child {margin-right:60px;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a {width:250px; margin-right:60px;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a .thumb {width:250px;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a:hover .thumb img {transform:scale(1);} #HISTORY_DETAIL .detail_contents .detail_inner .lists a .copy_box {margin-top:25px;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a .copy_box .title {font-size:14px; margin-bottom:16px; line-height: 24px;} #HISTORY_DETAIL .detail_contents .detail_inner .lists a .copy_box .year {font-size:13px;} #HISTORY_DETAIL .progress {height:112px; transform:translate(0, 57px);} #HISTORY_DETAIL .progress .progress_inner {padding:0 70px 0 20px;} #HISTORY_DETAIL .progress .progress_inner a {margin-top:26px; pointer-events: none;} #HISTORY_DETAIL .progress .progress_inner a:last-child .line:before {content:""; position:absolute; top:-3px; right:-6px; width:7px; height:7px; background-size:7px;} #HISTORY_DETAIL .progress .progress_inner a span {display:none;} #HISTORY_DETAIL .progress .progress_arrow {width:16px; height:10px; top:20px; right:20px;} #HISTORY_DETAIL .progress .mob_detail_navi {position: absolute;bottom: 0;width: 100%; height:58px; white-space: nowrap;overflow-y: hidden;overflow-x: scroll; padding:0 50px; box-sizing: border-box; font-size:0;border-top:1px solid #333; text-align:center;} #HISTORY_DETAIL .progress .mob_detail_navi a {display: inline-block; vertical-align:top; height:58px; line-height:58px; font-size:13px; opacity:0.42; text-align:center; margin-right:30px;} #HISTORY_DETAIL .progress .mob_detail_navi a:last-child {margin-right:0;} #HISTORY_DETAIL .progress .mob_detail_navi a.on {opacity:1;} #TRANSITION_BOX {position:absolute;} #POPUP {position:relative; top:0; height:calc(100vh - 66px);} #POPUP .popup_inner .thumb_box {padding:0 20px; box-sizing: border-box;} #POPUP .popup_inner .mouse_dim {display: none;} #POPUP .popup_inner .thumb_box .popup_close {top:-36px; right:20px;} #footer {position:relative; bottom:auto; width:auto; transform:none;} .isWeb {display: none !important;} .isMob {display: inline-block !important;} @keyframes swipe-info-hand-animate { 0% {transform:rotate(0deg);} 100% {transform:rotate(-20deg);} } @keyframes swipe-info-arrow-animate { 0% {transform:translate(0,0);} 100% {transform:translate(-10px,0);} } } /* mobile */ @media all and (max-width: 766px) { #HISTORY_DETAIL .progress .mob_detail_navi {padding:0 20px;} #HISTORY_DETAIL .detail_contents .detail_inner .intro {top:20%;} #HISTORY_DETAIL .detail_contents .detail_inner .lists {padding-top:145px;top:20%;} #HISTORY_MAIN .mask_box ul .fixed_copy .fixed_copy_inner .section_title br.desc_mob{display: block;} }