@charset "utf-8"; /* CSS Document */ body { font-family: 'Noto Sans', sans-serif; } h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 0; } a, a:hover, a:visited{ color: inherit; text-decoration: none!important; } ul li{ list-style: none; } /*****header*******/ .header{ width: 100%; height: 90px; position: fixed; top: 0; left: 0; z-index: 9; /*background-color: rgba(255,255,255,0.7);*/ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .header.on{ background-color: rgba(255,255,255,1); box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1); } .header2{ background-color: rgba(255,255,255,1); box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1); } .header>.container{ height: 90px; display: flex; align-items: center; justify-content: space-between; } .header>.container::before, .header>.container::after{ display: none; } .headerLogo a{ width: 200px; display: block; position: relative; } .headerRight{ width: calc(90% - 200px); display: flex; align-items: center; justify-content: flex-end; } .headerNav{ display: flex; align-items: center; justify-content: flex-start; } .headerNav>li{ padding: 0 1.5vw; cursor: pointer; } .headerNav>li>a{ font-size: 18px; color: #fff; line-height: 90px; overflow: hidden; position: relative; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .header2 .headerNav>li>a, .header.on .headerNav>li>a{ color: #333; } .headerNav>li:hover>a{ color:#37b48d; } .headerNav>li>a::after{ content: ''; display: block; width: 100%; height: 4px; background-color: #37b48d; position: absolute; left: 0; bottom: -5px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .headerNav>li.on>a{ color: #37b48d; } .headerNav>li.on>a::after{ bottom: 15px; } .headerNav>li:hover>a::after{ bottom: 15px; } .headerSearch{ border-left: 1px solid #fff; position: relative; display: flex; align-items: center; justify-content: flex-start; } .header2 .headerSearch, .header.on .headerSearch{ border-left: 1px solid #333; } .headerSearch a{ margin: 0 1.5vw; font-size: 16px; color: #fff; } .header2 .headerSearch a, .header.on .headerSearch a{ color: #666; } .headerSearch a.on{ color: #37b48d; } .headerSearch img{ cursor: pointer; } .headerSearch_box{ width: 100%; padding: 160px 0 80px; background-color: #fff; box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1); position: fixed; top: 0; left: 0; z-index: 8; display: none; } .headerSearch_box .container{ display: flex; align-items: center; justify-content: center; position: relative; } .headerSearch_box .container::before, .headerSearch_box .container::after{ display: none; } .headerSearch_box input{ width: 500px; height: 32px; border: none; border-bottom: 1px solid #37b48d; font-size: 16px; color: #333; letter-spacing: 1px; } .headerSearch_box input::placeholder{ color: #999; } .headerSearch_box img{ margin-left: 40px; cursor: pointer; } .headerSearch_close{ position: absolute; top: -40px; right: 0; } .headerProduct_box{ width: 100%; padding: 110px 0 60px; background-color: #fff; box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1); position: fixed; top: 0; left: 0; z-index: -1; display: none; overflow: hidden; } .headerProduct_box::after{ content: ''; display: block; width: 100%; height: 100%; background-color: #aaabab; position: absolute; top: 90px; left: 0; } .headerProduct_box.on::after{ -webkit-transform: translateX(101%); -ms-transform: translateX(101%); -o-transform: translateX(101%); transform: translateX(101%); -webkit-transition: all 1s ease-in-out 0.3s; -moz-transition: all 1s ease-in-out 0.3s; -ms-transition: all 1s ease-in-out 0.3s; -o-transition: all 1s ease-in-out 0.3s; transition: all 1s ease-in-out 0.3s; } .headerProduct_list{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .headerProduct_list li{ margin-right: 5%; width: 30%; padding: 30px 20px 30px 0; border-bottom: 1px solid #e6e6e6; position: relative; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .headerProduct_list li:nth-child(3n){ margin-right: 0; } .headerProduct_list li:hover{ padding: 30px 20px; } .headerProduct_list li::after{ content: ''; display: block; width: 0; height: 1px; background-color: #37b48d; position: absolute; left: 0; bottom: -1px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .headerProduct_list li:hover::after{ width: 100%; } .headerNav>li:nth-child(2) .headerProduct_list li a, .headerNav>li:nth-child(3) .headerProduct_list li a{ padding-left: 100px; } .headerProduct_list .headerProduct_bg { width: 80px; height: 80px; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .headerProduct_list h6, .headerProduct_list p{ font-size: 16px; color: #808080; line-height: 1.6; text-transform: uppercase; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .headerProduct_list li:hover h6, .headerProduct_list li:hover p{ color: #37b48d; } .headerProduct_list li:hover p{ font-weight: bold; } .headerProduct_list li i{ font-size: 24px; color: #808080; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .headerProduct_list li:hover i{ right: 20px; color: #37b48d; } /*****header*******/ /***footer***/ .footer { background: #1f1f1f; position: relative; font-size: 14px; color: #7c7c7c; letter-spacing: 1px; } .toTop{ width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; position: fixed; right: 20px; bottom: 80px; z-index: 9; cursor: pointer; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /*@keyframes move2 { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 25% { -webkit-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px); } 75% { -webkit-transform: translateY(6px); -ms-transform: translateY(6px); -o-transform: translateY(6px); transform: translateY(6px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .toTop:hover img{ animation: move2 3s infinite ease-in-out; }*/ .footer .container::before, .footer .container::after{ display: none; } .footerTop .container{ padding: 60px 0; display: flex; align-items: flex-start; justify-content: space-between; } .footerTop_left img{ margin-bottom: 40px; } .footerTop_left p{ line-height: 2.4; } .footerTop_right h6{ font-size: 18px; color: #fff; } .footerLink{ display: flex; align-items: flex-start; justify-content: space-between; } .footerLink li:nth-child(n+2){ margin-left: 8vw; } .footerLink li .line{ margin-top: 15px; width: 30px; height: 2px; background-color: #37b48d; } .footerLink li a{ font-size: 14px; color: #ababab; letter-spacing: 1px; } .footerLink li a:hover{ color: #37b48d; } .footerLink li a:first-child{ font-size: 16px; color: #fff; letter-spacing: 2px; } .footerLink li a:nth-child(n+2){ margin-top: 15px; } .footerTop_email{ margin-top: 20px; position: relative; } .footerTop_email input[type=text]{ width: 380px; height: 68px; border: none; border-radius: 68px; padding: 0 100px 0 25px; font-size: 14px; color: #fff; letter-spacing: 1px; background-color: #4d4d4d; } .footerTop_email input[type=text]::placeholder{ color: #fff; } .footerTop_email input[type=button]{ width: 56px; height: 56px; border: none; border-radius: 50%; background-color: #37b48d; position: absolute; top: 6px; right: 6px; } .footerTop_email img{ position: absolute; top: 32px; right: 24px; } .footerTop_follow{ margin-top: 40px; display: flex; align-items: center; justify-content: flex-end; } .footerTop_follow h5{ font-size: 18px; color: #999999; } .footerTop_followBox{ position: relative; cursor: pointer; margin-left: 10px; } .footerTop_followBox:last-child{ margin-left: 20px; } .footerTop_followBox img:nth-child(2){ position: absolute; top: -10px; left: 50%; -webkit-transform: translate(-50%, -100%); -ms-transform: translate(-50%, -100%); -o-transform: translate(-50%, -100%); transform: translate(-50%, -100%); visibility: hidden; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .footerTop_followBox:hover img:nth-child(2){ visibility: visible; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); } .footerBottom{ border-top: 1px solid #4c4c4c; } .footerBottom .container{ padding: 30px 0; display: flex; align-items: flex-start; justify-content: space-between; } .footerBottom_link a{ color: #7c7c7c; } /***footer***/ /*****banner*******/ .banner{ width: 100%; position: relative; overflow: hidden; z-index: 2; } .detailBan{ position: relative; z-index: 0; } .detailBan::after{ content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; } @keyframes move { 0% { -webkit-transform: translateY(-25%); -ms-transform: translateY(-25%); -o-transform: translateY(-25%); transform: translateY(-25%); } 50% { -webkit-transform: translateY(25%); -ms-transform: translateY(25%); -o-transform: translateY(25%); transform: translateY(25%); } 100% { -webkit-transform: translateY(-25%); -ms-transform: translateY(-25%); -o-transform: translateY(-25%); transform: translateY(-25%); } } .toDown{ position: absolute; left: 50%; bottom: 40px; margin-left: -12px; z-index: 2; cursor: pointer; } .toDown img{ animation: move 3s infinite ease-in-out; } .indBan_swiper, .indBan_box{ height: 100vh; position: relative; } .indBan_box{ display: block; } .indBan_box video{ object-fit: cover; width: 100%; height: 100%; } .indBan_txt{ text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .indBan_txt h6{ font-size: 36px; color: #fff; letter-spacing: 2px; } .indBan_txt p{ margin-top: 20px; font-size: 56px; color: #fff; font-weight: bold; letter-spacing: 4px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indBan_txt h6, .indBan_txt p{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .indBan_txt h6{ -webkit-transition: all 0.6s ease-in-out 0.8s; -moz-transition: all 0.6s ease-in-out 0.8s; -ms-transition: all 0.6s ease-in-out 0.8s; -o-transition: all 0.6s ease-in-out 0.8s; transition: all 0.6s ease-in-out 0.8s; } .indBan_txt p{ -webkit-transition: all 0.6s ease-in-out 1s; -moz-transition: all 0.6s ease-in-out 1s; -ms-transition: all 0.6s ease-in-out 1s; -o-transition: all 0.6s ease-in-out 1s; transition: all 0.6s ease-in-out 1s; } .indBan_swiper .swiper-slide-active .indBan_txt h6, .indBan_swiper .swiper-slide-active .indBan_txt p{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=1); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indBan_pag{ display: none; } .indBan_pagLiner{ display: flex; align-items: center; justify-content: space-between; position: absolute; left: 50%; bottom: 120px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 2; } .indBan_pagLiner_box{ cursor: pointer; margin: 0 12px; width: 50px; height: 4px; border-radius: 4px; background-color: rgba(255,255,255,0.5); overflow: hidden; } .indBan_pagLiner_line{ width: 0; height: 4px; border-radius: 4px; background-color: #37b48d; } .indBan_pagLiner_box.on .indBan_pagLiner_line{ width: 100%; -webkit-transition: all 5s linear; -moz-transition: all 5s linear; -ms-transition: all 5s linear; -o-transition: all 5s linear; transition: all 5s linear; } .publicBan{ text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .publicBan h6{ font-size: 48px; color: #fff; letter-spacing: 2px; } .publicBan p{ margin-top: -35px; font-size: 52px; color: #fff; letter-spacing: 2px; text-transform: uppercase; opacity: 0.2; -moz-opacity: 0.2; -khtml-opacity: 0.2; -webkit-opacity: 0.2; filter: alpha(opacity=2); } /*****banner*******/ .comment_title{ text-align: center; } .comment_title h6{ font-size: 48px; color: #333; letter-spacing: 6px; } .comment_title h5{ margin-top: 10px; font-size: 32px; color: #fff; letter-spacing: 1px; } .comment_title .line{ margin: 20px auto 25px; width: 80px; height: 6px; background-color: #37b48d; } .comment_title p{ max-width: 60vw; margin: 0 auto; font-size: 18px; color: #4c4c4c; line-height: 2; letter-spacing: 1px; } .white_title{ text-align: left; } .white_title.center{ text-align: center; } .white_title .line{ margin: 20px 0 25px; background-color: #fff; } .white_title.center .line{ margin: 20px auto 25px; } .white_title h6, .white_title p{ color: #fff; margin: 0; } .white_title.center h6, .white_title.center p{ margin: 0 auto; } .indWarpper .comment_title h6, .indWarpper .comment_title .line, .indWarpper .comment_title p{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .indWarpper>div.on .comment_title h6, .indWarpper>div.on .comment_title .line, .indWarpper>div.on .comment_title p{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indWarpper>div.on .comment_title h6{ -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .indWarpper>div.on .comment_title .line{ -webkit-transition: all 0.6s ease-in-out 0.2s; -moz-transition: all 0.6s ease-in-out 0.2s; -ms-transition: all 0.6s ease-in-out 0.2s; -o-transition: all 0.6s ease-in-out 0.2s; transition: all 0.6s ease-in-out 0.2s; } .indWarpper>div.on .comment_title p{ -webkit-transition: all 0.6s ease-in-out 0.4s; -moz-transition: all 0.6s ease-in-out 0.4s; -ms-transition: all 0.6s ease-in-out 0.4s; -o-transition: all 0.6s ease-in-out 0.4s; transition: all 0.6s ease-in-out 0.4s; } /* index.html */ .indSec1{ padding-top: 80px; } .indSec1_con{ margin-top: 40px; } .indSec1_list{ display: flex; align-items: flex-start; justify-content: space-around; } .indSec1_list li{ width: 176px; height: 176px; border-radius: 50%; overflow: hidden; background-color: #fff; display: flex; align-items: center; flex-direction: column; justify-content: center; position: relative; z-index: 0; cursor: pointer; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } .indSec1.on .indSec1_list li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=1); -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .indSec1_list li::after{ content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background: -webkit-linear-gradient(#37b48d, #0081cc); background: -o-linear-gradient(#37b48d, #0081cc); background: -moz-linear-gradient(#37b48d, #0081cc); background: linear-gradient(#37b48d, #0081cc); position: absolute; top: 0; left: 0; z-index: -1; -webkit-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .indSec1_list li img:nth-child(2){ position: absolute; top: 26px; left: 50%; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .indSec1_list li p{ margin-top: 6px; font-size: 18px; color: #808080; font-weight: bold; letter-spacing: 2px; } .indSec1_list li img, .indSec1_list li p{ -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .indSec1_list li.on::after{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .indSec1_list li.on img:nth-child(1){ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } .indSec1_list li.on img:nth-child(2){ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); } .indSec1_list li.on p{ color: #fff; } .indSec1_swiper{ margin-top: 30px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); -webkit-transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -ms-transition: all 1s ease-in-out 1s; -o-transition: all 1s ease-in-out 1s; transition: all 1s ease-in-out 1s; } .indSec1.on .indSec1_swiper{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .indSec1_pag{ display: none; } .indSec1_box{ position: relative; } .indSec1_img{ overflow: hidden; } .indSec1_img img{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec1_box:hover .indSec1_img img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .indSec1_txt{ width: 30%; max-height: 100%; padding: 2%; box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.2); background: -webkit-linear-gradient(#37b48d, #0081cc); background: -o-linear-gradient(#37b48d, #0081cc); background: -moz-linear-gradient(#37b48d, #0081cc); background: linear-gradient(#37b48d, #0081cc); position: absolute; top: 0; right: 0; } .indSec1_icon{ display: block; margin: 0 0 0 auto; opacity: 0.3; -moz-opacity: 0.3; -khtml-opacity: 0.3; -webkit-opacity: 0.3; filter: alpha(opacity=30); } .indSec1_txt h5{ margin-top: 15%; font-size: 36px; color: #fff; letter-spacing: 4px; } .indSec1_txt .line{ margin: 6% 0; width: 40px; height: 4px; background-color: #fff; } .indSec1_txt h6{ font-size: 22px; color: #fff; letter-spacing: 2px; } .indSec1_txt p{ margin-top: 4%; font-size: 16px; color: #fff; letter-spacing: 1px; line-height: 1.8; } .indSec1_more{ margin-top: 15%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec1_txt:hover .indSec1_more{ transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); } .indSec2{ height: 250px; background-color: #fff; overflow: hidden; position: relative; } .indSec2_list{ display: flex; align-items: center; justify-content: space-between; } .indSec2_list li{ width: 20%; height: 250px; position: relative; cursor: pointer; display: flex; align-items: center; flex-direction: column; justify-content: center; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .indSec2 .indSec2_list li:nth-child(2){ transition-delay: 0.2s; } .indSec2 .indSec2_list li:nth-child(3){ transition-delay: 0.4s; } .indSec2 .indSec2_list li:nth-child(4){ transition-delay: 0.6s; } .indSec2 .indSec2_list li:nth-child(5){ transition-delay: 0.8s; } .indSec2.on .indSec2_list li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indSec2_list li::after{ content: ''; display: block; width: 1px; height: 0; background-color: #37b48d; position: absolute; top: 50%; left: -1px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec2_list li .number{ font-family: Arial; font-size: 38px; color: #37b48d; font-weight: bold; letter-spacing: 2px; } .indSec2_list li h6{ margin-top: 10px; font-size: 20px; color: #4c4c4c; font-weight: bold; letter-spacing: 2px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec2_list li:hover{ -webkit-transform: translateY(-20px)!important; -ms-transform: translateY(-20px)!important; -o-transform: translateY(-20px)!important; transform: translateY(-20px)!important; -webkit-transition: all 0.3s ease-in-out!important; -moz-transition: all 0.3s ease-in-out!important; -ms-transition: all 0.3s ease-in-out!important; -o-transition: all 0.3s ease-in-out!important; transition: all 0.3s ease-in-out!important; } .indSec2_list li:hover h6{ color: #37b48d; font-weight: bold; } .indSec3{ padding: 80px 0; background-color: #fafafa; } .indSec3 .container{ overflow: hidden; padding: 10px; } .indSec3_con{ margin-top: 60px; display: flex; align-items: flex-start; justify-content: space-between; } .indSec3_left{ width: calc(64% - 15px); /*padding: 0 0 10px 0;*/ } .indSec3_left, .indSec3_right a{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-102%); -ms-transform: translateX(-102%); -o-transform: translateX(-102%); transform: translateX(-102%); -webkit-transition: all 1.2s ease-in-out 0.6s; -moz-transition: all 1.2s ease-in-out 0.6s; -ms-transition: all 1.2s ease-in-out 0.6s; -o-transition: all 1.2s ease-in-out 0.6s; transition: all 1.2s ease-in-out 0.6s; } .indSec3_right a{ -webkit-transform: translateX(102%); -ms-transform: translateX(102%); -o-transform: translateX(102%); transform: translateX(102%); } .indSec3_right a:nth-child(1){ -webkit-transition: all 0.6s ease-in-out 1.2s; -moz-transition: all 0.6s ease-in-out 1.2s; -ms-transition: all 0.6s ease-in-out 1.2s; -o-transition: all 0.6s ease-in-out 1.2s; transition: all 0.6s ease-in-out 1.2s; } .indSec3_right a:nth-child(2){ -webkit-transition: all 0.6s ease-in-out 1.4s; -moz-transition: all 0.6s ease-in-out 1.4s; -ms-transition: all 0.6s ease-in-out 1.4s; -o-transition: all 0.6s ease-in-out 1.4s; transition: all 0.6s ease-in-out 1.4s; } .indSec3_right a:nth-child(3){ -webkit-transition: all 0.6s ease-in-out 1.6s; -moz-transition: all 0.6s ease-in-out 1.6s; -ms-transition: all 0.6s ease-in-out 1.6s; -o-transition: all 0.6s ease-in-out 1.6s; transition: all 0.6s ease-in-out 1.6s; } .indSec3_right a:nth-child(4){ -webkit-transition: all 0.6s ease-in-out 1.8s; -moz-transition: all 0.6s ease-in-out 1.8s; -ms-transition: all 0.6s ease-in-out 1.8s; -o-transition: all 0.6s ease-in-out 1.8s; transition: all 0.6s ease-in-out 1.8s; } .indSec3.on .indSec3_left, .indSec3.on .indSec3_right a{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .indSec3_con>div a { display: block; position: relative; } .indSec3_box{ position: relative; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec3_left .indSec3_txt{ padding: 3%; } .indSec3_imgBg{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec3_left .indSec3_box:hover .indSec3_imgBg{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .indSec3_left .indSec3_txt h5{ font-size: 28px; color: #fff; letter-spacing: 2px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; height: 30px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec3_left .indSec3_box .indSec3_txt:hover h5{ color: #37b48d; } .indSec3_left .indSec3_txt h6{ margin-top: 2%; font-size: 20px; color: #fff; letter-spacing: 1px; line-height: 1.8; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ; overflow: hidden; text-overflow: ellipsis; height: 36px; } .indSec3_txt{ width: 100%; background-color: rgba(0,0,0,0.7); position: absolute; left: 0; bottom: 0; } .indSec3_txt p{ margin-top: 3%; font-size: 14px; color: #fff; letter-spacing: 1px; } .indSec3_left .indSec3_txt img{ margin-top: 3%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec3_left .indSec3_box:hover .indSec3_txt img{ transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); } .indSec3_right{ width: calc(36% - 15px); /*display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;*/ } .indSec3_right .indSec3_txt{ padding: 4%; } .indSec3_right .indSec3_txt h6{ font-size: 18px; color: #fff; letter-spacing: 1px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; height: 28px; -webkit-transition: all 0.3s ease-in-outs; -moz-transition: all 0.3s ease-in-outs; -ms-transition: all 0.3s ease-in-outs; -o-transition: all 0.3s ease-in-outs; transition: all 0.3s ease-in-outs; } .indSec3_right .indSec3_box .indSec3_txt:hover h6{ color: #37b48d; } .indSec3_box{ display: block; background-color: #fff; box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.1); } .indSec3_right a{ width: 100%; height: 50%; display: block; } /*.indSec3_right a:nth-child(2n){ margin-left: 30px; }*/ .indSec3_right a:nth-child(2){ margin-top: 30px; } .indSec3_img{ overflow: hidden; position: relative; } .indSec3_img::after{ content: ''; width: 100%; height: 100%; display: block; background-color: rgba(0,0,0,0); position: absolute; top: 0; left: 0; } .indSec3_img::after, .indSec3_img img{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec3_box:hover .indSec3_img::after{ background-color: rgba(0,0,0,0.5); } .indSec3_box:hover .indSec3_img img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .indSec3_img span{ display: block; padding: 6px 12px; background-color: #37b48d; font-size: 14px; color: #fff; letter-spacing: 1px; position: absolute; top: 15px; left: 0; z-index: 2; } .indSec4{ padding: 80px 0; } .indSec4_list{ margin-top: 60px; display: flex; align-items: flex-start; justify-content: space-around; } .indSec4_list li{ width: 18%; text-align: center; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 0.6s ease-in-out 0.6s; -moz-transition: all 0.6s ease-in-out 0.6s; -ms-transition: all 0.6s ease-in-out 0.6s; -o-transition: all 0.6s ease-in-out 0.6s; transition: all 0.6s ease-in-out 0.6s; } .indSec4_list li:nth-child(2){ transition-delay: 0.8s; } .indSec4_list li:nth-child(3){ transition-delay: 1s; } .indSec4_list li:nth-child(4){ transition-delay: 1.2s; } .indSec4_list li a{ overflow: hidden; position: relative; z-index: 0; } .indSec4_list li img.bg{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .indSec4_list li:hover img.bg{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-filter:blur(4px); filter:blur(4px); } .indSec4.on .indSec4_list li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indSec4_list li a{ padding: 20px 0; /*border-radius: 10px;*/ -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .indSec4_list li a::after{ content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .indSec4_list li:hover a::after{ opacity: 0.7; -moz-opacity: 0.7; -khtml-opacity: 0.7; -webkit-opacity: 0.7; filter: alpha(opacity=70); } /* 摇摆动画 */ /*@keyframes swing { 0% { transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); } 25%{ transform:rotate(20deg); -ms-transform:rotate(20deg); -moz-transform:rotate(20deg); -webkit-transform:rotate(20deg); -o-transform:rotate(20deg); } 50% { transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); } 75% { transform:rotate(-20deg); -ms-transform:rotate(-20deg); -moz-transform:rotate(-20deg); -webkit-transform:rotate(-20deg); -o-transform:rotate(-20deg); } 100% { transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); } }*/ .indSec4_list li:hover a{ box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2); -webkit-transform: scale(1.2) translateY(-10px); -ms-transform: scale(1.2) translateY(-10px); -o-transform: scale(1.2) translateY(-10px); transform: scale(1.2) translateY(-10px); } .indSec4_icon { margin: 0 auto; width: 120px; height: 120px; position: relative; z-index: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .indSec4_icon::before{ content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; z-index: -1; background: -webkit-linear-gradient(#37b48d, #0081cc); background: -o-linear-gradient(#37b48d, #0081cc); background: -moz-linear-gradient(#37b48d, #0081cc); background: linear-gradient(#37b48d, #0081cc); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec4_list li:hover .indSec4_icon{ -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } .indSec4_list li:hover .indSec4_icon::before{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } .indSec4_list li h6{ margin-top: 20px; font-size: 20px; color: #171717; letter-spacing: 2px; font-weight: bold; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .indSec4_list li:hover h6{ color: #fff; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } .indSec4_list li .line{ margin: 10px auto 14px; width: 40px; height: 2px; background-color: #35ac87; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .indSec4_list li:hover .line{ background-color: #fff; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } .indSec4_list li p{ padding: 0 20px; font-size: 16px; color: #4c4c4c; letter-spacing: 1px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; height: 50px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .indSec4_list li:hover p{ color: #fff; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } .solutionSec2_slogan{ width: 100%; height: 100%; background-color: rgba(255,255,255,0.9); position: absolute; top: 0; left: 0; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .solutionSec2_slogan p{ width: 90%; padding: 30px 20px; text-align: center; border-top: 1px solid #35ac87; border-bottom: 1px solid #35ac87; font-size: 16px; color: #4c4c4c; line-height: 1.6; letter-spacing: 1px; position: absolute; top: 50%; left: 5%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .solutionSec2_list li:hover .solutionSec2_slogan{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); } .indSec5{ margin: 80px 0 12vw; position: relative; z-index: 0; } .indSec5_left{ width: 60%; padding: 4% 0 0 12.5%; background: -webkit-linear-gradient(to right, #37b48d, #0081cc); background: -o-linear-gradient(to right, #37b48d, #0081cc); background: -moz-linear-gradient(to right, #37b48d, #0081cc); background: linear-gradient(to right, #37b48d, #0081cc); -webkit-transform: translateX(-102%); -ms-transform: translateX(-102%); -o-transform: translateX(-102%); transform: translateX(-102%); } .indSec5.on .indSec5_left{ -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; } .partnerSwiper{ width: 80%; margin: 4% 0 0; padding-bottom: 80px; } .partnerSwiper_pag{ bottom: 30px!important; } .partnerSwiper_pag .swiper-pagination-bullet{ width: 14px; height: 14px; margin: 0 10px!important; background-color: #fff; opacity: 1; } .partnerSwiper_pag .swiper-pagination-bullet-active{ background-color: #35ac87; } .indSec5_box{ display: block; cursor: pointer; border-radius: 10px; position: relative; border: 1px solid rgba(255,255,255,0.5); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec5_box img{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .indSec5_box img:nth-child(n+2){ position: absolute; top: 0; left: 0; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } .indSec5_box.on{ border: 1px solid #37b48d; background-color: #fff; } .indSec5_box.on img:nth-child(1){ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } .indSec5_box.on img:nth-child(2){ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); } .indSec5_right{ width: 60%; /*height: 100%;*/ position: absolute; top: 0; right: 0; z-index: -1; -webkit-transform: translate(102%, 10%); -ms-transform: translate(102%, 10%); -o-transform: translate(102%, 10%); transform: translate(102%, 10%); } .indSec5.on .indSec5_right{ -webkit-transform: translate(0%, 10%); -ms-transform: translate(0%, 10%); -o-transform: translate(0%, 10%); transform: translate(0%, 10%); -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; } .indSec5_right a{ display: block; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; visibility: hidden; } .indSec5_right a:nth-child(n+2){ position: absolute; top: 0; left: 0; } .indSec5_right a.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); visibility: visible; } /* index.html */ .detailWarpper{ background-color: #f5f5f5; position: relative; } .detailWarpper2{ background-color: #fff; z-index: 2; position: relative; } .publicWarpper{ z-index: 2; position: relative; -webkit-transform: translateY(-12vh); -ms-transform: translateY(-12vh); -o-transform: translateY(-12vh); transform: translateY(-12vh); } .publicPag{ margin-top: 80px; text-align: center; } .publicPag .pagination>li>a, .publicPag .pagination>li>span{ padding: 0 15px; margin: 0 8px; width: auto; height: 46px; border: none; border-radius: 0; font-size: 16px; color: #4c4c4c; line-height: 46px; } .publicPag .pagination>li>a:focus, .publicPag .pagination>li>span:focus{ color: #4c4c4c; background-color: #fff; } .publicPag .pagination>li>a:hover, .publicPag .pagination>li>span:hover, .publicPag .pagination>li.on>a, .publicPag .pagination>li.on>span{ color: #fff; background-color: #37b48d; } .publicReturn{ margin: -3vh auto 0; padding-bottom: 80px; text-align: center; } .publicReturn a{ display: inline-block; width: 210px; height: 60px; background-color: #37b48d; font-size: 18px; color: #fff; line-height: 60px; text-align: center; letter-spacing: 2px; } /* news.html */ .newsSec1{ padding: 20px; display: flex; align-items: flex-start; justify-content: space-between; background: -webkit-linear-gradient(#ffffff, #f5f5f5); background: -o-linear-gradient(#ffffff, #f5f5f5); background: -moz-linear-gradient(#ffffff, #f5f5f5); background: linear-gradient(#ffffff, #f5f5f5); } .newsSec1 li{ width: calc(33.33% - 20px); border: 1px solid #e7e7e7; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } .newsSec1.on li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .newsSec1 li:nth-child(2){ -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .newsSec1 li:nth-child(3){ -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .newsSec1_img{ height: 15vw; overflow: hidden; } .newsSec1_img img{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .newsSec1 li:hover .newsSec1_img img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .newsSec1_txt{ padding: 20px; } .newsSec1_txt h6{ font-size: 20px; color: #131313; font-weight: bold; letter-spacing: 1px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all 0.3s ease-in-out 0.3s; -moz-transition: all 0.3s ease-in-out 0.3s; -ms-transition: all 0.3s ease-in-out 0.3s; -o-transition: all 0.3s ease-in-out 0.3s; transition: all 0.3s ease-in-out 0.3s; } .newsSec1_txt p{ margin-top: 10px; font-size: 16px; color: #666; line-height: 1.6; letter-spacing: 1px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .newsSec1_txt h5{ margin-top: 20px; font-size: 12px; color: #999; } .newsSec1 li:hover .newsSec1_txt h6{ color: #37b48d; } .newsSec2{ margin-top: 20px; padding: 0 20px; } .newsSec2_nav{ display: flex; align-items: center; justify-content: flex-start; background: -webkit-linear-gradient(to right, #37b48d, #0081cc); background: -o-linear-gradient(to right, #37b48d, #0081cc); background: -moz-linear-gradient(to right, #37b48d, #0081cc); background: linear-gradient(to right, #37b48d, #0081cc); } .newsSec2_nav li{ margin-left: 30px; /*width: 80px;*/ height: 70px; font-size: 16px; color: #94f9da; line-height: 70px; letter-spacing: 1px; text-align: center; position: relative; cursor: pointer; } .newsSec2_nav li.on{ font-size: 18px; color: #fff; font-weight: bold; } .newsSec2_nav li.on::after{ content: ''; display: block; width: 100%; height: 4px; background-color: #ffffff; position: absolute; left: 0; bottom: 0; } .newsSec2_list{ margin-top: 40px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .newsSec2_list li{ width: calc(50% - 20px); background-color: #fff; } .newsSec2_list li:nth-child(n+3){ margin-top: 40px; } .newsSec2_list li a{ display: flex; align-items: flex-start; justify-content: space-between; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .newsSec2_list li:hover a{ box-shadow: 2px 2px 10px rgba(0,0,0,0.1); } .newsSec2_time{ width: 140px; display: flex; align-items: center; justify-content: center; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .newsSec2_time .month, .newsSec2_time .day{ font-family: Arial; font-size: 24px; color: #131313; font-weight: bold; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .newsSec2_time .month{ position: relative; top: -10px; left: 14px; } .newsSec2_time .day{ position: relative; top: 10px; left: -16px; } .newsSec2_time .line{ width: 40px; height: 1px; background-color: #131313; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .newsSec2_list li:hover .newsSec2_time{ background-color: #37b48d; } .newsSec2_list li:hover .newsSec2_time .month, .newsSec2_list li:hover .newsSec2_time .day{ color: #fff; } .newsSec2_list li:hover .newsSec2_time .line{ background-color: #fff; } .newsSec2_txt{ padding: 10px 20px; width: calc(100% - 140px); } .newsSec2_txt h6{ font-size: 20px; color: #131313; font-weight: bold; letter-spacing: 1px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .newsSec2_txt p{ margin-top: 10px; font-size: 16px; color: #666; line-height: 1.6; letter-spacing: 1px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } .newsSec2_txt h5{ margin-top: 10px; font-family: Arial; font-size: 16px; color: #999; } .newsSec2_list li:hover .newsSec2_txt h6{ color: #37b48d; } .newsSec2_nav, .newsSec2_list li{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } .newsSec2.on .newsSec2_nav, .newsSec2.on .newsSec2_list li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .newsSec2.on .newsSec2_list li:nth-child(1){ -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .newsSec2.on .newsSec2_list li:nth-child(2){ -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .newsSec2.on .newsSec2_list li:nth-child(3){ -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -ms-transition-delay: 0.9s; -o-transition-delay: 0.9s; transition-delay: 0.9s; } .newsSec2.on .newsSec2_list li:nth-child(4){ -webkit-transition-delay: 1.2s; -moz-transition-delay: 1.2s; -ms-transition-delay: 1.2s; -o-transition-delay: 1.2s; transition-delay: 1.2s; } .newsSec2.on .newsSec2_list li:nth-child(5){ -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; -ms-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; } .newsSec2.on .newsSec2_list li:nth-child(6){ -webkit-transition-delay: 1.8s; -moz-transition-delay: 1.8s; -ms-transition-delay: 1.8s; -o-transition-delay: 1.8s; transition-delay: 1.8s; } .exhibition_list{ padding: 40px; background-color: #fff; display: none; } .exhibition_list ul{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .exhibition_list li{ width: calc(33.33% - 20px); } .exhibition_list li:nth-child(n+4){ margin-top: 20px; } .exhibition_img{ padding: 10px; box-shadow: 0 0 5px rgba(0,0,0,0.1); } .exhibition_bg{ height: 10vw; } .exhibition_txt{ margin-top: 10px; font-size: 16px; color: #4c4c4c; text-align: center; letter-spacing: 1px; } /* news.html */ /* newsDetail.html */ .newsDetail_box{ padding: 60px; background-color: #fff; } .newsDetail_title{ text-align: center; padding-bottom: 30px; border-bottom: 1px solid #e6e6e6; } .newsDetail_title h6{ font-size: 28px; color: #333; letter-spacing: 2px; } .newsDetail_title p{ margin-top: 20px; font-size: 14px; color: #666; letter-spacing: 1px; } .newsDetail_title span{ margin: 0 20px; } .newsDetail_con{ margin-top: 30px; padding: 0 10%; } .newsDetail_con h4{ font-size: 24px; color: #4c4c4c; margin: 30px 0; } .newsDetail_con h6{ margin: 10px auto 30px; font-size: 14px; color: #37b48d; text-align: center; } .newsDetail_con p{ margin: 30px auto; font-size: 18px; color: #666; line-height: 2; letter-spacing: 1px; } .newsDetail_con img{ width: 100%!important; height: auto!important; margin: 30px auto; } .newsDetail_bottom{ margin-top: 60px; padding-top: 30px; border-top: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: space-between; } .newsDetail_left a{ display: block; font-size: 16px; color: #4c4c4c; letter-spacing: 1px; } .newsDetail_left a:nth-child(2){ margin-top: 20px; } .newsDetail_share{ display: flex; align-items: center; justify-content: space-between; } .newsDetail_share p{ font-size: 14px; color: #4c4c4c; } .newsDetail_share a:nth-child(n+3){ margin-left: 20px; } /* newsDetail.html */ /* investorRelations.html */ .investorRelations_box{ padding: 40px; background: -webkit-linear-gradient(#ffffff, #f5f5f5); background: -o-linear-gradient(#ffffff, #f5f5f5); background: -moz-linear-gradient(#ffffff, #f5f5f5); background: linear-gradient(#ffffff, #f5f5f5); } .investorRelations_list{ display: flex; align-items: center; justify-content: space-between; } .investorRelations_list li{ width: calc(50% - 20px); position: relative; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(60px); -moz-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } .investorRelations_list.on li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .investorRelations_list li:nth-child(2){ -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .investorRelations_list li:nth-child(3){ -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .investorRelations_txt{ width: 100%; padding: 0 5%; text-align: center; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .investorRelations_txt h6{ font-size: 24px; color: #fff; letter-spacing: 2px; } .investorRelations_txt p{ margin-top: 15px; font-size: 20px; color: #fff; letter-spacing: 1px; text-transform: uppercase; } .recruitmentSec2_con>*:nth-child(n+2){ display: none; } .recruitmentSec2_list li{ margin-top: 20px; background-color: #fff; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .recruitmentSec2_list li:hover{ box-shadow: 0 5px 10px rgba(0,0,0,0.1); } .recruitmentSec2_list li a{ padding: 0 20px; height: 80px; display: flex; align-items: center; justify-content: space-between; } .recruitmentSec2_list .title{ display: flex; align-items: center; justify-content: flex-start; } .recruitmentSec2_list .title img{ margin-right: 15px; } .recruitmentSec2_list .title h6{ font-size: 20px; color: #333; font-weight: bold; } .recruitmentSec2_list li a p{ font-family: Arial; font-size: 18px; color: #808080; } .contactWay_box{ padding: 80px; background-color: #fff; display: flex; align-items: flex-start; justify-content: space-between; } .contactWay_txt h6{ font-size: 24px; color: #171717; letter-spacing: 1px; margin-bottom: 20px; } .contactWay_txt p{ font-size: 16px; color: #4c4c4c; line-height: 2; } .contactWay_list{ padding: 30px; background-color: #fff; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .contactWay_list li{ width: 30%; padding: 4% 0; text-align: center; border: 1px solid #e6e6e6; } .contactWay_list li:nth-child(n+4){ margin-top: 30px; } .contactWay_list li h6{ margin-top: 6%; font-size: 24px; color: #333; letter-spacing: 1px; } .contactWay_list li p{ margin-top: 4%; font-size: 18px; color: #808080; } .contactForm{ padding: 40px; background-color: #fff; } .contactForm h6{ font-size: 24px; color: #4c4c4c; letter-spacing: 1px; } .contactForm_con{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .contactForm_box{ margin-top: 40px; width: 48%; height: 70px; display: flex; align-items: center; justify-content: space-between; } .contactForm_box p{ font-size: 18px; color: #4c4c4c; } .contactForm_box input{ width: calc(100% - 80px); height: 70px; padding: 0 20px; border: none; background-color: #f2f2f2; font-size: 18px; color: #171717; } .contactForm_box textarea{ width: calc(100% - 80px); height: 180px; padding: 0 20px; border: none; background-color: #f2f2f2; font-size: 18px; color: #171717; -webkit-transform: translateY(55px); -moz-transform: translateY(55px); -ms-transform: translateY(55px); -o-transform: translateY(55px); transform: translateY(55px); } .contactForm a{ margin-top: 40px; padding-left: 80px; display: flex; align-items: center; justify-content: flex-start; } .contactForm span{ font-size: 16px; color: #808080; } .contactForm img{ margin-right: 20px; } .contactForm_btn{ margin-top: 40px; text-align: center; } .contactForm_btn input{ width: 210px; height: 60px; border: none; background-color: #30ad96; font-size: 18px; color: #fff; letter-spacing: 1px; } /* investorRelations.html */ /* recruitment.html */ .recruitmentSec1{ padding: 80px 80px 40px!important; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .recruitmentSec1.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(-12vh); -ms-transform: translateY(-12vh); -o-transform: translateY(-12vh); transform: translateY(-12vh); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .recruitmentSec1 h6{ font-size: 36px; color: #fff; line-height: 1.4; letter-spacing: 2px; } .recruitmentSec1 p{ margin: 80px 0 60px; width: 50%; font-size: 18px; color: #fff; line-height: 1.6; letter-spacing: 1px; position: relative; } .recruitmentSec1 p::before, .recruitmentSec1 p::after{ content: ''; display: block; width: 33px; height: 28px; background: url(../images/point.png) center/cover no-repeat; position: absolute; } .recruitmentSec1 p::before{ top: -50px; left: 0; } .recruitmentSec1 p::after{ right: 0; bottom: -40px; transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); } .recruitmentSec1 a{ margin-right: 40px; padding-bottom: 15px; font-size: 22px; color: #fff; letter-spacing: 1px; position: relative; } .recruitmentSec1 a:nth-child(n+2)::before{ content: ''; display: block; width: 1px; height: 20px; background-color: #fff; position: absolute; top: 2px; left: -20px; } .recruitmentSec1 a.on{ color: #37b48d; } .recruitmentSec1 a.on::after{ content: ''; display: block; width: 70px; height: 2px; background-color: #37b48d; position: absolute; left: 50%; bottom: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .recruitmentSec2{ padding: 0 0 80px; } .recruitmentSec2_swiper{ margin-top: 60px; padding-bottom: 80px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } .recruitmentSec2.on .recruitmentSec2_swiper{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1.5s ease-in-out 0.6s; -moz-transition: all 1.5s ease-in-out 0.6s; -ms-transition: all 1.5s ease-in-out 0.6s; -o-transition: all 1.5s ease-in-out 0.6s; transition: all 1.5s ease-in-out 0.6s; } .recruitmentSec2_pag .swiper-pagination-bullet{ width: 14px; height: 14px; margin: 0 10px!important; } .recruitmentSec2_pag .swiper-pagination-bullet-active{ background-color: #37b48d; } .recruitmentSec2_box{ position: relative; } .recruitmentSec2_img{ overflow: hidden; } .recruitmentSec2_img img{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .recruitmentSec2_box:hover .recruitmentSec2_img img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .recruitmentSec2_txt{ width: 100%; height: 70px; background-color: rgba(0,0,0,0.7); position: absolute; left: 0; bottom: 0; } .recruitmentSec2_txt p{ font-size: 24px; color: #fff; text-align: center; line-height: 70px; letter-spacing: 2px; } .recruitmentSec3{ padding: 80px 0; background-color: #fafafa; } .recruitmentSec3_swiper{ margin-top: 60px; padding-bottom: 120px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } .recruitmentSec3_pag{ display: none; } .recruitmentSec3_swiper .indBan_pagLiner{ bottom: 0 } .recruitmentSec3_swiper .indBan_pagLiner .indBan_pagLiner_box{ background-color: rgba(0,0,0,0.5); } .recruitmentSec3.on .recruitmentSec3_swiper{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1.5s ease-in-out 0.6s; -moz-transition: all 1.5s ease-in-out 0.6s; -ms-transition: all 1.5s ease-in-out 0.6s; -o-transition: all 1.5s ease-in-out 0.6s; transition: all 1.5s ease-in-out 0.6s; } .recruitmentSec3_swiper .swiper-slide{ width: 60%!important; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .recruitmentSec3_swiper .swiper-slide-active{ -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .recruitmentSec3_txt{ padding: 0 80px; font-size: 24px; color: #333; line-height: 100px; letter-spacing: 1px; background-color: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.1); position: absolute; left: 50%; bottom: -50px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .recruitmentSec3_prev, .recruitmentSec3_next{ position: absolute; top: calc(50% - 42px); z-index: 2; cursor: pointer; } .recruitmentSec3_prev{ left: 12%; } .recruitmentSec3_next{ right: 12%; } .recruitmentSec4{ padding: 80px 0; } .recruitmentSec4_screen{ margin-top: 60px; display: flex; align-items: center; justify-content: flex-start; position: relative; z-index: 2; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } .recruitmentSec4.on .recruitmentSec4_screen{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } .recruitmentSec4_screen p{ font-size: 16px; color: #333; letter-spacing: 1px; } .recruitmentSec4_screen p:nth-child(n+2){ margin-left: 40px; } .screenBox{ width: 200px; height: 40px; border-radius: 5px; background-color: #f5f5f5; position: relative; } .screenBox h6{ padding-right: 10px; font-size: 16px; color: #666; line-height: 40px; text-align: center; letter-spacing: 1px; position: relative; cursor: pointer; } .screenBox h6::after{ content: ''; display: block; width: 0; height: 0; border-right: 10px solid transparent; border-top: 12px solid #37b48d; border-left: 10px solid transparent; position: absolute; top: 16px; right: 15px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .screenBox h6.on::after{ top: 12px; transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); } .screenList{ width: 100%; border-radius: 5px; background-color: #f5f5f5; position: absolute; left: 0; top: 40px; display: none; } .screenList li{ cursor: pointer; padding-right: 10px; font-size: 16px; color: #666; line-height: 40px; text-align: center; letter-spacing: 1px; border-top: 1px solid #fff; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .screenList li:hover{ color: #fff; background-color: #37b48d; } .recruitmentSec4_list{ margin-top: 30px; } .recruitmentSec4_list li{ padding: 35px 30px; display: flex; align-items: center; justify-content: space-between; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } .recruitmentSec4.on .recruitmentSec4_list li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -ms-transition: all 1s ease-in-out 1s; -o-transition: all 1s ease-in-out 1s; transition: all 1s ease-in-out 1s; } .recruitmentSec4.on .recruitmentSec4_list li:nth-child(2){ -webkit-transition-delay: 1.3s; -moz-transition-delay: 1.3s; -ms-transition-delay: 1.3s; -o-transition-delay: 1.3s; transition-delay: 1.3s; } .recruitmentSec4.on .recruitmentSec4_list li:nth-child(3){ -webkit-transition-delay: 1.6s; -moz-transition-delay: 1.6s; -ms-transition-delay: 1.6s; -o-transition-delay: 1.6s; transition-delay: 1.6s; } .recruitmentSec4.on .recruitmentSec4_list li:nth-child(4){ -webkit-transition-delay: 1.9s; -moz-transition-delay: 1.9s; -ms-transition-delay: 1.9s; -o-transition-delay: 1.9s; transition-delay: 1.9s; } .recruitmentSec4.on .recruitmentSec4_list li:nth-child(5){ -webkit-transition-delay: 2.2s; -moz-transition-delay: 2.2s; -ms-transition-delay: 2.2s; -o-transition-delay: 2.2s; transition-delay: 2.2s; } .recruitmentSec4.on .recruitmentSec4_list li:nth-child(6){ -webkit-transition-delay: 2.5s; -moz-transition-delay: 2.5s; -ms-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s; } .recruitmentSec4_list li:nth-child(odd){ background-color: #f5f5f5; } .recruitmentSec4_txt{ width: calc(100% - 160px); border-right: 1px solid #adadad; } .recruitmentSec4_txt h6{ font-size: 18px; color: #333; font-weight: bold; letter-spacing: 1px; } .recruitmentSec4_txt p{ margin-top: 15px; } .recruitmentSec4_txt span{ font-size: 14px; color: #4c4c4c; } .recruitmentSec4_txt span:nth-child(n+2)::before{ content: ''; display: inline-block; width: 1px; height: 15px; background-color: #adadad; margin: 0 20px -2px; } .recruitmentSec4_btn{ } .recruitmentSec4_btn a{ display: block; width: 116px; height: 36px; background-color: #37b48d; font-size: 14px; color: #fff; line-height: 36px; text-align: center; letter-spacing: 1px; } /* recruitment.html */ /* recruitmentDetail.html */ .recruitmentDetail_box{ padding: 40px; background-color: #fff; position: relative; } .recruitmentDetail_box .newsDetail_share{ position: absolute; bottom: 40px; right: 40px; } .recruitmentDetail_box h5{ font-size: 24px; color: #333; font-weight: bold; letter-spacing: 1px; } .recruitmentDetail_box h6{ margin: 30px 0 10px; font-size: 20px; color: #333; font-weight: bold; letter-spacing: 1px; } .recruitmentDetail_box p{ font-size: 16px; color: #4c4c4c; line-height: 2; letter-spacing: 1px; } .sendResume{ margin-top: 30px; width: 150px; height: 50px; background-color: #37b48d; font-size: 16px; color: #fff; line-height: 50px; text-align: center; position: relative; cursor: pointer; } .sendResume input{ width: 100%; height: 100%; cursor: pointer; position: absolute; top: 0; left: 0; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } /* recruitmentDetail.html */ /* solution.html */ .solutionSec1{ padding: 60px 20px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; z-index: 0; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .solutionSec1.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .solutionSec1_box{ width: 45%; text-align: center; margin: 0 0 12%; } .solutionSec1_box:nth-child(2){ margin: 14% 0 0; } .solutionSec1_box h6{ font-size: 32px; color: #fff; font-weight: bold; letter-spacing: 2px; } .solutionSec1_list{ margin: 5% 0; display: flex; align-items: center; justify-content: center; } .solutionSec1_list li{ margin: 0 5%; } .solutionSec1_list li img{ width: 60px; height: 60px; } .solutionSec1_list p{ margin-top: 10px; font-size: 16px; color: #fff; letter-spacing: 1px; } @keyframes rotate1 { 0% { -webkit-transform: translate(-15%, -50%) rotate(0deg); -ms-transform: translate(-15%, -50%) rotate(0deg); -o-transform: translate(-15%, -50%) rotate(0deg); transform: translate(-15%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-15%, -50%) rotate(360deg); -ms-transform: translate(-15%, -50%) rotate(360deg); -o-transform: translate(-15%, -50%) rotate(360deg); transform: translate(-15%, -50%) rotate(360deg); } } @keyframes rotate2 { 0% { -webkit-transform: translate(0%, 50%) rotate(15deg); -ms-transform: translate(0%, 50%) rotate(15deg); -o-transform: translate(0%, 50%) rotate(15deg); transform: translate(0%, 50%) rotate(15deg); } 100% { -webkit-transform: translate(0%, 50%) rotate(-375deg); -ms-transform: translate(0%, 50%) rotate(-375deg); -o-transform: translate(0%, 50%) rotate(-375deg); transform: translate(0%, 50%) rotate(-375deg); } } @keyframes rotate3 { 0% { -webkit-transform: translate(20%, -70%) rotate(0deg); -ms-transform: translate(20%, -70%) rotate(0deg); -o-transform: translate(20%, -70%) rotate(0deg); transform: translate(20%, -70%) rotate(0deg); } 100% { -webkit-transform: translate(20%, -70%) rotate(360deg); -ms-transform: translate(20%, -70%) rotate(360deg); -o-transform: translate(20%, -70%) rotate(360deg); transform: translate(20%, -70%) rotate(360deg); } } .solutionSec1_gear img{ opacity: 0.2; -moz-opacity: 0.2; -khtml-opacity: 0.2; -webkit-opacity: 0.2; filter: alpha(opacity=20); } .solutionSec1_gear img:nth-child(1){ z-index: -1; width: 100vh; position: absolute; top: 0; left: 0; animation: rotate1 22s infinite linear; } .solutionSec1_gear img:nth-child(2){ z-index: -1; width: 80vh; position: absolute; right: 0; bottom: 0; animation: rotate2 24s infinite linear; } .solutionSec1_gear img:nth-child(3){ width: 40vh; z-index: -1; position: absolute; right: 0; top: 0; animation: rotate3 10s infinite linear; } .solutionSec2{ padding: 80px 0; overflow: hidden; position: relative; z-index: 0; } .solutionSec2 #particles-js{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .solutionSec2_list{ display: flex; align-items: center; justify-content: space-between; } .solutionSec2_list li{ margin-top: -5%; width: calc(25% - 30px); position: relative; z-index: 0; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(40%); -ms-transform: translateY(40%); -o-transform: translateY(40%); transform: translateY(40%); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .solutionSec2_list li:nth-child(2){ -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .solutionSec2_list li:nth-child(3){ -webkit-transition-delay: 0.6s; -moz-transition-delay: 0.6s; -ms-transition-delay: 0.6s; -o-transition-delay: 0.6s; transition-delay: 0.6s; } .solutionSec2_list li:nth-child(4){ -webkit-transition-delay: 0.9s; -moz-transition-delay: 0.9s; -ms-transition-delay: 0.9s; -o-transition-delay: 0.9s; transition-delay: 0.9s; } .solutionSec2.on .solutionSec2_list li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .solutionSec2_list li:nth-child(even){ margin-top: 5%; } .solutionSec2_txt{ width: 100%; padding: 30px 20px; position: absolute; left: 0; bottom: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .solutionSec2_txt h6{ font-size: 22px; color: #fff; letter-spacing: 1px; } .solutionSec2_txt p{ margin-top: 10px; font-size: 16px; color: #fff; text-transform: uppercase; } .solutionSec2_img{ overflow: hidden; position: relative; z-index: 0; } .solutionSec2_img::after{ content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; } .solutionSec2_list li:hover .solutionSec2_txt{ -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); } .solutionSec3{ padding: 80px 0; background-color: #fafafa; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(40%); -ms-transform: translateY(40%); -o-transform: translateY(40%); transform: translateY(40%); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .solutionSec3.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .solutionSec3_con{ margin-top: 60px; padding-bottom: 40px; position: relative; /*overflow: hidden;*/ } .solutionSec3_pag{ display: none; } .solutionSec3_con .indBan_pagLiner{ width: 400px; justify-content: center; left: 0; bottom: 80px; -webkit-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .solutionSec3_con .indBan_pagLiner .indBan_pagLiner_box{ width: 34px; margin: 0 8px; } .solutionSec3_txt{ width: 400px; background: url(../images/solutionSec3_bg.jpg) center/cover no-repeat; } .solutionSec3_txtBox{ padding: 15% 40px; } .solutionSec3_txtBox:nth-child(n+2){ display: none; } .solutionSec3_txtBox h6{ font-size: 22px; color: #fff; letter-spacing: 1px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .solutionSec3_txtBox .line{ width: 40px; height: 1px; background-color: #fff; margin: 6% 0 10%; -webkit-transition: all 0.6s ease-in-out 0.2s; -moz-transition: all 0.6s ease-in-out 0.2s; -ms-transition: all 0.6s ease-in-out 0.2s; -o-transition: all 0.6s ease-in-out 0.2s; transition: all 0.6s ease-in-out 0.2s; } .solutionSec3_txtBox p{ font-size: 16px; color: #fff; line-height: 1.8; letter-spacing: 1px; -webkit-transition: all 0.6s ease-in-out 0.4s; -moz-transition: all 0.6s ease-in-out 0.4s; -ms-transition: all 0.6s ease-in-out 0.4s; -o-transition: all 0.6s ease-in-out 0.4s; transition: all 0.6s ease-in-out 0.4s; } .solutionSec3_txtBox h6, .solutionSec3_txtBox .line, .solutionSec3_txtBox p{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px); } .solutionSec3_txtBox.on h6, .solutionSec3_txtBox.on .line, .solutionSec3_txtBox.on p{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .solutionSec3_swiper{ width: 100%; top: 0; position: absolute; right: -430px; } .solutionSec3_img{ overflow: hidden; } .solutionSec3_img img{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .solutionSec3_img:hover img{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .solutionSec3_box p{ margin-top: 10px; font-size: 18px; color: #333; letter-spacing: 1px; } .solutionSec3_box p::before{ content: ''; display: inline-block; width: 14px; height: 1px; background-color: #333; margin: 0 20px 5px 0; } .solutionSec3_btn{ width: 400px; position: absolute; left: 0; bottom: 50px; display: flex; align-items: center; justify-content: center; } .solutionSec3_btn img{ margin: 0 5%; cursor: pointer; } /* solution.html */ /* solutionDetail.html */ .solutionDetail_sec1{ padding: 80px 10px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .solutionDetail_sec1.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .solutionDetail_sec1Swiper{ margin-top: 30px; position: relative; } .solutionDetail_sec1Prev{ position: absolute; top: 35%; left: 10px; z-index: 1; cursor: pointer; } .solutionDetail_sec1Next{ position: absolute; top: 35%; right: 10px; z-index: 1; cursor: pointer; } .solutionDetail_sec1Box{ text-align: center; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .solutionDetail_sec1Box p{ width: 160px; padding: 0 20px; margin: 20px auto 0; font-size: 16px; color: #48ffff; line-height: 1.2; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } .solutionDetail_sec1Icon{ margin-top: 30px; display: inline-block; width: 64px; height: 64px; overflow: hidden; } .solutionDetail_sec1Icon img{ width: 62px; height: 62px; } .solutionDetail_sec1Box:hover .solutionDetail_sec1Icon{ -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .solutionDetail_sec1Box:hover p{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .solutionDetail_sec1Icon, .solutionDetail_sec1Box p{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .solutionDetail_sec2{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .solutionDetail_sec2.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .solutionDetail_sec2List{ margin-top: 60px; display: flex; align-items: center; justify-content: space-around; } .solutionDetail_sec2List li{ text-align: center; } .solutionDetail_sec2List li img{ width: 50px; height: 50px; } .solutionDetail_sec2List p{ margin-top: 10px; font-size: 18px; color: #4c4c4c; letter-spacing: 1px; } .solutionDetail_sec3{ padding: 80px 0; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .solutionDetail_sec3.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .solutionDetail_sec3Swiper{ margin-top: 60px; } .solutionDetail_sec3Box{ position: relative; } .solutionDetail_sec3Img{ height: 25vw; position: relative; overflow: hidden; } .solutionDetail_sec3Img::after{ content: ''; display: block; width: 100%; height: 100%; background: url(../images/triangle.png) center/cover no-repeat; position: absolute; left: 0; bottom: 0; -webkit-transform: translate(-51%, 51%); -ms-transform: translate(-51%, 51%); -o-transform: translate(-51%, 51%); transform: translate(-51%, 51%); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .solutionDetail_sec3Box:hover .solutionDetail_sec3Img::after{ -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .solutionDetail_sec3Txt{ width: 100%; padding: 30px 20px; position: absolute; left: 0; bottom: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .solutionDetail_sec3Box:hover .solutionDetail_sec3Txt{ padding: 30px; } .solutionDetail_sec3Txt h6{ font-size: 24px; color: #fff; font-weight: bold; letter-spacing: 2px; } .solutionDetail_sec3Txt p{ margin-top: 10px; font-size: 20px; color: #fff; text-transform: uppercase; } .solutionDetail_sec4{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; } .solutionDetail_sec4.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .solutionDetail_sec4Con{ margin-top: 60px; display: flex; align-items: flex-start; justify-content: space-between; } .solutionDetail_sec4Left{ width: 28%; position: relative; } .solutionDetail_sec4Center{ width: 44%; } .solutionDetail_sec4Center{ z-index: 0; } .solutionDetail_sec4Right{ width: 28%; position: relative; } .solutionDetail_sec4Box{ display: block; position: relative; z-index: 2; } .solutionDetail_sec4Left .solutionDetail_sec4Box, .solutionDetail_sec4Right .solutionDetail_sec4Box{ width: 100%; height: 50%; position: absolute; -webkit-transition: all 0.6s ease-in-out 0.3s; -moz-transition: all 0.6s ease-in-out 0.3s; -ms-transition: all 0.6s ease-in-out 0.3s; -o-transition: all 0.6s ease-in-out 0.3s; transition: all 0.6s ease-in-out 0.3s; } .solutionDetail_sec4Left .solutionDetail_sec4Box.on, .solutionDetail_sec4Right .solutionDetail_sec4Box.on{ z-index: 3; } .solutionDetail_sec4Left .solutionDetail_sec4Box.width, .solutionDetail_sec4Right .solutionDetail_sec4Box.width{ width: 160%; height: 100%; } .solutionDetail_sec4Left .solutionDetail_sec4Box.none, .solutionDetail_sec4Right .solutionDetail_sec4Box.none{ pointer-events: none; } .solutionDetail_sec4Left .solutionDetail_sec4Box:nth-child(1){ top: 0; left: 0; } .solutionDetail_sec4Left .solutionDetail_sec4Box:nth-child(2){ bottom: 0; left: 0; } .solutionDetail_sec4Right .solutionDetail_sec4Box:nth-child(1){ top: 0; right: 0; } .solutionDetail_sec4Right .solutionDetail_sec4Box:nth-child(2){ bottom: 0; right: 0; } .solutionDetail_sec4Txt{ width: 100%; height: 100px; padding: 10px; text-align: center; background-color: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; flex-direction: column; position: absolute; left: 0; bottom: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .solutionDetail_sec4Txt img{ margin-bottom: 30px; height: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .solutionDetail_sec4Txt h6{ font-size: 20px; color: #fff; letter-spacing: 1px; } .solutionDetail_sec4Txt p{ margin-top: 10px; font-size: 16px; color: #fff; text-transform: uppercase; } .solutionDetail_sec4Box:hover .solutionDetail_sec4Txt{ height: 100%; } .solutionDetail_sec4Box:hover .solutionDetail_sec4Txt img{ height: 64px; } .solutionDetail_sec5{ padding: 80px 0 0; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .solutionDetail_sec5.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .solutionDetail_sec5Con{ margin-top: 60px; padding: 80px 0; } .solutionDetail_sec5Top{ /*padding: 0 80px;*/ display: flex; align-items: center; justify-content: space-between; } .solutionDetail_sec5Tab{ position: relative; } .solutionDetail_sec5Tab img{ max-width: 60vw; } .solutionDetail_sec5Line{ width: 0; overflow: hidden; position: absolute; left: 0; bottom: 0; } .solutionDetail_sec5.on .solutionDetail_sec5Line{ width: 100%; -webkit-transition: all 3s ease-in-out 0.6s; -moz-transition: all 3s ease-in-out 0.6s; -ms-transition: all 3s ease-in-out 0.6s; -o-transition: all 3s ease-in-out 0.6s; transition: all 3s ease-in-out 0.6s; } .solutionDetail_sec5List{ /*width: 20%;*/ } .solutionDetail_sec5List li{ font-size: 24px; line-height: 50px; margin-bottom: 20px; display: flex; align-items: center; justify-content: flex-start; } .solutionDetail_sec5List li div{ display: inline-block; width: 50px; height: 50px; border-radius: 5px; margin: 0 20px 0 0px; } .solutionDetail_sec5Bottom{ display: flex; align-items: flex-start; justify-content: space-between; } .solutionDetail_sec5Bottom li{ text-align: center; } .solutionDetail_sec5Bottom li img{ width: 38px; height: 38px; } .solutionDetail_sec5Bottom p{ margin-top: 20px; font-size: 16px; color: #fff; letter-spacing: 1px; } .solutionDetail_sec6{ padding: 80px 0; } .solutionDetail_sec6 .comment_title, .solutionDetail_sec6List li{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .solutionDetail_sec6.on .comment_title, .solutionDetail_sec6.on .solutionDetail_sec6List li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(1), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(2), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(3), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(4){ -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(5), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(6), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(7), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(8){ -webkit-transition: all 1s ease-in-out 1.2s; -moz-transition: all 1s ease-in-out 1.2s; -ms-transition: all 1s ease-in-out 1.2s; -o-transition: all 1s ease-in-out 1.2s; transition: all 1s ease-in-out 1.2s; } .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(9), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(10), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(11), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(12){ -webkit-transition: all 1s ease-in-out 1.8s; -moz-transition: all 1s ease-in-out 1.8s; -ms-transition: all 1s ease-in-out 1.8s; -o-transition: all 1s ease-in-out 1.8s; transition: all 1s ease-in-out 1.8s; } .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(13), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(14), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(15), .solutionDetail_sec6.on .solutionDetail_sec6List li:nth-child(16){ -webkit-transition: all 1s ease-in-out 2.4s; -moz-transition: all 1s ease-in-out 2.4s; -ms-transition: all 1s ease-in-out 2.4s; -o-transition: all 1s ease-in-out 2.4s; transition: all 1s ease-in-out 2.4s; } .solutionDetail_sec6List{ margin-top: 60px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .solutionDetail_sec6List li{ width: calc(25% - 15px); position: relative; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .solutionDetail_sec6List li:hover{ -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } .solutionDetail_sec6List li:nth-child(n+5){ margin-top: 20px; } .solutionDetail_sec6_box { border: 1px solid #dddddd; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .solutionDetail_sec6_box:hover, .solutionDetail_sec6_box:hover::before, .solutionDetail_sec6_box:hover::after { border-color: #0081cc; } .solutionDetail_sec6_box::before, .solutionDetail_sec6_box::after { content: ''; display: block; width: 40px; height: 40px; background-color: #fff; border: 1px solid #dddddd; position: absolute; z-index: 2; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .solutionDetail_sec6_box::before { top: -20px; left: -20px; } .solutionDetail_sec6_box::after { right: -20px; bottom: -20px; } @keyframes scale { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 50% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .solutionDetail_sec6_box:hover img{ animation: scale 0.6s forwards linear; } .solutionDetail_bottom{ background: url(../images/solutionDetail_bottomBg.jpg) center/cover no-repeat; } .solutionDetail_bottomBox{ height: 150px; display: flex; align-items: center; justify-content: space-between; } .solutionDetail_share{ display: flex; align-items: center; justify-content: space-between; font-size: 24px; color: #fff; letter-spacing: 1px; } .solutionDetail_share a:nth-child(n+2){ margin-right: 20px; } .solutionDetail_return{ display: flex; align-items: center; justify-content: space-between; } .solutionDetail_return p{ margin-right: 20px; font-size: 24px; color: #fff; letter-spacing: 1px; } /* solutionDetail.html */ /* contact.html */ .contactWarpper{ padding-bottom: 200px; } .contactBox{ padding: 60px 120px; background-color: #fff; } .contactBox>h6{ font-size: 32px; color: #4c4c4c; letter-spacing: 1px; } .contactList{ margin-top: 60px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .contactList li{ width: calc(50% - 40px); padding: 20px 0; border-bottom: 1px solid #e6e6e6; display: flex; align-items: center; justify-content: flex-start; } .contactTxt{ margin-left: 20px; } .contactTxt h6{ font-size: 20px; color: #333; letter-spacing: 1px; } .contactTxt p{ margin-top: 10px; font-size: 16px; color: #666; } .contactMap{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0; } /* contact.html */ /* about.html */ .aboutBg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -2; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateX(-20%); -ms-transform: translateX(-20%); -o-transform: translateX(-20%); transform: translateX(-20%); -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; } .aboutBgTxt{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } .aboutBg.on { opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } .aboutSec1{ padding-top: 20vh; } .aboutSec1_box{ width: 50%; margin: 0 0 0 auto; } .aboutSec1_txt{ text-align: right; } .aboutSec1_txt h5{ font-size: 60px; color: #727d8d; } .aboutSec1_txt h6{ margin-top: 10px; font-size: 34px; color: #727d8d; } .aboutSec1_txtBox{ margin-top: 40px; padding-right: 10px; height: 96px; overflow: hidden; position: relative; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .aboutSec1_txtBox:hover{ height: 24vh; background-color: #fff; overflow-y: scroll; } .aboutSec1_txtBox::-webkit-scrollbar{ width: 4px; } .aboutSec1_txt p{ font-size: 18px; color: #666; line-height: 1.8; letter-spacing: 1px; text-align: left; } .aboutSec1_txt p:nth-child(n+2){ margin-top: 10px; } .aboutSec1_txt h5, .aboutSec1_txt h6, .aboutSec1_txt p, .aboutSec1_list{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } .aboutSec1.on .aboutSec1_txt h5, .aboutSec1.on .aboutSec1_txt h6, .aboutSec1.on .aboutSec1_txt p, .aboutSec1.on .aboutSec1_list{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .aboutSec1.on .aboutSec1_txt p{ -webkit-transition: all 0.6s ease-in-out 0.3s; -moz-transition: all 0.6s ease-in-out 0.3s; -ms-transition: all 0.6s ease-in-out 0.3s; -o-transition: all 0.6s ease-in-out 0.3s; transition: all 0.6s ease-in-out 0.3s; } .aboutSec1_list{ margin-top: 60px; padding-top: 40px; border-top: 1px solid #c6c6c6; position: relative; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .aboutSec1.on .aboutSec1_list{ -webkit-transition: all 0.6s ease-in-out 0.6s; -moz-transition: all 0.6s ease-in-out 0.6s; -ms-transition: all 0.6s ease-in-out 0.6s; -o-transition: all 0.6s ease-in-out 0.6s; transition: all 0.6s ease-in-out 0.6s; } .aboutSec1_list::after{ content: ''; display: block; width: 44px; height: 5px; background-color: #37b48d; position: absolute; top: -3px; left: 0; } .aboutSec1_list li{ width: 50%; padding: 20px 5%; display: flex; align-items: center; justify-content: flex-start; } .aboutSec1_list li:nth-child(odd){ border-right: 3px solid #e8e8e8; } .aboutSec1_number{ margin-left: 30px; } .aboutSec1_number p{ font-size: 12px; color: #666; letter-spacing: 1px; } .aboutSec1_number h6{ font-size: 56px; color: #37b48d; font-weight: bold; } .aboutSec2{ padding: 80px 0; position: relative; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .aboutSec2.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .aboutSec2_swiper{ width: 90%; margin: 60px auto 0 0; padding: 10px 10px 220px 10px; } .aboutSec2_swiper .swiper-slide{ position: relative; } .aboutSec2_box{ width: 450px; margin: 0 0 0 auto; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .aboutSec2_swiper .swiper-slide:nth-child(even) .aboutSec2_box{ margin: auto 0 0 0; } .aboutSec2_box::before{ content: ''; display: block; width: 70px; height: 80%; background: url(../images/aboutSec2_down.png) center/100% no-repeat; position: absolute; top: 20%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .aboutSec2_box::after{ content: ''; display: block; width: 8px; height: 80%; background-color: #1879bd; position: absolute; top: 25%; left: 50%; z-index: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .aboutSec2_swiper .swiper-slide:nth-child(even) .aboutSec2_box::after{ background-color: #37b48d; } .aboutSec2_time{ width: 60px; height: 60px; border-radius: 50%; background-color: #1879bd; position: absolute; top: 50%; right: 470px; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: -1; } .aboutSec2_time img{ width: 26px; } .aboutSec2_time::after{ content: ''; display: block; width: 80px; height: 5px; background: url(../images/blueLine.png) top right/156px 5px no-repeat; position: absolute; top: 50%; right: 70px; z-index: -1; } .aboutSec2_swiper .swiper-slide:nth-child(even) .aboutSec2_time::after{ right: auto; left: 70px; background: url(../images/greenLine.png) top left/156px 5px no-repeat; } .aboutSec2_time p{ font-size: 16px; color: #fff; } .aboutSec2_swiper .swiper-slide:nth-child(even) .aboutSec2_time{ right: auto; left: 470px; background-color: #37b48d; } .aboutSec2_pag{ position: absolute; right: 5%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .aboutSec2_pag .swiper-pagination-bullet{ display: block; margin: 20px 0!important; background-color: #b3b3b3; opacity: 1; } .aboutSec2_pag .swiper-pagination-bullet-active{ background-color: #37b48d; position: relative; } @keyframes xuanz { 0% { transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); -moz-transform: translate(-50%, -50%) rotate(0deg); -webkit-transform: translate(-50%, -50%) rotate(0deg); -o-transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); -ms-transform: translate(-50%, -50%) rotate(360deg); -moz-transform: translate(-50%, -50%) rotate(360deg); -webkit-transform: translate(-50%, -50%) rotate(360deg); -o-transform: translate(-50%, -50%) rotate(360deg); } } .aboutSec2_pag .swiper-pagination-bullet-active::after{ content: ''; display: block; width: 30px; height: 30px; background: url(../images/bullet.png) center/cover no-repeat; position: absolute; top: 50%; left: 50%; animation: xuanz 3s infinite ease-in-out; } .aboutSec2_year{ font-size: 30px; color: #35ac87; font-weight: bold; position: absolute; top: calc(50% + 110px); right: 5%; -webkit-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); -o-transform: translate(50%, -50%); transform: translate(50%, -50%); } .aboutSec2_img{ overflow: hidden; } .aboutSec2_img img{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .aboutSec2_box:hover .aboutSec2_img img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .aboutSec2_txt{ padding: 20px; } .aboutSec2_txt p{ font-size: 16px; color: #666; line-height: 1.4; letter-spacing: 1px; } .aboutSec3{ position: relative; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: scale(1.1) translateY(80px); -ms-transform: scale(1.1) translateY(80px); -o-transform: scale(1.1) translateY(80px); transform: scale(1.1) translateY(80px); } .aboutSec3.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); -o-transform: scale(1) translateY(0); transform: scale(1) translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .aboutSec3 .videoPlay{ cursor: pointer; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .viedoAlert{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; z-index: 2; display: none; } .viedoAlert video{ width: 60vw; } .viedoAlert img{ position: absolute; top: 120px; right: 10%; cursor: pointer; } .aboutSec4{ padding: 80px 0; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .aboutSec4.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .aboutSec4_swiper{ margin-top: 60px; padding-bottom: 80px; position: relative; } .aboutSec4_swiper .indBan_pagLiner{ bottom: 0; } .aboutSec4_swiper .indBan_pagLiner .indBan_pagLiner_box{ background-color: rgba(0,0,0,0.5); } .aboutSec4_prev, .aboutSec4_next{ position: absolute; bottom: 0; left: calc(48% - 80px); z-index: 2; cursor: pointer; } .aboutSec4_next{ left: auto; right: calc(48% - 80px); } .aboutSec4_pag{ display: none; } .aboutSec4_swiper .swiper-slide{ width: 460px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .aboutSec4_box{ overflow: hidden; position: relative; } .aboutSec4_img{ position: relative; } .aboutSec4_img::after{ content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; } .aboutSec4_txt{ width: 100%; padding: 20px 30px; position: absolute; left: 0; bottom: 0; } .aboutSec4_txt h6{ font-size: 20px; color: #fff; font-weight: bold; letter-spacing: 1px; } .aboutSec4_txt p{ margin-top: 10px; font-size: 16px; color: #fff; text-transform: uppercase; } .aboutSec4_txtBox{ display: none; padding-bottom: 80px; } .aboutSec4_con{ margin-top: 60px; display: flex; align-items: center; justify-content: space-between; } .aboutSec4_left{ width: 48%; } .aboutSec4_right{ width: 48%; } .aboutSec4_right h6{ font-size: 26px; color: #333; font-weight: bold; line-height: 1.4; letter-spacing: 1px; } .aboutSec4_right p{ margin-top: 20px; font-size: 16px; color: #808080; line-height: 1.8; letter-spacing: 1px; } .aboutSec4_right ul{ margin-top: 30px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .aboutSec4_right li{ max-width: 60%; min-width: 40%; font-size: 16px; color: #4c4c4c; line-height: 2; letter-spacing: 1px; } .aboutSec4_right li i{ color: #1879bd; margin-right: 4px; } .aboutSec5{ padding: 80px 0; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .aboutSec5.on{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .aboutSec5_swiper{ margin-top: 60px; padding-bottom: 80px; } .aboutSec5_box{ padding: 10%; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.1); } .aboutSec5_txt{ margin-top: 5%; border-top: 1px solid #e6e6e6; } .aboutSec5_txt p{ padding-top: 5%; font-size: 18px; color: #4c4c4c; text-align: center; } .aboutSec5_prev, .aboutSec5_next{ position: absolute; bottom: 0; z-index: 2; cursor: pointer; } .aboutSec5_prev{ left: calc(50% - 100px); } .aboutSec5_next{ right: calc(50% - 100px); } .aboutSec5_pag .swiper-pagination-bullet{ width: 14px; height: 14px; margin: 0 10px!important; } .aboutSec5_pag .swiper-pagination-bullet-active{ background-color: #37b48d; } .aboutSec6{ padding-bottom: 80px; } .aboutSec6_list{ margin-top: 60px; display: flex; align-items: flex-start; justify-content: space-between; } .aboutSec6_list li{ width: calc(25% - 20px); } .aboutSec6 .comment_title, .aboutSec6_list li{ position: relative; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .aboutSec6.on .comment_title, .aboutSec6.on .aboutSec6_list li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .aboutSec6.on .aboutSec6_list li:nth-child(1){ -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } .aboutSec6.on .aboutSec6_list li:nth-child(2){ -webkit-transition: all 1s ease-in-out 0.8s; -moz-transition: all 1s ease-in-out 0.8s; -ms-transition: all 1s ease-in-out 0.8s; -o-transition: all 1s ease-in-out 0.8s; transition: all 1s ease-in-out 0.8s; } .aboutSec6.on .aboutSec6_list li:nth-child(3){ -webkit-transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -ms-transition: all 1s ease-in-out 1s; -o-transition: all 1s ease-in-out 1s; transition: all 1s ease-in-out 1s; } .aboutSec6.on .aboutSec6_list li:nth-child(4){ -webkit-transition: all 1s ease-in-out 1.2s; -moz-transition: all 1s ease-in-out 1.2s; -ms-transition: all 1s ease-in-out 1.2s; -o-transition: all 1s ease-in-out 1.2s; transition: all 1s ease-in-out 1.2s; } .aboutSec6_txt{ width: 100%; height: 100%; padding: 20px; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #f5f5f5; position: absolute; top: 0; left: 0; } .aboutSec6_txt h5{ font-size: 20px; color: #4c4c4c; margin-top: 20px; } .aboutSec6_txt h6{ font-size: 16px; color: #666; line-height: 1.4; margin-top: 10px; } .aboutSec6_txt p{ margin-top: 10px; font-size: 14px; color: #b2b2b2; text-transform: uppercase; } .aboutSec6_txt, .aboutSec6_txt h5, .aboutSec6_txt h6, .aboutSec6_txt p{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .aboutSec6_icon{ width: 56px; overflow: hidden; } .aboutSec6_list li:hover .aboutSec6_icon img{ position: relative; left: -56px; border-right: 56px solid transparent; -webkit-filter: drop-shadow(56px 0 0 #ccc); filter: drop-shadow(56px 0 0 #fff); } .aboutSec6_list li:hover .aboutSec6_txt{ background-color: transparent; } .aboutSec6_list li:hover .aboutSec6_txt h5, .aboutSec6_list li:hover .aboutSec6_txt h6, .aboutSec6_list li:hover .aboutSec6_txt p{ color: #fff; } .aboutSec7{ padding: 80px 0; } .aboutSec7 .comment_title, .aboutSec7_list li{ position: relative; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .aboutSec7.on .comment_title, .aboutSec7.on .aboutSec7_list li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .aboutSec7.on .aboutSec7_list li:nth-child(1){ -webkit-transition: all 1s ease-in-out 0.2s; -moz-transition: all 1s ease-in-out 0.2s; -ms-transition: all 1s ease-in-out 0.2s; -o-transition: all 1s ease-in-out 0.2s; transition: all 1s ease-in-out 0.2s; } .aboutSec7.on .aboutSec7_list li:nth-child(2){ -webkit-transition: all 1s ease-in-out 0.4s; -moz-transition: all 1s ease-in-out 0.4s; -ms-transition: all 1s ease-in-out 0.4s; -o-transition: all 1s ease-in-out 0.4s; transition: all 1s ease-in-out 0.4s; } .aboutSec7.on .aboutSec7_list li:nth-child(3){ -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } .aboutSec7.on .aboutSec7_list li:nth-child(4){ -webkit-transition: all 1s ease-in-out 0.8s; -moz-transition: all 1s ease-in-out 0.8s; -ms-transition: all 1s ease-in-out 0.8s; -o-transition: all 1s ease-in-out 0.8s; transition: all 1s ease-in-out 0.8s; } .aboutSec7.on .aboutSec7_list li:nth-child(5){ -webkit-transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -ms-transition: all 1s ease-in-out 1s; -o-transition: all 1s ease-in-out 1s; transition: all 1s ease-in-out 1s; } .aboutSec7.on .aboutSec7_list li:nth-child(6){ -webkit-transition: all 1s ease-in-out 1.2s; -moz-transition: all 1s ease-in-out 1.2s; -ms-transition: all 1s ease-in-out 1.2s; -o-transition: all 1s ease-in-out 1.2s; transition: all 1s ease-in-out 1.2s; } .aboutSec7.on .aboutSec7_list li:nth-child(7){ -webkit-transition: all 1s ease-in-out 1.4s; -moz-transition: all 1s ease-in-out 1.4s; -ms-transition: all 1s ease-in-out 1.4s; -o-transition: all 1s ease-in-out 1.4s; transition: all 1s ease-in-out 1.4s; } .aboutSec7.on .aboutSec7_list li:nth-child(8){ -webkit-transition: all 1s ease-in-out 1.6s; -moz-transition: all 1s ease-in-out 1.6s; -ms-transition: all 1s ease-in-out 1.6s; -o-transition: all 1s ease-in-out 1.6s; transition: all 1s ease-in-out 1.6s; } .aboutSec7_box{ display: flex; align-items: flex-start; justify-content: space-between; } .aboutSec7_box .comment_title{ width: 280px; -webkit-transform: translateY(60px); -ms-transform: translateY(60px); -o-transform: translateY(60px); transform: translateY(60px); } .aboutSec7_list{ width: calc(80% - 300px); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .aboutSec7_list li{ width: 45%; border-radius: 10px; border: 1px solid rgba(255,255,255,0.5); } .aboutSec7_list li:nth-child(n+3){ margin-top: 30px; } /* about.html */ /* product.html */ .productSec1{ padding: 120px 80px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .productSec1.on, .productSec1 .comment_title h6, .productSec1 .comment_title h5, .productSec1 .comment_title .line, .productSec1 .comment_title p{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .productSec2{ margin-bottom: 80px; } .productSec2_list{ margin-top: 60px; height: 70vh; position: relative; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } .productSec2.on .productSec2_list{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .productSec2_list li{ width: 12.5%; height: 70vh; position: absolute; top: 0; z-index: 0; transform-style: preserve-3d; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .productSec2_list li::before{ content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); position: absolute; top: 0; left: 0; } .productSec2_list li:nth-child(1){ left: 0; } .productSec2_list li:nth-child(2){ right: 75%; } .productSec2_list li:nth-child(3){ right: 62.5%; } .productSec2_list li:nth-child(4){ right: 50%; } .productSec2_list li:nth-child(5){ right: 37.5%; } .productSec2_list li:nth-child(6){ right: 25%; } .productSec2_list li:nth-child(7){ right: 12.5%; } .productSec2_list li:nth-child(8){ right: 0; } .productSec2_list li:hover{ width: 25%; } .productSec2_txt{ width: 100%; height: 90px; padding: 10px; text-align: center; position: absolute; bottom: 0%; left: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .productSec2_list li:hover .productSec2_txt{ /*height: 70vh;*/ bottom: 50%; left: 50%; -webkit-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); -o-transform: translate(-50%, 50%); transform: translate(-50%, 50%); text-align: center; } .productSec2_txt img{ height: 0; margin-bottom: 20px; } .productSec2_list li:hover .productSec2_txt img{ height: 64px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .productSec2_txt h6{ font-size: 18px; color: #fff; } .productSec2_txt p{ font-size: 16px; color: #fff; margin-top: 6px; text-transform: uppercase; } .productSec2_txtBox{ display: none; } .productSec3{ padding: 80px 0; background-color: #fafafa; } .productSec3_list{ margin-top: 60px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .productSec3_list li{ width: calc(50% - 20px); position: relative; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } .productSec3.on .productSec3_list li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .productSec3.on .productSec3_list li:nth-child(2){ -webkit-transition: all 1s ease-in-out 0.9s; -moz-transition: all 1s ease-in-out 0.9s; -ms-transition: all 1s ease-in-out 0.9s; -o-transition: all 1s ease-in-out 0.9s; transition: all 1s ease-in-out 0.9s; } .productSec3.on .productSec3_list li:nth-child(3){ -webkit-transition: all 1s ease-in-out 1.2s; -moz-transition: all 1s ease-in-out 1.2s; -ms-transition: all 1s ease-in-out 1.2s; -o-transition: all 1s ease-in-out 1.2s; transition: all 1s ease-in-out 1.2s; } .productSec3.on .productSec3_list li:nth-child(4){ -webkit-transition: all 1s ease-in-out 1.5s; -moz-transition: all 1s ease-in-out 1.5s; -ms-transition: all 1s ease-in-out 1.5s; -o-transition: all 1s ease-in-out 1.5s; transition: all 1s ease-in-out 1.5s; } .productSec3_list li:nth-child(n+3){ margin-top: 40px; } .productSec3_img{ overflow: hidden; } .productSec3_img img{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .productSec3_list li:hover .productSec3_img img{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .productSec3_txt{ width: 100%; height: 66px; padding: 20px; text-align: center; background-color: rgba(0,0,0,0.6); position: absolute; left: 0; bottom: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .productSec3_list li:hover .productSec3_txt{ height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .productSec3_txt img{ width: 64px; height: 0; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .productSec3_list li:hover .productSec3_txt img{ height: 64px; margin-bottom: 20px; } .productSec3_txt h6{ font-size: 24px; color: #fff; text-align: left; letter-spacing: 1px; } .productSec3_txt p{ width: 80%; height: 0; overflow: hidden; margin-top: 20px; font-size: 14px; color: #fff; line-height: 1.6; letter-spacing: 1px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .productSec3_list li:hover .productSec3_txt p{ height: 66px; } /* product.html */ /* productDetail.html */ .productDetail_sec2, .productDetail_sec2List li{ padding-bottom: 80px; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .productDetail_sec2.on, .productDetail_sec2.on .productDetail_sec2List li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .productDetail_sec2Box{ margin-top: 60px; text-align: center; position: relative; } .productDetail_sec2List li{ display: flex; align-items: center; justify-content: space-between; position: absolute; } .productDetail_sec2List li:nth-child(1){ top: 0%; right: 75%; } .productDetail_sec2.on .productDetail_sec2List li:nth-child(1){ -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } .productDetail_sec2List li:nth-child(2){ top: 20%; right: 80%; } .productDetail_sec2.on .productDetail_sec2List li:nth-child(2){ -webkit-transition: all 1s ease-in-out 0.9s; -moz-transition: all 1s ease-in-out 0.9s; -ms-transition: all 1s ease-in-out 0.9s; -o-transition: all 1s ease-in-out 0.9s; transition: all 1s ease-in-out 0.9s; } .productDetail_sec2List li:nth-child(3){ top: 0%; left: 75%; } .productDetail_sec2.on .productDetail_sec2List li:nth-child(3){ -webkit-transition: all 1s ease-in-out 1.2s; -moz-transition: all 1s ease-in-out 1.2s; -ms-transition: all 1s ease-in-out 1.2s; -o-transition: all 1s ease-in-out 1.2s; transition: all 1s ease-in-out 1.2s; } .productDetail_sec2List li:nth-child(4){ top: 20%; left: 80%; } .productDetail_sec2.on .productDetail_sec2List li:nth-child(4){ -webkit-transition: all 1s ease-in-out 1.5s; -moz-transition: all 1s ease-in-out 1.5s; -ms-transition: all 1s ease-in-out 1.5s; -o-transition: all 1s ease-in-out 1.5s; transition: all 1s ease-in-out 1.5s; } .productDetail_sec2List p{ font-size: 22px; color: #4c4c4c; letter-spacing: 1px; } .productDetail_sec2Icon{ margin: 0 40px; width: 70px; height: 70px; border-radius: 50%; background-color: #1879bd; display: flex; align-items: center; justify-content: center; } .productDetail_sec2Icon img{ width: 30px; } .productDetail_sec3{ padding: 80px 0; background-color: #f5f5f5; } .productDetail_sec3, .productDetail_sec3List li{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .productDetail_sec3.on, .productDetail_sec3.on .productDetail_sec3List li{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .productDetail_sec3.on .productDetail_sec3List li:nth-child(1){ -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } .productDetail_sec3.on .productDetail_sec3List li:nth-child(2){ -webkit-transition: all 1s ease-in-out 0.9s; -moz-transition: all 1s ease-in-out 0.9s; -ms-transition: all 1s ease-in-out 0.9s; -o-transition: all 1s ease-in-out 0.9s; transition: all 1s ease-in-out 0.9s; } .productDetail_sec3.on .productDetail_sec3List li:nth-child(3){ -webkit-transition: all 1s ease-in-out 1.2s; -moz-transition: all 1s ease-in-out 1.2s; -ms-transition: all 1s ease-in-out 1.2s; -o-transition: all 1s ease-in-out 1.2s; transition: all 1s ease-in-out 1.2s; } .productDetail_sec3.on .productDetail_sec3List li:nth-child(4){ -webkit-transition: all 1s ease-in-out 1.5s; -moz-transition: all 1s ease-in-out 1.5s; -ms-transition: all 1s ease-in-out 1.5s; -o-transition: all 1s ease-in-out 1.5s; transition: all 1s ease-in-out 1.5s; } .productDetail_sec3.on .productDetail_sec3List li:nth-child(5){ -webkit-transition: all 1s ease-in-out 1.8s; -moz-transition: all 1s ease-in-out 1.8s; -ms-transition: all 1s ease-in-out 1.8s; -o-transition: all 1s ease-in-out 1.8s; transition: all 1s ease-in-out 1.8s; } .productDetail_sec3.on .productDetail_sec3List li:nth-child(6){ -webkit-transition: all 1s ease-in-out 2.1s; -moz-transition: all 1s ease-in-out 2.1s; -ms-transition: all 1s ease-in-out 2.1s; -o-transition: all 1s ease-in-out 2.1s; transition: all 1s ease-in-out 2.1s; } .productDetail_sec3.on .productDetail_sec3List li:nth-child(7){ -webkit-transition: all 1s ease-in-out 2.4s; -moz-transition: all 1s ease-in-out 2.4s; -ms-transition: all 1s ease-in-out 2.4s; -o-transition: all 1s ease-in-out 2.4s; transition: all 1s ease-in-out 2.4s; } .productDetail_sec3.on .productDetail_sec3List li:nth-child(8){ -webkit-transition: all 1s ease-in-out 2.7s; -moz-transition: all 1s ease-in-out 2.7s; -ms-transition: all 1s ease-in-out 2.7s; -o-transition: all 1s ease-in-out 2.7s; transition: all 1s ease-in-out 2.7s; } .productDetail_sec3Box{ padding: 80px; margin-top: 60px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .productDetail_sec3List{ border-top: 2px solid #37b48d; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .productDetail_sec3List li{ margin-top: 60px; width: 48%; display: flex; align-items: center; justify-content: flex-start; } .productDetail_sec3List li img{ margin-right: 20px; } @keyframes scale2 { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 25% { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 75% { -webkit-transform: scale(1.15); -ms-transform: scale(1.15); -o-transform: scale(1.15); transform: scale(1.15); } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } .productDetail_sec3List li:hover img{ animation: scale2 0.6s forwards linear; } .productDetail_sec3Txt{ width: calc(100% - 80px); } .productDetail_sec3Txt h6{ font-size: 20px; color: #4c4c4c; letter-spacing: 1px; } .productDetail_sec3Txt p{ margin-top: 10px; font-size: 14px; color: #666; line-height: 1.4; } .productDetail_sec5{ padding-bottom: 160px; position: relative; z-index: 0; } .productDetail_sec5Txt{ width: 60%; padding: 80px 10% 120px; position: relative; } .productDetail_sec5Txt>img{ width: 8%; position: absolute; top: 80px; right: 80px; } .productDetail_sec5Txt p{ margin-top: 120px; font-size: 18px; color: #fff; line-height: 1.8; letter-spacing: 1px; text-indent: 2em; position: relative; } .productDetail_sec5Txt p::before, .productDetail_sec5Txt p::after{ content: ''; display: block; width: 33px; height: 28px; background: url(../images/point.png) center/cover no-repeat; position: absolute; } .productDetail_sec5Txt p::before{ top: -60px; left: 0; } .productDetail_sec5Txt p::after{ right: 0; bottom: -40px; transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); } .productDetail_sec5Txt .more{ display: block; width: 64px; height: 64px; margin: 20px 0 0 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .productDetail_sec5Txt .more:hover{ -webkit-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); transform: translateX(10px); } .productDetail_sec5Bg{ width: 60%; position: absolute; top: 80px; right: 0; z-index: -1 } .productDetail_sec5Txt, .productDetail_sec5Bg{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -webkit-transform: translateY(80px); -ms-transform: translateY(80px); -o-transform: translateY(80px); transform: translateY(80px); } .productDetail_sec5.on .productDetail_sec5Txt, .productDetail_sec5.on .productDetail_sec5Bg{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .productDetail_sec5.on .productDetail_sec5Bg{ -webkit-transition: all 1s ease-in-out 0.6s; -moz-transition: all 1s ease-in-out 0.6s; -ms-transition: all 1s ease-in-out 0.6s; -o-transition: all 1s ease-in-out 0.6s; transition: all 1s ease-in-out 0.6s; } /* productDetail.html */ /* exhibition_detail.html */ .exhibitionSec1{ padding-bottom: 80px; } .exhibitionSec1_box{ display: flex; align-items: flex-start; justify-content: space-between; } .exhibitionSec1_bigImg{ width: 56%; } .exhibitionSec1_txt{ width: 40%; padding-top: 2%; } .exhibitionSec1_txt h6{ font-size: 38px; color: #333; letter-spacing: 2px; margin-bottom: 20px; } .exhibitionSec1_txt p{ margin-top: 10px; font-size: 16px; color: #808080; line-height: 1.6; letter-spacing: 1px; } .exhibitionSec1_swiper{ margin-top: 40px; } .exhibitionSec1_img{ border: 1px solid #808080; } .exhibitionSec1_img.on{ border: 1px solid #3daa8a; } .exhibitionSec2{ padding: 80px 0; background-color: #f5f5f5; } .exhibitionSec2_swiper{ margin-top: 60px; padding-bottom: 80px; } .exhibitionSec2_swiper a:hover .solutionSec2_txt{ -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } .exhibitionSec2_swiper a:hover .solutionSec2_slogan{ opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); } .exhibitionSec2_pag{ display: none; } .exhibitionSec2_swiper .indBan_pagLiner{ bottom: 0; } .exhibitionSec2_swiper .indBan_pagLiner_box{ background-color: rgba(0,0,0,0.5); } .exhibitionSec4 li a { box-shadow: 2px 2px 10px rgba(0,0,0,0.1); } /* exhibition_detail.html */ @media(max-width:1760px) { } @media(max-width:1680px) { } @media(max-width:1600px) { .indSec5_left{ padding: 4% 0 0 9.5%; } } @media(max-width:1520px) { } @media(max-width:1440px) { .headerNav li a{ font-size: 16px; } .headerSearch a{ font-size: 14px; } .comment_title h6{ font-size: 32px; } .comment_title p{ font-size: 16px; letter-spacing: 0; } .indSec1_list li{ width: 150px; height: 150px; } .indSec1_list li img:nth-child(2){ top: 20px; } .indSec1_list li p{ font-size: 16px; letter-spacing: 0; } .indSec1_txt h5{ font-size: 26px; } .indSec1_txt h6{ font-size: 18px; } .indSec1_txt p{ font-size: 14px; } .indSec3_left .indSec3_txt h5{ font-size: 22px; height: 24px; } .indSec3_left .indSec3_txt h6{ font-size: 16px; height: 28px; } .indSec3_right .indSec3_txt h6{ font-size: 16px; height: 25px; } .indSec5_left{ padding: 4% 0 0 8%; } .solutionSec1{ padding: 20px; } .solutionSec1_box h6{ font-size: 28px; } .solutionSec1_list p{ margin: 0; font-size: 14px; } .solutionSec1_gear img:nth-child(2){ width: 90vh; } .solutionSec3_txtBox{ padding: 10% 40px; } .solutionDetail_sec5List li{ font-size: 16px; line-height: 30px; margin-bottom: 10px; } .solutionDetail_sec5List li div{ content: ''; display: inline-block; width: 30px; height: 30px; border-radius: 5px; margin: 0 10px 0 0px; } .aboutSec2_box{ width: 350px; } .aboutSec2_time{ right: 370px; } .aboutSec2_swiper .swiper-slide:nth-child(even) .aboutSec2_time{ right: auto; left: 370px; } .productSec2_txt h6{ font-size: 16px; } .productSec2_txt p{ font-size: 14px; } .aboutSec5_txt p{ font-size: 12px; } .solutionSec3_btn img{ width: 44px; } .solutionSec1_gear img:nth-child(1){ top: -30px; left: 10px; } .solutionSec1_gear img:nth-child(2){ right: 10px; bottom: -30px; } .productDetail_sec2List p{ font-size: 18px; } .productDetail_sec2Icon{ margin: 0 20px; width: 50px; height: 50px; } .productDetail_sec5Txt { padding: 80px 4%; } .headerProduct_list li{ padding: 15px 0; } .headerProduct_list li:hover{ padding: 15px 10px; } .aboutSec1_txt h5{ font-size: 46px; } .aboutSec1_txt h6{ font-size: 26px; } .aboutSec1_txtBox{ height: 84px; margin-top: 20px; } .aboutSec1_txt p{ font-size: 16px; letter-spacing: 0; } .aboutSec1_list{ margin-top: 40px; } .aboutSec1_number h6{ font-size: 40px; } .productSec2_txt{ height: 110px; } .aboutSec2_swiper { padding: 10px 10px 80px 10px; } .solutionSec3_txtBox h6{ font-size: 18px; } .solutionSec3_txtBox p{ font-size: 16px; line-height: 1.6; } .aboutSec4_right li{ font-size: 14px; } } @media(max-width:1360px) { } @media(max-width:1280px) { } @media(max-width:768px) { .row, .row>div{ margin: 0; padding: 0; } .navbar-nav { width: 100%; margin-left: 0px; text-transform: uppercase; } .navbar-nav li { text-align: center; border-bottom: 1px dotted #e5e5e5; line-height: 40px; } .navbar-nav li a { color: #666; font-size: 13px; } .navbar-nav li a:hover { color: #0752a4; } .headerbg { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999999; background: #fff; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .logo_boxlist { float: left; width: 120px; margin-top: 14px; } .navbar-toggle { margin-top: 10px; } .navbar-toggle .icon-bar { background-color: #000; } .navbar-collapse { border-top: 1px solid #e5e5e5; } /* index */ .indBan_txt{ width: 94%; } .indBan_txt h6{ font-size: 26px; } .indBan_txt p{ font-size: 28px; } .indSec1{ padding-top: 40px; } .comment_title h5{ font-size: 18px; } .comment_title h6{ font-size: 24px; letter-spacing: 4px; } .comment_title .line{ margin: 10px auto 15px; width: 60px; height: 2px; } .comment_title p{ max-width: 94%; font-size: 14px; line-height: 1.6; } .indSec1_list li{ width: 80px; height: 80px; } .indSec1_list li p{ font-size: 10px; } .indSec1_list li img:nth-child(2){ top: 6px; } .indSec1_img img{ width: 100%; } .indSec1_txt{ display: block; width: 100%; padding: 5%; position: relative; } .indSec1_txt h5{ margin: 0; font-size: 18px; letter-spacing: 2px; } .indSec1_txt .line{ height: 2px; margin: 4% 0; } .indSec1_txt h6{ font-size: 14px; line-height: 1.4; letter-spacing: 1px; } .indSec1_txt p{ font-size: 12px; } .indSec1_icon{ display: none; } .indSec1_more{ margin-top: 4%; } .indSec2{ height: auto; } .indSec2_list{ padding: 40px 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .indSec2_list li{ width: 50%; height: auto; } .indSec2_list li:nth-child(n+3){ margin-top: 20px; } .indSec2_list li .number{ font-size: 28px; letter-spacing: 0px; } .indSec2_list li h6{ font-size: 18px; margin-top: 0; } .indSec3{ padding: 40px 0; } .indSec3_con{ margin-top: 40px; display: block; } .indSec3_left{ /*display: none;*/ width: 100%; margin-bottom: 10px; } .indSec3_left .indSec3_imgBg{ height: 240px; } .indSec3_right a:nth-child(2){ margin-top: 10px; } .indSec3_right{ width: 100%; } .indSec3_left .indSec3_txt h5{ font-size: 16px; height: 25px; } .indSec3_left .indSec3_txt h6{ display: none; } .indSec4{ padding: 40px 0; } .indSec4_list{ margin-top: 40px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .indSec4_list li{ width: 50%; } .indSec4_list li p{ padding: 0 10px; display: block; height: auto; } .indSec4_list li h6{ margin-top: 10px; font-size: 16px; } .indSec4_list li .line{ margin: 10px auto; } .indSec4_list li p{ font-size: 14px; } .indSec4_icon{ width: 80px; height: 80px; } .indSec4_icon img{ width: 100%; } .indSec5{ margin: 0; } .indSec5_left{ width: 100%; padding: 5%; } .indSec5_left .comment_title{ text-align: center; } .partnerSwiper{ margin-top: 40px; padding-bottom: 40px; width: 100%; } .partnerSwiper_pag{ bottom: 0!important; } .indSec5_right{ width: 100%; position: relative; top: 0; right: 0; display: none; } .indSec5.on .indSec5_right{ -webkit-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); transform: translate(0%, 0%); } .footer{ font-size: 10px; letter-spacing: 0; } .footerTop, .footerBottom_link{ display: none; } .footerBottom .container{ padding: 10px 3%; } /* index */ /* about */ .aboutBg, .aboutBgTxt{ top: 8vh; } .aboutSec1_box{ width: 100%; } .aboutSec1_txt h5{ font-size: 22px; width: 60%; margin: 0 0 0 auto; } .aboutSec1_txt h6{ font-size: 16px; line-height: 1.4; width: 60%; margin: 10px 0 0 auto; } .aboutSec1_txt p{ font-size: 12px; } .aboutSec1_txtBox{ padding-right: 0; height: auto!important; } .aboutSec1_list{ padding-top: 20px; } .aboutSec1_list li{ padding: 10px; } .aboutSec1_list li img{ width: 40px; } .aboutSec1_number h6{ font-size: 26px; } .aboutSec1_number{ margin-left: 15%; } .aboutSec1_list li:nth-child(odd){ border-right: 2px solid #e8e8e8; } .aboutSec2{ padding: 40px 0 10px; } .aboutSec2_box::after, .aboutSec2_box::before{ display: none; } .aboutSec2_box{ width: 100%; } .aboutSec2_swiper{ width: 100%; padding: 0 10px 30px; margin: 20px 0 0; } .aboutSec2_pag{ width: 100%; padding-right: 30%; right: 0; top: auto; bottom: 0; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .aboutSec2_pag .swiper-pagination-bullet{ display: inline-block; margin: 0 10px!important; } .aboutSec2_year{ font-size: 24px; top: auto; bottom: -12px; right: 14%; -webkit-transform: translate(50%, 0%); -ms-transform: translate(50%, 0%); -o-transform: translate(50%, 0%); transform: translate(50%, 0%); } .aboutSec2_time{ display: none; } .aboutSec3{ margin: 40px 0 0; overflow: hidden; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); -o-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } .aboutSec3>img:nth-child(1){ width: auto; height: 30vh; -webkit-transform: translateX(-25%); -ms-transform: translateX(-25%); -o-transform: translateX(-25%); transform: translateX(-25%); } .aboutSec3>img.videoPlay{ width: 60px; } .aboutSec4{ padding: 40px 0; } .aboutSec4_swiper{ margin-top: 40px; padding-bottom: 40px; } .aboutSec4_swiper .swiper-slide{ width: 100%!important; } .aboutSec4_img img{ width: 100%; } .aboutSec5{ padding: 40px 0; } .aboutSec5_swiper{ width: 94%; padding: 0 10px 50px; margin: 40px auto 0; } .aboutSec6_list{ margin-top: 40px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .aboutSec6_list li{ width: 49%; } .aboutSec6_list li:nth-child(n+3){ margin-top: 2%; } .aboutSec6_txt{ padding: 0 5px; } .aboutSec6_txt h5{ font-size: 18px; } .aboutSec6_txt h6{ font-size: 14px; } .aboutSec6_txt p{ font-size: 12px; } .aboutSec7{ padding: 40px 0; } .aboutSec7_box{ display: block; } .aboutSec7_box .comment_title{ width: 100%; text-align: center; } .aboutSec7_box .comment_title p{ max-width: 100%; } .aboutSec7_list{ width: 100%; margin-top: 40px; } .aboutSec7_list li{ width: 49%; } .aboutSec7_list li:nth-child(n+3){ margin-top: 10px; } .banner>img{ width: auto; height: 300px; } .publicBan{ width: 94%; } .publicBan h6{ font-size: 32px; } .publicBan p{ margin: 0; font-size: 24px; letter-spacing: 0; } .contactWarpper{ padding: 0; } .contactWarpper .publicWarpper{ padding: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .contactBox{ padding: 40px 20px; } .contactBox>h6{ font-size: 20px; font-weight: bold; } .contactList{ margin-top: 40px; display: block; } .contactList li{ width: 100%; padding: 10px 0; } .contactList li>img{ width: 20px; } .contactTxt{ margin-left: 10px; } .contactTxt h6{ font-size: 16px; font-weight: bold; } .contactTxt p{ margin-top: 4px; font-size: 12px; } .contactMap{ width: 100%; height: 300px; position: relative; } .newsDetail_box{ padding: 20px; } .newsDetail_title{ padding-bottom: 20px; } .newsDetail_title h6{ font-size: 22px; letter-spacing: 1px; } .newsDetail_title p{ font-size: 12px; } .newsDetail_title p span{ display: block; } .newsDetail_con{ margin-top: 20px; padding: 0; } .newsDetail_con h4{ font-size: 22px; } .newsDetail_con p{ font-size: 16px; margin: 15px auto; } /* about */ /* invertorrelations */ .recruitmentSec1{ padding: 20px!important; } .recruitmentSec1 h6{ font-size: 24px; } .recruitmentSec1 p{ width: 100%; font-size: 14px; } .newsSec2{ padding: 0; } .newsSec2_nav li{ font-size: 14px; line-height: 50px; height: 50px; } .newsSec2_nav li.on{ font-size: 16px; } .recruitmentSec2_list li{ margin-top: 10px; } .recruitmentSec2_list li a{ display: block; height: auto; padding: 10px; } .recruitmentSec2_list .title img{ margin-right: 5px; position: relative; top: 10px; } .recruitmentSec2_list .title h6{ font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; } .recruitmentSec2_list li a p{ font-size: 12px; padding-left: 30px; margin-top: 4px; } .recruitmentSec2_list>p{ font-size: 14px!important; } .publicPag{ margin-top: 40px; } .publicPag .pagination{ margin: 0; } /* invertorrelations */ /* news */ .newsSec1{ display: block; } .newsSec1 li{ width: 100%; } .newsSec1 li:nth-child(n+2){ margin-top: 10px; } .newsSec1_img{ height: 150px; } .newsSec1_txt{ padding: 10px; } .newsSec1_txt h6{ font-size: 16px; } .newsSec1_txt p{ font-size: 14px; line-height: 1.4; } .newsSec2_nav li{ margin-left: 10px; letter-spacing: 0; } .newsSec2_nav li.on { font-size: 14px; } .newsSec2_list{ padding: 0 10px; } .newsSec2_list li{ width: 100%; border-bottom: 1px solid #ececec; } .newsSec2_list li:nth-child(n+2){ margin-top: 10px; } .newsSec2_txt{ width: 100%; padding: 10px; } .newsSec2_txt h6{ font-size: 16px; } .newsSec2_txt h5{ font-size: 14px; } .newsSec2_txt p{ font-size: 12px; } .exhibition_list{ padding: 40px 20px; } .exhibition_list ul{ display: block; } .exhibition_list li{ width: 100%; } .exhibition_list li:nth-child(n+2){ margin-top: 10px; } .exhibition_bg{ height: 150px; } .newsDetail_bottom{ margin-top: 20px; padding-top: 20px; display: block; } .newsDetail_left a{ font-size: 14px; } .newsDetail_left a:nth-child(2){ margin-top: 10px; } .newsDetail_share{ margin-top: 10px; justify-content: flex-start; } .publicReturn{ margin: -6vh auto 0; padding-bottom: 40px; } .publicReturn a { width: 160px; height: 42px; font-size: 16px; line-height: 42px; } .exhibition_warpper{ width: 94%; } .exhibitionSec1{ padding-bottom: 40px; } .exhibitionSec1_box{ display: block; } .exhibitionSec1_bigImg{ width: 100%; } .exhibitionSec1_txt{ padding-top: 10px; width: 100%; } .exhibitionSec1_txt h6{ font-size: 24px; font-weight: bold; } .exhibitionSec1_txt p{ font-size: 14px; } .exhibitionSec2{ padding: 40px 0; } .exhibitionSec2_swiper{ margin-top: 40px; padding-bottom: 40px; } .solutionSec2_txt{ width: 100%; padding: 10px; } .solutionSec2_slogan p{ width: 100%; } .solutionSec2_txt h6{ font-size: 16px; } .solutionSec2_txt p{ font-size: 12px; /*height: 34px;*/ } .solutionSec2_slogan{ display: none; } .solutionSec2_list li{ margin: 0; } .recruitmentSec3{ padding: 40px 3%; } .recruitmentSec3_swiper{ margin-top: 40px; padding-bottom: 0; } .recruitmentSec3_swiper .swiper-slide{ width: 100%!important; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .recruitmentSec2_txt{ height: 50px; } .recruitmentSec2_txt p{ font-size: 18px; line-height: 50px; } .exhibitionSec4{ margin: 0; padding: 40px 0!important; } /* news */ /* product */ .productSec1{ padding: 40px; } .white_title.center .line{ margin: 10px auto 15px; } .productSec2{ margin-bottom: 40px; } .productSec2_list{ margin-top: 40px; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .productSec2_list li{ width: 50%; height: 220px; position: relative; top: 0!important; left: 0!important; right: 0!important; } .productSec2_txt{ height: auto; bottom: 50%; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } .productSec2_txt p{ font-size: 12px; } .productSec2_txtBox{ display: none; } .productSec2_list li:hover{ width: 50%; } .productSec2_list li:hover .productSec2_txt img, .productSec2_txt img{ height: 32px; margin-bottom: 10px; } .productSec3{ padding: 40px 0; } .productSec3_list{ margin-top: 40px; display: block; } .productSec3_list li{ width: 100%; } .productSec3_list li:nth-child(n+2){ margin-top: 10px; } .productSec3_list li .productSec3_txt{ height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; } .productSec3_list li .productSec3_txt img{ width: 32px; height: 32px; margin-bottom: 10px; } .productSec3_list li .productSec3_txt p{ margin-top: 10px; height: auto; font-size: 12px; } .productSec3_txt h6{ font-size: 18px; font-weight: bold; } .solutionDetail_sec1{ padding: 40px 10px; } .solutionDetail_sec1Box p { width: 100%; margin: 10px auto 0; opacity: 1; -moz-opacity: 1; -khtml-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .productDetail_sec2Box{ margin-top: 40px; } .productDetail_sec2Box img{ width: 100%; } .productDetail_sec3{ padding: 40px 0; background-size: 100% 50%!important; } .productDetail_sec3Box{ margin-top: 40px; padding: 20px; } .productDetail_sec3List{ display: block; } .productDetail_sec3List li{ width: 100%; margin-top: 20px; } .productDetail_sec3List li img{ width: 32px; margin-right: 10px; } .productDetail_sec3Txt{ width: calc(100% - 40px); } .productDetail_sec3Txt h6{ font-size: 14px; } .productDetail_sec3Txt p{ /*display: none;*/ } .solutionDetail_sec4Left, .solutionDetail_sec4Center, .solutionDetail_sec4Right, .solutionDetail_sec4Box{ width: 100%; } .solutionDetail_sec4Left .solutionDetail_sec4Box, .solutionDetail_sec4Right .solutionDetail_sec4Box{ position: relative; } .solutionDetail_sec4Con{ margin-top: 40px; display: block; } .solutionDetail_sec4Box{ height: 160px!important; } .solutionDetail_sec4Box .solutionDetail_sec4Txt{ height: 100%; } .solutionDetail_sec4Box .solutionDetail_sec4Txt img{ height: 32px!important; margin-bottom: 10px; } .solutionDetail_sec4Txt h6{ font-size: 16px; } .solutionDetail_sec4Txt p{ font-size: 14px; } .aboutSec4_con{ margin-top: 40px; display: block; } .aboutSec4_left{ width: 100%; } .aboutSec4_right{ width: 100%; margin-top: 10px; } .aboutSec4_right h6{ font-size: 18px; } .aboutSec4_right p{ margin-top: 10px; font-size: 14px; } .aboutSec4_right li{ width: 100%; max-width: 100%; min-height: 100%; } .productDetail_sec5{ padding-bottom: 0; } .productDetail_sec5Txt{ width: 100%; padding: 40px 3%; } .productDetail_sec5Txt .comment_title{ text-align: center; } .productDetail_sec5Txt>img{ top: 40px; right: 5%; } .productDetail_sec5Txt p{ margin-top: 40px; font-size: 14px; } .productDetail_sec5Txt .more img{ width: 130px; } .productDetail_sec5Bg{ width: 100%; height: 250px; position: relative; top: 0; right: 0; } .solutionDetail_bottomBox{ height: 80px; } .solutionDetail_share{ font-size: 16px; } .solutionDetail_return p{ font-size: 18px; } /* product */ /* recruitment */ .recruitment_warpper{ width: 94%; } .recruitmentSec1 a{ margin-right: 40px; padding-bottom: 8px; font-size: 16px; } .recruitmentSec2{ padding: 0 0 40px; } .recruitmentSec2_swiper{ margin-top: 40px; padding-bottom: 40px; } .recruitmentSec2_pag{ bottom: 0!important; } .recruitmentSec3_swiper{ padding-bottom: 60px; } .recruitmentSec3_txt{ padding: 0 40px; height: 40px; font-size: 16px; line-height: 40px; bottom: -20px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .recruitmentSec4{ padding: 40px 0; } .recruitmentSec4_screen{ margin-top: 40px; position: relative; padding-top: 30px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } .recruitmentSec4_screen>*{ display: block; width: 30%; margin: 10px 0 0!important; } .recruitmentSec4_screen p:nth-child(1){ font-size: 16px; font-weight: bold; position: absolute; top: 0; left: 0; } .recruitmentSec4_screen p, .screenBox h6, .screenList li{ font-size: 14px; } .screenBox{ width: 160px; height: 34px; } .screenBox h6{ line-height: 34px; } .screenBox h6::after{ top: 14px; right: 10px; border-right: 6px solid transparent; border-top: 8px solid #37b48d; border-left: 6px solid transparent; } .recruitmentSec4_list li{ padding: 20px 10px; display: block; } .recruitmentSec4_txt{ width: 100%; border: none; } .recruitmentSec4_txt h6{ font-size: 16px; } .recruitmentSec4_btn{ margin-top: 10px; } .recruitmentSec4_txt span:nth-child(n+2)::before{ margin: 0 10px -2px; } .recruitmentDetail_box{ padding: 20px; } .recruitmentDetail_box h5{ font-size: 18px; } .recruitmentDetail_box h6{ margin: 15px 0 10px; font-size: 16px; } .recruitmentDetail_box p{ font-size: 14px; line-height: 1.6; } .recruitmentDetail_box .newsDetail_share{ margin-top: 10px; position: relative; bottom: 0; right: 0; } /* recruitment */ /* solution */ .solutionSec1_list li img{ width: 32px; height: 32px; } .solutionSec1{ display: block; } .solutionSec1_box{ width: 100%; } .solutionSec1_box h6{ font-size: 18px; } .solutionSec1_list p{ font-size: 12px; margin-top: 6px; } .solutionSec1_gear img:nth-child(1) { width: 110vw; top: 50%; left: calc(50% - 40vw); } .solutionSec1_list li{ margin: 0 6%; } .solutionSec1_gear img:nth-child(n+2){ display: none; } .solutionSec2{ padding: 0 0 40px; } .solutionSec2_list{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .solutionSec2_list li{ width: 49%; } .solutionSec2_list li:nth-child(even){ margin: 0; margin: 0 } .solutionSec2_list li:nth-child(n+3){ margin-top: 2%; } .solutionSec2_img{ height: 180px; } .solutionSec3{ padding: 40px 0; } .solutionSec3_con{ margin-top: 40px; } .solutionSec3_txt{ width: 100%; } .solutionSec3_txtBox{ padding: 20px; } .solutionSec3_txtBox h6{ font-size: 16px; } .solutionSec3_txtBox .line{ margin: 10px 0 15px; } .solutionSec3_txtBox p{ font-size: 14px; } .solutionSec3_con .indBan_pagLiner{ width: 100%; bottom: 0; } .indBan_pagLiner_box{ background-color: rgba(0,0,0,0.5); } .solutionSec3_swiper{ position: relative; right: 0; } .solutionSec3_box p{ font-size: 16px; letter-spacing: 0; } .solutionDetail_sec2List{ margin-top: 40px; } .solutionDetail_sec3{ padding: 40px 0; } .solutionDetail_sec3Swiper{ margin-top: 40px; } .solutionDetail_sec3Img{ height: 320px; } .solutionDetail_sec3Box .solutionDetail_sec3Img::after{ -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } .solutionDetail_sec3Txt h6{ font-size: 18px; } .solutionDetail_sec3Txt p{ font-size: 12px; } .solutionDetail_sec4 .container{ padding: 0; } .solutionDetail_sec5{ padding: 40px 0; } .solutionDetail_sec5Con{ margin-top: 40px; padding: 40px 0; } .solutionDetail_sec5Top{ display: block; margin-bottom: 40px!important; } .solutionDetail_sec5Tab img{ width: 93vw; max-width: 93vw!important; } .solutionDetail_sec5Bottom{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .solutionDetail_sec5Bottom li{ width: 30%; } .solutionDetail_sec5Bottom li:nth-child(n+4){ margin-top: 20px; } .solutionDetail_sec5Bottom p{ margin: 0; font-size: 14px; } .solutionDetail_sec6{ padding: 0 0 40px; } .solutionDetail_sec6List{ margin-top: 40px; } .solutionDetail_sec6List li{ width: 48%; } .solutionDetail_sec6List li:nth-child(n+3){ margin-top: 10px; } /* solution */ .viedoAlert video{ width: 90vw; } /* 20191231新增 */ .indBan_swiper, .indBan_box{ height: 60vh; } .toDown{ bottom: 20px; } .indBan_pagLiner{ bottom: 80px; } .indSec2_list{ display: block; } .indSec2_list li{ width: 100%; } .indSec2_list li:nth-child(n+2){ margin-top: 20px; } .indSec4_list li p{ height: 40px; } .indSec4_list li:hover a{ box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2); -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0px); -o-transform: scale(1) translateY(0px); transform: scale(1) translateY(0px); } .indSec4_list li:hover .indSec4_icon{ -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .indSec4_list li:hover .indSec4_icon::before{ opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); } .productDetail_sec2{ padding-bottom: 40px; } .productDetail_sec2List{ margin-top: 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .productDetail_sec2List li{ width: 48%; padding-bottom: 0!important; position: relative; top: 0!important; left: 0!important; right: 0!important; bottom: 0!important; } .productDetail_sec2List li:nth-child(n+3){ margin-top: 20px; } .productDetail_sec2Icon img{ width: 30px!important; } .contactWay_box{ padding: 20px; display: block; } .productSec3_list li:hover .productSec3_txt img{ height: 32px; margin-bottom: 10px; } .contactWay_txt h6{ font-size: 18px; font-weight: bold; margin-bottom: 10px; } .contactWay_txt p{ font-size: 14px; line-height: 1.8; } #dituContent{ margin-top: 20px!important; width: 100%!important; } /* 20191231新增 */ } @media (min-width: 768px){ .container{ margin: 0 auto; padding: 0; } } @media (min-width: 1440px){ .container{ width: 1280px; } } @media (min-width: 1600px){ .container{ width: 1440px; } }