body {overflow-y:scroll; position:fixed;} body.on {overflow-y:auto; position:relative;} #ABOUT {height:100vh; padding-bottom: 0} #ABOUT.on {height:auto;overflow:visible;} #ABOUT .section {overflow:hidden;} #ABOUT .g_section_full {width:100%;height:100vh;} #ABOUT .g_title1_en {top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute; color: #fff;} #ABOUT .g_title3 + .g_text1 {margin-top: 52px;} #ABOUT .g_title4_en {margin-bottom: 40px;} /* section_top */ #ABOUT .section_top {background:url(../images/bg_home.jpg) no-repeat center / cover;height:120vh;} /*#ABOUT .section_top:before {content: ''; position: absolute; width: 100%; height: 150px; background: #fff; left: 0; top: 0;z-index:1}*/ #ABOUT .section_top .top_bg {position:absolute;width: 100%; height: 120vh;opacity:0;} #ABOUT .section_top .top_bg.on {opacity:1;} #ABOUT .section_top .top_character {position: absolute; top: 55%; right: 50%; max-width: 2400px; width: 100%;opacity:0;transform: translate(50%, -54%);} #ABOUT .section_top .top_character.character1 {transform: translate(70%, -54%);} #ABOUT .section_top .title {position:absolute; width:100%;height:100vh;} #ABOUT .section_top .mask_logo {position:absolute;bottom:50%;right:50%;transform:translate(-500%, -25%) scale(20);max-width:2400px; width:100%;} #ABOUT .section_top .g_section {width:100%;height:100vh;} #ABOUT .section_top .g_section .text_box {padding-top:32vh; height:100vh;box-sizing:border-box;} @-webkit-keyframes rollIn { 0% { transform: translateX(10%); } 100% { transform: translateX(0px); } } @keyframes rollIn { 0% { transform: translateX(10%); } 100% { transform: translateX(0px); } } /* service */ #ABOUT #service_1 .bg{background:url(../images/bg_service_1.jpg) no-repeat 35% 100% / cover !important;} #ABOUT #service_2 .bg{background:url(../images/bg_service_2.jpg) no-repeat 35% 100% / cover !important;} #ABOUT #service_3 .bg{background:url(../images/bg_service_3.jpg) no-repeat 35% 100% / cover !important;} #ABOUT #service_2 .text_box > *{color: #111;} /* section_ceo */ #ABOUT .section_ceo {width:100%;overflow:visible;z-index:1; height:100vh;min-height:1080px;} #ABOUT .section_ceo .bg {background:url(../images/bg_service_1.jpg) no-repeat 35% 100% / cover;height:100vh;width:100%;text-align:right; position:absolute; z-index:-1;min-height:1080px;} #ABOUT .section_ceo .text_box {padding-top:420px; display:inline-block; text-align:left;margin-left:54.8%;} #ABOUT .section_ceo .text_box .g_text2 {margin-top:20px;} #ABOUT .section_ceo .text_box > * {color:#fff;} #ABOUT .section_ceo .text_box .g_text1 {font-weight:200;} #ABOUT .section_ceo .text_box .g_text2 {font-weight:200;} /* =================================== swiper slide =================================== */ /* swiper */ .swiper {margin-top:80px; position:relative;} .swiper .swiper-container .swiper-slide {overflow:hidden;} .swiper .swiper-container .swiper-slide img {width:100%;} .swiper .swiper-container .swiper-slide .title {margin-top: 62px; margin-left:8.333333%; padding-left:116px; background:#fff; width:246px;} .swiper .swiper-container .slide_mask {position:absolute; width:100%;top:0;left:0; z-index:3;cursor:pointer;} /*.swiper .swiper-container:before {content:'';position:absolute; width:1px;height:100%;top:0;left:-2px; background:#fff;border-left:1px solid #fff;}*/ .swiper .swiper-container .slide_mask img {margin-top: -4px; margin-left: -4px;width:100px; position:relative;} .swiper .swiper-container .direction_area {position: relative;width: 100%;font-size: 0; margin-top:70px; height:72px;} .swiper .swiper-container .direction_area img {width: 100%;} .swiper .swiper-container .direction_area>li {display:inline-block; vertical-align:middle;} .swiper .swiper-container .direction_area>li.swiper-title {width:304px; margin-left:64px;box-sizing:border-box;position:relative; margin-top:-40px;} .swiper .swiper-container .direction_area>li.swiper-title .title {opacity:0;transition: all .3s; position:absolute;top:0;left:0;} .swiper .swiper-container .direction_area>li.swiper-title .title.on {opacity:1;} .swiper .swiper-container .direction_area .slide_empty {position:relative; margin-bottom: 82px; width:100%;} .swiper .swiper-container .direction_area .swiper-count {position: relative;width: 58px;font-size: 18px;color: #a0a0a0; font-weight:400; margin-left:8.333333%;text-align: center; transition: .3s opacity; transform: translate3d(0,0,0); z-index: 10; margin-top:-4px;} .swiper .swiper-container .direction_area .swiper-count span {display:inline-block;width:17px;} .swiper .swiper-container .direction_area .swiper-count .current {color:#111; padding-right:4px; text-align:right; font-weight:500;} .swiper .swiper-container .direction_area .swiper-count .total {padding-left:4px;} .swiper .swiper-container .direction_area .swiper-progress {height: 2px;position: relative;width: calc(83.333333% - 550px);border-radius: 0;background: #e5e5e5;overflow: hidden;z-index:2;} .swiper .swiper-container .direction_area .swiper-progress .swiper-pagination-progressbar-fill {background:#111111;} .swiper-button-prev:after, .swiper-button-next:after {display:none;} .swiper .swiper-container .direction_area .btn_arrow {margin-right:8.333333%;} .swiper .swiper-container .direction_area .btn_arrow > div {width: 10px;height: 19px;position: relative;margin-top: 0;display: inline-block;vertical-align: middle;top: 0;left: 0;outline:none;transition:all .3s;} .swiper .swiper-container .direction_area .btn_arrow > div:before {content: ''; position: absolute; top: 50%; left: 50%; padding: 20px; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%);} .swiper .swiper-container .direction_area .swiper-button-prev {margin-left: 64px;background: url(../images/ico_arrow_right.svg) no-repeat center / contain;-webkit-transform: rotate(180deg);transform: rotate(180deg);} .swiper .swiper-container .direction_area .swiper-button-prev:hover {transform:rotate(180deg) translateX(6px);} .swiper .swiper-container .direction_area .swiper-button-next {background: url(../images/ico_arrow_right.svg) no-repeat center / contain;margin-left: 40px;} .swiper .swiper-container .direction_area .swiper-button-next:hover {transform:translateX(6px);} .swiper .swiper-container .over_area {position:absolute; top:0; left:0; width:100%; height:calc(100% - 142px); z-index:4; font-size:0;} .swiper .swiper-container .over_area span {display: inline-block; width:50%; height:100%; font-size:0;cursor:none;} .swiper .swiper-container .over_area span.over_r {left:50%;} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){ .swiper .swiper-container {margin-left:-1px; margin-right:1px; margin-top:-1px; margin-bottom:1px; } } /* section_network */ #ABOUT .section_network {padding-top:230px;} #ABOUT .section_network .text_box .g_title7 {margin-bottom:16px;} #ABOUT .section_network .network_line {font-size:0;border-top:2px solid #e2e2e2; margin-top:150px; margin-right:8.333333%;} #ABOUT .section_network .network_line p {width:25%; display:inline-block; font-size:18px; font-weight:600; text-align:left; position:relative;padding-top:30px;} #ABOUT .section_network .network_line p:before {content:''; position:absolute; width:6px; height:6px;background:#000;left:0;top:-4px;} /*=== ANIMATIONS ================================================================*/ #ABOUT .section .text_box > *{opacity:0;visibility:hidden;transform:translateY(80px);} #ABOUT .section.on .text_box > * {opacity:1;visibility:visible;transform:translateY(0);transition:transform 1s cubic-bezier(.215,.61,.355,1),opacity 1s ease-out;} #ABOUT .section.on .text_box .g_text1 {transition-delay:0.1s;} #ABOUT .section.on .text_box .g_title7 {transition-delay:0.2s;} #ABOUT .section.on .text_box .g_btn {transition-delay:0.2s;} #ABOUT .section.on .text_box .g_title7 + .g_text1 {transition-delay:0.2s;} #ABOUT .section.on .text_box .g_text2 {transition-delay:0.2s;} #ABOUT .section .swiper:before {content: ''; position: absolute; width: 50%; height: 100%; background: #fff; right: 50%; top: 0; z-index: 3; transition: all 0.8s;} #ABOUT .section .swiper:after {content: ''; position: absolute; width: 50%; height: 100%; background: #fff; left: 50%; top: 0; z-index: 3; transition: all 0.8s;} #ABOUT .section.on .swiper:before {right: 100%;transition-delay:0.5s;} #ABOUT .section.on .swiper:after {left: 100%;transition-delay:0.5s;} /* section_top */ /*#ABOUT .section_top {opacity:0;}*/ #ABOUT .section_top.active { animation:scale 2s forwards; -ms-animation:scale 2s forwards;} @-webkit-keyframes scale { 0% {transform:scale(1.15); opacity:0;} 100% {transform:scale(1); opacity:1} } @keyframes scale { 0% {transform:scale(1.15); opacity:0;} 100% {transform:scale(1); opacity:1} } #ABOUT .section_top .g_title1_en {margin-top:100px;opacity:0;} #ABOUT .section_top .scroll_line {margin-top:100px;opacity:0;} /* section_network */ #ABOUT .section_network .text_box .map {position:relative; margin-top:-40px;} #ABOUT .section_network .text_box .map img {position:absolute; width:100%;top:0;left: 50%;transform: translateX(-50%);opacity:0;transition:all .25s;} #ABOUT .section_network .text_box .map img.empty {position:relative;} #ABOUT .section_network .text_box .map img.map_default {opacity:1;} #ABOUT .section_network .network_line {opacity:0;visibility:hidden;transform:translateY(80px);} #ABOUT .section_network.on .network_line {opacity:1;visibility:visible;transform:translateY(0);transition:transform 1s cubic-bezier(.215,.61,.355,1),opacity 1s ease-out; transition-delay:0.2s;} /*=== Laptop css ================================================================*/ @media all and (max-width: 1350px) { #ABOUT .section_top.on .mask_logo {transform:translate(-10%, 25%) scale(4) !important; transition:all .5s;} }