html {
scroll-behavior: smooth;
scroll-padding: 10px;
}
.container-fluid {
overflow: visible;
}
.header {
width: calc(100% + 5px);
}
@media (max-width: 499px) {
.header {
width: calc(100%);
}
}
.headerz {
width: calc(100%);
}
#header {
transition: all 0.8s ease;
}
#header .navWrap {
transition: all 0.5s ease;
}
#header .header-type-a {
background: rgba(0, 0, 0);
transition: all 0.5s ease;
}
.spHeader {
background: rgba(0, 0, 0) !important;
}
.headertop {
transform: translateY(-81.53px);
}
.headertopNo {
transform: translateY(0);
}
#header>.navWrap .navLocation {
margin: auto;
}
#header>.navWrap .navLogo {
padding: 16px 0;
}
#header>.navWrap .navList {
display: flex;
justify-content: flex-end;
padding-right: 0;
}
#header>.navWrap .navList .navUl {
display: flex;
align-items: center;
height: 100%;
}
#header>.navWrap .navList .navUl .navLi {
height: 100%;
display: flex;
align-items: center;
margin-right: 2vw;
position: relative;
}
#header>.navWrap .navList .navUl .navLi::before {
content: "";
display: block;
width: 44px;
height: 44px;
border: 2px solid #E01E24;
opacity: 0.5;
border-radius: 50%;
position: absolute;
left: -12px;
top: 50%;
transform: translateY(-50%) scale(0, 0);
opacity: 0;
transition: ease 0.5s;
z-index: 0;
}
#header>.navWrap .navList .navUl .navLi:hover:before {
transform: translateY(-50%) scale(1, 1);
opacity: .5;
}
#header>.navWrap .navList .navUl .navLi.navCurrent::before {
transform: translateY(-50%) scale(1, 1);
opacity: .5;
}
#header>.navWrap .navList .navUl .navLi a {
font-size: 16px;
color: #FFFFFF;
transition: ease .5s;
opacity: 0.9;
}
#header>.navWrap .navList .navUl .navLi:hover a {
color: #E01E24;
}
#header>.navWrap .navList .navUl .navLi.navCurrent a {
color: #E01E24;
}
#header>.navWrap .navList .navFunction {
display: flex;
align-items: center;
}
#header>.navWrap .navList .navFunction .navTel {
height: 100%;
margin-left: 1vw;
}
#header>.navWrap .navList .navFunction .navTel .navTelA {
display: flex;
height: 100%;
align-items: center;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan {
display: inline-block;
height: 100%;
width: 230px;
font-size: 0;
vertical-align: top;
overflow: hidden;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i {
display: inline-flex;
height: 100%;
align-items: center;
font-size: 36px;
color: #E01E24;
vertical-align: top;
font-family: D-DIN-Bold;
-webkit-animation: telno 6.5s steps(1, end) infinite;
animation: telno 6.5s steps(1, end) infinite;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI0 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI1 {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI2 {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI3 {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI4 {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI5 {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
animation-delay: 2.5s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI6 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI7 {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI8 {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
animation-delay: 4s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI9 {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI10 {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
animation-delay: 5s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI11 {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
animation-delay: 5.5s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI12 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i.navTelI13 {
-webkit-animation-delay: 6.5s;
-moz-animation-delay: 6.5s;
animation-delay: 6.5s;
}
@-webkit-keyframes telno {
0% {
font-size: 46px;
}
7.14%,
14.28%,
21.42%,
28.57%,
35.71%,
42.86%,
50%,
57.14%,
64.28%,
71.42%,
78.57%,
85.71%,
92.86%,
100% {
font-size: 36px;
}
}
@keyframes telno {
0% {
font-size: 46px;
}
7.14%,
14.28%,
21.42%,
28.57%,
35.71%,
42.86%,
50%,
57.14%,
64.28%,
71.42%,
78.57%,
85.71%,
92.86%,
100% {
font-size: 36px;
}
}
#header>.navWrap .navList .navFunction .navConsult {
background: #E01E24;
border-radius: 20px;
margin-left: 1vw;
overflow: hidden;
}
#header>.navWrap .navList .navFunction .navConsult a {
display: block;
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
padding: 10px 28px;
position: relative;
}
#header>.navWrap .navList .navFunction .navConsult a::after {
content: " ";
position: absolute;
border-radius: 50%;
left: 50%;
top: 50%;
margin-left: -120px;
margin-top: -120px;
border-width: 120px;
border-color: #fff;
border-style: dashed;
width: 0;
height: 0;
-webkit-transition: all 500ms ease-out 0s;
transition: all 500ms ease-out 0s;
opacity: .1;
visibility: hidden;
-webkit-transform: scale(.1);
transform: scale(.1);
pointer-events: none
}
#header>.navWrap .navList .navFunction .navConsult a:hover:after {
-webkit-transition: all 350ms ease-in 0s;
transition: all 350ms ease-in 0s;
opacity: .15;
visibility: visible;
-webkit-transform: none !important;
transform: none !important
}
#navBars {
cursor: pointer;
margin-left: 1.5vw;
}
#navBars span {
display: block;
width: 30px;
margin: 6px auto;
margin-right: 0;
height: 2px;
background: #FFFFFF;
transition: all .6s ease;
}
#navBars:hover span {
background: #E01E24;
}
#navBars:hover span:nth-child(2) {
width: 15px;
}
#navBars span:nth-child(3) {
width: 15px;
}
#navBars:hover span:nth-child(3) {
width: 30px;
}
#header .navUnfold {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: -1;
visibility: hidden;
transition: ease 1s;
opacity: 0;
-webkit-transition: all 250ms ease-out .3s;
transition: all 250ms ease-out .3s;
}
#header .navUnfold.on {
-webkit-transition: -webkit-transition;
transition: all .4s ease-out 0s;
opacity: 1;
visibility: visible;
z-index: 99;
}
#header .navUnfold .navUnfoldLoca {
height: 100vh;
margin: auto;
}
#header .navUnfold .navUnfoldLoca .navUnfold-lf {
background: url(../images/navunfoldlfbg.png) no-repeat;
background-size: cover;
background-position: bottom center;
position: relative;
-webkit-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s;
opacity: .6;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-lf {
-webkit-transform: none !important;
transform: none !important;
-webkit-transition: all .5s ease-out 0s;
transition: all .5s ease-out 0s;
opacity: 1;
}
#header .navUnfold .navUnfoldLoca .navUnfold-lf .lfbox {
opacity: 0.6;
position: absolute;
left: 50%;
top: 38%;
transform: translate(-50%, -50%);
}
#header .navUnfold .navUnfoldLoca .navUnfold-lf .lfbox .lflogo {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 30px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-lf .lfbox .lflogo img {
max-width: 100%;
}
#header .navUnfold .navUnfoldLoca .navUnfold-lf .lfbox .lflogoIntroduce p {
font-size: 26px;
color: #FFFFFF;
text-align: center;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg {
background: url(../images/navunfoldrgbg.png) no-repeat;
background-size: cover;
background-position: bottom center;
position: relative;
-webkit-transition: all .3s ease-out 0s;
transition: all .3s ease-out 0s;
opacity: .6;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg {
-webkit-transform: none !important;
transform: none !important;
-webkit-transition: all .5s ease-out 0s;
transition: all .5s ease-out 0s;
opacity: 1;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi {
margin-bottom: 38px;
overflow: hidden;
opacity: 0;
-webkit-transform: translate3d(20%, 0, 0);
transform: translate3d(20%, 0, 0);
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi {
animation: fadeInRight 1s;
-moz-animation: fadeInRight 1s;
-webkit-animation: fadeInRight 1s;
-o-animation: fadeInRight 1s;
animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi:last-child {
margin-bottom: 68px;
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi:nth-child(1) {
animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi:nth-child(2) {
animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi:nth-child(3) {
animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi:nth-child(4) {
animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
-webkit-animation-delay: 0.5s;
-o-animation-delay: 0.5s;
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi:nth-child(5) {
animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
-webkit-animation-delay: 0.6s;
-o-animation-delay: 0.6s;
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi:nth-child(6) {
animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
-webkit-animation-delay: 0.7s;
-o-animation-delay: 0.7s;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a {
font-size: 34px;
color: #FFFFFF;
position: relative;
transition: padding .5s, color .5s;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a:hover {
padding-left: 200px;
color: #E01E24;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 172px;
height: 28px;
background: no-repeat url(../images/redjian.png) center center;
background-size: contain;
transform: translateX(-100%);
transform: translate(-100%, -50%);
transition: transform .5s;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a:hover:before {
transform: translate(0, -50%);
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a span {
font-family: Poppins-Regular;
text-transform: capitalize;
color: #E01E24;
margin-left: 18px;
opacity: 0;
transition: all 0.5s ease;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a:hover span {
opacity: 1;
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldAdve {
opacity: 0;
-webkit-transform: translate3d(0, 40%, 0);
transform: translate3d(0, 40%, 0);
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldAdve {
animation: fadeInUp 1s;
-moz-animation: fadeInUp 1s;
-webkit-animation: fadeInUp 1s;
-o-animation: fadeInUp 1s;
animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
-webkit-animation-delay: 0.8s;
-o-animation-delay: 0.8s;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldAdve .context p {
font-size: 18px;
font-weight: 350;
line-height: 35px;
color: #FFFFFF87;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldAdve .context p span a {
font-size: 18px;
font-weight: 350;
line-height: 35px;
color: #FFFFFF;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .closeBtn {
position: absolute;
top: 80px;
right: 78px;
cursor: pointer;
transition: all 1.2s ease;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .closeBtn:hover {
transform: rotate(360deg);
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .closeBtn .btnIco i::before {
font-size: 40px;
color: #FFFFFF;
font-weight: bold;
}
@media (max-width: 1536px) {
#header .navUnfold .navUnfoldLoca .navUnfold-rg .closeBtn {
top: 4%;
right: 6%;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi {
margin-bottom: 18px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldAdve .context p {
font-size: 16px;
line-height: 20px;
}
}
@media (max-width: 1300px) {
#header>.navWrap .navList .navUl {
display: none;
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi.navCurrent a {
color: #E01E24;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
#header>.navWrap .navList .navUl {
display: flex;
}
#header>.navWrap .navList .navUl .navLi a {
font-size: 14px;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan {
width: 180px;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i {
-webkit-animation: telno26 6.5s steps(1, end) infinite;
animation: telno26 6.5s steps(1, end) infinite;
font-size: 26px;
}
#header>.navWrap .navList .navFunction .navConsult a {
font-size: 14px;
padding: 6px 28px;
}
#header>.navWrap .navLogo {
padding: 12px 0;
}
#header>.navWrap .navLogo img {
width: 70%;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .closeBtn .btnIco i::before {
font-size: 30px;
}
#header>.navWrap .navList .navUl .navLi::before {
width: 40px;
height: 40px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-lf .lfbox {
opacity: 0.6;
}
#header .navUnfold .navUnfoldLoca .navUnfold-lf .lfbox .lflogo {
padding-bottom: 16px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-lf .lfbox .lflogo img {
max-width: 40%;
}
#header .navUnfold .navUnfoldLoca .navUnfold-lf .lfbox .lflogoIntroduce p {
font-size: 18px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a {
font-size: 24px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a:hover {
padding-left: 170px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a::before {
width: 140px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi {
margin-bottom: 14px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldAdve .context p {
font-size: 14px;
line-height: 8px;
}
}
@media (max-width: 1199px) {
#header>.navWrap .navLogo {
padding: 12px 0;
}
#header>.navWrap .navLogo img {
position: relative;
z-index: 999;
}
#header .navUnfold .navUnfoldLoca .navUnfold-lf {
display: none;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan {
width: 180px;
}
#header>.navWrap .navList .navFunction .navTel .navTelA .navTelSpan i {
-webkit-animation: telno26 6s steps(1, end) infinite;
animation: telno26 6s steps(1, end) infinite;
font-size: 26px;
}
#header>.navWrap .navList .navFunction .navConsult a {
font-size: 14px;
padding: 6px 28px;
}
}
@media (max-width: 768px) {
#header>.navWrap .navList .navFunction .navTel {
display: none;
}
}
@media (max-width: 576px) {
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi {
margin-bottom: 12px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a {
font-size: 28px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldAdve .context p {
font-size: 14px;
line-height: 14px;
}
}
@media (max-width: 499px) {
#header>.navWrap .navLogo {
padding: 6px 0;
}
#header>.navWrap .navLogo img {
max-width: 84%;
}
#header>.navWrap .navList .navFunction .navConsult {
margin-right: 2vw;
}
#header>.navWrap .navList .navFunction .navConsult a {
font-size: 14px;
padding: 6px 20px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldAdve .context p {
font-size: 13px;
line-height: 8px;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a {
font-size: 24px;
width: 100%;
display: block;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a:hover {
padding-left: 0;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi a::before {
width: 0;
height: 0;
}
#header .navUnfold .navUnfoldLoca .navUnfold-rg .closeBtn .btnIco i::before {
font-size: 30px;
}
#header .navUnfold.on .navUnfoldLoca .navUnfold-rg .navUnfold-rgbox .navUnfoldUl .navUnfoldLi.navCurrent a {
color: #E01E24;
}
}
.ind01 {
position: relative;
overflow: hidden;
height: 100vh;
width: 100%;
z-index: 2;
}
#index-banner {
width: 100%;
left: 0;
top: 0;
transition: cubic-bezier(0.215, .61, .355, 1) .45s;
overflow: hidden;
}
#index-banner>.swiper-wrapper {
background: #ffffff;
}
#index-banner>.swiper-wrapper .swiper-slide img {
width: 100%;
height: 100vh;
object-fit: cover;
}
#index-banner>.swiper-wrapper .swiper-slide .phbanner {
display: none;
}
#index-banner>.swiper-wrapper .swiper-slide video {
width: 100%;
height: 100vh;
object-fit: cover;
}
#index-banner>.swiper-wrapper .swiper-slide video::-webkit-media-controls {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#index-banner>.swiper-wrapper .swiper-slide video::-webkit-media-controls-enclosure {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#index-banner>.swiper-wrapper .swiper-slide video::-webkit-media-controls-fullscreen-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#index-banner>.swiper-wrapper .swiper-slide video::-webkit-media-controls-play-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#index-banner>.swiper-wrapper .swiper-slide video::-webkit-media-controls-timeline {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#index-banner>.swiper-wrapper .swiper-slide video::-webkit-media-controls-current-time-display {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#index-banner>.swiper-wrapper .swiper-slide video::-webkit-media-controls-time-remaining-display {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#index-banner>.swiper-wrapper .swiper-slide video::-webkit-media-controls-mute-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#index-banner>.swiper-wrapper .swiper-slide video::-webkit-media-controls-toggle-closed-captions-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#index-banner>.swiper-wrapper .swiper-slide video::-webkit-media-controls-volume-slider {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#index-banner>.swiper-wrapper .swiper-slide video::-webkit-media-controls-enclosure {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 999;
position: fixed;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle {
padding-bottom: 36px;
text-align: center;
justify-content: center;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle h2 {
font-size: 70px;
font-weight: 500;
line-height: normal;
letter-spacing: 0em;
color: #FFFFFF;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle h2 i {
opacity: 0;
transition: 0.88s 0.44s;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2 i {
animation: zoomIns 1s;
-moz-animation: zoomIns 1s;
-webkit-animation: zoomIns 1s;
-o-animation: zoomIns 1s;
animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2 i:nth-child(1) {
animation-delay: 0s;
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-o-animation-delay: 0s;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2 i:nth-child(2) {
animation-delay: 100ms;
-moz-animation-delay: 100ms;
-webkit-animation-delay: 100ms;
-o-animation-delay: 100ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2 i:nth-child(3) {
animation-delay: 200ms;
-moz-animation-delay: 200ms;
-webkit-animation-delay: 200ms;
-o-animation-delay: 200ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2 i:nth-child(4) {
animation-delay: 300ms;
-moz-animation-delay: 300ms;
-webkit-animation-delay: 300ms;
-o-animation-delay: 300ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2:nth-child(2) i:nth-child(1) {
animation-delay: 400ms;
-moz-animation-delay: 400ms;
-webkit-animation-delay: 400ms;
-o-animation-delay: 400ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2:nth-child(2) i:nth-child(2) {
animation-delay: 500ms;
-moz-animation-delay: 500ms;
-webkit-animation-delay: 500ms;
-o-animation-delay: 500ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2:nth-child(2) i:nth-child(3) {
animation-delay: 600ms;
-moz-animation-delay: 600ms;
-webkit-animation-delay: 600ms;
-o-animation-delay: 600ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2:nth-child(2) i:nth-child(4) {
animation-delay: 700ms;
-moz-animation-delay: 700ms;
-webkit-animation-delay: 700ms;
-o-animation-delay: 700ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2:nth-child(2) i:nth-child(5) {
animation-delay: 800ms;
-moz-animation-delay: 800ms;
-webkit-animation-delay: 800ms;
-o-animation-delay: 800ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2:nth-child(2) i:nth-child(6) {
animation-delay: 900ms;
-moz-animation-delay: 900ms;
-webkit-animation-delay: 900ms;
-o-animation-delay: 900ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2:nth-child(2) i:nth-child(7) {
animation-delay: 1000ms;
-moz-animation-delay: 1000ms;
-webkit-animation-delay: 1000ms;
-o-animation-delay: 1000ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2 i:nth-child(9) {
animation-delay: 800ms;
-moz-animation-delay: 800ms;
-webkit-animation-delay: 800ms;
-o-animation-delay: 800ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2 i:nth-child(10) {
animation-delay: 900ms;
-moz-animation-delay: 900ms;
-webkit-animation-delay: 900ms;
-o-animation-delay: 900ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2 i:nth-child(11) {
animation-delay: 1000ms;
-moz-animation-delay: 1000ms;
-webkit-animation-delay: 1000ms;
-o-animation-delay: 1000ms;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerTitle h2 i:nth-child(12) {
animation-delay: 1100ms;
-moz-animation-delay: 1100ms;
-webkit-animation-delay: 1100ms;
-o-animation-delay: 1100ms;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText.bannerTextPh {
display: none;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText {
transform: translateY(40%);
opacity: 0;
transition: ease 1s
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active .bannerContent .bannerText {
transform: translateY(0);
opacity: 1;
transition-delay: .6s
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText p {
font-size: 26px;
font-weight: normal;
line-height: 40px;
letter-spacing: 0em;
color: #FFFFFF;
text-align: center;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText p:nth-child(1) {
font-size: 40px;
line-height: normal;
margin-bottom: 24px;
}
#index-banner>.swiper-pagination {
width: 91.66666667%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: flex-end;
padding-left: 34px;
bottom: 60px;
}
#index-banner>.swiper-pagination .swiper-pagination-bullet {
opacity: 1;
width: 6px;
height: 16px;
border-radius: 0;
background: rgba(121, 121, 121);
transition: all 0.8s ease;
}
#index-banner>.swiper-pagination .swiper-pagination-bullet-active {
background: #FFFFFF;
height: 26px;
transition: all 0.8s ease;
}
@media (min-width: 1200px) and (max-width: 1400px) {
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle {
padding-bottom: 26px;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle h2 {
font-size: 50px;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText p {
font-size: 24px;
line-height: 36px;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText p:nth-child(1) {
font-size: 36px;
margin-bottom: 18px;
}
}
@media (max-width: 1199px) {
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle h2 {
font-size: 50px;
}
#index-banner>.swiper-pagination {
padding-left: 8px;
bottom: 34px;
}
}
@media (max-width: 768px) {
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle h2 {
font-size: 32px;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle {
padding-bottom: 16px;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText p {
font-size: 18px;
line-height: 28px;
}
}
@media (max-width: 499px) {
/* 手机端banner效果取消 */
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle h2 i {
animation: none !important;
opacity: 1 !important;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText {
transform: translateY(0) !important;
opacity: 1 !important;
}
#index-banner>.swiper-wrapper .swiper-slide #soSwbtn {
transform: translateY(0) !important;
opacity: 1 !important;
}
/* */
#index-banner>.swiper-wrapper .swiper-slide .pcbanner {
display: none;
}
#index-banner>.swiper-wrapper .swiper-slide video {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
overflow: hidden !important;
width: 0;
height: 0;
}
#index-banner>.swiper-wrapper .swiper-slide .phbanner {
display: block;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent {
top: 48%;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle {
padding-bottom: 22px;
justify-content: flex-start;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle h2 {
font-size: 28px;
text-align: center;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerTitle h2:nth-child(1) {
margin-right: 10px !important;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText {
display: none;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText.bannerTextPh {
display: block;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText p {
font-size: 16px;
text-align: start;
}
#index-banner>.swiper-wrapper .swiper-slide .bannerContent .bannerText p:nth-child(1) {
font-size: 16px;
line-height: normal;
margin-bottom: 0;
}
}
.ind02 {
position: relative;
z-index: 2;
background: #FFFFFF;
}
.ind02 .ind02Sack {
margin: auto;
z-index: 2;
position: relative;
padding-top: 120px;
padding-bottom: 72px;
}
.ind02 .ind02Sack .ind02Loca {
align-items: flex-start;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf {}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle {
padding-bottom: 30px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 {
display: flex;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 span {
font-size: 26px;
font-weight: bold;
color: #E01E24;
opacity: 0;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 span:nth-child(1) {
transition: cubic-bezier(0.215, .61, .355, 1) 1s;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 span:nth-child(2) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1.2s;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 span:nth-child(3) {
transition: cubic-bezier(0.215, .61, .355, 1) 1.4s;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 span:nth-child(4) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1.6s;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 span:nth-child(5) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1.8s;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 span:nth-child(6) {
transition: cubic-bezier(0.215, .61, .355, 1) 2s;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 span.animated {
opacity: 1;
background: none;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title h2 {
display: flex;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title h2 span {
font-size: 44px;
font-weight: 500;
line-height: 60px;
color: #1A1A1A;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title .section {
font-size: 44px;
font-weight: 500;
line-height: 60px;
color: #9c9c9c;
position: relative;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title .section .section2 {
position: absolute;
left: 0;
top: 0;
display: flex;
width: 0;
overflow: hidden;
color: #1A1A1A;
white-space: nowrap;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title.active .section .section2 {
width: 100%;
transition: width 3s ease;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf03 {
padding-top: 36px;
padding-bottom: 42px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf03 h2 {
display: flex;
align-items: center;
font-size: 16px;
color: #E01E24;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf03 h2 span {
font-size: 24px;
font-weight: normal;
color: #5E5E5E;
border: 1px solid #C8C8C8;
border-radius: 20px;
padding: 6px 20px;
margin: 0 4px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf04 {
padding-right: 17%;
padding-bottom: 66px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf04 p {
font-size: 16px;
font-weight: normal;
line-height: 30px;
color: #5E5E5E;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf04 .ppp1 {
display: none;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 {
transform: translateX(50px);
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack {
transform: translateX(50px);
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 .ind02Lf05Math {
padding-bottom: 58px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 .ind02Lf05Math:last-child {
padding-bottom: 64px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 .ind02Lf05Math .ind02Lf05Ti {
display: flex;
align-items: baseline;
padding-bottom: 8px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 .ind02Lf05Math .ind02Lf05Ti p {
font-family: D-DIN-Bold;
font-size: 60px;
background: linear-gradient(90deg, #E01E24 0%, #E48826 129%);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-color: transparent;
line-height: 50px;
margin-right: 6px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 .ind02Lf05Math .ind02Lf05Ti span {
font-size: 20px;
font-weight: bold;
background-image: linear-gradient(90deg, #E01E24 30%, #E48826 100%);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-color: transparent;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 .ind02Lf05Math .ind02Lf05SmTi p {
font-size: 16px;
font-weight: normal;
color: #333333;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 {
display: flex;
position: relative;
z-index: 3;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack {
display: flex;
align-items: center;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoBoxBg {
position: relative;
margin-right: 26px;
transition: all 0.5s ease;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a:hover .ind02LfIcoSack .ind02LfIcoBoxBg {
transform: translateX(5px);
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoBoxBg::after {
position: absolute;
background: #E01E245d;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
animation: scale1 1s alternate infinite;
border-radius: 50%;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoBox {
display: flex;
position: relative;
background: #E01E24;
border-radius: 50%;
overflow: hidden;
z-index: 10;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoBox .ind02LfIcoi {
overflow: hidden;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoBox .ind02LfIcoi1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(-120%);
transition: all 0.5s ease;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a:hover .ind02LfIcoSack .ind02LfIcoBox .ind02LfIcoi1 {
transform: translateX(0%);
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoBox .ind02LfIcoi2 {
transition: all 0.5s ease;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a:hover .ind02LfIcoSack .ind02LfIcoBox .ind02LfIcoi2 {
transform: translateX(120%);
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoBox .ind02LfIcoi i {
font-size: 24px;
color: #FFFFFF;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoName {
transition: all 0.5s ease;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a:hover .ind02LfIcoSack .ind02LfIcoName {
transform: translateX(-5px);
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoName p {
font-size: 16px;
font-weight: normal;
color: #333333;
transition: all 0.5s ease;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a:hover .ind02LfIcoSack .ind02LfIcoName p {
color: #E01E24;
}
.ind02 .ind02Sack .ind02Loca .ind02RgBo {
display: flex;
justify-content: end;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg {
padding-top: 26px;
left: auto !important;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack {
position: relative;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBg {
display: flex;
justify-content: end;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBg img {
object-fit: cover;
object-position: center;
max-width: 100%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBall1 {
position: absolute;
right: 0;
top: 26%;
width: 320px;
height: 320px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBall1 .ind02RgBall1Box img {
width: 100%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall {
position: absolute;
top: 50%;
left: 50%;
width: 220px;
height: 220px;
display: flex;
justify-content: center;
align-items: center;
-webkit-clip-path: circle(22% at 50% 50%);
clip-path: circle(22% at 50% 50%);
transition: all 0.5s ease;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall2 {
background: #E4742B;
border-radius: 50%;
top: 14%;
left: 0%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall3 {
background: #015EFB;
border-radius: 50%;
top: 56%;
left: -10%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall4 {
background: #E01E24;
border-radius: 50%;
top: 54%;
left: 17%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall:hover {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt1 {
opacity: 1;
transition: all 0.5s ease;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall:hover .ind02RgBallBg .ind02RgBallTxt1 {
opacity: 0;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt1 .ind02RgBallTxt1Ico {
display: flex;
justify-content: center;
margin-bottom: 6px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt1 .ind02RgBallTxt1Ico img {
max-width: 100%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt1 .ind02RgBallTxt1Con h2 {
font-size: 14px;
font-weight: 500;
color: #FFFFFF;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt2 {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 40px;
opacity: 0;
transition: all 0.5s ease;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall:hover .ind02RgBallBg .ind02RgBallTxt2 {
opacity: 1;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt2 p {
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
}
.ind02 .dot {
position: absolute;
border-radius: 50%;
-webkit-transform-origin: 30% 30px;
transform-origin: 30% 30px;
z-index: 1;
}
.ind02 .dot1 {
width: 6px;
height: 6px;
background: #ffba00;
right: 20%;
top: 10%;
-webkit-animation: spin-reverse 8s infinite linear;
animation: spin-reverse 8s infinite linear;
}
.ind02 .dot2 {
width: 6px;
height: 6px;
background: #d4daf5;
border-radius: 50%;
right: 36%;
top: 30%;
-webkit-animation: spin 8s infinite linear;
animation: spin 8s infinite linear;
}
.ind02 .dot3 {
width: 6px;
height: 6px;
background: #ff7537;
right: 40%;
top: 12%;
-webkit-animation: spin 8s infinite linear;
animation: spin 8s infinite linear;
}
.ind02 .dot4 {
width: 6px;
height: 6px;
background: #c4e6eb;
border-radius: 50%;
left: 50%;
top: 80%;
-webkit-animation: spin-reverse 8s infinite linear;
animation: spin-reverse 8s infinite linear;
}
.ind02 .dot5 {
width: 6px;
height: 6px;
background: #f36666;
right: 28%;
top: 50%;
-webkit-animation: spin-reverse 8s infinite linear;
animation: spin-reverse 8s infinite linear;
}
.ind02 .dot6 {
width: 6px;
height: 6px;
background: #d4daf5;
border-radius: 50%;
right: 36%;
top: 70%;
-webkit-animation: spin 8s infinite linear;
animation: spin 8s infinite linear;
}
.ind02 .dot7 {
width: 6px;
height: 6px;
background: #ff3737;
right: 20%;
top: 75%;
-webkit-animation: spin 8s infinite linear;
animation: spin 8s infinite linear;
}
.ind02 .dot8 {
width: 6px;
height: 6px;
background: #595ee8;
border-radius: 50%;
left: 45%;
top: 60%;
-webkit-animation: spin-reverse 8s infinite linear;
animation: spin-reverse 8s infinite linear;
}
.ind02 .dot9 {
width: 6px;
height: 6px;
background: #ffba00;
left: 20%;
top: 80%;
-webkit-animation: spin-reverse 8s infinite linear;
animation: spin-reverse 8s infinite linear;
}
.ind02 .dot10 {
width: 6px;
height: 6px;
background: #d4daf5;
border-radius: 50%;
right: 26%;
bottom: 56%;
-webkit-animation: spin 8s infinite linear;
animation: spin 8s infinite linear;
}
.ind02 .dot11 {
width: 6px;
height: 6px;
background: #ff7537;
left: 10%;
top: 12%;
-webkit-animation: spin 8s infinite linear;
animation: spin 8s infinite linear;
}
.ind02 .dot12 {
width: 6px;
height: 6px;
background: #c4e6eb;
border-radius: 50%;
left: 20%;
top: 60%;
-webkit-animation: spin-reverse 8s infinite linear;
animation: spin-reverse 8s infinite linear;
}
.ind02 .dot13 {
width: 6px;
height: 6px;
background: #f36666;
left: 14%;
top: 37%;
-webkit-animation: spin-reverse 8s infinite linear;
animation: spin-reverse 8s infinite linear;
}
.ind02 .dot14 {
width: 6px;
height: 6px;
background: #d4daf5;
border-radius: 50%;
left: 30%;
top: 75%;
-webkit-animation: spin 8s infinite linear;
animation: spin 8s infinite linear;
}
.ind02 .dot15 {
width: 6px;
height: 6px;
background: #ff3737;
left: 20%;
top: 25%;
-webkit-animation: spin 8s infinite linear;
animation: spin 8s infinite linear;
}
.ind02 .dot16 {
width: 6px;
height: 6px;
background: #595ee8;
border-radius: 50%;
left: 10%;
top: 20%;
-webkit-animation: spin-reverse 8s infinite linear;
animation: spin-reverse 8s infinite linear;
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes spin {
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@-webkit-keyframes spin-reverse {
from {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@keyframes spin-reverse {
from {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
@media (max-width: 1600px) {
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title .section {
font-size: 42px;
}
}
@media (max-width: 1536px) {
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 span {
font-size: 24px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title h2 span {
font-size: 36px;
line-height: 48px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title .section {
font-size: 36px;
line-height: 48px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf03 h2 span {
font-size: 18px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall {
width: 14vw;
height: 14vw;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBall1 {
width: 290px;
height: 290px;
}
}
@media (max-width: 1400px) {
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 {
transform: translateX(0);
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack {
transform: translateX(0);
}
.ind02 .ind02Sack .ind02Loca .ind02RgBo {
position: absolute;
right: 0;
bottom: 28px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg {
padding-bottom: 80px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBg img {
max-width: 84%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall {
-webkit-clip-path: circle(22% at 50% 50%);
clip-path: circle(22% at 50% 50%);
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack:hover ul .ind02RgBall {
-webkit-clip-path: circle(22% at 50% 50%);
clip-path: circle(22% at 50% 50%);
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall2 {
left: 31%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt2 {
display: none;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack:hover ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt1 {
opacity: 1;
}
.ind02 .ind02Sack .ind02Loca .ind02RgBo .pin-spacer {
position: relative !important;
}
.ind02 .ind02Sack .ind02Loca .ind02RgBo .pin-spacer .ind02Rg {
position: relative !important;
transform: translate(0px, 0px) !important;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBall1 {
width: 274px;
height: 274px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall {
width: 216px;
height: 216px;
-webkit-clip-path: circle(22% at 50% 50%);
clip-path: circle(22% at 50% 50%);
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall3 {
left: 18%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall4 {
top: 68%;
left: 44%;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.ind02 .ind02Sack .ind02Loca .ind02Lf {
width: 50%;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf03 h2 span {
font-size: 16px;
padding: 4px 16px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 .ind02Lf05Math .ind02Lf05SmTi p {
font-size: 14px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf04 {
padding-right: 58px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf04 p {
font-size: 14px;
line-height: 22px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 {
transform: translateX(32px);
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack {
transform: translateX(32px);
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title .section {
font-size: 28px;
line-height: 36px;
}
.ind02 .ind02Sack {
padding-top: 74px;
}
.ind02 .ind02Sack .ind02Loca .ind02RgBo {
width: 50%;
position: sticky;
right: 0;
top: 28px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt1 .ind02RgBallTxt1Ico {
margin-bottom: 2px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg {
padding-top: 0;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt1 .ind02RgBallTxt1Ico img {
max-width: 50%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBg img {
max-width: 100%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall {
-webkit-clip-path: circle(20% at 50% 50%);
clip-path: circle(20% at 50% 50%);
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack:hover ul .ind02RgBall {
-webkit-clip-path: circle(20% at 50% 50%);
clip-path: circle(20% at 50% 50%);
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall:hover {
-webkit-clip-path: circle(40% at 50% 50%);
clip-path: circle(40% at 50% 50%);
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBall1 {
width: 244px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoName p {
font-size: 14px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall2 {
left: -1%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall3 {
left: -10%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall4 {
top: 39%;
left: 11%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt1 {
opacity: 1;
transition: all 0.5s ease;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall:hover .ind02RgBallBg .ind02RgBallTxt1 {
opacity: 0;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt2 {
display: flex;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle {
padding-bottom: 22px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 span {
font-size: 20px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt2 p {
font-size: 12px;
}
}
@media (max-width: 992px) {
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title h2 span {
font-size: 28px;
line-height: 38px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBall1 {
top: 21%;
width: 250px;
height: 250px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title .section {
font-size: 28px;
line-height: 38px;
}
.ind02 .ind02Sack .ind02Loca .ind02RgBo {
position: absolute;
right: 0;
bottom: 70px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt2 {
display: none;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack:hover ul .ind02RgBall .ind02RgBallBg .ind02RgBallTxt1 {
opacity: 1;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBg img {
max-width: 70%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall2 {
left: 27%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall3 {
left: 22%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall4 {
top: 53%;
left: 43%;
}
}
@media (max-width: 770px) {
.ind02 .ind02Sack .ind02Loca .ind02RgBo {
display: none;
}
}
@media (max-width: 768px) {
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02SmTitle h2 span {
font-size: 18px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title h2 span {
font-size: 24px;
line-height: 32px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title .section {
font-size: 24px;
line-height: 32px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf03 h2 span {
font-size: 14px;
padding: 6px 14px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall {
width: 162px;
height: 193px;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall4 {
top: 72%;
left: 36%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack ul .ind02RgBall.ind02RgBall3 {
top: 66%;
left: 11%;
}
.ind02 .ind02Sack .ind02Loca .ind02Rg .ind02RgSack .ind02RgBall1 {
width: 224px;
height: 224px;
}
}
@media (max-width: 499px) {
.ind02 .ind02Sack {
padding-top: 40px;
padding-bottom: 60px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf04 p {
display: none;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf04 .ppp1 {
display: block;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title h2 span {
font-size: 20px;
line-height: 26px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Title .section {
font-size: 20px;
line-height: 26px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf03 {
padding-top: 20px;
padding-bottom: 0px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf03 h2 span {
margin: 0;
padding: 4px 6px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf04 {
padding-right: 0;
padding-top: 20px;
padding-bottom: 50px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf04 p {
font-size: 14px;
line-height: 26px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 .ind02Lf05Math {
padding-bottom: 34px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 .ind02Lf05Math:last-child {
padding-bottom: 56px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf05 .ind02Lf05Math .ind02Lf05SmTi p {
font-size: 14px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoBox .ind02LfIcoi {
width: 40px;
height: 40px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoBoxBg {
margin-right: 18px;
}
.ind02 .ind02Sack .ind02Loca .ind02Lf .ind02Lf06 a .ind02LfIcoSack .ind02LfIcoName p {
font-size: 14px;
}
.ind02 .ind02Sack .ind02Loca .ind02RgBo {
display: none;
}
.ind02 .dot3 {
display: none;
}
.ind02 .dot4 {
display: none;
}
.ind02 .dot5 {
display: none;
}
.ind02 .dot6 {
display: none;
}
.ind02 .dot14 {
display: none;
}
.ind02 .dot16 {
display: none;
}
}
.ind03 {
position: relative;
z-index: 2;
background: url(../images/ind03bigbg.jpg) no-repeat;
background-size: cover;
background-position: center center;
}
.ind03 .ind03Bg {
position: absolute;
width: 46%;
height: 100%;
left: 0;
top: 0;
z-index: 2;
}
.ind03 .ind03Bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.ind03 .ind03Sack {
margin: auto;
position: relative;
z-index: 4;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf {
width: 45%;
padding-top: 132px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle {
padding-bottom: 38px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 {
display: flex;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 span {
font-size: 26px;
font-weight: bold;
color: #FFFFFF;
opacity: 0;
transition: cubic-bezier(0.215, .61, .355, 1) 1s;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 span:nth-child(1) {
transition: cubic-bezier(0.215, .61, .355, 1) .4s;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 span:nth-child(2) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) .6s;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 span:nth-child(3) {
transition: cubic-bezier(0.215, .61, .355, 1) .8s;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 span:nth-child(4) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1s;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 span:nth-child(5) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1.2s;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 span:nth-child(6) {
transition: cubic-bezier(0.215, .61, .355, 1) 1.4s;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 span.animated {
opacity: 1;
background: none;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title h2 {
display: flex;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title h2 span {
font-size: 44px;
font-weight: 500;
line-height: 60px;
color: #FFFFFF;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title {
position: relative;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title .section1 {
font-size: 44px;
font-weight: 500;
line-height: 60px;
color: #9c9c9c;
position: relative;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title .section1 .section11 {
position: absolute;
left: 0;
top: 0;
display: flex;
width: 0;
overflow: hidden;
color: #FFFFFF;
white-space: nowrap;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title.active .section1 .section11 {
width: 100%;
transition: width 3s ease;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco {
display: flex;
position: relative;
z-index: 3;
padding-top: 110px;
padding-bottom: 370px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack {
display: flex;
align-items: center;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoBoxBg {
position: relative;
margin-right: 26px;
transition: all 0.5s ease;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a:hover .ind03BtIcoSack .ind03BtIcoBoxBg {
transform: translate(5px);
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoBoxBg::after {
position: absolute;
background: #E01E245d;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
animation: scale1 1s alternate infinite;
border-radius: 50%;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoBox {
display: flex;
position: relative;
background: #E01E24;
border-radius: 50%;
overflow: hidden;
z-index: 10;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoBox .ind03BtIcoi {
overflow: hidden;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoBox .ind03BtIcoi1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(-120%);
transition: all 0.5s ease;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a:hover .ind03BtIcoSack .ind03BtIcoBox .ind03BtIcoi1 {
transform: translateX(0%);
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoBox .ind03BtIcoi2 {
transition: all 0.5s ease;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a:hover .ind03BtIcoSack .ind03BtIcoBox .ind03BtIcoi2 {
transform: translateX(120%);
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoBox .ind03BtIcoi i {
font-size: 24px;
color: #FFFFFF;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoName {
transition: all 0.5s ease;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a:hover .ind03BtIcoSack .ind03BtIcoName {
transform: translateX(-5px);
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoName p {
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
transition: all 0.5s ease;
}
/* .ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a:hover .ind03BtIcoSack .ind03BtIcoName p {
color: #E01E24;
} */
.ind03 .ind03Sack .ind03Loca .ind03Rg {
width: 55%;
margin: auto;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack {
transform: translateX(-18px);
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl {
margin: auto;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi {
padding: 0;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack {
padding: 36px 14px 52px;
position: relative;
z-index: 2;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack::after {
position: absolute;
content: "";
width: 100%;
height: 4px;
background: #015EFB;
left: 0;
bottom: 0;
transition: all 0.5s ease;
z-index: -1;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack:hover:after {
height: 100%;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi:nth-child(2) .ind03LiSack::after {
background: #E4742B;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi:nth-child(3) .ind03LiSack::after {
background: #E01E24;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi:nth-child(4) .ind03LiSack::after {
background: #00D2CC;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi:nth-child(1) .ind03LiSack {
background: #232323;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi:nth-child(2) .ind03LiSack {
background: #292929;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi:nth-child(3) .ind03LiSack {
background: #292929;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi:nth-child(4) .ind03LiSack {
background: #232323;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiIcoBox {
position: relative;
margin-bottom: 24px;
overflow: hidden;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiIcoBox .ind03LiIco {
display: flex;
justify-content: center;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiIcoBox .ind03LiIco1 {
transition: all 0.5s ease;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack:hover .ind03LiIcoBox .ind03LiIco1 {
transform: translateY(-120%);
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiIcoBox .ind03LiIco2 {
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: 0;
transform: translateY(120%);
transition: all 0.5s ease;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack:hover .ind03LiIcoBox .ind03LiIco2 {
transform: translateY(0);
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiIcoBox .ind03LiIco img {
max-width: 100%;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiTit {
padding-bottom: 40px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiTit h2 {
font-size: 30px;
font-weight: 500;
background-image: linear-gradient(180deg, #E48826 0%, #E01E24 100%);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-color: transparent;
text-align: center;
transition: all 0.5s ease;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack:hover .ind03LiTit h2 {
color: #FFFFFF;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03Keyword {
margin-right: calc(-.5* 0.5rem);
margin-left: calc(-.5* 0.5rem);
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03Keyword .ind03KeywordName {
padding-right: calc(0.3rem* .5);
padding-left: calc(0.3rem* .5);
margin-bottom: 10px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03Keyword .ind03KeywordName a {
display: block;
background: #2E2E2E;
border-radius: 5px;
padding: 6px 8px;
transition: all 0.5s ease;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack:hover .ind03Keyword .ind03KeywordName a {
background: #F7F7F7;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03Keyword .ind03KeywordName a p {
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
text-align: center;
transition: all 0.5s ease;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack:hover .ind03Keyword .ind03KeywordName a p {
color: #5E5E5E;
}
.ind03 .ind03Arrrow {
position: absolute;
left: 0;
bottom: 0;
z-index: 3;
}
.ind03 .ind03Arrrow img {
max-width: 100%;
}
@media (max-width: 1730px) {
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03Keyword .ind03KeywordName a p {
font-size: 14px;
}
}
@media (max-width: 1650px) {
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title .section1 {
font-size: 42px;
}
}
@media (max-width: 1640px) {
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack {
transform: translateX(-8px);
}
}
@media (max-width: 1600px) {
.ind03 .ind03Bg {
width: 48%;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf {
width: 40%;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title h2 span {
font-size: 36px;
line-height: 48px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title .section1 {
font-size: 34px;
line-height: 48px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg {
width: 60%;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack {
transform: translateX(0px);
}
}
@media (max-width: 1500px) {
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 span {
font-size: 24px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title h2 span {
font-size: 32px;
line-height: 41px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title .section1 {
font-size: 30px;
line-height: 41px;
}
}
@media (max-width: 1470px) {
.ind03 .ind03Sack .ind03Loca .ind03Lf {
width: 38%;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title h2 span {
font-size: 32px;
line-height: 41px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title1 .section {
font-size: 32px;
line-height: 41px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg {
width: 62%;
}
}
@media (max-width: 1400px) {
.ind03 {
background: url(../images/bbbaaa.jpg) no-repeat;
background-size: cover;
background-position: center center;
}
.ind03 .ind03Bg {
width: 0%;
}
.ind03 .ind03Sack {
padding-bottom: 100px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf {
width: 100%;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco {
padding-top: 58px;
padding-bottom: 58px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg {
width: 100%;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack {
padding: 52px 14px 64px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiTit {
padding-bottom: 52px;
}
.ind03 .ind03Arrrow {
display: none;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.ind03 .ind03Bg {
width: 46%;
}
.ind03 .ind03Sack {
padding-top: 80px;
padding-bottom: 74px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf {
width: 40%;
padding-top: 80px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title .section1 {
font-size: 26px;
line-height: 36px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg {
width: 60%;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoName p {
font-size: 14px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle {
padding-bottom: 22px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 span {
font-size: 20px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiIcoBox .ind03LiIco img {
max-width: 22%;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack {
padding: 24px 14px 30px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiTit {
padding-bottom: 30px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiTit h2 {
font-size: 24px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03Keyword .ind03KeywordName {
margin-bottom: 7px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03Keyword .ind03KeywordName a {
padding: 6px 4px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03Keyword .ind03KeywordName a p {
font-size: 12px;
}
.ind03 .ind03Arrrow {
display: block;
}
.ind03 .ind03Arrrow img {
max-width: 54%;
}
}
@media (max-width: 992px) {
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title h2 span {
font-size: 28px;
line-height: 38px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title .section1 {
font-size: 28px;
line-height: 38px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack {
padding: 42px 14px 50px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiTit {
padding-bottom: 32px;
}
}
@media (max-width: 858px) {
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi {
width: 100%;
}
}
@media (max-width: 768px) {
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle h2 span {
font-size: 18px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title h2 span {
font-size: 24px;
line-height: 32px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title .section1 {
font-size: 24px;
line-height: 32px;
}
}
@media (max-width: 499px) {
.ind03 .ind03Sack {
padding-bottom: 48px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf {
padding-top: 48px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03SmTitle {
padding-bottom: 24px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title h2 span {
font-size: 20px;
line-height: 26px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03Title .section1 {
font-size: 22px;
line-height: 26px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco {
padding-top: 40px;
padding-bottom: 52px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoBoxBg {
margin-right: 18px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoBox .ind03BtIcoi {
width: 40px;
height: 40px;
}
.ind03 .ind03Sack .ind03Loca .ind03Lf .ind03BtIco a .ind03BtIcoSack .ind03BtIcoName p {
font-size: 14px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack {
padding: 22px 8px 24px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiIcoBox {
margin-bottom: 12px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiIcoBox .ind03LiIco img {
max-width: 20%;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiTit {
padding-bottom: 26px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03LiTit h2 {
font-size: 20px;
}
.ind03 .ind03Sack .ind03Loca .ind03Rg .ind03RgSack .ind03RgUl .ind03RgLi .ind03LiSack .ind03Keyword .ind03KeywordName a {
padding: 6px 0px;
}
}
.ind04 {
position: relative;
z-index: 2;
background-image: url(../images/ind04bg.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
overflow: hidden;
background-attachment: fixed;
}
.ind04 .ind04Sack {
margin: auto;
padding-top: 120px;
padding-bottom: 178px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle {
padding-bottom: 36px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 {
display: flex;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 span {
font-size: 26px;
font-weight: bold;
color: #FFFFFF;
opacity: 0;
transition: cubic-bezier(0.215, .61, .355, 1) 1s;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 span:nth-child(1) {
transition: cubic-bezier(0.215, .61, .355, 1) .4s;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 span:nth-child(2) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) .6s;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 span:nth-child(3) {
transition: cubic-bezier(0.215, .61, .355, 1) .8s;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 span:nth-child(4) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1s;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 span:nth-child(5) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1.2s;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 span:nth-child(6) {
transition: cubic-bezier(0.215, .61, .355, 1) 1.4s;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 span.animated {
opacity: 1;
background: none;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title {
position: relative;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title h2 {
display: flex;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title h2 span {
font-size: 44px;
font-weight: 500;
color: #FFFFFF;
line-height: 60px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title .section2 {
font-size: 44px;
font-weight: 500;
color: #9c9c9c;
line-height: 60px;
position: relative;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title .section2 .section22 {
position: absolute;
left: 0;
top: 0;
display: flex;
width: 0;
overflow: hidden;
color: #FFFFFF;
white-space: nowrap;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title.active .section2 .section22 {
width: 100%;
transition: width 3s ease;
}
#ind04Sw {
position: relative;
overflow: hidden;
padding-top: 178px;
}
#ind04Sw>.swiper-wrapper {
align-items: flex-end;
}
#ind04Sw>.swiper-wrapper .swiper-slide {
position: relative;
}
#ind04Sw>.swiper-wrapper .swiper-slide::after {
content: "";
position: absolute;
width: 68px;
height: 30px;
left: 128%;
bottom: 132px;
transform: translate(-50%, -50%);
background-image: url(../images/ind04jiantou.png);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
#ind04Sw>.swiper-wrapper .swiper-slide:last-child:after {
background: none;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwTop {
position: absolute;
width: 100%;
top: -28%;
left: 0;
opacity: 0;
transition: all 0.5s ease;
}
#ind04Sw>.swiper-wrapper .swiper-slide a {
display: block;
}
#ind04Sw>.swiper-wrapper .swiper-slide.active a .ind04SwTop {
top: -55%;
opacity: 1;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwTop .ind04SwTopName {
background: #E01E24;
border-radius: 125px 125px 0px 0px;
padding: 50px 0 62px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwTop .ind04SwTopName p {
font-size: 24px;
font-weight: normal;
color: #FFFFFF;
text-align: center;
transform: scale(0);
transition: all 0.8s ease;
}
#ind04Sw>.swiper-wrapper .swiper-slide.active .ind04SwTop .ind04SwTopName p {
transform: scale(1);
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm {
position: relative;
bottom: 0;
background: #ffffffcc;
border-radius: 20px 20px 125px 125px;
padding-top: 22px;
transition: all 0.5s ease;
}
#ind04Sw>.swiper-wrapper .swiper-slide.active a .ind04SwBtm {
background: #ffffff;
padding-top: 0;
border-radius: 40px 40px 125px 125px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 {
transition: all 0.5s ease;
}
#ind04Sw>.swiper-wrapper .swiper-slide.active a .ind04SwBtm .ind04SwBtm1 {
opacity: 0;
transform: scale(0);
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmIco {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmIco .ind04SwBtmIcoImg {
animation: rotation 4s linear infinite;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmIco .ind04SwBtmIcoImg img {
max-width: 100%;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmIco p {
font-family: D-DIN;
font-size: 40px;
line-height: 40px;
font-weight: bold;
text-shadow: 0px 0px 10px #600101;
color: #FFFFFF;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmIco .ind04SwBtmIcoNmae {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmTitle {
padding-bottom: 60px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmTitle p {
font-size: 24px;
font-weight: normal;
color: #1A1A1A;
text-align: center;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm2 {
position: absolute;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
width: 100%;
}
#ind04Sw>.swiper-wrapper .swiper-slide a .ind04SwBtm .ind04SwBtm2 .ind04SwBtm2Text {
transform: translateY(40px);
opacity: 0;
transition: all 0.5s ease;
}
#ind04Sw>.swiper-wrapper .swiper-slide.active a .ind04SwBtm .ind04SwBtm2 .ind04SwBtm2Text {
transform: translateY(0px);
opacity: 0.9;
transition: all 0.5s ease;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm2 .ind04SwBtm2Text p {
font-size: 18px;
font-weight: normal;
color: #1A1A1A;
text-align: center;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm2 .ind04SwBtm2Text p span {
color: #E01E24;
}
#ind04Sw .swiper-pagination {
display: none;
}
@media (max-width: 1700px) {
#ind04Sw>.swiper-wrapper .swiper-slide::after {
left: 16vw;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmTitle {
padding-bottom: 48px;
}
}
@media (max-width: 1536px) {
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 span {
font-size: 24px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title h2 span {
font-size: 36px;
line-height: 48px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title .section2 {
font-size: 36px;
line-height: 48px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmTitle {
padding-bottom: 44px;
}
}
@media (max-width: 1400px) {
#ind04Sw>.swiper-wrapper .swiper-slide::after {
bottom: 106px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmIco {
margin-bottom: 12px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmTitle {
padding-bottom: 34px;
}
}
@media (max-width: 1400px) {
#ind04Sw>.swiper-wrapper .swiper-slide::after {
display: none;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmTitle {
padding-bottom: 52px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmIco {
margin-bottom: 22px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.ind04 .ind04Sack {
padding-top: 86px;
padding-bottom: 66px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmIco {
margin-bottom: 6px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title .section2 {
font-size: 28px;
line-height: 36px;
}
#ind04Sw {
padding-top: 140px;
}
#ind04Sw>.swiper-wrapper .swiper-slide::after {
display: block;
width: 42px;
left: 16.8vw;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwTop .ind04SwTopName {
padding: 33px 0 62px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwTop .ind04SwTopName p {
font-size: 20px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmTitle {
padding-bottom: 28px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmTitle p {
font-size: 20px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm2 .ind04SwBtm2Text p {
font-size: 14px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle {
padding-bottom: 22px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 span {
font-size: 20px;
}
#ind04Sw>.swiper-wrapper .swiper-slide::after {
bottom: 87px;
}
}
@media (max-width: 1300px) {
#ind04Sw {
padding-bottom: 48px;
}
#ind04Sw .swiper-pagination {
display: block;
}
#ind04Sw .swiper-pagination .swiper-pagination-bullet {
opacity: 0.8;
background: rgb(255, 255, 255);
}
#ind04Sw .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
background: rgba(224, 30, 36);
}
}
@media (max-width: 992px) {
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title h2 span {
font-size: 28px;
line-height: 38px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title .section2 {
font-size: 28px;
line-height: 38px;
}
}
@media (max-width: 768px) {
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle h2 span {
font-size: 18px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title h2 span {
font-size: 24px;
line-height: 32px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title .section2 {
font-size: 24px;
line-height: 32px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwTop .ind04SwTopName p {
font-size: 20px;
}
}
@media (max-width: 499px) {
.ind04 {
background-attachment: local;
}
.ind04 .ind04Sack {
padding-top: 54px;
padding-bottom: 40px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title h2 span {
font-size: 20px;
line-height: 26px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04Title .section2 {
font-size: 22px;
line-height: 26px;
}
.ind04 .ind04Sack .ind04Top .ind04TopSack .ind04SmTitle {
padding-bottom: 22px;
}
#ind04Sw {
padding-top: 118px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmTitle p {
font-size: 18px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwTop .ind04SwTopName {
padding: 35px 0 62px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwTop .ind04SwTopName p {
font-size: 18px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmTitle {
padding-bottom: 28px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm2 .ind04SwBtm2Text p {
font-size: 16px;
}
#ind04Sw>.swiper-wrapper .swiper-slide .ind04SwBtm .ind04SwBtm1 .ind04SwBtmIco {
margin-bottom: 10px;
}
}
.ind05 {
position: relative;
z-index: 3;
background-color: #F7F7F7;
overflow: hidden;
}
.ind05 .ind05Sack {
margin: auto;
padding-top: 150px;
padding-bottom: 142px;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle {
padding-top: 12px;
padding-bottom: 34px;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 {
display: flex;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 span {
font-size: 26px;
font-weight: bold;
color: #E01E24;
opacity: 0;
transition: cubic-bezier(0.215, .61, .355, 1) 1s;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 span:nth-child(1) {
transition: cubic-bezier(0.215, .61, .355, 1) .4s;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 span:nth-child(2) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) .6s;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 span:nth-child(3) {
transition: cubic-bezier(0.215, .61, .355, 1) .8s;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 span:nth-child(4) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1s;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 span:nth-child(5) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1.2s;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 span:nth-child(6) {
transition: cubic-bezier(0.215, .61, .355, 1) 1.4s;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 span.animated {
opacity: 1;
background: none;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title {
position: relative;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title h2 {
display: flex;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title h2 span {
font-size: 44px;
font-weight: 500;
color: #1A1A1A;
line-height: 60px;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title .section3 {
font-size: 44px;
font-weight: 500;
color: #9c9c9c;
line-height: 60px;
position: relative;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title .section3 .section33 {
position: absolute;
left: 0;
top: 0;
display: flex;
width: 0;
overflow: hidden;
color: #1A1A1A;
white-space: nowrap;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title.active .section3 .section33 {
width: 100%;
transition: width 3s ease;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl {
margin: 0;
border-top: 1px solid #F3F3F3;
border-left: 1px solid #F3F3F3;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList {
width: 20%;
padding: 0;
border-bottom: 1px solid #F3F3F3;
border-right: 1px solid #F3F3F3;
position: relative;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList::before {
content: '';
position: absolute;
bottom: 0%;
right: 0%;
z-index: 12;
width: 0%;
height: 1px;
background-color: rgb(255, 0, 0);
-webkit-transition: all 0.8s ease 0s;
-moz-transition: all 0.8s ease 0s;
-ms-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
transition: all 0.8s ease 0s;
opacity: 0;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList:hover:before {
width: 100%;
opacity: 1;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList::after {
content: '';
position: absolute;
bottom: 0%;
left: 0%;
z-index: 12;
width: 1px;
height: 0%;
background-color: rgb(255, 0, 0);
-webkit-transition: all 0.8s ease 0s;
-moz-transition: all 0.8s ease 0s;
-ms-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
transition: all 0.8s ease 0s;
opacity: 0;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList:hover:after {
height: 100%;
opacity: 1;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList .ind05RgListSack {
position: relative;
overflow: hidden;
background-color: #FFFFFF;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList .ind05RgListSack::before {
content: '';
position: absolute;
top: 0%;
left: 0%;
width: 0%;
height: 1px;
background-color: #ff0000;
-webkit-transition: all 0.8s ease 0s;
-moz-transition: all 0.8s ease 0s;
-ms-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
transition: all 0.8s ease 0s;
opacity: 0;
z-index: 12;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList:hover .ind05RgListSack::before {
width: 100%;
opacity: 1;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList .ind05RgListSack::after {
content: '';
position: absolute;
top: 0%;
right: 0%;
z-index: 12;
width: 1px;
height: 0%;
background-color: #ff0000;
-webkit-transition: all 0.8s ease 0s;
-moz-transition: all 0.8s ease 0s;
-ms-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
transition: all 0.8s ease 0s;
opacity: 0;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList:hover .ind05RgListSack::after {
height: 100%;
opacity: 1;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList .ind05RgListSack img {
width: 100%;
transition: all 0.8s ease;
image-rendering: auto;
transform: scale(1.1);
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList:hover .ind05RgListSack img {
transform: scale(1.2);
}
.ind05 .ind05bgImg1 {
position: absolute;
top: 40%;
left: 18%;
transform: translate(-50%, -50%);
z-index: -1;
}
.ind05 .ind05bgImg1 .ind05bgImgSa {
position: relative;
}
.ind05 .ind05bgImg1 .ind05bgImgSa .ind05bgImgLo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ind05 .ind05bgImg2 {
position: absolute;
top: 52%;
left: 16%;
transform: translate(-50%, -50%);
z-index: -1;
}
.ind05 .ind05bgImg2 .ind05bgImgSa {
position: relative;
animation: rotation 40s linear infinite;
}
.ind05 .ind05bgImg2 .ind05bgImgSa .ind05bgImgLo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (max-width: 1536px) {
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 span {
font-size: 24px;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title h2 span {
font-size: 36px;
line-height: 48px;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title .section3 {
font-size: 36px;
line-height: 48px;
}
}
@media (max-width: 1400px) {
.ind05 .ind05Sack .ind05Loca .ind05Lf {
padding-bottom: 40px;
}
.ind05 .ind05bgImg1 .ind05bgImgSa {
animation: rotation 100s linear infinite;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.ind05 .ind05Sack .ind05Loca .ind05Lf {
padding-bottom: 0;
width: 38%;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title .section3 {
font-size: 28px;
line-height: 36px;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg {
width: 62%;
}
.ind05 .ind05bgImg1 .ind05bgImgSa {
animation: none;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle {
padding-bottom: 22px;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 span {
font-size: 20px;
}
.ind05 .ind05Sack {
margin: auto;
padding-top: 78px;
padding-bottom: 86px;
}
}
@media (max-width: 992px) {
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title h2 span {
font-size: 28px;
line-height: 38px;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title .section3 {
font-size: 28px;
line-height: 38px;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList {
width: 25%;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList:last-child {
display: none;
}
}
@media (max-width: 768px) {
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle h2 span {
font-size: 18px;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title h2 span {
font-size: 24px;
line-height: 32px;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title .section3 {
font-size: 24px;
line-height: 32px;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList {
width: 33.3333%;
}
.ind05 .ind05bgImg2 .ind05bgImgSa .ind05bgImgLo img {
width: 340px;
}
}
@media (max-width: 499px) {
.ind05 .ind05Sack {
padding-top: 46px;
padding-bottom: 60px;
}
.ind05 .ind05bgImg1 {
top: 44%;
left: 14%;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06SmallTitle {
padding-top: 0px;
padding-bottom: 16px;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title h2 span {
font-size: 20px;
line-height: 26px;
}
.ind05 .ind05Sack .ind05Loca .ind05Lf .ind06Title .section3 {
font-size: 24px;
line-height: 26px;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg .ind05RgUl .ind05RgList {
width: 33.333333%;
}
.ind05 .ind05bgImg2 .ind05bgImgSa .ind05bgImgLo {
opacity: 0;
}
}
.ind06 {
position: relative;
z-index: 1;
background-image: url(../images/ind06bg.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.ind06 .ind06Sack {
margin: auto;
padding-top: 120px;
padding-bottom: 120px;
z-index: 3;
position: relative;
}
.ind06 .ind06Sack .ind06SmallTitle {
padding-bottom: 32px;
}
.ind06 .ind06Sack .ind06SmallTitle h2 {
display: flex;
}
.ind06 .ind06Sack .ind06SmallTitle h2 span {
font-size: 26px;
font-weight: bold;
line-height: normal;
color: #FFFFFF;
opacity: 0;
transition: cubic-bezier(0.215, .61, .355, 1) 1s;
}
.ind06 .ind06Sack .ind06SmallTitle h2 span:nth-child(1) {
transition: cubic-bezier(0.215, .61, .355, 1) .4s;
}
.ind06 .ind06Sack .ind06SmallTitle h2 span:nth-child(2) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) .6s;
}
.ind06 .ind06Sack .ind06SmallTitle h2 span:nth-child(3) {
transition: cubic-bezier(0.215, .61, .355, 1) .8s;
}
.ind06 .ind06Sack .ind06SmallTitle h2 span:nth-child(4) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1s;
}
.ind06 .ind06Sack .ind06SmallTitle h2 span:nth-child(5) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1.2s;
}
.ind06 .ind06Sack .ind06SmallTitle h2 span:nth-child(6) {
transition: cubic-bezier(0.215, .61, .355, 1) 1.4s;
}
.ind06 .ind06Sack .ind06SmallTitle h2 span.animated {
opacity: 1;
background: none;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.ind06 .ind06Sack .ind06Title {
position: relative;
}
.ind06 .ind06Sack .ind06Title h2 {
display: flex;
}
.ind06 .ind06Sack .ind06Title h2 span {
font-size: 44px;
font-weight: 500;
line-height: 60px;
color: #FFFFFF;
}
.ind06 .ind06Sack .ind06Title .section4 {
font-size: 44px;
font-weight: 500;
line-height: 60px;
color: #9c9c9c;
position: relative;
}
.ind06 .ind06Sack .ind06Title .section4 .section44 {
position: absolute;
left: 0;
top: 0;
display: flex;
width: 0;
overflow: hidden;
color: #FFFFFF;
white-space: nowrap;
}
.ind06 .ind06Sack .ind06Title.active .section4 .section44 {
width: 100%;
transition: width 3s ease;
}
.ind06 .ind06UlSack {
margin: auto;
position: relative;
z-index: 3;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox {
margin-bottom: 22px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a {
position: relative;
display: block;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Img img {
width: 100%;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
transition: all 0.5s ease;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a:hover .ind06Text {
opacity: 1;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack {
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0 68px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiTitle {
padding-bottom: 14px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiTitle h2 {
font-size: 44px;
font-weight: normal;
color: #FFFFFF;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiSmTitle {
padding-bottom: 170px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiSmTitle h2 {
font-size: 28px;
font-weight: normal;
color: #FFFFFF;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord {
padding-bottom: 94px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord .ind06KeyWordName {
text-decoration: none;
display: inline-block;
vertical-align: top;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 30px;
padding: 6px 24px;
margin-right: 10px;
margin-bottom: 20px;
transition: all 0.5s ease;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord .ind06KeyWordName:hover {
border: 1px solid rgb(255, 255, 255);
background: #FFFFFF;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord .ind06KeyWordName p {
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
transition: all 0.5s ease;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord .ind06KeyWordName:hover p {
color: #333333;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiIco {
display: inline-block;
background: #FFFFFF;
border-radius: 50%;
padding: 16px 22px;
position: relative;
transform: translateX(16px);
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiIco::after {
position: absolute;
background: #ffffff5d;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
animation: scale1 1s alternate infinite;
border-radius: 50%;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiIco i {
color: rgba(197, 7, 13);
font-size: 24px;
font-weight: bold;
}
.ind06 .ind06Ico {
display: flex;
justify-content: center;
padding-top: 58px;
padding-bottom: 70px;
position: relative;
z-index: 3;
}
.ind06 .ind06Ico a .ind06IcoSack {
display: flex;
align-items: center;
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoBoxBg {
position: relative;
margin-right: 26px;
transition: all 0.5s ease;
}
.ind06 .ind06Ico a .ind06IcoSack:hover .ind06IcoBoxBg {
transform: translate(5px);
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoBoxBg::after {
position: absolute;
background: #E01E245d;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
animation: scale1 1s alternate infinite;
border-radius: 50%;
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoBox {
display: flex;
position: relative;
background: #E01E24;
border-radius: 50%;
overflow: hidden;
z-index: 10;
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoBox .ind06Icoi {
overflow: hidden;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoBox .ind06Icoi1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transform: translateX(-120%);
transition: all 0.5s ease;
}
.ind06 .ind06Ico a:hover .ind06IcoSack .ind06IcoBox .ind06Icoi1 {
transform: translateX(0%);
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoBox .ind06Icoi2 {
transition: all 0.5s ease;
}
.ind06 .ind06Ico a:hover .ind06IcoSack .ind06IcoBox .ind06Icoi2 {
transform: translateX(120%);
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoBox .ind06Icoi i {
font-size: 24px;
color: #FFFFFF;
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoName {
transition: all 0.5s ease;
}
.ind06 .ind06Ico a:hover .ind06IcoSack .ind06IcoName {
transform: translateX(-5px);
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoName p {
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
transition: all 0.5s ease;
}
/* .ind06 .ind06Ico a:hover .ind06IcoSack .ind06IcoName p {
color: #E01E24;
} */
.ind06 .ind06Ball {
position: fixed;
animation: xb1 6s linear infinite;
-webkit-animation: xb1 6s linear infinite;
z-index: -1;
}
.ind06 .ind06Ball1 {
top: 25%;
left: -34%;
animation: xb1 10s linear infinite;
-webkit-animation: xb1 10s linear infinite;
}
.ind06 .ind06Ball2 {
top: 12%;
left: 54%;
}
.ind06 .ind06Ball3 {
top: 0%;
left: 66%;
animation: xb1 12s linear infinite;
-webkit-animation: xb1 12s linear infinite;
}
.ind06 .ind06Ball4 {
top: 7%;
left: 16%;
}
.ind06 .ind06Ball5 {
top: 60%;
left: 46%;
}
.ind06 .ind06Ball6 {
top: 50%;
left: 66%;
display: none;
}
@media (max-width: 1536px) {
.ind06 .ind06Sack .ind06SmallTitle h2 span {
font-size: 24px;
}
.ind06 .ind06Sack .ind06Title h2 span {
font-size: 36px;
line-height: 48px;
}
.ind06 .ind06Sack .ind06Title .section4 {
font-size: 36px;
line-height: 48px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack {
padding: 0 40px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiTitle h2 {
font-size: 36px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiSmTitle {
padding-bottom: 90px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiSmTitle h2 {
font-size: 24px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord .ind06KeyWordName {
padding: 4px 20px;
margin-right: 4px;
margin-bottom: 12px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord .ind06KeyWordName p {
font-size: 16px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiIco {
padding: 8px 14px;
}
}
@media (max-width: 1400px) {
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiSmTitle {
padding-bottom: 28px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiIco {
padding: 4px 10px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord {
padding-bottom: 48px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiIco {
padding: 4px 10px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.ind06 .ind06Sack {
padding-bottom: 82px;
padding-top: 60px;
}
.ind06 .ind06Sack .ind06Title .section4 {
font-size: 28px;
line-height: 36px;
}
.ind06 .ind06Sack .ind06SmallTitle {
padding-bottom: 22px;
}
.ind06 .ind06Sack .ind06SmallTitle h2 span {
font-size: 20px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord .ind06KeyWordName p {
font-size: 14px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord .ind06KeyWordName {
padding: 2px 12px;
margin-right: 4px;
margin-bottom: 15px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiSmTitle {
padding-bottom: 100px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiTitle h2 {
font-size: 28px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiSmTitle h2 {
font-size: 18px;
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoName p {
font-size: 14px;
}
}
@media (max-width: 992px) {
.ind06 .ind06Sack .ind06Title h2 span {
font-size: 28px;
line-height: 38px;
}
.ind06 .ind06Sack .ind06Title .section4 {
font-size: 28px;
line-height: 38px;
}
.ind06 .ind06UlSack .ind06Ul {
margin-right: calc(-.5* 1rem);
margin-left: calc(-.5* 1rem);
}
.ind06 .ind06UlSack .ind06Ul .ind06List {
padding-right: calc(1rem* .5);
padding-left: calc(1rem* .5);
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox {
margin-bottom: 14px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack {
padding: 0 14px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiTitle {
padding-bottom: 0;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiTitle h2 {
font-size: 26px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiSmTitle h2 {
font-size: 14px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord {
display: none;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord .ind06KeyWordName {
padding: 4px 12px;
margin-right: 4px;
margin-bottom: 10px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06KeyWord .ind06KeyWordName p {
font-size: 14px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiIco {
transform: translateX(6px);
padding: 2px 8px;
}
}
@media (max-width: 768px) {
.ind06 .ind06Sack {
padding-bottom: 80px;
}
.ind06 .ind06Sack .ind06SmallTitle h2 span {
font-size: 18px;
}
.ind06 .ind06Sack .ind06Title h2 span {
font-size: 24px;
line-height: 32px;
}
.ind06 .ind06Sack .ind06Title .section4 {
font-size: 24px;
line-height: 32px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiTitle h2 {
font-size: 20px;
}
}
@media (max-width: 499px) {
.ind06 .ind06Ball1 {
top: 40%;
left: -72%;
}
.ind06 .ind06Ball2 {
top: 72%;
left: 66%;
display: none;
}
.ind06 .ind06Ball3 {
top: 8%;
}
.ind06 .ind06Ball4 {
top: 16%;
}
.ind06 .ind06Ball5 {
display: none;
}
.ind06 .ind06Ball img {
max-width: 100%;
}
.ind06 .ind06Ball1 img {
max-width: 80%;
}
.ind06 .ind06Sack .ind06Title h2 span {
font-size: 20px;
line-height: 26px;
}
.ind06 .ind06Sack .ind06Title .section4 {
font-size: 22px;
line-height: 26px;
}
.ind06 .ind06Ico {
padding-top: 34px;
padding-bottom: 56px;
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoBox .ind06Icoi {
width: 35px;
height: 35px;
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoBoxBg {
margin-right: 18px;
}
.ind06 .ind06Ico a .ind06IcoSack .ind06IcoName p {
font-size: 14px;
}
.ind06 .ind06Sack {
padding-top: 40px;
padding-bottom: 46px;
}
.ind06 .ind06Sack .ind06SmallTitle {
padding-bottom: 22px;
}
.ind06 .ind06UlSack .ind06Ul {
margin-right: calc(-.5* 0.5rem);
margin-left: calc(-.5* 0.5rem);
}
.ind06 .ind06UlSack .ind06Ul .ind06List {
padding-right: calc(0.5rem* .5);
padding-left: calc(0.5rem* .5);
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox {
margin-bottom: 8px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiSmTitle {
opacity: 0;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiSmTitle h2 {
font-size: 12px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiIco {
padding: 0px 4px;
transform: translateX(2px);
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiIco i {
font-size: 14px;
}
.ind06 .ind06UlSack .ind06Ul .ind06List .ind06BigBox a .ind06Text .ind06TextSack .ind06LiTitle h2 {
font-size: 14px;
}
}
.ind07 {
position: relative;
z-index: 1;
background: #F7F7F7;
padding-top: 100px;
padding-bottom: 80px;
}
.ind07Sp .ind07Sack {
margin: auto;
}
.ind07Sp .ind07Sack .ind07SmallTitle {
padding-bottom: 34px;
}
.ind07Sp .ind07Sack .ind07SmallTitle h2 {
display: flex;
}
.ind07Sp .ind07Sack .ind07SmallTitle h2 span {
opacity: 0;
transition: cubic-bezier(0.215, .61, .355, 1) 1s;
font-size: 26px;
font-weight: bold;
color: #E01E24;
}
.ind07Sp .ind07Sack .ind07SmallTitle h2 span:nth-child(1) {
transition: cubic-bezier(0.215, .61, .355, 1) .4s;
}
.ind07Sp .ind07Sack .ind07SmallTitle h2 span:nth-child(2) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) .6s;
}
.ind07Sp .ind07Sack .ind07SmallTitle h2 span:nth-child(3) {
transition: cubic-bezier(0.215, .61, .355, 1) .8s;
}
.ind07Sp .ind07Sack .ind07SmallTitle h2 span:nth-child(4) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1s;
}
.ind07Sp .ind07Sack .ind07SmallTitle h2 span:nth-child(5) {
background: rgb(255, 0, 0);
transition: cubic-bezier(0.215, .61, .355, 1) 1.2s;
}
.ind07Sp .ind07Sack .ind07SmallTitle h2 span:nth-child(6) {
transition: cubic-bezier(0.215, .61, .355, 1) 1.4s;
}
.ind07Sp .ind07Sack .ind07SmallTitle h2 span.animated {
opacity: 1;
background: none;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.ind07Sp .ind07Sack .ind07Title {
position: relative;
}
.ind07Sp .ind07Sack .ind07Title h2 {
display: flex;
}
.ind07Sp .ind07Sack .ind07Title h2 span {
font-size: 44px;
color: #1A1A1A;
font-weight: 500;
}
.ind07Sp .ind07Sack .ind07Title .section5 {
font-size: 44px;
line-height: 60px;
color: #9c9c9c;
font-weight: 500;
position: relative;
}
.ind07Sp .ind07Sack .ind07Title .section5 .section55 {
position: absolute;
left: 0;
top: 0;
display: flex;
width: 0;
overflow: hidden;
color: #1A1A1A;
white-space: nowrap;
}
.ind07Sp .ind07Sack .ind07Title.active .section5 .section55 {
width: 100%;
transition: width 3s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title1 {
transition: all 0.2s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title2 {
transition: all 0.4s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title3 {
transition: all 0.6s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title4 {
transition: all 0.8s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title5 {
transition: all 1s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title6 {
transition: all 1.2s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title7 {
transition: all 1.4s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title8 {
transition: all 1.6s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title9 {
transition: all 1.8s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title10 {
transition: all 2s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title11 {
transition: all 2.2s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title12 {
transition: all 2.4s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title13 {
transition: all 2.6s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title14 {
transition: all 2.8s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title15 {
transition: all 3s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title16 {
transition: all 3.2s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title17 {
transition: all 3.4s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title18 {
transition: all 3.6s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title19 {
transition: all 3.8s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title20 {
transition: all 4s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title21 {
transition: all 4.2s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title22 {
transition: all 4.4s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title23 {
transition: all 4.6s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title24 {
transition: all 4.8s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title25 {
transition: all 5s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title26 {
transition: all 5.2s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.ind07Title27 {
transition: all 5.4s ease;
}
.ind07Sp .ind07Sack .ind07Title h2 span.animated {
opacity: 1;
}
.ind07 .ind07Sw {
display: flex;
justify-content: end;
z-index: 99;
position: relative;
top: -50px;
}
#ind07Sw {
position: relative;
width: 95.8%;
overflow: hidden;
padding-top: 112px;
padding-bottom: 20px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
padding: 52px 40px 52px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack::before {
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
background-image: url(../images/ind07bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
transition: all 0.5s ease;
border-radius: 20px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack:hover:before {
opacity: 0;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack::after {
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
background-image: url(../images/ind0bga.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 2;
opacity: 0;
transition: all 0.5s ease;
border-radius: 20px;
}
#ind07Sw>.swiper-wrapper .swiper-slide:nth-child(odd) a .ind07SwSack::after {
background-image: url(../images/ind0bga1.jpg);
}
#ind07Sw>.swiper-wrapper .swiper-slide:nth-child(even) a .ind07SwSack::after {
background-image: url(../images/ind0bg2.png);
}
#ind07Sw>.swiper-wrapper .swiper-slide:nth-child(1) a .ind07SwSack::after {
background-image: url(../images/ind0bga.png);
}
#ind07Sw>.swiper-wrapper .swiper-slide:nth-child(2) a .ind07SwSack::after {
background-image: url(../images/ind0bg2.png);
}
#ind07Sw>.swiper-wrapper .swiper-slide:nth-child(3) a .ind07SwSack::after {
background-image: url(../images/ind0bg3.png);
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack:hover:after {
opacity: 1;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon {
position: relative;
z-index: 3;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP1 {
border: 1px solid #C8C8C8;
display: inline-block;
border-radius: 30px;
padding: 4px 14px;
margin-bottom: 32px;
position: relative;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack:hover .ind07SwCon .ind07SwP1 {
border: 1px solid #ffffff00;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP1::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(250deg, #E48826 -28%, #E48826 -28%, #E01E24 108%);
border-radius: 30px;
z-index: -1;
opacity: 0;
transition: all 0.5s ease;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack:hover .ind07SwCon .ind07SwP1::after {
opacity: 1;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP1 p {
font-size: 16px;
font-weight: normal;
color: #5E5E5E;
transition: all 0.5s ease;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack:hover .ind07SwCon .ind07SwP1 p {
color: #F7F7F7;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP2 {
padding-bottom: 40px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP2 p {
font-size: 24px;
height: calc(1em * 2 * 1.5);
min-height: calc(12px * 2 * 1.5);
font-weight: normal;
color: #1A1A1A;
line-height: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.5s ease;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack:hover .ind07SwCon .ind07SwP2 p {
color: #FFFFFF;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP3 {
padding-bottom: 100px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP3 p {
font-size: 16px;
height: calc(1em * 6 * 1.5);
min-height: calc(12px * 6 * 1.5);
font-weight: normal;
color: #5E5E5E;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.5s ease;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack:hover .ind07SwCon .ind07SwP3 p {
color: #FFFFFF;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwBtm {
display: flex;
justify-content: space-between;
align-items: center;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwBtm .ind07SwTime p {
font-family: D-DIN;
font-size: 24px;
font-weight: normal;
color: #1A1A1A;
transition: all 0.5s ease;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack:hover .ind07SwCon .ind07SwBtm .ind07SwTime p {
color: #FFFFFF;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwBtm .ind07SwMore {
display: flex;
align-items: center;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwBtm .ind07SwMore i {
font-size: 14px;
color: #FFFFFF;
background: #E01E24;
border-radius: 50%;
padding: 4px 8px;
margin-right: 14px;
transition: all 0.5s ease;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack:hover .ind07SwCon .ind07SwBtm .ind07SwMore i {
transform: translateX(5px);
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwBtm .ind07SwMore p {
font-size: 14px;
font-weight: normal;
color: #333333;
transition: all 0.5s ease;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack:hover .ind07SwCon .ind07SwBtm .ind07SwMore p {
color: #fff;
transform: translateX(-5px);
}
#ind07Sw>.ind07SwBtn {
position: absolute;
top: 0;
right: 0;
width: 100%;
}
#ind07Sw>.swiper-pagination {
display: none;
}
#ind07Sw>.ind07SwBtn .swiper-button-prev {
opacity: 1;
background: #FFFFFF;
border-radius: 50%;
width: 50px;
height: 50px;
left: auto;
right: calc(18rem* .5);
top: 22px;
cursor: pointer;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
#ind07Sw>.ind07SwBtn .swiper-button-prev:hover {
background: #E01E24;
transform: translateX(-5px);
}
#ind07Sw>.ind07SwBtn .swiper-button-prev::after {
content: "←";
font-weight: normal;
font-size: 24px;
color: #5E5E5E;
transition: all 0.5s ease;
}
#ind07Sw>.ind07SwBtn .swiper-button-prev:hover:after {
color: #FFFFFF;
}
#ind07Sw>.ind07SwBtn .swiper-button-next {
opacity: 1;
background: #FFFFFF;
border-radius: 50%;
width: 50px;
height: 50px;
left: auto;
right: calc(10rem* .5);
top: 22px;
cursor: pointer;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
#ind07Sw>.ind07SwBtn .swiper-button-next:hover {
background: #E01E24;
transform: translateX(5px);
}
#ind07Sw>.ind07SwBtn .swiper-button-next::after {
content: "→";
font-weight: normal;
font-size: 24px;
color: #5E5E5E;
transition: all 0.5s ease;
}
#ind07Sw>.ind07SwBtn .swiper-button-next:hover:after {
color: #FFFFFF;
}
@media (max-width: 1536px) {
.ind07Sp .ind07Sack .ind07Title .section5 {
font-size: 36px;
line-height: 48px;
}
.ind07Sp .ind07Sack .ind07SmallTitle h2 span {
font-size: 24px;
}
.ind07Sp .ind07Sack .ind07Title h2 span {
font-size: 36px;
line-height: 48px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.ind07 {
padding-top: 70px;
padding-bottom: 30px;
}
.ind07Sp .ind07Sack .ind07Title .section5 {
font-size: 28px;
line-height: 36px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack {
padding: 36px 20px 36px;
}
#ind07Sw>.ind07SwBtn .swiper-button-prev {
width: 38px;
height: 38px;
right: calc(16.5rem* .5);
}
#ind07Sw>.ind07SwBtn .swiper-button-next {
width: 38px;
height: 38px;
}
.ind07Sp .ind07Sack .ind07SmallTitle {
padding-bottom: 22px;
}
.ind07Sp .ind07Sack .ind07SmallTitle h2 span {
font-size: 20px;
}
#ind07Sw {
padding-top: 94px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP1 {
padding: 2px 12px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP1 p {
font-size: 14px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP2 p {
font-size: 20px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP3 p {
font-size: 14px;
-webkit-line-clamp: 4;
height: calc(1em* 4* 1.5);
min-height: calc(12px* 4* 1.5);
justify-content: space-between;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwBtm .ind07SwTime p {
font-size: 20px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP3 {
padding-bottom: 78px;
}
}
@media (max-width: 1199px) {
.ind07 .ind07Sw {
top: 0;
}
#ind07Sw {
padding-top: 60px;
padding-bottom: 50px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack {
padding: 44px 26px 44px;
}
#ind07Sw>.swiper-pagination {
display: block;
}
#ind07Sw>.swiper-pagination .swiper-pagination-bullet-active {
background: rgba(224, 30, 36);
}
#ind07Sw>.ind07SwBtn {
display: none;
}
}
@media (max-width: 992px) {
.ind07Sp .ind07Sack .ind07Title h2 span {
font-size: 28px;
line-height: 38px;
}
.ind07Sp .ind07Sack .ind07Title .section5 {
font-size: 28px;
line-height: 38px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack {
padding: 30px 20px 36px;
}
}
@media (max-width: 800px) {
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack {
padding: 22px 14px 28px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP1 {
margin-bottom: 8px;
padding: 2px 12px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP2 {
padding-bottom: 22px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP3 {
padding-bottom: 80px;
}
}
@media (max-width: 768px) {
.ind07Sp .ind07Sack .ind07SmallTitle h2 span {
font-size: 18px;
}
.ind07Sp .ind07Sack .ind07Title h2 span {
font-size: 24px;
line-height: 32px;
}
.ind07Sp .ind07Sack .ind07Title .section5 {
font-size: 24px;
line-height: 32px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP2 p {
font-size: 18px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP3 p {
font-size: 14px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwBtm .ind07SwTime p {
font-size: 18px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwBtm .ind07SwMore i {
margin-right: 10px;
}
}
@media (max-width: 499px) {
.ind07Sp .ind07Sack .ind07SmallTitle {
padding-bottom: 16px;
}
.ind07Sp .ind07Sack .ind07Title h2 span {
font-size: 20px;
line-height: 26px;
}
.ind07Sp .ind07Sack .ind07Title .section5 {
font-size: 22px;
line-height: 26px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP2 {
padding-bottom: 40px;
}
#ind07Sw>.swiper-wrapper .swiper-slide a .ind07SwSack .ind07SwCon .ind07SwP1 {
margin-bottom: 16px;
}
.ind07 {
padding-top: 44px;
padding-bottom: 42px;
}
#ind07Sw {
padding-top: 40px;
padding-bottom: 50px;
}
}
.ind08 {
position: relative;
z-index: 1;
background: url(../images/ind08bg.jpg) no-repeat;
background-size: cover;
background-position: center center;
}
.ind08 .ind08Sack {
margin: auto;
padding-top: 94px;
padding-bottom: 94px;
}
.ind08 .ind08Sack .ind08SmalTitle {
padding-bottom: 14px;
position: relative;
}
.ind08 .ind08Sack .ind08SmalTitle h2 {
font-size: 30px;
color: #9c9c9c;
font-weight: 500;
}
.ind08 .ind08Sack .ind08SmalTitle.active>h2 {
transition: all .1s 2s linear;
opacity: 0;
}
.ind08 .ind08Sack .ind08SmalTitle .ind08Sm {
position: absolute;
left: 0;
top: 0;
display: flex;
}
.ind08 .ind08Sack .ind08SmalTitle .ind08Sm h2 {
width: 0;
overflow: hidden;
color: #FFFFFF;
white-space: nowrap;
}
.ind08 .ind08Sack .ind08SmalTitle.active .ind08Sm h2 {
width: 100%;
transition: width 1.8s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ind08 .ind08Sack .ind08Title {
padding-bottom: 38px;
position: relative;
}
.ind08 .ind08Sack .ind08TitleSePh {
display: none;
}
.ind08 .ind08Sack .ind08Title h2 {
font-size: 44px;
font-weight: 500;
color: #9c9c9c;
}
.ind08 .ind08Sack .ind08Title.active>h2 {
transition: all .1s 2s linear;
opacity: 0;
}
.ind08 .ind08Sack .ind08Title .ind08Sm {
position: absolute;
left: 0;
top: 0;
display: flex;
}
.ind08 .ind08Sack .ind08Title .ind08Sm h2 {
width: 0;
overflow: hidden;
color: #FFFFFF;
white-space: nowrap;
}
.ind08 .ind08Sack .ind08Title.active .ind08Sm h2 {
width: 100%;
transition: width 1.8s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ind08 .ind08Sack form .formSack {
display: flex;
}
.ind08 .ind08Sack form .formSack .formInputSack {
display: flex;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput {
margin-right: 10px;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input {
font-size: 16px;
font-weight: normal;
color: #888888;
font-family: Microsoft YaHei;
width: 260px;
border: 1px solid #FFFFFF;
background: #FFFFFF;
padding: 14px 16px;
border-radius: 6px;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input.active {
color: #E01E24;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input:-webkit-autofill,
.ind08 .ind08Sack form .formSack .formInputSack .formInput input:-webkit-autofill:hover,
.ind08 .ind08Sack form .formSack .formInputSack .formInput input:-webkit-autofill:focus {
border: 1px solid #FFFFFF;
-webkit-text-fill-color: #333333;
-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset;
transition: background-color 5000s ease-in-out 0s;
background: none;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input::-webkit-input-placeholder {
color: #999999;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input:-moz-placeholder {
color: #999999;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input::-moz-placeholder {
color: #999999;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input:-ms-input-placeholder {
color: #999999;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input.active::-webkit-input-placeholder {
color: #E01E24;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input.active:-moz-placeholder {
color: #E01E24;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input.active::-moz-placeholder {
color: #E01E24;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input.active:-ms-input-placeholder {
color: #E01E24;
}
.ind08 .ind08Sack form .formSack .formBtnSack button {
font-size: 20px;
font-weight: 500;
color: #FFFFFF;
background: #E01E24;
padding: 12px 58px;
border-radius: 5px;
margin: 0 18px 0 4px;
transition: all 0.5s ease;
}
.ind08 .ind08Sack form .formSack .formBtnSack button:hover {
border-radius: 30px 0px 30px 0px;
transform: translateY(-8px);
}
.ind08 .ind08Sack form .formSack .formBtnSack a {
font-size: 20px;
font-weight: 500;
color: #FFFFFF;
background: #E01E24;
padding: 12px 58px;
display: inline-block;
border-radius: 5px;
transition: all 0.5s ease;
}
.ind08 .ind08Sack form .formSack .formBtnSack a:hover {
border-radius: 30px 0px 30px 0px;
transform: translateY(-8px);
}
@media (max-width: 1536px) {
.ind08 .ind08Sack .ind08SmalTitle h2 {
font-size: 24px;
}
.ind08 .ind08Sack .ind08Title h2 {
font-size: 36px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.ind08 .ind08Sack {
width: 75%;
padding-top: 54px;
padding-bottom: 54px;
}
.ind08sp .ind08Sack {
padding-top: 54px;
padding-bottom: 54px;
}
.ind08 .ind08Sack .ind08SmalTitle {
padding-bottom: 10px;
}
.ind08 .ind08Sack .ind08SmalTitle h2 {
font-size: 20px;
}
.ind08 .ind08Sack .ind08Title {
padding-bottom: 32px;
}
.ind08 .ind08Sack .ind08Title h2 {
font-size: 28px;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input {
font-size: 14px;
width: 230px;
padding: 8px 10px;
}
.ind08 .ind08Sack form .formSack .formBtnSack button {
font-size: 16px;
margin: 0 12px 0 4px;
padding: 8px 58px;
}
.ind08 .ind08Sack form .formSack .formBtnSack a {
font-size: 16px;
padding: 8px 58px;
}
}
@media (max-width: 1199px) {
.ind08 .ind08Sack .ind08SmalTitle h2 {
font-size: 24px;
}
.ind08 .ind08Sack .ind08Title h2 {
font-size: 36px;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input {
padding: 12px 10px;
font-size: 14px;
}
.ind08 .ind08Sack form .formSack .formBtnSack button {
font-size: 18px;
padding: 10px 58px;
}
.ind08 .ind08Sack form .formSack .formBtnSack a {
font-size: 18px;
padding: 10px 58px;
}
}
@media (max-width: 1042px) {
.ind08 .ind08Sack form .formSack {
display: flex;
flex-direction: column;
}
.ind08 .ind08Sack form .formSack .formInputSack {
margin-bottom: 14px;
}
.ind08 .ind08Sack form .formSack .formBtnSack button {
margin: 0 6px 0 0px;
}
}
@media (max-width: 768px) {
.ind08 .ind08Sack form .formSack .formInputSack .formInput input {
width: 212px;
}
.ind08 .ind08Sack form .formSack .formBtnSack a {
font-size: 16px;
padding: 10px 42px;
}
.ind08 .ind08Sack form .formSack .formBtnSack button {
font-size: 16px;
padding: 10px 42px;
}
.ind08 .ind08Sack .ind08SmalTitle {
padding-bottom: 8px;
}
.ind08 .ind08Sack .ind08SmalTitle h2 {
font-size: 18px;
}
.ind08 .ind08Sack .ind08Title h2 {
font-size: 24px;
}
}
@media (max-width: 499px) {
.ind08 {
background-position: center right;
}
.ind08 .ind08Sack {
padding-top: 48px;
padding-bottom: 52px;
}
.ind08 .ind08Sack .ind08Title .ind08Sm h2 {
white-space: normal;
}
.ind08 .ind08Sack .ind08Title .ind08Sm h2 {
width: 100%;
transition: width 1.8s 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ind08 .ind08Sack .ind08SmalTitle {
display: none;
}
.ind08 .ind08Sack .ind08SmalTitle h2 {
font-size: 14px;
}
.ind08 .ind08Sack .ind08Title {
padding-bottom: 40px;
}
.ind08 .ind08Sack .ind08SmalTitle.active>h2 {
opacity: 1;
color: #FFFFFF;
}
.ind08 .ind08Sack .ind08SmalTitle>h2 {
opacity: 1;
color: #FFFFFF;
}
.ind08 .ind08Sack .ind08SmalTitle.active .ind08Sm h2 {
width: 0;
}
.ind08 .ind08Sack .ind08TitleSe {
display: none;
}
.ind08 .ind08Sack .ind08TitleSePh {
display: block;
}
.ind08 .ind08Sack .ind08Title h2 {
font-size: 24px;
line-height: 30px;
}
.ind08 .ind08Sack form .formSack .formInputSack {
flex-direction: column;
margin-bottom: 6px;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput {
margin-right: 0;
margin-bottom: 10px;
}
.ind08 .ind08Sack form .formSack .formInputSack .formInput input {
width: 100%;
padding: 8px 10px;
}
.ind08 .ind08Sack form .formSack .formBtnSack {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}
.ind08 .ind08Sack form .formSack .formBtnSack button {
width: 48%;
margin: 0;
font-size: 14px;
padding: 6px 50px;
text-align: center;
}
.ind08 .ind08Sack form .formSack .formBtnSack a {
font-size: 14px;
padding: 8px 50px;
width: 48%;
text-align: center;
}
.serverind08 .ind08Sack {
padding-top: 69px;
padding-bottom: 34px;
}
.ind08sp .ind08Sack {
padding-top: 48px;
padding-bottom: 52px;
}
.serverind08 .ind08Sack .ind08Title {
padding-bottom: 24px;
}
}
.subCon {
background: url(../images/subconbg.jpg) no-repeat top center;
background-size: cover;
background-attachment: fixed;
padding-top: 128px;
padding-bottom: 64px;
overflow: hidden;
}
.subCon .subConSack {
margin: auto;
padding-bottom: 64px;
}
.subCon .subConSack .subConTop {
background: #FFFFFF;
width: 72%;
position: relative;
padding: 100px 200px 94px 200px;
}
.subCon .subConSack .subConTop .subConTopTitle {
border-bottom: 1px solid #C8C8C8;
margin-bottom: 36px;
}
.subCon .subConSack .subConTop .subConTopTitle h2 {
font-size: 44px;
font-weight: 500;
color: #1A1A1A;
display: inline-block;
padding-bottom: 18px;
position: relative;
}
.subCon .subConSack .subConTop .subConTopTitle h2::after {
position: absolute;
content: "";
width: 100%;
height: 4px;
background: #E01E24;
left: 0;
bottom: 0;
}
.subCon .subConSack .subConTop .subConTopText {
padding-bottom: 50px;
}
.subCon .subConSack .subConTop .subConTopText p {
font-size: 24px;
font-weight: normal;
color: #1A1A1A;
}
.subCon .subConSack .subConTop .subConTopPho {
padding-bottom: 56px;
}
.subCon .subConSack .subConTop .subConTopPho .phoTitle h2 {
font-size: 18px;
font-weight: normal;
color: #1A1A1A;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA {
display: inline-flex;
height: 50px;
align-items: center;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan {
display: inline-block;
height: 100%;
width: 320px;
font-size: 0;
vertical-align: top;
overflow: hidden;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i {
display: inline-flex;
height: 100%;
align-items: center;
font-size: 50px;
color: #E01E24;
vertical-align: top;
font-family: D-DIN-Bold;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI0 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI1 {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI2 {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI3 {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI4 {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI5 {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI6 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI7 {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI8 {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
animation-delay: 4s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI9 {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI10 {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
animation-delay: 5s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI11 {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
animation-delay: 5.5s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI12 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i.navTelI13 {
-webkit-animation-delay: 6.5s;
-moz-animation-delay: 6.5s;
animation-delay: 6.5s;
}
.subCon .subConSack .subConTop .subConServe {
margin-bottom: 34px;
}
.subCon .subConSack .subConTop .subConServe p {
font-size: 18px;
font-weight: normal;
color: #1A1A1A;
}
.subCon .subConSack .subConTop .subConServe p a {
font-size: 18px;
font-weight: normal;
color: #1A1A1A;
display: inline-block;
transition: all 0.5s ease;
}
.subCon .subConSack .subConTop .subConServe p a:hover {
color: #E01E24;
}
.subCon .subConSack .subConTop .subConServe p a.tel {
font-family: D-DIN;
font-size: 24px;
}
.subCon .subConSack .subConTop .subConCode {
display: flex;
align-items: flex-end;
}
.subCon .subConSack .subConTop .subConCode .subConCodeImg {
max-width: 120px;
margin-right: 12px;
}
.subCon .subConSack .subConTop .subConCode .subConCodeImg img {
width: 100%;
}
.subCon .subConSack .subConTop .subConCode .subConCodeImgName p {
font-size: 18px;
font-weight: normal;
color: #1A1A1A;
}
.subCon .subConSack .subConTop .waiteBg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: -20%;
background: #FFFFFF;
z-index: 2;
}
.subCon .subConSack .subConTop .turnText {
position: absolute;
left: 0;
/* top: 0; */
bottom: 50%;
transform: translateY(50%);
z-index: 3;
height: 80%;
overflow: hidden;
}
.subCon .subConSack .subConTop .turnText .turnH2 {
/* overflow: hidden; */
height: 100%;
/* animation: animate 14s linear infinite; */
}
.subCon .subConSack .subConTop .turnText .turnH2 h2 {
font-family: Arial;
font-size: 140px;
font-weight: 900;
line-height: normal;
color: #E1E1E1;
opacity: 0.25;
writing-mode: vertical-rl;
/* animation: animate 18s linear infinite; */
margin-bottom: 20px;
}
@keyframes animate {
0% {
transform: translateY(0%);
/* opacity: 1; */
}
100% {
transform: translateY(-100%);
/* opacity: 0; */
}
}
.subCon .subConBtm {
background: #FFFFFF;
width: 68%;
margin-left: 32%;
padding: 90px 300px 80px 174px;
position: relative;
}
.subCon .subConBtm .turnText {
position: absolute;
right: 74px;
/* top: 0; */
bottom: 50%;
transform: translateY(50%);
z-index: 3;
height: 80%;
overflow: hidden;
}
.subCon .subConBtm .turnText .turnH2 {
/* overflow: hidden; */
height: 100%;
/* animation: animate 14s linear infinite; */
}
.subCon .subConBtm .turnText .turnH2 h2 {
font-family: Arial;
font-size: 140px;
font-weight: 900;
line-height: normal;
color: #E1E1E1;
opacity: 0.25;
writing-mode: vertical-rl;
margin-bottom: 20px;
}
.subCon .subConBtm .subConBtmTitle {
border-bottom: 1px solid #C8C8C8;
margin-bottom: 34px;
}
.subCon .subConBtm .subConBtmTitle h2 {
font-size: 44px;
font-weight: 500;
color: #333333;
position: relative;
display: inline-block;
padding-bottom: 18px;
}
.subCon .subConBtm .subConBtmTitle h2::after {
position: absolute;
content: "";
width: 100%;
height: 4px;
background: #E01E24;
left: 0;
bottom: 0;
}
.subCon .subConBtm .subConBtmText {
padding-bottom: 56px;
}
.subCon .subConBtm .subConBtmText p {
font-size: 24px;
color: #333333;
font-weight: normal;
}
.subCon .subConBtm form .information .fillinbox {
margin-bottom: 20px;
}
.subCon .subConBtm form .information .fillinbox .form-input {
border: 1px solid #C8C8C8;
background: #F7F7F7;
width: 100%;
padding: 16px 10px;
font-size: 16px;
font-weight: normal;
line-height: normal;
letter-spacing: 0em;
color: #333333;
border-radius: 5px;
transition: border 0.5s ease;
}
.subCon .subConBtm form .information .fillinbox .form-input.active {
color: #E01E24;
}
.subCon .subConBtm form .information .fillinbox .form-input:focus {
border: 1px solid #E01E24;
}
.subCon .subConBtm form .information .fillinbox .form-input:-webkit-autofill,
.subCon .subConBtm form .information .fillinbox .form-input:-webkit-autofill:hover,
.subCon .subConBtm form .information .fillinbox .form-input:-webkit-autofill:focus {
border: 1px solid #C8C8C8;
background: #F7F7F7;
-webkit-text-fill-color: #333333;
-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset;
transition: background-color 5000s ease-in-out 0s;
}
.subCon .subConBtm form .information .fillinbox .form-input.active::-webkit-input-placeholder {
color: #E01E24;
}
.subCon .subConBtm form .information .fillinbox .form-input.active:-moz-placeholder {
color: #E01E24;
}
.subCon .subConBtm form .information .fillinbox .form-input.active::-moz-placeholder {
color: #E01E24;
}
.subCon .subConBtm form .information .fillinbox .form-input.active:-ms-input-placeholder {
color: #E01E24;
}
.subCon .subConBtm form .information .fillinbox .form-input::-webkit-input-placeholder {
color: #5E5E5E;
}
.subCon .subConBtm form .information .fillinbox .form-input:-moz-placeholder {
color: #5E5E5E;
}
.subCon .subConBtm form .information .fillinbox .form-input::-moz-placeholder {
color: #5E5E5E;
}
.subCon .subConBtm form .information .fillinbox .form-input:-ms-input-placeholder {
color: #5E5E5E;
}
.subCon .subConBtm form .button .submit button {
background: #E01E24;
border: none;
border-radius: 5px;
font-size: 20px;
color: #FFFFFF;
padding: 12px 40px;
position: relative;
overflow: hidden;
}
.subCon .subConBtm form .button .submit button::after {
content: " ";
position: absolute;
border-radius: 50%;
left: 50%;
top: 50%;
margin-left: -120px;
margin-top: -120px;
border-width: 120px;
border-color: #fff;
border-style: dashed;
width: 0;
height: 0;
-webkit-transition: all 500ms ease-out 0s;
transition: all 500ms ease-out 0s;
opacity: .1;
visibility: hidden;
-webkit-transform: scale(.1);
transform: scale(.1);
pointer-events: none;
}
.subCon .subConBtm form .button .submit button:hover:after {
-webkit-transition: all 350ms ease-in 0s;
transition: all 350ms ease-in 0s;
opacity: .15;
visibility: visible;
-webkit-transform: none !important;
transform: none !important
}
@keyframes telno50 {
0% {
font-size: 60px;
}
7.14%,
14.28%,
21.42%,
28.57%,
35.71%,
42.86%,
50%,
57.14%,
64.28%,
71.42%,
78.57%,
85.71%,
92.86%,
100% {
font-size: 50px;
}
}
@media (max-width: 1536px) {
.subCon .subConSack .subConTop {
padding: 62px 62px 66px 164px;
}
.subCon .subConBtm {
padding: 62px 216px 66px 56px;
}
.subCon .subConBtm .turnText {
right: 26px;
}
.subCon .subConSack .subConTop .turnText {
height: 90%;
}
/* .subCon .subConSack .subConTop .turnText .turnH2 { height: 98%; } */
}
@media (max-width: 1400px) {
.subCon .subConSack .subConTop {
width: 82%;
}
.subCon .subConSack .subConTop .subConTopTitle h2 {
font-size: 36px;
}
.subCon .subConSack .subConTop .subConTopText p {
font-size: 20px;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i {
font-size: 40px;
}
@keyframes telno50 {
0% {
font-size: 50px;
}
7.14%,
14.28%,
21.42%,
28.57%,
35.71%,
42.86%,
50%,
57.14%,
64.28%,
71.42%,
78.57%,
85.71%,
92.86%,
100% {
font-size: 40px;
}
}
.subCon .subConBtm {
width: 78%;
margin-left: 22%;
}
.subCon .subConBtm .subConBtmTitle h2 {
font-size: 36px;
}
.subCon .subConBtm .subConBtmText p {
font-size: 20px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.subCon .subConSack .subConTop {
padding: 52px 116px 56px 156px;
}
.subCon .subConSack .subConTop .subConTopTitle h2 {
font-size: 28px;
}
.subCon .subConSack .subConTop .subConTopText {
padding-bottom: 40px;
}
.subCon .subConSack .subConTop .subConTopText p {
font-size: 16px;
}
.subCon .subConSack .subConTop .subConTopPho {
padding-bottom: 46px;
}
.subCon .subConSack .subConTop .subConTopPho .phoTitle h2 {
font-size: 16px;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA {
height: 30px;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i {
font-size: 36px;
}
.subCon .subConSack .subConTop .subConServe p {
font-size: 16px;
}
.subCon .subConSack .subConTop .subConServe p a {
font-size: 16px;
}
.subCon .subConSack .subConTop .subConCode .subConCodeImgName p {
font-size: 16px;
}
.subCon .subConBtm {
padding: 52px 190px 56px 110px;
}
.subCon .subConBtm .subConBtmTitle h2 {
font-size: 28px;
}
.subCon .subConBtm form .information .fillinbox {
margin-bottom: 14px;
}
.subCon .subConBtm .subConBtmText p {
font-size: 16px;
}
.subCon .subConBtm form .information .fillinbox .form-input {
font-size: 14px;
padding: 12px 10px;
}
.subCon .subConBtm form .button .submit button {
font-size: 18px;
padding: 10px 30px;
}
.subCon .subConSack .subConTop .turnText {
height: 94;
}
.subCon .subConSack .subConTop .turnText .turnH2 h2 {
font-size: 112px;
}
.subCon .subConBtm .turnText .turnH2 h2 {
font-size: 112px;
}
}
@media (max-width: 1199px) {
.subCon .subConSack .subConTop {
width: 96%;
padding: 54px 62px 60px 0px;
}
.subCon .subConBtm .turnText {
display: none;
}
.subCon .subConBtm {
width: 90%;
margin-left: 10%;
padding: 54px 62px 60px 62px;
}
.subCon .subConSack .subConTop .turnText {
display: none;
}
}
@media (max-width: 768px) {
.subCon .subConSack .subConTop {
width: 100%;
padding: 34px 32px 44px 0px;
}
.subCon .subConSack .subConTop .subConTopTitle {
margin-bottom: 26px;
}
.subCon .subConSack .subConTop .subConTopTitle h2 {
font-size: 24px;
}
.subCon .subConSack .subConTop .subConTopText p {
font-size: 18px;
}
.subCon .subConSack .subConTop .subConTopPho .phoTitle h2 {
font-size: 16px;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA {
height: 34px;
}
.subCon .subConSack .subConTop .subConTopPho .navTelA .navTelSpan i {
font-size: 30px;
}
@keyframes telno50 {
0% {
font-size: 40px;
}
7.14%,
14.28%,
21.42%,
28.57%,
35.71%,
42.86%,
50%,
57.14%,
64.28%,
71.42%,
78.57%,
85.71%,
92.86%,
100% {
font-size: 30px;
}
}
.subCon .subConBtm {
padding: 34px 32px 44px 32px;
}
.subCon .subConSack .subConTop .subConServe p {
font-size: 16px;
}
.subCon .subConBtm .subConBtmTitle h2 {
font-size: 24px;
}
.subCon .subConBtm .subConBtmText p {
font-size: 18px;
}
.subCon .subConBtm form .information .fillinbox {
margin-bottom: 16px;
}
.subCon .subConBtm form .information .fillinbox .form-input {
font-size: 14px;
padding: 12px 10px;
}
.subCon .subConBtm form .button .submit button {
font-size: 16px;
padding: 10px 18px;
}
}
@media (max-width: 499px) {
.subCon {
padding-top: 110px;
padding-bottom: 50px;
background: url(../images/subconbg1.jpg) no-repeat top center;
background-size: cover;
background-attachment: scroll;
}
.subCon .subConSack {
padding-bottom: 38px;
}
.subCon .subConSack .subConTop {
padding: 22px 16px 28px 0px;
}
.subCon .subConSack .subConTop .subConTopTitle {
margin-bottom: 12px;
}
.subCon .subConSack .subConTop .subConTopText {
padding-bottom: 30px;
}
.subCon .subConSack .subConTop .subConTopText p {
font-size: 16px;
}
.subCon .subConSack .subConTop .subConTopPho {
padding-bottom: 16px;
}
.subCon .subConSack .subConTop .subConServe p {
font-size: 14px;
}
.subCon .subConSack .subConTop .subConServe p a.tel {
font-size: 20px;
}
.subCon .subConSack .subConTop .subConServe {
margin-bottom: 14px;
}
.subCon .subConSack .subConTop .subConCode .subConCodeImg {
max-width: 100px;
}
.subCon .subConSack .subConTop .subConCode .subConCodeImgName p {
font-size: 16px;
}
.subCon .subConBtm {
padding: 22px 16px 28px 16px;
width: 96%;
margin-left: 4%;
}
.subCon .subConBtm .subConBtmTitle {
margin-bottom: 12px;
}
.subCon .subConBtm .subConBtmText {
padding-bottom: 30px;
}
.subCon .subConBtm .subConBtmText p {
font-size: 16px;
}
.subCon .subConBtm form .information .fillinbox .form-input {
padding: 6px;
}
.subCon .subConBtm form .information .fillinbox {
margin-bottom: 12px;
}
.subCon .subConBtm form .button {
display: flex;
justify-content: end;
}
.subCon .subConBtm form .button .submit button {
font-size: 14px;
padding: 6px 22px;
}
}
.subNews {
position: relative;
z-index: 1;
background: #FFFFFF;
}
.subNews .subNewsSack {
margin: auto;
padding-top: 84px;
padding-bottom: 62px;
}
.subNews .subNewsSack .subNewsUl {
margin-right: calc(-.5* 1rem);
margin-left: calc(-.5* 1rem);
}
.subNews .subNewsSack .subNewsUl .subNewList {
padding-right: calc(1rem* .5);
padding-left: calc(1rem* .5);
margin-bottom: 16px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack {
background: #F7F7F7;
padding: 42px 20px 70px;
transition: all 0.5s ease;
position: relative;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(43deg, #E01E24 0%, #E48826 100%);
z-index: 1;
opacity: 0;
transition: all 0.5s ease;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack:hover:after {
opacity: 1;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newImg {
position: relative;
margin-bottom: 68px;
z-index: 2;
overflow: hidden;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newImg img {
width: 100%;
transition: all 0.8s ease;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack:hover .newImg img {
transform: scale(1.1);
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newImg .newImgTitle {
position: absolute;
left: 10px;
top: 22px;
background: linear-gradient(250deg, #E48826 -28%, #E48826 -28%, #E01E24 108%);
border-radius: 30px;
padding: 8px 20px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newImg .newImgTitle h2 {
font-size: 16px;
color: #F7F7F7;
font-weight: normal;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText {
display: flex;
align-items: center;
z-index: 2;
position: relative;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTimePhone {
display: none;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTime {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px 8px;
min-width: 76px;
margin-right: 10px;
transition: all 0.5s ease;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack:hover .newTimeText .newTime {
background: #1E1E1E;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTime .newDay {
padding-bottom: 2px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTime .newDay p {
font-family: D-DIN;
font-size: 50px;
line-height: 50px;
font-weight: bold;
color: #333333;
transition: all 0.5s ease;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack:hover .newTimeText .newTime .newDay p {
color: #F7F7F7;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTime .newMon p {
font-family: D-DIN;
font-size: 16px;
line-height: 16px;
font-weight: normal;
color: #333333;
transition: all 0.5s ease;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack:hover .newTimeText .newTime .newMon p {
color: #F7F7F7;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newText p {
font-size: 24px;
font-weight: normal;
color: #1A1A1A;
transition: all 0.5s ease;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack:hover .newTimeText .newText p {
color: #F7F7F7;
}
@media (max-width: 1536px) {
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack {
padding: 28px 16px 46px
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newImg {
margin-bottom: 36px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTime {
padding: 8px 6px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTime .newDay p {
font-size: 44px;
line-height: 44px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newText p {
font-size: 18px;
}
}
@media (max-width: 1300px) {
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack {
padding: 22px 16px 30px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newImg {
margin-bottom: 20px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.subNews .subNewsSack {
padding-top: 60px;
padding-bottom: 62px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack {
padding: 16px 12px 20px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newImg .newImgTitle {
padding: 4px 14px;
left: 8px;
top: 10px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newImg .newImgTitle h2 {
font-size: 14px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTime {
padding: 8px 4px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTime .newDay p {
font-size: 38px;
line-height: 38px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTime .newMon p {
font-size: 14px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newText p {
font-size: 16px;
}
}
@media (max-width: 1199px) {
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newImg .newImgTitle {
padding: 6px 14px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newImg .newImgTitle h2 {
font-size: 14px;
}
}
@media (max-width: 768px) {
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText {
align-items: flex-start;
flex-direction: column;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTimePhone {
display: block;
padding-bottom: 4px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTimePhone p {
font-family: D-DIN;
font-size: 16px;
line-height: 14px;
font-weight: normal;
color: #333333;
transition: all 0.5s ease;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack:hover .newTimeText .newTimePhone p {
color: #FFFFFF;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newTimeText .newTime {
display: none;
}
}
@media (max-width: 499px) {
.subNews .subNewsSack {
padding-top: 40px;
padding-bottom: 50px;
}
.subNews .subNewsSack .subNewsUl .subNewList .subNewListSack .newImg .newImgTitle {
padding: 4px 14px;
top: 12px;
}
}
.newsDetail .newsDetailSack {
margin: auto;
padding-top: 154px;
padding-bottom: 70px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailSmTitle {
border: 1px solid #C8C8C8;
border-radius: 30px;
display: inline-block;
padding: 7px 12px;
margin-bottom: 42px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailSmTitle h2 {
font-size: 16px;
color: #5E5E5E;
font-weight: normal;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTitle {
padding-bottom: 34px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTitle h2 {
font-size: 50px;
font-weight: normal;
color: #1A1A1A;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare {
display: flex;
align-items: center;
position: relative;
padding-bottom: 36px;
margin-bottom: 22px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare::after {
position: absolute;
content: "";
width: 100%;
height: 2px;
background: #5E5E5E;
left: 0;
bottom: 0;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailTime {
padding-right: 40px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailTime p {
font-size: 18px;
color: #333333;
font-weight: normal;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailShare p {
font-size: 18px;
font-weight: normal;
color: #333333;
display: flex;
align-items: center;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailShare p a {
margin-left: 12px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailShare p a img {
max-width: 30px;
width: 100%;
filter: grayscale(100%);
opacity: 0.8;
transition: all 0.5s ease;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailShare p a:hover img {
filter: none;
opacity: 1;
}
.newsDetail .newsDetailSack .newsDetailBtm {
align-items: flex-start;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf {
padding-right: calc(8rem* .5);
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailText {
position: relative;
padding: 20px 14px 90px;
margin-bottom: 2px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailText::after {
position: absolute;
content: "";
width: 100%;
height: 1px;
background: #DBDBDB;
left: 0;
bottom: 0;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailText p {
font-size: 18px;
color: #333333;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailText p img {
max-width: 100%;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailText img {
max-width: 100%;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage {
display: flex;
justify-content: space-between;
align-items: center;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage>div {
width: 33.333%;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage>div>a {
display: flex;
align-items: center;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage>div.newsDetailReturn>a {
justify-content: center;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage>div.newsDetailNext>a {
justify-content: end;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailPrev a .prevIco {
background: #666666;
border-radius: 50%;
padding: 4px 8px;
margin-right: 10px;
position: relative;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailPrev a .prevIco::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(61deg, #E01E24 25%, #E48826 108%);
border-radius: 50%;
z-index: 1;
opacity: 0;
transition: all 0.5s ease;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailPrev a:hover .prevIco::after {
opacity: 1;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailPrev a .prevIco i {
font-size: 18px;
color: #FFFFFF;
position: relative;
z-index: 2;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailPrev a .prevName p {
font-size: 16px;
font-weight: normal;
color: #333333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.5s ease;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailPrev a:hover .prevName p {
color: #E01E24;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailReturn a .returnIco i {
font-size: 50px;
color: #666666;
margin-right: 14px;
transition: all 0.5s ease;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailReturn a:hover .returnIco i {
color: rgba(226, 74, 37);
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailReturn a .returnName p {
font-size: 16px;
font-weight: normal;
color: #333333;
transition: all 0.5s ease;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailReturn a:hover .returnName p {
color: #E01E24;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailNext a .nextIco {
background: #666666;
border-radius: 50%;
padding: 4px 8px;
margin-right: 10px;
position: relative;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailNext a .nextIco::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
background: linear-gradient(61deg, #E01E24 25%, #E48826 108%);
border-radius: 50%;
z-index: 1;
opacity: 0;
transition: all 0.5s ease;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailNext a:hover .nextIco::after {
opacity: 1;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailNext a .nextIco i {
font-size: 18px;
color: #FFFFFF;
position: relative;
z-index: 2;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailNext a .nextName p {
font-size: 16px;
font-weight: normal;
color: #333333;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.5s ease;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailNext a:hover .nextName p {
color: #E01E24;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg {
position: sticky;
top: 82px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack {
background: #F7F7F7;
padding: 40px 26px 16px;
margin-bottom: 22px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailRgTitle {
position: relative;
margin-bottom: 20px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailRgTitle::after {
position: absolute;
content: "";
width: 100%;
height: 1px;
left: 0;
bottom: 0;
background: #C8C8C8;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailRgTitle h2 {
font-size: 24px;
font-weight: 500;
color: #333333;
position: relative;
display: inline-block;
padding-bottom: 10px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailRgTitle h2::after {
position: absolute;
content: "";
width: 100%;
height: 4px;
left: 0;
bottom: 0;
background: #E01E24;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailUl .newsDetailLi {
padding-bottom: 14px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailUl .newsDetailLi .newsDetailLiTitle h2 {
font-size: 16px;
font-weight: normal;
color: #5E5E5E;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.5s ease;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailUl .newsDetailLi .newsDetailLiTitle:hover h2 {
color: #E01E24;
transform: translateX(12px);
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailUl .newsDetailLi .newsDetailLiTitle span {
color: #E01E24;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack {
background: url(../images/newsbtmbg.jpg) no-repeat;
background-size: cover;
background-position: center center;
display: flex;
flex-direction: column;
align-items: center;
padding: 28px 12px 32px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTitle h2 {
font-size: 20px;
font-weight: 500;
color: #FFFFFF;
text-align: center;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmText p {
font-size: 26px;
font-weight: 500;
color: #FFFFFF;
text-align: center;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel {
height: 50px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan {
display: inline-block;
height: 100%;
width: 230px;
font-size: 0;
vertical-align: top;
overflow: hidden;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i {
display: inline-flex;
height: 100%;
align-items: center;
font-size: 36px;
font-weight: bold;
color: #FFFFFF;
vertical-align: top;
font-family: D-DIN;
-webkit-animation: telno 6.5s steps(1, end) infinite;
animation: telno 6.5s steps(1, end) infinite;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI0 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI1 {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI2 {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI3 {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI4 {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI5 {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
animation-delay: 2.5s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI6 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI7 {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI8 {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
animation-delay: 4s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI9 {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI10 {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
animation-delay: 5s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI11 {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
animation-delay: 5.5s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI12 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i.btmTelI13 {
-webkit-animation-delay: 6.5s;
-moz-animation-delay: 6.5s;
animation-delay: 6.5s;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmImg img {
max-width: 100%;
}
@media (max-width: 1700px) {
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTitle {
padding-bottom: 6px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTitle h2 {
font-size: 16px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmText p {
font-size: 22px;
}
}
@media (max-width: 1536px) {
.newsDetail .newsDetailSack .newsDetailTop .newsDetailSmTitle h2 {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTitle h2 {
font-size: 40px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailTime p {
font-size: 16px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailShare p {
font-size: 16px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailShare p a img {
max-width: 24px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf {
padding-right: calc(4rem* .5);
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailText {
padding: 14px 8px 90px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailText p {
font-size: 16px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack {
padding: 16px 12px 16px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmText p {
font-size: 20px;
}
}
@media (max-width: 1400px) {
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack {
padding: 18px 8px 20px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmText p {
font-size: 18px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan {
text-align: center;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.newsDetail .newsDetailSack {
padding-top: 100px;
padding-bottom: 58px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailSmTitle {
padding: 4px 12px;
margin-bottom: 28px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTitle {
padding-bottom: 18px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTitle h2 {
font-size: 28px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare {
padding-bottom: 24px;
margin-bottom: 20px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailTime p {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailShare p {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailText p {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailPrev a .prevName p {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailReturn a .returnIco i {
margin-right: 6px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailReturn a .returnName p {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailNext a .nextName p {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg {
top: 58px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack {
margin-bottom: 16px;
padding: 14px 12px 8px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailRgTitle h2 {
font-size: 20px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailUl .newsDetailLi {
padding-bottom: 10px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailUl .newsDetailLi:last-child {
display: none;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgSack .newsDetailUl .newsDetailLi .newsDetailLiTitle h2 {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg .newsDetailRgBtmSack .btmTel .btmTelA .btmTelSpan i {
font-size: 26px;
animation: telno26 6.5s steps(1, end) infinite;
}
}
@media (max-width: 1199px) {
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf {
padding-right: calc(1.5rem* .5);
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailRg {
display: none;
}
}
@media (max-width: 992px) {
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTitle h2 {
font-size: 32px;
}
}
@media (max-width: 768px) {
.newsDetail .newsDetailSack .newsDetailTop .newsDetailSmTitle {
margin-bottom: 26px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTitle h2 {
font-size: 32px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage>div {
width: 48%;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailReturn {
display: none;
}
}
@media (max-width: 499px) {
.newsDetail .newsDetailSack {
padding-top: 90px;
padding-bottom: 44px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailSmTitle {
padding: 5px 12px
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTitle {
padding-bottom: 14px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTitle h2 {
font-size: 24px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare {
padding-bottom: 20px;
margin-bottom: 10px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailTime {
padding-right: 20px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailTime p {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailShare p {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailTop .newsDetailTimeShare .newsDetailShare p a img {
max-width: 20px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailText {
padding: 8px 0px 34px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailText p {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage {
align-items: flex-start;
flex-direction: column;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage>div {
width: 100%;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailPrev a .prevIco {
display: none;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailPrev a .prevName {
margin-bottom: 4px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailPrev a .prevName p {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailNext a .nextIco {
display: none;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage .newsDetailNext a .nextName p {
font-size: 14px;
}
.newsDetail .newsDetailSack .newsDetailBtm .newsDetailLf .newsDetailPage>div.newsDetailNext>a {
justify-content: start;
}
}
#serverSw {
height: 100vh;
position: relative;
overflow: hidden;
}
#serverSw>.swiper-wrapper .swiper-slide {
position: relative;
overflow: hidden;
}
#serverSw .serverBigBg {
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: 4s;
transform: scale(1.2);
}
#serverSw .swiper-slide-active .serverBigBg {
transition: 5s linear;
transform: scale(1);
}
#serverSw .swiper-slide:nth-child(1) .serverBigBg {
display: none;
}
#serverSw>.swiper-wrapper .swiper-slide video {
width: 100%;
height: 100vh;
object-fit: cover;
}
#serverSw>.swiper-wrapper .swiper-slide video::-webkit-media-controls-fullscreen-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#serverSw>.swiper-wrapper .swiper-slide video::-webkit-media-controls-play-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#serverSw>.swiper-wrapper .swiper-slide video::-webkit-media-controls-timeline {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#serverSw>.swiper-wrapper .swiper-slide video::-webkit-media-controls-current-time-display {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#serverSw>.swiper-wrapper .swiper-slide video::-webkit-media-controls-time-remaining-display {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#serverSw>.swiper-wrapper .swiper-slide video::-webkit-media-controls-mute-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#serverSw>.swiper-wrapper .swiper-slide video::-webkit-media-controls-toggle-closed-captions-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#serverSw>.swiper-wrapper .swiper-slide video::-webkit-media-controls-volume-slider {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#serverSw>.swiper-wrapper .swiper-slide video::-webkit-media-controls-enclosure {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
#serverSw .serverbg {
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
#serverSw .serverbg .server01Sack {
position: absolute;
left: 50%;
top: 47%;
transform: translate(-50%, -50%);
}
#serverSw .serverbg .server01Sack .server01Content {
display: flex;
justify-content: center;
}
#serverSw .serverbg .server01Sack .server01Content .server01Text h2 {
font-size: 60px;
color: #FFFFFF;
display: flex;
}
#serverSw .serverbg .server01Sack .server01Content .server01Text h2 i {
display: inline-block;
vertical-align: top;
opacity: 0;
transition: 0.88s 0.44s;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i {
animation: zoomIns 1s;
-moz-animation: zoomIns 1s;
-webkit-animation: zoomIns 1s;
-o-animation: zoomIns 1s;
animation-iteration-count: 1;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-o-animation-iteration-count: 1;
animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(1) {
animation-delay: 0s;
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-o-animation-delay: 0s;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(2) {
animation-delay: 100ms;
-moz-animation-delay: 100ms;
-webkit-animation-delay: 100ms;
-o-animation-delay: 100ms;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(3) {
animation-delay: 200ms;
-moz-animation-delay: 200ms;
-webkit-animation-delay: 200ms;
-o-animation-delay: 200ms;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(4) {
animation-delay: 300ms;
-moz-animation-delay: 300ms;
-webkit-animation-delay: 300ms;
-o-animation-delay: 300ms;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(5) {
animation-delay: 400ms;
-moz-animation-delay: 400ms;
-webkit-animation-delay: 400ms;
-o-animation-delay: 400ms;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(6) {
animation-delay: 500ms;
-moz-animation-delay: 500ms;
-webkit-animation-delay: 500ms;
-o-animation-delay: 500ms;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(7) {
animation-delay: 600ms;
-moz-animation-delay: 600ms;
-webkit-animation-delay: 600ms;
-o-animation-delay: 600ms;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(8) {
animation-delay: 700ms;
-moz-animation-delay: 700ms;
-webkit-animation-delay: 700ms;
-o-animation-delay: 700ms;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(9) {
animation-delay: 800ms;
-moz-animation-delay: 800ms;
-webkit-animation-delay: 800ms;
-o-animation-delay: 800ms;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(10) {
animation-delay: 900ms;
-moz-animation-delay: 900ms;
-webkit-animation-delay: 900ms;
-o-animation-delay: 900ms;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(11) {
animation-delay: 1000ms;
-moz-animation-delay: 1000ms;
-webkit-animation-delay: 1000ms;
-o-animation-delay: 1000ms;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(12) {
animation-delay: 1100ms;
-moz-animation-delay: 1100ms;
-webkit-animation-delay: 1100ms;
-o-animation-delay: 1100ms;
}
#serverSw .swiper-slide-active .serverbg .server01Sack .server01Content .server01Text h2 i:nth-child(13) {
animation-delay: 1200ms;
-moz-animation-delay: 1200ms;
-webkit-animation-delay: 1200ms;
-o-animation-delay: 1200ms;
}
@-webkit-keyframes zoomIns {
0% {
opacity: 0;
-webkit-transform: scale3d(.77, .77, .77);
transform: scale3d(.77, .77, .77)
}
100%,
50% {
opacity: 1
}
}
@keyframes zoomIns {
0% {
opacity: 0;
-webkit-transform: scale3d(.77, .77, .77);
transform: scale3d(.77, .77, .77)
}
100%,
50% {
opacity: 1
}
}
#serverSw .serverbg .server02Sack {
position: absolute;
left: 50%;
top: 52%;
transform: translate(-50%, -50%);
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf {
padding-right: calc(18rem* .5);
margin: auto;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Title {
padding-bottom: 50px;
transform: translateY(40px);
opacity: 0;
visibility: hidden;
transition: 0.88s 0.44s;
}
#serverSw .swiper-slide-active .serverbg .server02Sack .server02Loca .serve02Lf .serve02Title {
transform: translateY(0);
opacity: 1;
visibility: visible;
transition-delay: 0.2s;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Title h2 {
font-size: 44px;
font-weight: 500;
color: #FFFFFF;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Text {
padding-bottom: 60px;
transform: translateY(40px);
opacity: 0;
visibility: hidden;
transition: 0.88s 0.44s;
}
#serverSw .swiper-slide-active .serverbg .server02Sack .server02Loca .serve02Lf .serve02Text {
transform: translateY(0);
opacity: 1;
visibility: visible;
transition-delay: 0.4s;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Text p {
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul {
transform: translateY(40px);
opacity: 0;
visibility: hidden;
transition: 0.88s 0.44s;
}
#serverSw .swiper-slide-active .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul {
transform: translateY(0);
opacity: 1;
visibility: visible;
transition-delay: 0.6s;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li {
display: flex;
justify-content: start;
margin-bottom: 46px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiSack {
position: relative;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiImg img {
max-width: 100%;
animation: dsjbg 20s linear infinite;
-webkit-animation: dsjbg 20s linear infinite;
-moz-animation: dsjbg 20s linear infinite;
-ms-animation: dsjbg 20s linear infinite;
-o-animation: dsjbg 20s linear infinite;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li:nth-child(1) .serve02LiImg img {
animation-duration: 10s;
-webkit-animation-duration: 10s;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li:nth-child(2) .serve02LiImg img {
animation-duration: 15s;
-webkit-animation-duration: 15s;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li:nth-child(3) .serve02LiImg img {
animation-duration: 20s;
-webkit-animation-duration: 20s;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li:nth-child(4) .serve02LiImg img {
animation-duration: 25s;
-webkit-animation-duration: 25s;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li:nth-child(5) .serve02LiImg img {
animation-duration: 30s;
-webkit-animation-duration: 30s;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li:nth-child(6) .serve02LiImg img {
animation-duration: 35s;
-webkit-animation-duration: 35s;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li:nth-child(7) .serve02LiImg img {
animation-duration: 40s;
-webkit-animation-duration: 40s;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li:nth-child(8) .serve02LiImg img {
animation-duration: 45s;
-webkit-animation-duration: 45s;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02rg {
display: flex;
justify-content: end;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02rg .serve02rgSack {
margin-left: auto;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02rg .serve02rgSack .serve02Img {
margin-bottom: 8px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02rg .serve02rgSack .serve02Img:last-child {
margin-bottom: 0;
padding-right: 30px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02rg .serve02rgSack .serve02Img:nth-child(2) {
transform: translateX(-30px);
}
#serverSw .serverbg .server02Sack .server02Loca .serve02rg .serve02rgSack .serve02Img img {
max-width: 100%;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiText {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiText h2 {
font-size: 20px;
font-weight: 500;
color: #FFFFFF;
text-align: center;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiText h2 span {
display: none;
}
#serverSw .serverbg .server02Sack .server02Loca .serve03rg {
display: flex;
justify-content: end;
}
#serverSw .serverbg .server02Sack .server02Loca .serve03rg .serve03rgSack .serve03rgImg {
padding-right: 30px;
display: flex;
justify-content: end;
}
#serverSw .serverbg .server02Sack .server02Loca .serve03rg .serve03rgSack .serve03rgImg img {
max-width: 100%;
}
#serverSw .serverbg .server02Sack .server02Loca .serve03rg .serve03rgSack .serve03rgUl {
margin-right: calc(-.5* 1rem);
margin-left: calc(-.5* 1rem);
}
#serverSw .serverbg .server02Sack .server02Loca .serve03rg .serve03rgSack .serve03rgUl .serve03rgLi {
padding-right: calc(1rem* .5);
padding-left: calc(1rem* .5);
margin-bottom: 24px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve03rg .serve03rgSack .serve03rgUl .serve03rgLi:nth-child(2) {
transform: translateY(42px);
}
#serverSw .serverbg .server02Sack .server02Loca .serve03rg .serve03rgSack .serve03rgUl .serve03rgLi:nth-child(5) {
transform: translateY(42px);
}
#serverSw .serverbg .server02Sack .server02Loca .serve03rg .serve03rgSack .serve03rgUl .serve03rgLi .serve03rgLiSack img {
width: 100%;
}
#serverSw .serverbg .server04Sack {
top: 50%;
}
#serverSw .serverbg .server05Sack {
top: 50%;
}
#serverSw .swiper-pagination {
left: 30px;
width: 20px;
}
#serverSw .swiper-pagination .swiper-pagination-bullet {
position: relative;
opacity: 1;
border: 1px solid #4A4A4A;
background: #ffffff00;
width: 8px;
height: 8px;
transition: all 0.5s 0s;
margin: var(--swiper-pagination-bullet-vertical-gap, 12px) 0;
}
#serverSw .swiper-pagination .swiper-pagination-bullet::before {
position: absolute;
content: "";
background: #ffffff;
width: 4px;
height: 4px;
border: 1px solid #4a4a4a00;
left: 50%;
bottom: 50%;
transform: translate(-50%, 50%);
border-radius: 50px;
transition: all 0.5s ease;
opacity: 0;
}
#serverSw .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #ffffff;
border: 1px solid #4a4a4a00;
}
#serverSw .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
width: 15px;
height: 15px;
opacity: 1;
}
.serverPhone {
display: none;
}
.serverPhone .serverPhone2 {
position: relative;
z-index: 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
}
.serverPhone .serverPhone2 .server02Sack {
margin: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.serverPhone .serverPhone2 .server02Sack .serve02Title {
padding-bottom: 40px;
}
.serverPhone .serverPhone2 .server02Sack .serve02Title h2 {
font-size: 24px;
font-weight: 500;
color: #FFFFFF;
}
.serverPhone .serverPhone2 .server02Sack .serve02Text {
padding-bottom: 50px;
}
.serverPhone .serverPhone2 .server02Sack .serve02Text p {
font-size: 14px;
font-weight: 350;
line-height: 30px;
color: #FFFFFF;
}
.serverPhone .serverPhone2 .server02Sack .serve02Ul {
display: flex;
flex-wrap: wrap;
}
.serverPhone .serverPhone2 .server02Sack .serve02Ul .serve02Li {
flex: 0 0 calc((100% - 15px)/3);
margin: 0 0px 5px 0;
}
.serverPhone .serverPhone2 .server02Sack .serve02Ul .serve02Li .serve02LiSack .serve02LiText h2 {
font-size: 16px;
font-weight: 500;
line-height: normal;
color: #FFFFFF;
}
@media (max-width: 1536px) {
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Title {
padding-bottom: 32px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Title h2 {
font-size: 36px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Text p {
font-size: 16px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiText h2 {
font-size: 18px;
line-height: 24px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiImg {
display: flex;
justify-content: center;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiImg img {
max-width: 78%;
}
}
@media (max-width: 1400px) {
#serverSw .serverbg .server01Sack .server01Content .server01Text h2 {
font-size: 48px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf {
padding-right: calc(10rem* .5);
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Title {
padding-bottom: 22px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Text {
padding-bottom: 38px;
}
#serverSw .swiper-pagination {
left: 24px;
}
#serverSw .swiper-pagination .swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap, 10px) 0;
}
#serverSw .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
width: 12px;
height: 12px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Title h2 {
font-size: 28px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Text p {
font-size: 14px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li {
margin-bottom: 24px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiText h2 {
font-size: 16px;
}
#serverSw .swiper-slide:nth-child(2) .serverbg .server02Sack .server02Loca .serve02rg .serve02rgSack .serve02Img:last-child {
padding-left: 160px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02rg .serve02rgSack .serve02Img img {
max-width: 348px;
}
}
@media (max-width: 1199px) {
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf {
padding-right: calc(1rem* .5);
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul {
width: 70%;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02rg {
display: none;
}
#serverSw .serverbg .server02Sack .server02Loca .serve03rg {
display: none;
}
}
@media (max-width: 992px) {
#serverSw .serverbg .server01Sack .server01Content .server01Text h2 {
font-size: 38px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul {
width: 80%;
}
#serverSw .swiper-pagination {
left: 14px;
}
#serverSw .swiper-pagination .swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap, 8px) 0;
width: 6px;
height: 6px;
}
#serverSw .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
width: 10px;
height: 10px;
}
}
@media (max-width: 768px) {
#serverSw .serverbg .server01Sack .server01Content .server01Text h2 {
font-size: 28px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Title h2 {
font-size: 26px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Text p {
font-size: 14px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul {
width: 100%;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiText h2 {
font-size: 16px;
}
}
@media (max-width: 499px) {
.serverPhone {
display: block;
display: none;
}
#serverSw .serverbg .server02Sack {
top: 48%;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li {
margin-bottom: 0px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiImg {
opacity: 0;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiImg img {
max-width: 28%;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiText h2 {
font-size: 16px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Title {
padding-bottom: 36px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiText h2 {
text-align: start;
display: flex;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Text p {
font-size: 14px;
line-height: 25px;
}
#serverSw .serverbg .server01Sack .server01Content .server01Text h2 {
text-align: center;
line-height: 46px;
padding: 0 10px;
}
#serverSw .serverbg .server02Sack .server02Loca .serve02Lf .serve02Ul .serve02Li .serve02LiText h2 span {
display: block;
}
#serverSw .swiper-slide:nth-child(1) .serverBigBg {
display: block;
}
#serverSw .swiper-pagination {
display: none;
}
}
.aboutUs .aboutUsSack {
margin: auto;
width: 92.5%;
padding-bottom: 10px;
}
.aboutUs .aboutUsSack .opaque_txt>h1 {
font-family: Arial;
font-size: 130px;
font-weight: 900;
letter-spacing: 0.06em;
will-change: transform;
}
.aboutUs .aboutUsSack .opaque_txt1>h1 {
font-size: 60px;
font-weight: bold;
letter-spacing: 0em;
will-change: transform;
line-height: 88px;
}
.aboutUs .aboutUsSack .opaque_txt {
position: relative;
}
.aboutUs .aboutUsSack .opaque_txt1 {
position: relative;
}
.aboutUs .aboutUsSack .opaque_txt .h_01 {
background-image: url(../images/txtbg.jpg);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 2
}
.aboutUs .aboutUsSack .opaque_txt1 .h_011 {
background-image: url(../images/txtbg4.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: 100% 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
z-index: 2;
}
.aboutUs .aboutUsSack .opaque_txt .h_02 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
opacity: 1;
background-image: url(../images/txtbg2.png);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.aboutUs .aboutUsSack .opaque_txt1 .h_021 {
width: 100%;
height: 100%;
position: absolute;
top: 0;
opacity: 1;
background-image: url(../images/txtbg3.png);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.aboutus01 .aboutus01Sack {
margin: auto;
padding-bottom: 100px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Title .title01 {
padding-bottom: 50px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Title .title01 h2 {
font-size: 50px;
font-weight: bold;
background: linear-gradient(86deg, #E01E24 0%, #E4742B 111%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
margin-bottom: 12px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Title .title01 p {
font-size: 30px;
font-weight: bold;
background: linear-gradient(77deg, #E01E24 0%, #E4742B 111%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Text {
padding-left: calc(7rem* .5);
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Text .text01 {
padding-bottom: 50px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Text .text01 p {
font-size: 20px;
font-weight: normal;
line-height: 35px;
color: #5E5E5E;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Img .img01 {
overflow: hidden;
position: relative;
padding-top: 90%;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Img .img01 img {
width: 125%;
height: 125%;
position: absolute;
max-width: none;
max-height: none;
-o-object-fit: cover;
object-fit: cover;
left: -12.5%;
top: -25%;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01ImgText {
padding-left: calc(7rem* .5);
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01ImgText .imgText01 .imgT01 {
margin-bottom: 70px;
position: relative;
overflow: hidden;
padding-top: 54%;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01ImgText .imgText01 .imgT01 img {
width: 125%;
height: 125%;
position: absolute;
max-width: none;
max-height: none;
-o-object-fit: cover;
object-fit: cover;
left: -12.5%;
top: -25%;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01ImgText .imgText01 .iText01 p {
font-size: 20px;
font-weight: normal;
line-height: 35px;
text-align: justify;
color: #5E5E5E;
}
.aboutus02 {
padding-bottom: 90px;
}
.aboutus02 .aboutus02TSack {
margin: auto;
padding-bottom: 18px;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TTitle {
display: flex;
justify-content: center;
padding-bottom: 4px;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TTitle h2 {
font-family: D-DIN-Bold;
font-size: 70px;
color: #1A1A1A;
line-height: 62px;
transition: all 0.5s ease;
position: relative;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText:hover .ab02TTitle h2 {
color: #E01E24;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TTitle h2::after {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
font-family: D-DIN-Bold;
color: #E01E24;
opacity: 0;
transition: all 0.5s ease;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList:nth-child(1) .ab02TText .ab02TTitle h2::after {
content: "2010";
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList:nth-child(2) .ab02TText .ab02TTitle h2::after {
content: "15";
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList:nth-child(3) .ab02TText .ab02TTitle h2::after {
content: "128";
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList:nth-child(4) .ab02TText .ab02TTitle h2::after {
content: "8000";
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText:hover .ab02TTitle h2::after {
opacity: 1;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TTitle span {
font-family: Arial;
font-size: 18px;
font-weight: normal;
color: #1A1A1A;
transition: all 0.5s ease;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText:hover .ab02TTitle span {
color: #E01E24;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TCon p {
font-size: 18px;
font-weight: normal;
color: #1A1A1A;
text-align: center;
transition: all 0.5s ease;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText:hover .ab02TCon p {
color: #E01E24;
}
.aboutus02 .aboutus02Btm {
position: relative;
}
.aboutus02 .aboutus02Btm .ab02BtBigLine {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.aboutus02 .aboutus02Btm .ab02BtBigLine img {
object-fit: cover;
object-position: center;
}
.aboutus02 .aboutus02Btm .ab02BtSack {
margin: auto;
}
.aboutus02 .aboutus02Btm .ab02BtSack .ab02BtLine {
display: flex;
justify-content: center;
transition: all 0.5s ease;
width: 23%;
}
.aboutus02 .aboutus02Btm .ab02BtSack .ab02BtLine .ab02BtHover img {
max-width: 100%;
object-fit: cover;
object-position: center;
}
.aboutus03 {
padding-bottom: 70px;
}
.aboutus03 .ab03Top {
margin: auto;
}
.aboutus03 .ab03Top .ab03TopLf {
position: relative;
padding: 0;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TopLfBox {
position: absolute;
width: 100%;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
padding-right: calc(12rem* .5);
padding-left: calc(10rem* .5);
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
padding-bottom: 20px;
margin-bottom: 30px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: #E01E24;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfTitle h2 {
font-size: 44px;
font-weight: 500;
color: #1A1A1A;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfIcoSack {
position: relative;
overflow: hidden;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfIcoSack .ab03TpLfIco img {
max-width: 100%;
width: 52px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfIcoSack .ab03TpLfIco1 {
transition: all 0.5s ease;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TopLfBox:hover .ab03TpLfSack .ab03TpLfIcoSack .ab03TpLfIco1 {
transform: translateY(-120%);
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfIcoSack .ab03TpLfIco2 {
position: absolute;
left: 0;
top: 120%;
transition: all 0.5s ease;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TopLfBox:hover .ab03TpLfSack .ab03TpLfIcoSack .ab03TpLfIco2 {
top: 0;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSmTitle {
padding-bottom: 44px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSmTitle h2 {
font-size: 26px;
font-weight: 500;
color: #1A1A1A;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfText p {
font-size: 18px;
font-weight: normal;
line-height: 30px;
color: #5E5E5E;
text-align: justify;
transform: translate3d(0, 0, 0);
}
.aboutus03 .ab03Top .ab03TopRg {
padding: 0;
}
.aboutus03 .ab03Top .ab03TopRg .ab03TopRgImg {
position: relative;
overflow: hidden;
}
.aboutus03 .ab03Top .ab03TopRg .ab03TopRgImg::before {
content: "";
display: block;
width: 100%;
height: 100%;
z-index: 1;
background: #fff;
position: absolute;
left: 0;
top: 0;
transition: ease 1s;
}
.aboutus03 .ab03Top .ab03TopRg .ab03TopRgImg.on::before {
transform: translateX(100%);
}
.aboutus03 .ab03Top .ab03TopRg .ab03TopRgImg img {
max-width: 100%;
}
.aboutus03 .ab03btm {
margin: auto;
}
.aboutus03 .ab03btm .ab03btLf {
padding: 0;
}
.aboutus03 .ab03btm .ab03btLf .ab03btLfImg {
position: relative;
overflow: hidden;
}
.aboutus03 .ab03btm .ab03btLf .ab03btLfImg::before {
content: "";
display: block;
width: 100%;
height: 100%;
z-index: 1;
background: #fff;
position: absolute;
left: 0;
top: 0;
transition: ease 1s;
}
.aboutus03 .ab03btm .ab03btLf .ab03btLfImg.on::before {
transform: translateX(100%);
}
.aboutus03 .ab03btm .ab03btLf .ab03btLfImg img {
max-width: 100%;
}
.aboutus03 .ab03btm .ab03btRg {
position: relative;
padding: 0;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox {
position: absolute;
width: 100%;
left: 50%;
top: 46%;
transform: translate(-50%, -50%);
padding-right: calc(10rem* .5);
padding-left: calc(12rem* .5);
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack {
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative;
padding-bottom: 20px;
margin-bottom: 30px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack:after {
position: absolute;
content: "";
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background: #E01E24;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgTitle h2 {
font-size: 44px;
font-weight: 500;
color: #1A1A1A;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgIcoSack {
position: relative;
overflow: hidden;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgIcoSack .ab03btRgIco1 {
transition: all 0.5s ease;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox:hover .ab03btRgSack .ab03btRgIcoSack .ab03btRgIco1 {
transform: translateY(-120%);
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgIcoSack .ab03btRgIco2 {
position: absolute;
left: 0;
top: 120%;
transition: all 0.5s ease;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox:hover .ab03btRgSack .ab03btRgIcoSack .ab03btRgIco2 {
top: 0;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgIcoSack .ab03btRgIco img {
max-width: 100%;
width: 52px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSmTitle {
padding-bottom: 30px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSmTitle h2 {
font-size: 24px;
font-weight: 500;
color: #1A1A1A;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgText p {
font-size: 18px;
font-weight: normal;
line-height: normal;
text-align: justify;
color: #5E5E5E;
transform: translate3d(0, 0, 0);
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgText p {
margin-bottom: 12px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgText p:first-child {
margin-bottom: 20px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgText p:last-child {
margin-bottom: 0;
}
.ab04 {
background: url(../images/ab04bg.jpg) no-repeat;
background-size: cover;
background-position: center center;
padding: 90px 0;
}
.ab04 .ab04Sack {
margin: auto;
}
.ab04 .ab04Sack .ab04Txt p {
font-weight: bold;
font-size: 50px;
color: #FFFFFF;
white-space: nowrap;
}
.ab04 .ab04Sack .ab04Txt p:nth-child(odd) {
margin-bottom: 32px;
}
.ab04 .ab04Sack .ab04Txt p span {
position: relative;
padding-left: 40px;
padding-right: 60px;
}
.ab04 .ab04Sack .ab04Txt p span::after {
content: "";
background: #FFFFFF;
width: 12px;
height: 12px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
border-radius: 50%;
}
.ab04 .ab04Sack .ab04Txt p span:nth-child(even) {
font-family: Arial;
color: rgba(222, 89, 14);
text-shadow: -1px 0 0 rgba(255, 255, 255, 0.7), 0 1px 0 rgba(255, 255, 255, 0.7), 1px 0 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(255, 255, 255, 0.7);
letter-spacing: 0.04em;
}
.ab05 {
background: #FFFFFF;
position: relative;
}
.ab05 .ab05Img {
position: absolute;
top: -2%;
left: -10%;
height: auto;
width: auto;
animation: xb2 8s linear infinite;
-webkit-animation: xb2 8s linear infinite;
}
.ab05 .ab05Img img {
max-width: 100%;
}
.ab05 .ab05Sack {
margin: auto;
padding-top: 140px;
padding-bottom: 62px;
z-index: 2;
position: relative;
}
.ab05 .ab05Sack .ab05Title {
padding-bottom: 142px;
}
.ab05 .ab05Sack .ab05Title h2 {
font-size: 44px;
line-height: 64px;
font-weight: 500;
color: #1A1A1A;
}
.ab05 .ab05Sack .ab05Ul {
margin: auto;
}
.ab05 .ab05Sack .ab05Ul .ab05List {
width: 14.28571428%;
padding: 0;
position: relative;
overflow: hidden;
}
.ab05 .ab05Sack .ab05Ul .ab05List::before {
content: '';
position: absolute;
bottom: 0%;
right: 0%;
z-index: 12;
width: 0%;
height: 1px;
background-color: rgb(255, 0, 0);
-webkit-transition: all 0.8s ease 0s;
-moz-transition: all 0.8s ease 0s;
-ms-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
transition: all 0.8s ease 0s;
opacity: 0;
}
.ab05 .ab05Sack .ab05Ul .ab05List:hover:before {
width: 100%;
opacity: 1;
}
.ab05 .ab05Sack .ab05Ul .ab05List::after {
content: '';
position: absolute;
bottom: 0%;
left: 0%;
z-index: 12;
width: 1px;
height: 0%;
background-color: rgb(255, 0, 0);
-webkit-transition: all 0.8s ease 0s;
-moz-transition: all 0.8s ease 0s;
-ms-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
transition: all 0.8s ease 0s;
opacity: 0;
}
.ab05 .ab05Sack .ab05Ul .ab05List:hover:after {
height: 100%;
opacity: 1;
}
.ab05 .ab05Sack .ab05Ul .ab05List .ab05ListImg {
position: relative;
overflow: hidden;
}
.ab05 .ab05Sack .ab05Ul .ab05List .ab05ListImg::before {
content: '';
position: absolute;
top: 0%;
left: 0%;
width: 0%;
height: 1px;
background-color: #ff0000;
-webkit-transition: all 0.8s ease 0s;
-moz-transition: all 0.8s ease 0s;
-ms-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
transition: all 0.8s ease 0s;
opacity: 0;
z-index: 12;
}
.ab05 .ab05Sack .ab05Ul .ab05List:hover .ab05ListImg::before {
width: 100%;
opacity: 1;
}
.ab05 .ab05Sack .ab05Ul .ab05List .ab05ListImg::after {
content: '';
position: absolute;
top: 0%;
right: 0%;
z-index: 12;
width: 1px;
height: 0%;
background-color: #ff0000;
-webkit-transition: all 0.8s ease 0s;
-moz-transition: all 0.8s ease 0s;
-ms-transition: all 0.8s ease 0s;
-o-transition: all 0.8s ease 0s;
transition: all 0.8s ease 0s;
opacity: 0;
}
.ab05 .ab05Sack .ab05Ul .ab05List:hover .ab05ListImg::after {
height: 100%;
opacity: 1;
}
.ab05 .ab05Sack .ab05Ul .ab05List .ab05ListImg img {
transform: scale(1);
width: 100%;
transition: all 0.8s ease;
}
.ab05 .ab05Sack .ab05Ul .ab05List .ab05ListImg:hover img {
transform: scale(1.1);
}
.ab06 img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
@media (max-width: 1600px) {
.aboutus03 .ab03btm .ab03btLf .ab03btLfImg {
height: 500px;
}
.aboutus03 .ab03btm .ab03btLf .ab03btLfImg img {
height: 100%;
object-fit: cover;
object-position: center center;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox {
padding-left: calc(7rem* .5);
}
}
@media (max-width: 1536px) {
.aboutUs .aboutUsSack .opaque_txt>h1 {
font-size: 100px;
}
.aboutUs .aboutUsSack .opaque_txt1>h1 {
font-size: 50px;
line-height: 75px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Title .title01 h2 {
font-size: 44px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Text {
padding-left: calc(4rem* .5);
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Text .text01 {
padding-bottom: 38px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Text .text01 p {
font-size: 18px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01ImgText {
padding-left: calc(4rem* .5);
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01ImgText .imgText01 .imgT01 {
margin-bottom: 22px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01ImgText .imgText01 .iText01 p {
font-size: 18px;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TTitle h2 {
font-size: 58px;
line-height: 48px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TopLfBox {
padding-right: calc(7rem* .5);
padding-left: calc(8rem* .5);
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfTitle h2 {
font-size: 40px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfIcoSack .ab03TpLfIco img {
width: 40px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSmTitle {
padding-bottom: 22px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfText p {
font-size: 16px;
}
.aboutus03 .ab03Top .ab03TopRg .ab03TopRgImg {
height: 500px;
}
.aboutus03 .ab03Top .ab03TopRg .ab03TopRgImg img {
height: 100%;
object-fit: cover;
object-position: center center;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox {
padding-right: calc(8rem* .5);
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgTitle h2 {
font-size: 40px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgIcoSack .ab03btRgIco img {
width: 44px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgText p {
margin-bottom: 4px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgText p:first-child {
margin-bottom: 8px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgText p {
font-size: 16px;
}
.ab04 {
padding: 60px 0;
}
.ab04 .ab04Sack .ab04Txt p {
font-size: 40px;
}
.ab05 .ab05Sack .ab05Title {
padding-bottom: 100px;
}
.ab05 .ab05Sack .ab05Title h2 {
font-size: 40px;
line-height: 58px;
}
.ab05 .ab05Img img {
max-width: 80%;
}
}
@media (max-width: 1300px) {
.ab05 .ab05Sack .ab05Ul .ab05List {
width: 25%;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.aboutUs .aboutUsSack .opaque_txt1>h1 {
font-size: 48px;
line-height: 60px;
}
.aboutus01 .aboutus01Sack {
padding-bottom: 80px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Title .title01 h2 {
font-size: 38px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Text .text01 p {
font-size: 14px;
line-height: 26px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Img .img01 {
padding-top: 84%;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01ImgText .imgText01 .iText01 p {
font-size: 14px;
line-height: 26px;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TTitle h2 {
font-size: 50px;
line-height: 44px;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TTitle span {
font-size: 16px;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TCon p {
font-size: 14px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TopLfBox {
padding-left: calc(7rem* .5);
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack:after {
height: 3px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfTitle h2 {
font-size: 28px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfIcoSack .ab03TpLfIco img {
width: 30px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSmTitle h2 {
font-size: 20px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfText p {
font-size: 14px;
line-height: 24px;
}
.aboutus03 .ab03btm .ab03btRg {
margin: auto;
}
.aboutus03 .ab03Top .ab03TopRg .ab03TopRgImg {
height: auto;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgTitle h2 {
font-size: 28px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgIcoSack .ab03btRgIco img {
width: 36px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSmTitle h2 {
font-size: 20px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgText p {
font-size: 14px;
line-height: 24px;
margin-bottom: 0px;
}
.aboutus03 .ab03btm .ab03btLf .ab03btLfImg {
height: 380px;
}
.ab04 {
padding: 52px 0;
}
.ab04 .ab04Sack .ab04Txt p {
font-size: 28px;
}
.ab04 .ab04Sack .ab04Txt p:nth-child(odd) {
margin-bottom: 18px;
}
.ab04 .ab04Sack .ab04Txt p span {
padding-left: 34px;
padding-right: 52px;
}
.ab05 .ab05Sack {
padding-top: 76px;
}
.ab05 .ab05Sack .ab05Title {
padding-bottom: 70px;
}
.ab05 .ab05Sack .ab05Title h2 {
font-size: 28px;
line-height: 46px;
}
.ab05 .ab05Sack .ab05Ul .ab05List {
width: 14%;
}
}
@media (max-width: 1199.9px) {
.aboutUs .aboutUsSack .opaque_txt>h1 {
font-size: 90px;
}
.aboutUs .aboutUsSack .opaque_txt1>h1 {
font-size: 40px;
line-height: 64px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Title .title01 {
padding-bottom: 14px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Text {
padding-left: calc(1.5rem* .5);
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Img .img01 {
margin-bottom: 20px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01ImgText {
padding-left: calc(1.5rem* .5);
}
.aboutus03 .ab03Top .ab03TopLf {
margin: auto;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TopLfBox {
position: relative;
left: 0;
top: 0;
transform: translate(0, 0);
padding: 0;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfText {
padding-bottom: 20px;
}
.aboutus03 .ab03btm .ab03btLf {
margin: auto;
}
.aboutus03 .ab03btm .ab03btLf .ab03btLfImg {
height: auto;
}
.aboutus03 .ab03Top .ab03TopRg {
margin: auto;
}
.aboutus03 .ab03Top .ab03TopRg .ab03TopRgImg {
height: auto;
}
.aboutus03 .ab03btm {
flex-direction: column-reverse;
}
.aboutus03 .ab03btm .ab03btRg {
margin: auto;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox {
position: relative;
left: 0;
top: 0;
transform: translate(0, 0);
padding: 0;
}
.aboutus03 .ab03Top .ab03TopRg .ab03TopRgImg {
padding-bottom: 40px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgText {
padding-bottom: 20px;
}
}
@media (max-width: 768px) {
.aboutUs .aboutUsSack {
padding-bottom: 34px;
}
.aboutUs .aboutUsSack .opaque_txt>h1 {
font-size: 70px;
}
.aboutUs .aboutUsSack .opaque_txt1>h1 {
font-size: 28px;
line-height: 44px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Title .title01 h2 {
font-size: 36px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Text .text01 p {
font-size: 16px;
line-height: 26px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01ImgText .imgText01 .iText01 p {
font-size: 16px;
line-height: 26px;
}
.aboutus02 {
padding-bottom: 64px;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TTitle h2 {
font-size: 43px;
line-height: 40px;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TCon p {
font-size: 15px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfTitle h2 {
font-size: 36px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfIcoSack .ab03TpLfIco img {
width: 36px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgTitle h2 {
font-size: 36px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgIcoSack .ab03btRgIco img {
width: 38px;
}
.ab04 {
padding: 44px 0;
}
.ab04 .ab04Sack .ab04Txt p {
font-size: 34px;
}
.ab04 .ab04Sack .ab04Txt p:nth-child(odd) {
margin-bottom: 18px;
}
.ab05 .ab05Sack {
padding-top: 96px;
}
.ab05 .ab05Sack .ab05Title h2 {
font-size: 36px;
line-height: 48px;
}
.ab05 .ab05Img {
left: -20%;
}
.ab05 .ab05Img img {
max-width: 70%;
}
.ab06 {
height: 220px;
}
}
@media (max-width: 576px) {
.ab05 .ab05Sack .ab05Ul .ab05List {
width: 33.33333%;
}
}
@media (max-width: 499px) {
.aboutUs .aboutUsSack {
padding-top: 10px;
padding-bottom: 0px;
}
.aboutUs {
position: absolute;
/* top: 46%; */
top: 28%;
transform: translateY(-50%);
width: 100%;
}
.aboutUs .aboutUsSack .opaque_txt {
transform: translateY(0px) !important;
}
.aboutUs .aboutUsSack .opaque_txt1 {
transform: translateY(0px) !important;
}
.aboutUs .aboutUsSack .opaque_txt .h_01 {
background-size: 100% 0 !important;
}
.aboutUs .aboutUsSack .opaque_txt .h_02 {
background-size: cover !important;
}
.aboutUs .aboutUsSack .opaque_txt1 .h_011 {
background-size: 100% 0 !important;
}
.aboutUs .aboutUsSack .opaque_txt1 .h_021 {
background-size: cover !important;
}
.aboutUs .aboutUsSack .opaque_txt>h1 {
font-size: 58px;
letter-spacing: 0em;
}
.aboutus01 .aboutus01Sack {
padding-bottom: 34px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Title .title01 {
margin-top: 34px;
padding-bottom: 0px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Title .title01 h2 {
font-size: 26px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Text .text01 {
padding-bottom: 26px;
}
.aboutus03 {
padding-bottom: 40px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack {
margin-bottom: 16px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfTitle h2 {
font-size: 24px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSack .ab03TpLfIcoSack .ab03TpLfIco img {
width: 24px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSmTitle h2 {
font-size: 18px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgTitle h2 {
font-size: 24px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack .ab03btRgIcoSack .ab03btRgIco img {
width: 35px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSmTitle h2 {
font-size: 18px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01Text .text01 p {
font-size: 14px;
}
.aboutus01 .aboutus01Sack .aboutus01Row .aboutus01ImgText .imgText01 .iText01 p {
font-size: 14px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfText p {
font-size: 14px;
line-height: 22px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgText p {
font-size: 14px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSack {
margin-bottom: 16px;
}
.aboutus03 .ab03Top .ab03TopLf .ab03TpLfSmTitle {
padding-bottom: 8px;
}
.aboutus03 .ab03btm .ab03btRg .ab03btRgBox .ab03btRgSmTitle {
padding-bottom: 12px;
}
.ab04 {
padding: 30px 0;
}
.ab04 .ab04Sack .ab04Txt p {
font-size: 20px;
}
.ab05 .ab05Img {
left: -30%;
top: -2%;
}
.ab05 .ab05Img img {
max-width: 60%;
}
.ab05 .ab05Sack {
padding-top: 40px;
padding-bottom: 26px;
}
.ab05 .ab05Sack .ab05Title {
padding-bottom: 30px;
}
.ab05 .ab05Sack .ab05Title h2 {
font-size: 24px;
line-height: 36px;
}
.ab05 .ab05Sack .ab05Ul .ab05List {
width: 33.33333%;
}
.ab05 .ab05Sack .ab05Ul .ab05List:first-child {
display: none;
}
.ab06 {
height: 170px;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TTitle h2 {
font-size: 30px;
line-height: 30px;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TTitle span {
font-size: 14px;
}
.aboutus02 .aboutus02TSack .aboutus02Top .aboutus02TList .ab02TText .ab02TCon p {
font-size: 12px;
}
.aboutus02 .aboutus02TSack {
margin: auto;
padding-bottom: 8px;
}
.ab04 .ab04Sack .ab04Txt p span {
position: relative;
padding-left: 10px;
padding-right: 26px;
}
.ab04 .ab04Sack .ab04Txt p span::after {
width: 7px;
height: 7px;
}
.aboutus03 .ab03Top .ab03TopRg .ab03TopRgImg img {
width: 100%;
height: auto;
object-fit: contain;
object-position: center center;
}
.aboutus03 .ab03btm .ab03btLf .ab03btLfImg img {
width: 100%;
height: auto;
object-fit: contain;
object-position: center center;
}
}
.case {
position: relative;
z-index: 1;
background: #FFFFFF;
}
.case .caseSack {
margin: auto;
padding-top: 110px;
padding-bottom: 140px;
}
.case .caseSack .caseUl {
margin-right: calc(-.5* 0.8rem);
margin-left: calc(-.5* 0.8rem);
}
.case .caseSack .caseUl .caseList {
padding-right: calc(0.8rem* .5);
padding-left: calc(0.8rem* .5);
}
.case .caseSack .caseUl .caseList:nth-child(3) {
display: none;
}
.case .caseSack .caseUl .caseList .caseBigBox {
margin-bottom: 10px;
}
.case .caseSack .caseUl .caseList .caseBigBox a {
position: relative;
display: block;
}
.case .caseSack .caseUl .caseList .caseBigBox .caseImg img {
width: 100%;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity: 0;
transition: all 0.5s ease;
}
.case .caseSack .caseUl .caseList .caseBigBox:hover .CaseText {
opacity: 1;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack {
position: absolute;
width: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 0 10px 0 40px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseTitle {
padding-bottom: 14px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseTitle h2 {
font-size: 30px;
color: #FFFFFF;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseSmTitle {
padding-bottom: 116px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseSmTitle p {
font-size: 18px;
color: #FFFFFF;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseKeyWord {
padding-bottom: 64px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseKeyWord .caseKeyWordName {
text-decoration: none;
display: inline-block;
vertical-align: top;
position: relative;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 30px;
padding: 4px 18px;
margin-right: 6px;
margin-bottom: 6px;
transition: all 0.5s ease;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseKeyWord .caseKeyWordName:hover {
border: 1px solid rgb(255, 255, 255);
background: #FFFFFF;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseKeyWord .caseKeyWordName p {
font-size: 14px;
font-weight: normal;
color: #FFFFFF;
transition: all 0.5s ease;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseKeyWord .caseKeyWordName:hover p {
color: #333333;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseIco {
display: inline-block;
background: #FFFFFF;
border-radius: 50%;
padding: 12px 17px;
position: relative;
transform: translateX(10px);
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseIco::after {
position: absolute;
background: #ffffff5d;
content: "";
width: 100%;
height: 100%;
left: 0;
top: 0;
animation: scale1 1s alternate infinite;
border-radius: 50%;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseIco i {
color: rgba(197, 7, 13);
font-size: 18px;
font-weight: bold;
}
@media (max-width: 1536px) {
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack {
padding: 0 10px 0 24px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseTitle h2 {
font-size: 24px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseSmTitle p {
font-size: 14px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseKeyWord {
padding-bottom: 50px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseKeyWord .caseKeyWordName {
padding: 6px 18px;
}
}
@media (max-width: 1300px) {
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseKeyWord .caseKeyWordName {
padding: 2px 12px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseIco {
padding: 4px 9px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.case .caseSack {
margin: auto;
padding-top: 74px;
padding-bottom: 66px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseTitle {
padding-bottom: 6px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseSmTitle {
padding-bottom: 50px;
}
}
@media (min-width: 1200px) {
.case .caseSack .caseUl .caseList:nth-child(3) {
display: block;
}
}
@media (max-width: 768px) {
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseTitle h2 {
font-size: 18px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseKeyWord {
display: none;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseIco {
transform: translateX(0px);
}
}
@media (max-width: 499px) {
.case .caseSack {
padding-top: 40px;
padding-bottom: 46px;
}
.case .caseSack .caseUl {
margin-right: calc(-.5* 0.5rem);
margin-left: calc(-.5* 0.5rem);
}
.case .caseSack .caseUl .caseList {
padding-right: calc(0.5rem* .5);
padding-left: calc(0.5rem* .5);
}
.case .caseSack .caseUl .caseList .caseBigBox {
margin-bottom: 7px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack {
padding: 0 10px 0 12px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseSmTitle {
padding-bottom: 0px;
opacity: 0;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseSmTitle p {
font-size: 12px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseIco {
padding: 2px 7px;
}
.case .caseSack .caseUl .caseList .caseBigBox .CaseText .CaseTextSack .caseIco i {
font-size: 12px;
}
}
.caseDet01 {
position: relative;
z-index: 1;
background: #0BA299;
}
.caseDet01 .caseDet01Sack {
margin: auto;
padding-top: 74px;
padding-bottom: 74px;
}
.caseDet01 .caseDet01Con {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
padding-bottom: 12px;
margin-bottom: 30px;
}
.caseDet01 .caseDet01Con::after {
position: absolute;
content: "";
width: 100%;
height: 1px;
background: #FFFFFF;
left: 0;
bottom: 0;
}
.caseDet01 .caseDet01Con .caseDet01Tit {
width: 52%;
}
.caseDet01 .caseDet01Con .caseDet01TitNa {
width: 48%;
}
.caseDet01 .caseDet01Con .caseDet01Tit h2 {
font-size: 40px;
font-weight: normal;
color: #FFFFFF;
}
.caseDet01 .caseDet01Con .caseDet01TitNa h2 {
font-size: 30px;
font-weight: normal;
color: #FFFFFF;
}
.caseDet01 .caseDet01Txt {
display: flex;
justify-content: space-between;
}
.caseDet01 .caseDet01Txt .caseDet01lf {
width: 52%;
}
.caseDet01 .caseDet01Txt .caseDet01lfTrade {
padding-bottom: 14px;
}
.caseDet01 .caseDet01Txt .caseDet01lfTrade a {
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: inline-block;
vertical-align: top;
padding: 0 6px;
position: relative;
}
.caseDet01 .caseDet01Txt .caseDet01lfTrade a:first-child {
padding: 0;
padding-right: 6px;
}
.caseDet01 .caseDet01Txt .caseDet01lfServe {
padding-right: 20px;
}
.caseDet01 .caseDet01Txt .caseDet01lfServe a {
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
display: inline-block;
vertical-align: top;
margin: 0 2px;
position: relative;
border: 1px solid #FFFFFF;
border-radius: 20px;
padding: 0 15px 2px 15px;
margin-bottom: 14px;
}
.caseDet01 .caseDet01Txt .caseDet01lfServe a:first-child {
font-size: 18px;
margin: 0;
padding: 0;
padding-right: 6px;
border: none;
}
.caseDet01 .caseDet01Txt .caseDet01lfAd {
display: flex;
align-items: center;
}
.caseDet01 .caseDet01Txt .caseDet01lfAd .caseDet01lfAdTit {
padding-bottom: 4px;
}
.caseDet01 .caseDet01Txt .caseDet01lfAd .caseDet01lfAdTit h2 {
font-size: 18px;
font-weight: normal;
color: #FFFFFF;
}
.caseDet01 .caseDet01Txt .caseDet01lfAd a {
display: inline-block;
background: linear-gradient(to right, #FFFFFF, #FFFFFF) no-repeat right 80%;
background-size: 0px 1px;
transition: background-size 0.5s;
padding-bottom: 8px;
}
.caseDet01 .caseDet01Txt .caseDet01lfAd a p {
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
user-select: all;
-moz-user-select: all;
-webkit-user-select: all;
-ms-user-select: all;
-khtml-user-select: all;
}
.caseDet01 .caseDet01Txt .caseDet01Rg {
width: 48%;
}
.caseDet01 .caseDet01Txt .caseDet01Rg .caseDet01RgP p {
font-size: 16px;
font-weight: normal;
line-height: 24px;
color: #FFFFFF;
}
.caseDetLoca {
position: relative;
z-index: 1;
background: #FFFFFF;
}
.caseDetLoca .caseDet02 .caseDet02Sack {
margin: auto;
padding-top: 100px;
padding-bottom: 120px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Title {
padding-bottom: 100px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Title h2 {
font-size: 44px;
font-weight: normal;
text-align: center;
color: #1A1A1A;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items {
justify-content: center;
margin-right: calc(-.5* 2rem);
margin-left: calc(-.5* 2rem);
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item {
width: 33.33333%;
padding-right: calc(2rem* .5);
padding-left: calc(2rem* .5);
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox {
position: relative;
display: block;
width: 100%;
/* height: 300px; */
height: 206px;
border-radius: 30px;
box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox:hover {
transform: translateY(-20px);
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox i {
font-size: 30px;
font-weight: normal;
/* color: #FFFFFF; */
color: #5E5E5E;
position: absolute;
left: 50%;
/* top: 24%; */
top: 114%;
transform: translate(-50%, -50%);
}
.caseDetLoca .caseDet03 .caseDet03Title {
margin: auto;
padding-bottom: 100px;
}
.caseDetLoca .caseDet03 .caseDet03Title h2 {
font-size: 44px;
font-weight: normal;
color: #1A1A1A;
text-align: center;
}
.caseDetLoca .caseDet03 .caseDet03Bg {
padding-top: 100vh;
background-attachment: fixed;
background-position-x: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 100;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
backface-visibility: hidden;
transform: translate3d(0, 0, 0);
}
.caseDetLoca .caseDet03 .caseDet03Bg .caseDet03BlackLf {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 18%;
background: #FFFFFF;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.caseDetLoca .caseDet03 .caseDet03Bg .caseDet03BlackRg {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 18%;
background: #FFFFFF;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.caseDetLoca .caseDet04bg {
height: 400px;
}
.caseDetLoca .caseDet04 {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
height: 100%;
background-color: rgba(11, 162, 153);
}
.caseDetLoca .caseDet04 .caseDet04Sack {
margin: auto;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Loca {
align-items: flex-start;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Lf {
position: -webkit-sticky;
position: sticky;
top: 50%;
transform: translate(0%, -50%);
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Lf img {
max-width: 100%;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg {
overflow: hidden;
display: flex;
justify-content: end;
position: relative;
padding-top: 100px;
padding-bottom: 100px;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg dl {
display: block;
float: left;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg dl:nth-child(1) {
margin-right: 48px;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg dl:nth-child(2) {
padding-top: 60px;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg dl dd {
width: 100%;
overflow: hidden;
margin-bottom: 56px;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg dl dd img {
max-width: 100%;
}
.caseDetLoca .caseDet05 .caseDet05Bg {
padding-top: 100vh;
background-attachment: fixed;
background-position-x: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 100;
}
.caseDetLoca .caseDet05 .caseDet05Bg .caseDet05BlackLf {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 18%;
background: #FFFFFF;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.caseDetLoca .caseDet05 .caseDet05Bg .caseDet05BlackRg {
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 18%;
background: #FFFFFF;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.caseDetLoca .caseDet06 .caseDet06Sack {
margin: auto;
padding-top: 106px;
padding-bottom: 106px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Title {
padding-bottom: 60px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Title h2 {
font-size: 44px;
font-weight: normal;
color: #1A1A1A;
text-align: center;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn {
display: flex;
justify-content: center;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox:nth-child(1) {
padding-right: 100px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a {
display: inline-block;
padding: 26px 56px 26px;
border-radius: 10px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox:nth-child(1) a {
background: #E01E24;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox:nth-child(2) a {
background: linear-gradient(255deg, #E48826 -3%, #E01E24 100%);
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a p {
font-size: 30px;
font-weight: normal;
color: #FFFFFF;
display: inline-flex;
position: relative;
overflow: hidden;
width: 9em;
white-space: nowrap;
text-indent: 0;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a:hover p {
text-indent: -9em !important;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a p span {
display: inline-flex;
width: 9em;
text-align: center;
text-indent: 0;
justify-content: center;
min-width: 9em;
}
.caseDetLoca .caseDet07 .caseDet07Ul {
margin: auto;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List {
padding: 0;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List a {
display: block;
position: relative;
overflow: hidden;
height: 100%;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List a::before {
content: '';
position: absolute;
bottom: 6%;
right: 2%;
z-index: 12;
width: 0%;
height: 1px;
background-color: #FFFFFF;
-webkit-transition: all 1.5s ease 0s;
-moz-transition: all 1.5s ease 0s;
-ms-transition: all 1.5s ease 0s;
-o-transition: all 1.5s ease 0s;
transition: all 1.5s ease 0s;
opacity: 0;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List:hover a::before {
width: 96%;
opacity: 1;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List a::after {
content: '';
position: absolute;
bottom: 6%;
left: 2%;
z-index: 12;
width: 1px;
height: 0%;
background-color: #FFFFFF;
-webkit-transition: all 1.5s ease 0s;
-moz-transition: all 1.5s ease 0s;
-ms-transition: all 1.5s ease 0s;
-o-transition: all 1.5s ease 0s;
transition: all 1.5s ease 0s;
opacity: 0;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List:hover a::after {
height: 88%;
opacity: 1;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Img {
position: relative;
z-index: 2;
height: 100%;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Img img {
width: 100%;
transition: all 0.8s ease;
height: 100%;
object-fit: cover;
object-position: center;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List:hover .caseDet07Img img {
transform: scale(1.1);
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 6;
width: 100%;
height: 100%;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text::before {
content: '';
position: absolute;
top: 6%;
left: 2%;
width: 0%;
height: 1px;
background-color: #FFFFFF;
-webkit-transition: all 1.5s ease 0s;
-moz-transition: all 1.5s ease 0s;
-ms-transition: all 1.5s ease 0s;
-o-transition: all 1.5s ease 0s;
transition: all 1.5s ease 0s;
opacity: 0;
z-index: 12;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List:hover .caseDet07Text::before {
width: 96%;
opacity: 1;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text::after {
content: '';
position: absolute;
top: 6%;
right: 2%;
z-index: 12;
width: 1px;
height: 0%;
background-color: #FFFFFF;
-webkit-transition: all 1.5s ease 0s;
-moz-transition: all 1.5s ease 0s;
-ms-transition: all 1.5s ease 0s;
-o-transition: all 1.5s ease 0s;
transition: all 1.5s ease 0s;
opacity: 0;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List:hover .caseDet07Text::after {
height: 88%;
opacity: 1;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07TextSack {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 6;
width: 94%;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07Page {
padding-bottom: 40px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07Page p {
font-size: 24px;
font-weight: normal;
color: #FFFFFF;
text-align: center;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07TItle h2 {
font-size: 44px;
font-weight: normal;
color: #FFFFFF;
text-align: center;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Hover {
position: absolute;
width: 100%;
height: 100%;
background: rgba(224, 30, 36, 0.8);
opacity: 0;
top: 0;
left: 0;
z-index: 4;
transition: all 0.5s ease;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List:hover .caseDet07Hover {
opacity: 1;
}
.caseDet01 .caseDet01Txt .caseDet01lfAdPh {
display: none;
}
@media (max-width: 1536px) {
.caseDet01 .caseDet01Con .caseDet01Tit {
width: 48%;
}
.caseDet01 .caseDet01Con .caseDet01Tit h2 {
font-size: 36px;
}
.caseDet01 .caseDet01Con .caseDet01TitNa {
width: 52%;
}
.caseDet01 .caseDet01Con .caseDet01TitNa h2 {
font-size: 26px;
}
.caseDet01 .caseDet01Txt .caseDet01lf {
width: 48%;
}
.caseDet01 .caseDet01Txt .caseDet01Rg {
width: 52%;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Title h2 {
font-size: 40px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox {
/* height: 260px; */
height: 200px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox:hover {
transform: translateY(-10px);
}
.caseDetLoca .caseDet03 .caseDet03Title h2 {
font-size: 40px;
}
.caseDetLoca .caseDet04bg {
height: 360px;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg {
padding-top: 80px;
padding-bottom: 80px;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg dl:nth-child(1) {
margin-right: 22px;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg dl dd {
margin-bottom: 18px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Title h2 {
font-size: 36px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox:nth-child(1) {
padding-right: 26px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a {
padding: 12px 28px 10px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a p {
font-size: 22px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07Page {
padding-bottom: 16px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07Page p {
font-size: 22px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07TItle h2 {
font-size: 28px;
}
}
@media (max-width: 1400px) {
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox {
/* height: 230px; */
height: 200px;
}
.caseDetLoca .caseDet04bg {
height: 290px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.caseDet01 .caseDet01Sack {
padding-top: 54px;
padding-bottom: 54px;
}
.caseDet01 .caseDet01Con .caseDet01Tit h2 {
font-size: 28px;
}
.caseDet01 .caseDet01Con .caseDet01TitNa h2 {
font-size: 20px;
}
.caseDet01 .caseDet01Txt .caseDet01lfTrade a {
font-size: 16px;
}
.caseDet01 .caseDet01Con .caseDet01Tit {
width: 46%;
}
.caseDet01 .caseDet01Con .caseDet01TitNa {
width: 50%;
}
.caseDet01 .caseDet01Txt .caseDet01lf {
width: 46%;
}
.caseDet01 .caseDet01Txt .caseDet01Rg {
width: 50%;
}
.caseDet01 .caseDet01Txt .caseDet01lfServe a:first-child {
font-size: 16px;
}
.caseDet01 .caseDet01Txt .caseDet01lfServe a {
font-size: 12px;
padding: 0 10px 1px 10px;
}
.caseDet01 .caseDet01Txt .caseDet01lfAd .caseDet01lfAdTit h2 {
font-size: 16px;
}
.caseDet01 .caseDet01Txt .caseDet01lfAd a p {
font-size: 16px;
}
.caseDet01 .caseDet01Txt .caseDet01Rg .caseDet01RgP p {
font-size: 14px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Title h2 {
font-size: 28px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item {
padding-right: calc(1.5rem* .5);
padding-left: calc(1.5rem* .5);
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox i {
font-size: 20px;
}
.caseDetLoca .caseDet02 .caseDet02Sack {
padding-top: 70px;
padding-bottom: 80px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Title {
padding-bottom: 50px;
}
.caseDetLoca .caseDet03 .caseDet03Title {
padding-bottom: 50px;
}
.caseDetLoca .caseDet03 .caseDet03Title h2 {
font-size: 28px;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg {
padding-right: 34px;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg dl:nth-child(1) {
margin-right: 4px;
}
.caseDetLoca .caseDet06 .caseDet06Sack {
padding-top: 60px;
padding-bottom: 60px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Title {
padding-bottom: 46px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Title h2 {
font-size: 28px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a {
padding: 10px 26px 6px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a p {
font-size: 20px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07Page {
padding-bottom: 12px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07Page p {
font-size: 18px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07TItle h2 {
font-size: 26px;
}
}
@media (max-width: 1199px) {
.caseDet01 .caseDet01Con {
align-items: flex-start;
flex-direction: column;
}
.caseDet01 .caseDet01Con .caseDet01Tit {
width: 100%;
padding-bottom: 10px;
}
.caseDet01 .caseDet01Con .caseDet01TitNa {
width: 100%;
}
.caseDet01 .caseDet01Txt {
flex-direction: column;
}
.caseDet01 .caseDet01Txt .caseDet01lfServe {
padding-bottom: 10px;
}
.caseDet01 .caseDet01Txt .caseDet01lf {
width: 100%;
}
.caseDet01 .caseDet01Txt .caseDet01lf .caseDet01lfAd {
display: none;
}
.caseDet01 .caseDet01Txt .caseDet01lfAd {
display: block;
}
.caseDet01 .caseDet01Txt .caseDet01Rg {
width: 100%;
}
.caseDet01 .caseDet01Txt .caseDet01Rg .caseDet01RgP {
padding-bottom: 40px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items {
margin-right: calc(-.5* 1.5rem);
margin-left: calc(-.5* 1.5rem);
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item {
padding-right: calc(1.5rem* .5);
padding-left: calc(1.5rem* .5);
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg dl:nth-child(1) {
margin-right: 0px;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg dl dd {
margin-bottom: 0px;
}
}
@media (max-width: 992px) {
.caseDet01 .caseDet01Con .caseDet01Tit h2 {
font-size: 30px;
}
.caseDet01 .caseDet01Con .caseDet01TitNa h2 {
font-size: 24px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Title {
padding-bottom: 66px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Title h2 {
font-size: 34px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox {
/* height: 210px; */
height: 188px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox i {
font-size: 24px;
}
.caseDetLoca .caseDet03 .caseDet03Title {
padding-bottom: 66px;
}
.caseDetLoca .caseDet03 .caseDet03Title h2 {
font-size: 34px;
}
.caseDetLoca .caseDet03 .caseDet03Bg {
padding-top: 70vh;
}
.caseDetLoca .caseDet04::after {
content: "";
position: absolute;
width: 100%;
height: 200px;
top: 0;
left: 0;
background: #FFFFFF;
z-index: 2;
}
.caseDetLoca .caseDet04 .caseDet04Sack {
position: relative;
z-index: 5;
}
.caseDetLoca .caseDet04bg {
display: none;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Lf {
position: relative;
top: 0%;
transform: translate(0%, 0%);
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg {
justify-content: center;
}
.caseDetLoca .caseDet05 .caseDet05Bg {
background-attachment: local;
padding-top: 80vh;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Title h2 {
font-size: 34px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox:nth-child(1) {
padding-right: 22px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a {
padding: 12px 30px 8px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a p {
font-size: 20px;
}
.caseDetLoca .caseDet07 .caseDet07Ul {
height: 190px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07Page p {
font-size: 18px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07TItle h2 {
font-size: 24px;
}
}
@media (max-width: 768px) {
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items {
margin-right: calc(-.5* 1rem);
margin-left: calc(-.5* 1rem);
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item {
padding-right: calc(1rem* .5);
padding-left: calc(1rem* .5);
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox {
height: 190px;
}
.caseDetLoca .caseDet03 .caseDet03Bg {
padding-top: 48vh;
}
.caseDetLoca .caseDet04::after {
height: 140px;
}
.caseDetLoca .caseDet05 .caseDet05Bg {
padding-top: 60vh;
}
.caseDetLoca .caseDet06 .caseDet06Sack {
padding-top: 56px;
padding-bottom: 66px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Title {
padding-bottom: 45px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Title h2 {
font-size: 24px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a p {
font-size: 16px;
}
.caseDetLoca .caseDet07 .caseDet07Ul {
height: 166px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07Page {
padding-bottom: 10px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07Page p {
font-size: 16px;
}
.caseDetLoca .caseDet07 .caseDet07Ul .caseDet07List .caseDet07Text .caseDet07TItle h2 {
font-size: 20px;
}
}
@media (max-width: 576px) {
.caseDetLoca .caseDet07 .caseDet07Ul {
height: auto;
}
}
@media (max-width: 499px) {
.caseDet01 .caseDet01Sack {
padding-top: 44px;
padding-bottom: 34px;
}
.caseDet01 .caseDet01Con .caseDet01Tit h2 {
font-size: 24px;
}
.caseDet01 .caseDet01Con .caseDet01TitNa h2 {
font-size: 18px;
}
.caseDet01 .caseDet01Txt .caseDet01lfTrade a {
font-size: 16px;
padding: 0 2px;
}
.caseDet01 .caseDet01Txt .caseDet01lfServe {
padding-right: 20px;
}
.caseDet01 .caseDet01Txt .caseDet01lfServe a {
padding: 0 6px 2px 6px;
margin: 0 4px;
margin-bottom: 10px;
}
.caseDet01 .caseDet01Txt .caseDet01lfServe a:first-child {
font-size: 16px;
}
.caseDet01 .caseDet01Txt .caseDet01Rg .caseDet01RgP p {
line-height: 24px;
}
.caseDet01 .caseDet01Txt .caseDet01lfAd .caseDet01lfAdTit h2 {
font-size: 16px;
}
.caseDet01 .caseDet01Txt .caseDet01lfAd a p {
font-size: 18px;
}
.caseDetLoca .caseDet02 .caseDet02Sack {
padding-top: 50px;
padding-bottom: 50px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Title {
padding-bottom: 34px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Title h2 {
font-size: 24px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items {
margin-right: calc(-.5* 0.5rem);
margin-left: calc(-.5* 0.5rem);
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item {
padding-right: calc(0.5rem* .5);
padding-left: calc(0.5rem* .5);
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox {
/* height: 174px; */
height: 140px;
}
.caseDetLoca .caseDet02 .caseDet02Sack .caseDet02Items .caseDet02Item .caseDet02ItemBox i {
font-size: 18px;
}
.caseDetLoca .caseDet03 .caseDet03Title {
padding-bottom: 34px;
}
.caseDetLoca .caseDet03 .caseDet03Title h2 {
font-size: 24px;
}
.caseDetLoca .caseDet03 .caseDet03Bg {
background-attachment: local;
}
.caseDetLoca .caseDet03 .caseDet03Bg .caseDet03BlackLf {
top: -1px;
height: 101%;
width: 14%;
}
.caseDetLoca .caseDet03 .caseDet03Bg .caseDet03BlackRg {
top: -1px;
height: 101%;
width: 14%;
}
.caseDetLoca .caseDet04 {
padding-top: 24px;
}
.caseDetLoca .caseDet04::after {
height: 116px;
}
.caseDetLoca .caseDet04 .caseDet04Sack .caseDet04Rg {
padding-top: 10px;
padding-bottom: 40px;
}
.caseDetLoca .caseDet05 .caseDet05Bg {
padding-top: 46vh;
}
.caseDetLoca .caseDet06 .caseDet06Sack {
padding-top: 46px;
padding-bottom: 52px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Title {
padding-bottom: 32px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox:nth-child(1) {
padding-right: 10px;
}
.caseDetLoca .caseDet06 .caseDet06Sack .caseDet06Btn .caseDet06BtnBox a {
padding: 6px 12px 5px;
}
}
#subMes {
position: relative;
z-index: 1;
background: url(../images/ind08bg.jpg) no-repeat;
background-size: cover;
background-position: center center;
}
#subMes .subMesSack {
margin: auto;
padding-top: 112px;
padding-bottom: 112px;
}
#subMes .subMesSack .subMesSmalTitle {
padding-bottom: 14px;
}
#subMes .subMesSack .subMesSmalTitle h2 {
font-size: 30px;
color: #FFFFFF;
font-weight: normal;
}
#subMes .subMesSack .subMesTitle {
padding-bottom: 54px;
}
#subMes .subMesSack .subMesTitle h2 {
font-size: 44px;
font-weight: normal;
color: #FFFFFF;
}
#subMes .subMesSack form .formSack {
display: flex;
}
#subMes .subMesSack form .formSack .formInputSack {
display: flex;
}
#subMes .subMesSack form .formSack .formInputSack .formInput {
margin-right: 10px;
}
#subMes .subMesSack form .formSack .formInputSack .formInput input {
font-size: 16px;
font-weight: normal;
color: #888888;
font-family: Microsoft YaHei;
width: 260px;
border: 1px solid #FFFFFF;
background: #FFFFFF;
padding: 14px 16px;
border-radius: 6px;
}
#subMes .subMesSack form .formSack .formInputSack .formInput input:-webkit-autofill,
#subMes .subMesSack form .formSack .formInputSack .formInput input:-webkit-autofill:hover,
#subMes .subMesSack form .formSack .formInputSack .formInput input:-webkit-autofill:focus {
border: 1px solid #FFFFFF;
-webkit-text-fill-color: #333333;
-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset;
transition: background-color 5000s ease-in-out 0s;
background: none;
}
#subMes .subMesSack form .formSack .formInputSack .formInput input::-webkit-input-placeholder {
color: #999999;
}
#subMes .subMesSack form .formSack .formInputSack .formInput input:-moz-placeholder {
color: #999999;
}
#subMes .subMesSack form .formSack .formInputSack .formInput input::-moz-placeholder {
color: #999999;
}
#subMes .subMesSack form .formSack .formInputSack .formInput input:-ms-input-placeholder {
color: #999999;
}
#subMes .subMesSack form .formSack .formBtnSack button {
font-size: 20px;
font-weight: 500;
color: #FFFFFF;
background: #E01E24;
padding: 12px 58px;
border-radius: 5px;
margin: 0 18px 0 4px;
transition: all 0.5s ease;
}
#subMes .subMesSack form .formSack .formBtnSack button:hover {
border-radius: 30px 0px 30px 0px;
transform: translateY(-8px);
}
#subMes .subMesSack form .formSack .formBtnSack a {
font-size: 20px;
font-weight: 500;
color: #FFFFFF;
background: #E01E24;
padding: 12px 58px;
display: inline-block;
border-radius: 5px;
transition: all 0.5s ease;
}
#subMes .subMesSack form .formSack .formBtnSack a:hover {
border-radius: 30px 0px 30px 0px;
transform: translateY(-8px);
}
#pager {
padding-top: 38px;
}
#pager nav .pagination {
justify-content: center;
}
#pager nav .pagination .page-item {
margin: 0 4px;
position: relative;
border-radius: 4px;
overflow: hidden;
}
#pager nav .pagination .page-item::after {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
content: "";
background: linear-gradient(45deg, #E01E24 0%, #E48826 100%);
z-index: 1;
opacity: 0;
transition: all 0.5s ease;
}
#pager nav .pagination .page-item:hover:after {
opacity: 1;
}
#pager nav .pagination .page-item.active::after {
opacity: 1;
}
#pager nav .pagination .page-item .page-link {
background: #F7F7F7;
border: none;
font-size: 16px;
color: #333333;
padding: 8px 15px;
position: relative;
z-index: 2;
border-radius: 0;
transition: all 0.5s ease;
}
#pager nav .pagination .page-item:hover .page-link {
background: none;
color: #FFFFFF;
}
#pager nav .pagination .page-item.active .page-link {
background: none;
color: #FFFFFF;
}
#pager nav .pagination .page-item .page-link span {
font-size: 16px;
color: #333333;
transition: all 0.5s ease;
}
#pager nav .pagination .page-item:hover .page-link span {
color: #FFFFFF;
}
@media (min-width: 1200px) and (max-width: 1400px) {
#pager nav .pagination .page-item .page-link {
font-size: 14px;
}
#pager nav .pagination .page-item .page-link span {
font-size: 14px;
}
}
@media (max-width: 768px) {
#pager nav .pagination .page-item .page-link {
font-size: 14px;
}
#pager nav .pagination .page-item .page-link span {
font-size: 14px;
}
}
@media (max-width: 499px) {
#pager {
padding-top: 14px;
}
#pager nav .pagination .page-item .page-link {
font-size: 12px;
}
#pager nav .pagination .page-item .page-link span {
font-size: 12px;
}
}
.subBanner {
position: relative;
overflow: hidden;
height: 100vh;
width: 100%;
}
.subBannerSpec .starfield {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
pointer-events: none;
}
.subBannerSpec .starfield .static {
opacity: 0.8;
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 3px;
border-radius: 100%;
transform-origin: 0vw 37vh;
box-shadow: -77vw 17vh 1px 0.75px #f5fdf1, -71vw 9vh 1px 0.75px rgba(254, 248, 253, 0.5004557854), -10vw -47vh 1px 0.75px rgba(244, 252, 255, 0.8561082273), -32vw 64vh 1px 0.75px rgba(244, 245, 250, 0.5623205097), -78vw 51vh 1px 0.75px rgba(251, 250, 243, 0.8087405197), 21vw 18vh 1px 0.75px rgba(252, 246, 249, 0.7341202108), -31vw -71vh 1px 0.75px rgba(254, 241, 248, 0.5418319589), -7vw 74vh 1px 0.75px #f9fffd, 31vw -97vh 1px 0.75px rgba(246, 246, 254, 0.8250056407), -62vw 6vh 1px 0.75px #f4faf1, -72vw 98vh 1px 0.75px rgba(242, 242, 242, 0.8681306964), -31vw -95vh 1px 0.75px rgba(244, 244, 242, 0.9779688203), -56vw -96vh 1px 0.75px rgba(250, 244, 251, 0.8199811442), -50vw -35vh 1px 0.75px #f1fef1, -95vw -8vh 1px 0.75px #fbf8f2, -93vw -71vh 1px 0.75px #f1f3f1, 62vw -39vh 1px 0.75px #f1f7f4, -34vw 4vh 1px 0.75px rgba(252, 244, 251, 0.7582426278), -44vw 34vh 1px 0.75px rgba(245, 244, 254, 0.938514905), -36vw -15vh 1px 0.75px rgba(249, 247, 255, 0.50795671), -57vw 82vh 1px 0.75px rgba(253, 255, 255, 0.6318583681), 74vw -55vh 1px 0.75px rgba(254, 250, 250, 0.78931477), -57vw -50vh 1px 0.75px #f3f9f8, -94vw -88vh 1px 0.75px #f3fff4, 54vw -52vh 1px 0.75px rgba(241, 250, 248, 0.5577338427), 59vw -25vh 1px 0.75px rgba(251, 241, 248, 0.530499782), 87vw 26vh 1px 0.75px rgba(252, 244, 241, 0.8290565518), -26vw -96vh 1px 0.75px rgba(249, 253, 241, 0.6081058459), 21vw 5vh 1px 0.75px #fafef2, 91vw 5vh 1px 0.75px rgba(250, 243, 244, 0.5390413948), -4vw 43vh 1px 0.75px #f5f1fb, -65vw 66vh 1px 0.75px #f4fdf8, -57vw 17vh 1px 0.75px rgba(241, 250, 255, 0.7398309542), -57vw 70vh 1px 0.75px #f5f3f3, -21vw 6vh 1px 0.75px #fff1f3, -46vw 33vh 1px 0.75px rgba(248, 243, 242, 0.5049954243), 72vw -58vh 1px 0.75px rgba(254, 241, 251, 0.7399802692), 61vw -68vh 1px 0.75px #fef5f1, -9vw 67vh 1px 0.75px #fff2f1, 50vw -41vh 1px 0.75px rgba(247, 243, 255, 0.5827437526), -57vw -33vh 1px 0.75px #fcf8fb, -5vw 42vh 1px 0.75px rgba(251, 246, 251, 0.535829473), -64vw -24vh 1px 0.75px #f1fafa, 6vw 72vh 1px 0.75px #f9f7f7, 59vw 27vh 1px 0.75px #f6fbf1, 4vw 92vh 1px 0.75px rgba(242, 246, 251, 0.5208716251), 55vw 67vh 1px 0.75px rgba(248, 255, 244, 0.998466267), -12vw 32vh 1px 0.75px rgba(250, 246, 251, 0.5110452907), -4vw 67vh 1px 0.75px #f6f5f1, 35vw 38vh 1px 0.75px #fcfbfb, -2vw 29vh 1px 0.75px #f4fcfd, -1vw 98vh 1px 0.75px rgba(247, 247, 251, 0.562561032), 72vw 98vh 1px 0.75px #f3fef5, -3vw 69vh 1px 0.75px rgba(246, 241, 255, 0.7148790896), -82vw 93vh 1px 0.75px rgba(249, 243, 251, 0.9729151057), 64vw 32vh 1px 0.75px #fef5f1, -28vw -66vh 1px 0.75px rgba(247, 255, 252, 0.94625324), 88vw -23vh 1px 0.75px #fef2f9, 36vw -67vh 1px 0.75px #f4fdf5, 68vw -80vh 1px 0.75px #f4f1fe, 23vw -52vh 1px 0.75px #f4f9fb, -19vw -44vh 1px 0.75px rgba(255, 255, 241, 0.6087744547), 89vw -76vh 1px 0.75px #f7fbfd, -21vw 1vh 1px 0.75px #f1f2fe, -94vw 30vh 1px 0.75px #fef1f8, -2vw 24vh 1px 0.75px #f1fffd, -69vw -42vh 1px 0.75px #f4f4f8, -93vw -68vh 1px 0.75px #f3f9f7, -72vw 0vh 1px 0.75px #fef7fa, -62vw 29vh 1px 0.75px #fef7f8, -52vw -65vh 1px 0.75px rgba(251, 248, 243, 0.9742303487), 32vw -58vh 1px 0.75px #fdfef1, -90vw -53vh 1px 0.75px rgba(245, 250, 250, 0.7200106066), -45vw -71vh 1px 0.75px #f8f8fb, -47vw 59vh 1px 0.75px rgba(243, 242, 249, 0.9787630831), -30vw -51vh 1px 0.75px rgba(253, 253, 249, 0.6505851938), -7vw 63vh 1px 0.75px rgba(245, 246, 249, 0.8662614467), 18vw -62vh 1px 0.75px #f3fbf7, 66vw 36vh 1px 0.75px #f3fafe, 53vw -59vh 1px 0.75px #f7f6f9, 38vw 1vh 1px 0.75px #f5f6f7, 50vw -56vh 1px 0.75px rgba(242, 241, 251, 0.5798464663), 62vw 75vh 1px 0.75px rgba(249, 246, 247, 0.9210511415), -5vw 62vh 1px 0.75px rgba(244, 241, 255, 0.9722044913), -34vw 15vh 1px 0.75px #fef3fe, 51vw 81vh 1px 0.75px #fafbf4, -58vw -56vh 1px 0.75px #f8f6f1, 91vw 39vh 1px 0.75px rgba(243, 244, 251, 0.9124351167), -15vw 79vh 1px 0.75px rgba(241, 241, 242, 0.6445947955), 26vw -73vh 1px 0.75px rgba(250, 248, 254, 0.8790259129), -69vw -63vh 1px 0.75px #fcfdf8, 14vw 96vh 1px 0.75px rgba(246, 253, 248, 0.6438039905), -96vw -43vh 1px 0.75px #faf1f9, 58vw -76vh 1px 0.75px #fff9f9, -47vw -83vh 1px 0.75px #f5f7f3, -73vw -34vh 1px 0.75px #f5fef9, -48vw -39vh 1px 0.75px #f1f7f2, 49vw 3vh 1px 0.75px #fbfbff, -18vw -66vh 1px 0.75px #f6f7f5, 74vw 8vh 1px 0.75px #f9f3f1;
width: 1px;
height: 1px;
}
.subBannerSpec .starfield .moving-1 {
opacity: 0.8;
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 3px;
border-radius: 100%;
transform-origin: 0vw 37vh;
box-shadow: 70vw -78vh 1px 0.75px #fcfbfc, 33vw -85vh 1px 0.75px #f7f3fe, -89vw 72vh 1px 0.75px #f2fafd, 22vw 22vh 1px 0.75px #f7f1fa, 93vw 17vh 1px 0.75px #f5fcf3, 39vw -77vh 1px 0.75px rgba(254, 250, 241, 0.9979827397), 7vw -90vh 1px 0.75px rgba(246, 243, 248, 0.7240028469), -24vw 2vh 1px 0.75px #f3fffc, 81vw 72vh 1px 0.75px rgba(255, 249, 246, 0.6902035251), 69vw 5vh 1px 0.75px #f8fffd, 39vw -31vh 1px 0.75px #f5f7fa, 98vw -49vh 1px 0.75px #f9fbf5, -47vw 82vh 1px 0.75px #f5f1fc, -6vw 33vh 1px 0.75px rgba(244, 246, 250, 0.5473451883), -21vw -63vh 1px 0.75px #f7f7fa, -67vw -42vh 1px 0.75px #fff5fe, 98vw -43vh 1px 0.75px rgba(248, 252, 254, 0.5291899046), 11vw -69vh 1px 0.75px #fafff1, 20vw -70vh 1px 0.75px rgba(241, 244, 241, 0.5844228859), 54vw 99vh 1px 0.75px #f5f1ff, -77vw -62vh 1px 0.75px rgba(251, 247, 248, 0.5053761606), -12vw 36vh 1px 0.75px rgba(243, 251, 243, 0.8013952051), 51vw -5vh 1px 0.75px rgba(251, 252, 253, 0.7382105754), -35vw -40vh 1px 0.75px rgba(243, 249, 243, 0.9454544341), 31vw -27vh 1px 0.75px rgba(245, 245, 251, 0.9888425073), -39vw 53vh 1px 0.75px #f5fff2, -46vw -70vh 1px 0.75px #f7f2fa, 28vw 83vh 1px 0.75px rgba(251, 244, 248, 0.7592181013), 82vw -61vh 1px 0.75px #f7f9f7, -80vw 63vh 1px 0.75px rgba(254, 243, 247, 0.9671587659), 74vw 12vh 1px 0.75px rgba(245, 254, 245, 0.6343489348), -43vw 53vh 1px 0.75px #f4fef7, -89vw 52vh 1px 0.75px rgba(255, 247, 242, 0.6624529548), 100vw -91vh 1px 0.75px #fcfaf7, 59vw 74vh 1px 0.75px #fdf8ff, 87vw -46vh 1px 0.75px #f6faf9, 29vw 17vh 1px 0.75px rgba(247, 242, 254, 0.6633870974), 58vw 18vh 1px 0.75px #fcf4f8, 13vw 72vh 1px 0.75px rgba(255, 250, 249, 0.7011265364), -9vw -91vh 1px 0.75px rgba(254, 255, 249, 0.8739815261), -35vw 46vh 1px 0.75px rgba(253, 244, 249, 0.8038526072), -42vw 46vh 1px 0.75px rgba(247, 255, 246, 0.727539213), -55vw 58vh 1px 0.75px #f9faf3, 66vw -33vh 1px 0.75px rgba(246, 244, 252, 0.7177557543), 0vw 30vh 1px 0.75px #fef1f7, 95vw 7vh 1px 0.75px #f2f6f1, 93vw 94vh 1px 0.75px rgba(251, 245, 254, 0.9558488069), 62vw -93vh 1px 0.75px #fbfafd, 42vw -8vh 1px 0.75px rgba(247, 246, 248, 0.6431941184), 63vw 99vh 1px 0.75px #f3fef6, -71vw 65vh 1px 0.75px rgba(248, 255, 253, 0.9829806386), -27vw 19vh 1px 0.75px #faf4f5, 87vw -50vh 1px 0.75px rgba(250, 246, 249, 0.5659936005), -89vw -31vh 1px 0.75px rgba(250, 255, 251, 0.9721365313), -51vw 80vh 1px 0.75px #f3f2fc, 10vw 24vh 1px 0.75px #f7fff9, 59vw 25vh 1px 0.75px rgba(241, 250, 249, 0.7847759151), 94vw -99vh 1px 0.75px rgba(255, 247, 242, 0.7091903145), 72vw 89vh 1px 0.75px rgba(247, 251, 251, 0.5148583233), -18vw 76vh 1px 0.75px #fdfdfd, -73vw -61vh 1px 0.75px #f9f1fc, -45vw 1vh 1px 0.75px rgba(254, 241, 241, 0.702751157), -12vw -19vh 1px 0.75px #f4f5f7, 21vw 41vh 1px 0.75px rgba(251, 250, 250, 0.8809981073), -34vw 20vh 1px 0.75px rgba(252, 247, 253, 0.9129089383), -7vw -31vh 1px 0.75px rgba(242, 245, 254, 0.860335114), -9vw -60vh 1px 0.75px rgba(243, 244, 248, 0.6849733745), 6vw -39vh 1px 0.75px #fcf5f4, 60vw 28vh 1px 0.75px rgba(247, 255, 245, 0.6640452516), 7vw 84vh 1px 0.75px rgba(243, 254, 255, 0.7516146651), 31vw 20vh 1px 0.75px #f1fafe, 89vw 86vh 1px 0.75px rgba(254, 250, 254, 0.6427855075), -87vw 71vh 1px 0.75px #f7fcf4, 14vw -78vh 1px 0.75px #f5fafb, -63vw 47vh 1px 0.75px #f6fbf2, 28vw 34vh 1px 0.75px rgba(247, 248, 251, 0.6092005426), -33vw -53vh 1px 0.75px #f6f2fd, 65vw -27vh 1px 0.75px rgba(249, 243, 244, 0.5072936984), 63vw 85vh 1px 0.75px rgba(241, 255, 249, 0.5300853737), 52vw -35vh 1px 0.75px rgba(253, 246, 247, 0.8191946632), -57vw 35vh 1px 0.75px rgba(253, 244, 243, 0.591342388), 41vw -10vh 1px 0.75px rgba(250, 253, 247, 0.6617182009), 52vw 93vh 1px 0.75px #fcfbfc, 97vw 80vh 1px 0.75px rgba(252, 248, 246, 0.9559277636), -52vw 19vh 1px 0.75px rgba(248, 247, 249, 0.8636792789), -53vw 82vh 1px 0.75px rgba(241, 242, 244, 0.9267091286), -16vw 83vh 1px 0.75px rgba(251, 253, 242, 0.7989757342), 37vw -90vh 1px 0.75px #f4f5fe, 89vw -65vh 1px 0.75px #f3fff8, 65vw 71vh 1px 0.75px rgba(246, 253, 244, 0.9431369742), 83vw 90vh 1px 0.75px rgba(246, 250, 241, 0.7020041663), 78vw 73vh 1px 0.75px rgba(249, 249, 249, 0.8845609162), 28vw 95vh 1px 0.75px #fdfef5, 40vw 95vh 1px 0.75px rgba(248, 251, 252, 0.7615823219), 2vw -89vh 1px 0.75px #f2fdfe, 44vw 57vh 1px 0.75px rgba(251, 249, 247, 0.6179032575), -92vw 37vh 1px 0.75px rgba(250, 253, 255, 0.8053360866), -40vw -81vh 1px 0.75px #f2f7f8, -20vw -99vh 1px 0.75px rgba(243, 250, 249, 0.6139709969), -56vw 52vh 1px 0.75px rgba(241, 245, 252, 0.541388148);
animation: star-movement 9s cubic-bezier(0.55, 0, 1, 0.45) infinite;
}
.subBannerSpec .starfield .moving-2 {
opacity: 0.8;
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 3px;
border-radius: 100%;
transform-origin: 0vw 37vh;
box-shadow: -85vw -90vh 1px 0.75px #f3f4fa, -21vw -72vh 1px 0.75px rgba(253, 254, 242, 0.7537296055), 84vw -61vh 1px 0.75px #f5fcf5, 4vw 60vh 1px 0.75px rgba(243, 254, 245, 0.5128090246), -62vw -87vh 1px 0.75px rgba(243, 253, 244, 0.5656420177), 89vw 48vh 1px 0.75px #f5f6f1, -29vw 54vh 1px 0.75px #fdfaf7, -43vw -25vh 1px 0.75px rgba(242, 253, 244, 0.9377612506), -56vw 31vh 1px 0.75px rgba(250, 242, 249, 0.6047095178), -25vw 71vh 1px 0.75px #f3f7f3, -75vw 59vh 1px 0.75px #f6f3ff, 28vw -15vh 1px 0.75px #f6fdff, -78vw -11vh 1px 0.75px rgba(254, 242, 245, 0.8959916629), 35vw -22vh 1px 0.75px #fdfafd, -41vw 99vh 1px 0.75px #fef6f2, -87vw 37vh 1px 0.75px rgba(252, 254, 245, 0.8997062422), -29vw 55vh 1px 0.75px #fffff1, -83vw 58vh 1px 0.75px #f9f1fe, -6vw 41vh 1px 0.75px rgba(252, 243, 241, 0.6541557377), -36vw 24vh 1px 0.75px rgba(250, 253, 244, 0.5861573904), -56vw 55vh 1px 0.75px #f7f1f8, 1vw -17vh 1px 0.75px rgba(246, 249, 243, 0.9060487423), -13vw -22vh 1px 0.75px #faf2fb, 33vw 14vh 1px 0.75px #f3f3fb, 40vw -64vh 1px 0.75px rgba(246, 244, 243, 0.5982435171), 62vw 28vh 1px 0.75px #f8f6f3, -44vw -85vh 1px 0.75px rgba(255, 253, 244, 0.975352983), 66vw 19vh 1px 0.75px #fffffb, -99vw -40vh 1px 0.75px #f4f7f1, -46vw -43vh 1px 0.75px rgba(255, 244, 252, 0.7266734494), -59vw -71vh 1px 0.75px #fcfdf3, -59vw -78vh 1px 0.75px #f7f5f1, -88vw 63vh 1px 0.75px #f5f8fc, -25vw 100vh 1px 0.75px #f3f9ff, -3vw 72vh 1px 0.75px rgba(252, 252, 241, 0.6974988381), -3vw -20vh 1px 0.75px #fbf2f5, 69vw -15vh 1px 0.75px rgba(241, 254, 242, 0.9887900105), 98vw 77vh 1px 0.75px rgba(254, 253, 245, 0.5778617331), 89vw -19vh 1px 0.75px rgba(249, 243, 243, 0.7071598781), 71vw -82vh 1px 0.75px #fff3fc, 47vw 93vh 1px 0.75px #f2fcfa, -65vw 46vh 1px 0.75px rgba(244, 249, 245, 0.7218847202), -54vw 95vh 1px 0.75px rgba(247, 248, 248, 0.9485655383), -84vw -83vh 1px 0.75px #f7f2f4, 38vw 25vh 1px 0.75px #f6fdfe, -84vw -36vh 1px 0.75px rgba(254, 255, 243, 0.7164359789), -57vw 90vh 1px 0.75px #fefdf6, 82vw -90vh 1px 0.75px rgba(255, 254, 246, 0.8792310794), 83vw 44vh 1px 0.75px #faf8f5, 38vw -69vh 1px 0.75px rgba(250, 247, 251, 0.9901894973), -26vw 67vh 1px 0.75px #f7fcf1, 44vw -13vh 1px 0.75px rgba(246, 252, 242, 0.5178878937), -47vw 76vh 1px 0.75px rgba(254, 246, 254, 0.984497157), -64vw -53vh 1px 0.75px #fff1f5, -85vw 81vh 1px 0.75px rgba(250, 248, 242, 0.6086005939), 8vw -38vh 1px 0.75px rgba(249, 253, 250, 0.5879927569), 32vw 11vh 1px 0.75px #f5f3f3, -13vw 58vh 1px 0.75px rgba(253, 253, 250, 0.9911318035), 40vw -96vh 1px 0.75px #f6fafb, -34vw -88vh 1px 0.75px #fcf6f7, 23vw 76vh 1px 0.75px rgba(243, 252, 249, 0.8673120925), -32vw -75vh 1px 0.75px rgba(251, 250, 251, 0.5346766143), -86vw -27vh 1px 0.75px rgba(252, 253, 244, 0.8589931457), 23vw -46vh 1px 0.75px #f4f3fa, -41vw -98vh 1px 0.75px rgba(250, 253, 254, 0.7384420433), 72vw 77vh 1px 0.75px #f6f7fa, 5vw 89vh 1px 0.75px rgba(255, 253, 241, 0.8467534472), -2vw 88vh 1px 0.75px rgba(248, 241, 245, 0.5039699175), 87vw -78vh 1px 0.75px rgba(250, 254, 242, 0.587269332), 30vw -48vh 1px 0.75px #f3fafc, -62vw 76vh 1px 0.75px #f3fff1, -97vw 26vh 1px 0.75px rgba(242, 243, 251, 0.509167354), 42vw -36vh 1px 0.75px rgba(253, 241, 253, 0.9900136411), 41vw 66vh 1px 0.75px #faf6f2, -51vw 93vh 1px 0.75px #f2f2f5, -32vw 63vh 1px 0.75px rgba(242, 253, 241, 0.5872038537), -26vw 62vh 1px 0.75px rgba(252, 245, 246, 0.8290907887), 69vw -14vh 1px 0.75px #f9f9f7, -63vw -69vh 1px 0.75px #f1f5ff, -5vw 61vh 1px 0.75px #f7fefd, 81vw -65vh 1px 0.75px #f3f7fc, -89vw -68vh 1px 0.75px #f9f2ff, -88vw -61vh 1px 0.75px #fff9f9, -75vw -94vh 1px 0.75px rgba(242, 252, 243, 0.8098439951), 2vw -40vh 1px 0.75px #f7faf9, -30vw 48vh 1px 0.75px rgba(242, 242, 241, 0.6052150356), 76vw 54vh 1px 0.75px #fdf7fb, 67vw 71vh 1px 0.75px #f5f6fa, -17vw 49vh 1px 0.75px rgba(249, 248, 251, 0.7849830967), -82vw -44vh 1px 0.75px rgba(244, 255, 250, 0.7999574245), 46vw 56vh 1px 0.75px rgba(244, 249, 255, 0.8456003771), 51vw 18vh 1px 0.75px rgba(247, 243, 248, 0.6348783828), -88vw -73vh 1px 0.75px rgba(242, 247, 251, 0.6530683926), 95vw 82vh 1px 0.75px #f1f4f5, 77vw 91vh 1px 0.75px #f1f5fb, -26vw -66vh 1px 0.75px rgba(246, 245, 249, 0.5763128593), -47vw -16vh 1px 0.75px rgba(244, 243, 253, 0.8049546316), -70vw 90vh 1px 0.75px #f4f6f4, 35vw -14vh 1px 0.75px #f2f1f8, -13vw 73vh 1px 0.75px rgba(246, 242, 242, 0.5151698472);
animation: star-movement 9s -3s cubic-bezier(0.55, 0, 1, 0.45) infinite;
}
.subBannerSpec .starfield .moving-3 {
opacity: 0.8;
position: absolute;
left: 50%;
top: 50%;
width: 3px;
height: 3px;
border-radius: 100%;
transform-origin: 0vw 37vh;
box-shadow: 21vw 9vh 1px 0.75px rgba(241, 252, 248, 0.7775219169), 53vw 70vh 1px 0.75px #fefef9, -87vw 15vh 1px 0.75px #f3fdf4, -26vw 10vh 1px 0.75px rgba(254, 244, 244, 0.8246879561), 40vw -8vh 1px 0.75px #fefcf2, 3vw 45vh 1px 0.75px rgba(255, 250, 253, 0.5544573097), 57vw 23vh 1px 0.75px rgba(246, 248, 242, 0.7653152027), 80vw -78vh 1px 0.75px rgba(247, 253, 251, 0.6812475911), -96vw -38vh 1px 0.75px #f3fcf1, -50vw -17vh 1px 0.75px #fcfcf5, -84vw 74vh 1px 0.75px rgba(241, 247, 248, 0.7104385761), -38vw 46vh 1px 0.75px rgba(255, 254, 251, 0.5729018561), 67vw -61vh 1px 0.75px #fdf2f9, -91vw 7vh 1px 0.75px #f1f9f9, -6vw -4vh 1px 0.75px #f4fbff, 61vw 74vh 1px 0.75px #fafcfb, 31vw 92vh 1px 0.75px rgba(242, 244, 250, 0.8376824414), 94vw 57vh 1px 0.75px #f1fcfb, -32vw -55vh 1px 0.75px #fcf5f4, 67vw 66vh 1px 0.75px rgba(249, 247, 248, 0.5353940172), -28vw 28vh 1px 0.75px rgba(244, 249, 251, 0.6130447164), 42vw -6vh 1px 0.75px #fbfef2, 28vw 15vh 1px 0.75px #f8fdf7, -59vw 85vh 1px 0.75px rgba(252, 248, 247, 0.5385347116), -53vw 68vh 1px 0.75px #f4f7fe, -35vw 47vh 1px 0.75px #f4fcfc, -46vw -33vh 1px 0.75px rgba(254, 253, 251, 0.7957378828), -93vw -22vh 1px 0.75px rgba(250, 247, 244, 0.9770092273), 63vw 86vh 1px 0.75px rgba(250, 248, 241, 0.7663487955), 79vw 47vh 1px 0.75px #fbf1fc, 80vw 42vh 1px 0.75px rgba(242, 246, 244, 0.8720213539), -43vw -46vh 1px 0.75px #fdf2fc, 20vw 52vh 1px 0.75px #f4fcff, 11vw 58vh 1px 0.75px rgba(241, 252, 255, 0.9833718318), -50vw -46vh 1px 0.75px #fcf1fd, -59vw 70vh 1px 0.75px #f1f5fd, -79vw 78vh 1px 0.75px #faf2fe, 90vw -34vh 1px 0.75px rgba(246, 243, 243, 0.7320350996), 24vw -52vh 1px 0.75px rgba(243, 247, 253, 0.6336157447), -45vw -75vh 1px 0.75px #f4f2f4, 37vw -52vh 1px 0.75px #f4f1f8, -80vw -40vh 1px 0.75px rgba(255, 253, 248, 0.6906214992), 63vw 55vh 1px 0.75px #fafbf2, -5vw 89vh 1px 0.75px #fbf8fb, -74vw 58vh 1px 0.75px #f6f1f6, 35vw -60vh 1px 0.75px rgba(248, 245, 242, 0.7334472613), -36vw 82vh 1px 0.75px rgba(246, 242, 242, 0.9958310964), -57vw -77vh 1px 0.75px #f9f5f4, -28vw 34vh 1px 0.75px #f8faf7, -98vw 71vh 1px 0.75px rgba(253, 244, 253, 0.6970220088), 95vw 34vh 1px 0.75px rgba(246, 245, 250, 0.7934140378), 17vw 71vh 1px 0.75px rgba(248, 252, 255, 0.8904795424), -88vw 95vh 1px 0.75px rgba(254, 241, 246, 0.9434598893), -5vw -94vh 1px 0.75px rgba(246, 255, 244, 0.6891577287), -28vw 76vh 1px 0.75px rgba(248, 241, 249, 0.6747024231), 10vw -80vh 1px 0.75px #fffaf8, -60vw 0vh 1px 0.75px #f9f9fb, 28vw 7vh 1px 0.75px rgba(242, 251, 245, 0.5107166959), 13vw 29vh 1px 0.75px rgba(247, 245, 251, 0.7491331951), -14vw 9vh 1px 0.75px rgba(242, 255, 251, 0.6099454248), -32vw 69vh 1px 0.75px rgba(253, 246, 252, 0.6878847535), -32vw 22vh 1px 0.75px rgba(244, 252, 242, 0.6328168052), 0vw 45vh 1px 0.75px #fbf5fb, 65vw 24vh 1px 0.75px #fff9fa, 46vw 63vh 1px 0.75px rgba(253, 255, 249, 0.7986185336), 97vw 38vh 1px 0.75px rgba(243, 247, 249, 0.8107604438), -56vw 4vh 1px 0.75px rgba(250, 254, 245, 0.6772192877), -6vw 23vh 1px 0.75px rgba(247, 242, 243, 0.9211230909), -29vw -71vh 1px 0.75px rgba(250, 244, 241, 0.5340213157), -34vw -31vh 1px 0.75px #f2f9f5, -21vw -33vh 1px 0.75px rgba(247, 251, 249, 0.6504357405), -41vw 0vh 1px 0.75px #f8fbf1, 70vw 32vh 1px 0.75px rgba(244, 252, 247, 0.7759066514), -52vw 72vh 1px 0.75px rgba(254, 248, 254, 0.9440729521), 23vw 85vh 1px 0.75px #fff1f5, 70vw 23vh 1px 0.75px #f1f7fb, -8vw -62vh 1px 0.75px rgba(247, 244, 249, 0.9767461499), -89vw 48vh 1px 0.75px rgba(251, 245, 251, 0.8848947974), -76vw -95vh 1px 0.75px #f1f5f3, -12vw -82vh 1px 0.75px rgba(246, 250, 251, 0.719627641), 90vw 85vh 1px 0.75px #f6fff3, 40vw 44vh 1px 0.75px #fdfdf1, -83vw -83vh 1px 0.75px #fffbfe, -74vw 87vh 1px 0.75px rgba(253, 243, 242, 0.6903132297), 32vw -51vh 1px 0.75px rgba(251, 248, 248, 0.6250114572), 65vw 38vh 1px 0.75px rgba(244, 253, 242, 0.5124548877), 89vw 49vh 1px 0.75px rgba(246, 246, 248, 0.7734324543), 49vw 21vh 1px 0.75px rgba(246, 253, 247, 0.8902120595), -20vw -82vh 1px 0.75px rgba(255, 253, 244, 0.7923218532), -60vw -4vh 1px 0.75px rgba(254, 251, 248, 0.7358298768), 30vw -59vh 1px 0.75px rgba(251, 250, 247, 0.6739768758), -76vw -40vh 1px 0.75px rgba(246, 245, 246, 0.8310526045), 61vw 87vh 1px 0.75px rgba(255, 255, 250, 0.7897111781), 91vw -19vh 1px 0.75px rgba(245, 253, 250, 0.5232700373), -86vw 62vh 1px 0.75px #f8f9f4, -69vw -48vh 1px 0.75px #fcf4fd, -40vw -32vh 1px 0.75px rgba(248, 254, 247, 0.5189485175), 51vw -4vh 1px 0.75px #fdfcf4, -12vw -99vh 1px 0.75px #fdf8fe, -52vw 15vh 1px 0.75px #f5f7ff;
animation: star-movement 9s -6s cubic-bezier(0.55, 0, 1, 0.45) infinite;
}
@keyframes star-movement {
0% {
transform: scale(0.5) translateZ(0);
opacity: 0;
}
20% {
opacity: 1;
}
99% {
opacity: 1;
}
100% {
transform: scale(2) translateZ(0);
opacity: 0;
}
}
.subBanner .bannerImg {
position: fixed;
width: 100%;
left: 0;
top: 0;
transition: cubic-bezier(0.215, .61, .355, 1) .45s;
overflow: hidden;
}
#subBannerSp {
position: relative;
}
#subBannerSp .bannerImg {
position: relative;
height: 100%;
}
.subBanner .bannerImg img {
width: 100%;
height: 100vh;
object-fit: cover;
object-position: center center;
}
.aboutBanner .bannerImg img {
position: absolute;
max-width: none;
max-height: none;
left: -2px;
top: -2px;
width: calc(100% + 4px);
height: calc(100% + 4px);
-o-object-fit: cover;
object-fit: cover;
}
.subBanner .bannerText {
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 0;
position: fixed;
}
.caseDetail .bannerText {
top: 49%;
width: 91.66666667%;
}
#subBannerSp .bannerText {
position: absolute;
}
.subBanner .bannerText.bannerTextSp {
top: 41%;
}
.caseDetail .bannerText .bannerTitle {
padding-bottom: 40px;
}
.subBanner .bannerText .bannerTitle h2 {
font-size: 60px;
color: #FFFFFF;
text-align: center;
}
.caseDetail .bannerText .bannerTitle h2 {
text-align: start;
}
.subBanner .bannerText .bannerContent p {
font-size: 60px;
font-weight: bold;
color: #FFFFFF;
}
.caseDetail .bannerText .bannerContent p {
font-size: 30px;
font-weight: 500;
color: #FFFFFF;
}
.mouse__downsub {
position: fixed !important;
z-index: 1 !important;
}
.mouse__downSp {
position: absolute !important;
}
@media (max-width: 1400px) {
.subBanner .bannerText .bannerTitle h2 {
font-size: 48px;
}
.caseDetail .bannerText .bannerTitle {
padding-bottom: 20px;
}
.caseDetail .bannerText .bannerContent p {
font-size: 24px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
.caseDetail .bannerText .bannerTitle {
padding-bottom: 14px;
}
.subBanner .bannerText .bannerTitle h2 {
font-size: 48px;
}
.caseDetail .bannerText .bannerContent p {
font-size: 18px;
}
}
@media (max-width: 992px) {
.subBanner .bannerText .bannerTitle h2 {
font-size: 38px;
}
.caseDetail .bannerText .bannerContent p {
font-size: 20px;
}
}
@media (max-width: 768px) {
.subBanner .bannerText .bannerTitle h2 {
font-size: 28px;
}
.caseDetail .bannerText .bannerContent p {
font-size: 18px;
}
}
@media (max-width: 499px) {
#subBannerSp {
height: 64vh;
}
.subBanner {
height: 64vh;
}
.subBanner .bannerImg img {
height: 64vh;
}
.subBanner .bannerText {
top: 32%;
}
.subBanner .bannerText .bannerTitle h2 {
font-size: 28px;
}
.caseDetail .bannerText .bannerContent p {
font-size: 16px;
}
.subBannerSpec .starfield .moving-2 {
display: none;
}
}
#mouse__down {
position: absolute;
left: 50%;
margin-left: -15px;
bottom: 36px;
width: 20px;
height: 30px;
background: url(../images/down.png) center no-repeat;
z-index: 10;
}
#mouse__down:before {
content: "";
width: 4px;
height: 6px;
border-radius: 2px;
background: #fff;
position: absolute;
left: 50%;
margin-left: -2px;
top: 5px;
animation: lineMove 1s infinite;
}
@-webkit-keyframes lineMove {
0% {
opacity: 0;
-webkit-transform: translate3d(0px, 0px, 0px);
}
33% {
opacity: 1;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0px, 10px, 0px);
}
}
@keyframes lineMove {
0% {
opacity: 0;
-webkit-transform: translate3d(0px, 0px, 0px);
}
33% {
opacity: 1;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: translate3d(0px, 10px, 0px);
}
}
#mouse__down .mouse__downFirst {
position: relative;
width: 20px;
height: 30px;
z-index: -1;
animation: rotation 5s linear infinite;
}
#mouse__down .mouse__downFirst .mouse__downSecond {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
#mouse__down .mouse__downFirst .mouse__downSecond img {
width: 100%;
transform: scale(5);
}
@media (max-width: 1199px) {
#mouse__down {
bottom: 42px;
}
}
@media (max-width: 499px) {
.mouse__downSp {
bottom: 42px !important;
}
.mouse__downcase {
bottom: 30vh !important;
}
.mouse__downso {
bottom: 30px !important;
transition: all 0.5s ease;
}
.mouse__downso.on {
bottom: 30px !important;
}
}
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes scale1 {
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(1.4);
}
}
@-webkit-keyframes telno50 {
0% {
font-size: 60px;
}
7.14%,
14.28%,
21.42%,
28.57%,
35.71%,
42.86%,
50%,
57.14%,
64.28%,
71.42%,
78.57%,
85.71%,
92.86%,
100% {
font-size: 50px;
}
}
@keyframes dsjbg {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-webkit-keyframes dsjbg {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-o-keyframes dsjbg {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-ms-keyframes dsjbg {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@-moz-keyframes dsjbg {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
}
@keyframes xb1 {
0% {}
25% {
transform: translate(7%, -7%);
}
50% {
transform: translate(14%, 0%);
}
75% {
transform: translate(7%, 7%);
}
100% {
transform: translate(0%, 0%);
}
}
@-webkit-keyframes xb1 {
0% {
transform: translate(0%, 0%);
}
25% {
transform: translate(7%, -7%);
}
50% {
transform: translate(14%, 0%);
}
75% {
transform: translate(7%, 7%);
}
100% {
transform: translate(0%, 0%);
}
}
@keyframes xb2 {
0% {}
25% {
transform: translate(3%, -3%);
}
50% {
transform: translate(7%, 0%);
}
75% {
transform: translate(3%, 3%);
}
100% {
transform: translate(0%, 0%);
}
}
@-webkit-keyframes xb2 {
0% {
transform: translate(0%, 0%);
}
25% {
transform: translate(3%, -3%);
}
50% {
transform: translate(7%, 0%);
}
75% {
transform: translate(3%, 3%);
}
100% {
transform: translate(0%, 0%);
}
}
#footer {
position: relative;
z-index: 1;
background: url(../images/footerbg.jpg) no-repeat;
background-size: cover;
background-position: center;
}
#footer::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 4px;
background: linear-gradient(89deg, #E01E24 45%, #E4742B 103%);
transition: width 1.2s ease;
}
.footer.line::after {
width: 100% !important;
}
#footer .ftSack {
margin: auto;
padding-top: 120px;
padding-bottom: 68px;
}
#footer .ftSack .ftTop {
padding-bottom: 78px;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl {
display: flex;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi {
margin-right: 60px;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi:last-child {
margin-right: 0;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a {
display: block;
margin-bottom: 4px;
transition: all 0.5s ease;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a:hover {
transform: translateX(2px);
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a:nth-child(1) {
margin-bottom: 24px;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a p,
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a h3 {
font-size: 16px;
color: rgba(116, 116, 116);
transition: all 0.5s ease;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a h3 {
font-size: 18px;
color: #FFFFFF;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a:hover p {
color: #E01E24;
}
#footer .ftSack .ftTop .ftTopRg {
display: flex;
justify-content: space-between;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Title {
padding-bottom: 32px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Title h2 {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico {
margin-bottom: 34px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico p {
font-size: 16px;
color: #FFFFFF;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico p i {
color: #E01E24;
border: 1px solid #E01E24;
border-radius: 50%;
padding: 2px;
margin-right: 8px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico>a {
margin-left: 30px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA {
display: inline-flex;
height: 40px;
align-items: center;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan {
display: inline-block;
height: 100%;
width: 230px;
font-size: 0;
vertical-align: top;
overflow: hidden;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i {
display: inline-flex;
height: 100%;
align-items: center;
font-size: 36px;
color: #E01E24;
vertical-align: top;
font-family: D-DIN-Bold;
-webkit-animation: telno 6.5s steps(1, end) infinite;
animation: telno 6.5s steps(1, end) infinite;
-o-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
transform-origin: 50% 100%;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI0 {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI1 {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI2 {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI3 {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI4 {
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
animation-delay: 2s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI5 {
-webkit-animation-delay: 2.5s;
-moz-animation-delay: 2.5s;
animation-delay: 2.5s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI6 {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
animation-delay: 3s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI7 {
-webkit-animation-delay: 3.5s;
-moz-animation-delay: 3.5s;
animation-delay: 3.5s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI8 {
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
animation-delay: 4s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI9 {
-webkit-animation-delay: 4.5s;
-moz-animation-delay: 4.5s;
animation-delay: 4.5s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI10 {
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
animation-delay: 5s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI11 {
-webkit-animation-delay: 5.5s;
-moz-animation-delay: 5.5s;
animation-delay: 5.5s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI12 {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
animation-delay: 6s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i.navTelI13 {
-webkit-animation-delay: 6.5s;
-moz-animation-delay: 6.5s;
animation-delay: 6.5s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelB {
display: inline-block;
background: linear-gradient(to right, #E01E24, #E01E24) no-repeat right 80%;
background-size: 0px 1px;
transition: background-size 0.5s;
padding-bottom: 8px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelB p {
font-family: D-DIN;
font-size: 26px;
color: #FFFFFF;
transition: all 0.5s ease;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelB:hover p {
color: #E01E24;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Code {
display: flex;
align-items: center;
margin-bottom: 40px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Code .codeImg {
margin-right: 18px;
overflow: hidden;
border-radius: 10px;
max-width: 120px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Code .codeImg img {
width: 100%;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Code .codeName p {
font-size: 16px;
color: #FFFFFF;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Ico {
display: flex;
margin-bottom: 14px;
align-items: center;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Ico>p {
font-size: 16px;
color: #FFFFFF;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Ico>p i {
color: #E01E24;
border: 1px solid #E01E24;
border-radius: 50%;
padding: 2px;
margin-right: 8px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Ico .email {
display: inline-block;
background: linear-gradient(to right, #E01E24, #E01E24) no-repeat right 80%;
background-size: 0px 1px;
transition: background-size 0.5s;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Ico>a p {
font-size: 16px;
color: #FFFFFF;
transition: all 0.5s ease;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Ico>a:hover p {
color: #E01E24;
}
#footer .ftSack .ftBtm .ftCopy {
margin-bottom: 6px;
}
#footer .ftSack .ftBtm .ftCopy .ftCopyright p a {
font-size: 16px;
color: rgba(101, 101, 101);
}
#footer .ftSack .ftBtm .ftCopy .ftCopyright p a:first-child {
margin-right: 10px;
}
#footer .ftSack .ftBtm .ftKeyword a {
font-size: 16px;
color: rgba(101, 101, 101, 0.4);
text-decoration: none;
display: inline-block;
vertical-align: top;
padding: 0 2px;
padding-left: 0;
position: relative;
}
#footer .ftSack .ftBtm .ftKeyword a::after {
content: "";
position: absolute;
width: 1px;
height: 60%;
background: rgba(101, 101, 101, 0.4);
top: 56%;
right: -2px;
transform: translateY(-50%);
}
#footer .ftSack .ftBtm .ftKeyword a:last-child:after {
opacity: 0;
}
@media (max-width: 1460px) {
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi {
margin-right: 38px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Ico>p {
font-size: 14px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Ico>a p {
font-size: 14px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico p {
font-size: 14px;
}
}
@media (max-width: 1400px) {
#footer .ftSack .ftTop .ftTopRg {
justify-content: space-between;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan i {
font-size: 26px;
-webkit-animation: telno26 6.5s steps(1, end) infinite;
animation: telno26 6.5s steps(1, end) infinite;
}
@-webkit-keyframes telno {
0% {
font-size: 36px;
}
7.14%,
14.28%,
21.42%,
28.57%,
35.71%,
42.86%,
50%,
57.14%,
64.28%,
71.42%,
78.57%,
85.71%,
92.86%,
100% {
font-size: 26px;
}
}
@keyframes telno26 {
0% {
font-size: 36px;
}
7.14%,
14.28%,
21.42%,
28.57%,
35.71%,
42.86%,
50%,
57.14%,
64.28%,
71.42%,
78.57%,
85.71%,
92.86%,
100% {
font-size: 26px;
}
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA {
height: 30px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan {
width: 180px;
}
}
@media (max-width: 1280px) {
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl {
margin-bottom: 46px;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a p,
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a h3 {
font-size: 14px;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a h3 {
font-size: 16px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Title h2 {
font-size: 20px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Code {
margin-bottom: 24px;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi {
margin-right: 38px;
}
#footer .ftSack .ftBtm .ftCopy .ftCopyright p a {
font-size: 14px;
}
#footer .ftSack .ftBtm .ftKeyword a {
font-size: 14px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
#footer .ftSack {
padding-top: 46px;
padding-bottom: 32px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico {
margin-bottom: 14px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Code .codeImg {
margin-top: 12px;
max-width: 90px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelB p {
font-size: 20px;
}
#footer .ftSack .ftTop .ftTopLf {
width: 48% !important;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi {
margin-right: 30px;
}
#footer .ftSack .ftTop .ftTopRg {
width: 52%;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Title h2 {
font-size: 18px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Code .codeName p {
font-size: 14px;
}
#footer .ftSack .ftTop {
padding-bottom: 36px;
}
}
@media (max-width: 1199px) {
#footer .ftSack .ftTop .ftTopRg {
justify-content: flex-start;
}
}
@media (max-width: 768px) {
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi {
margin-right: 36px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico {
margin-bottom: 18px;
}
}
@media (max-width: 667px) {
#footer .ftSack .ftTop .ftTopRg {
justify-content: space-between;
}
}
@media (max-width: 600px) {
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl {
flex-wrap: wrap;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi {
margin-right: 20px;
}
#footer .ftSack .ftBtm .ftKeyword {
display: none;
}
}
@media (max-width: 584px) {
#footer .ftSack .ftTop .ftTopRg {
flex-direction: column;
}
}
@media (max-width: 499px) {
#footer .ftSack {
padding-top: 40px;
padding-bottom: 60px;
}
#footer .ftSack .ftTop {
padding-bottom: 28px;
}
#footer .ftSack .ftTop .ftTopLf {
display: none;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl {
margin-bottom: 26px;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi {
margin-right: 0px;
margin-bottom: 18px;
width: 33.333%;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a {
margin-bottom: 6px;
}
#footer .ftSack .ftTop .ftTopLf .ftTopLfUl .ftTopLfLi a:nth-child(1) {
margin-bottom: 14px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Ico {
margin-bottom: 4px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack2 .ftSack2Code .codeImg {
max-width: 96px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Title {
padding-bottom: 16px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico {
margin-bottom: 8px;
}
#footer .ftSack .ftTop .ftTopRg .ftTopRgSack1 .ftSack1Ico .navTelA .navTelSpan {
width: 100%;
}
}
#msgbg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.4);
z-index: 99999;
}
#msg {
width: 264px;
position: fixed;
z-index: 999;
top: 44%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
display: inline-block;
}
#msg_top {
background: #f8f8f8;
position: relative;
padding: 5px 20px;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #E7E7E7;
}
#msg_top img {
margin-right: 10px;
}
#msg_top span {
font-size: 20px;
float: right;
cursor: pointer;
}
#msg_cont {
padding: 16px 0;
padding-bottom: 22px;
padding-left: 20px;
padding-right: 20px;
text-align: start;
font-size: 14px;
color: #333333;
}
#msg_clear {
color: #fff;
padding: 3px 15px;
background: #E01E24;
border-radius: 2px;
float: right;
margin-right: 15px;
cursor: pointer;
margin-bottom: 16px;
}
@media (max-width: 1536px) {}
#flotWindSack {
position: fixed;
bottom: 0;
right: 0;
left: 0;
z-index: 1030;
display: none;
opacity: 0;
transition: all 0.8s ease;
}
.flotWindSack {
opacity: 1 !important;
}
#flotWindSack .flotWindLf {
width: 50%;
background: #E25625;
padding: 12px 0;
}
#flotWindSack .flotWindLf .flotWindLfSack .flotWindLfLoca {
display: flex;
align-items: center;
justify-content: center;
}
#flotWindSack .flotWindLf .flotWindLfSack .flotWindLfLoca .flotWindLfIco {
margin-right: 10px;
}
#flotWindSack .flotWindLf .flotWindLfSack .flotWindLfLoca .flotWindLfIco img {
width: 34px;
}
#flotWindSack .flotWindLf .flotWindLfSack .flotWindLfLoca .flotWindLfName p {
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
}
#flotWindSack .flotWindRg {
width: 50%;
background: #E01E24;
padding: 12px 0;
}
#flotWindSack .flotWindRg .flotWindRgSack .flotWindRgLoca {
display: flex;
align-items: center;
justify-content: center;
}
#flotWindSack .flotWindRg .flotWindRgSack .flotWindRgLoca .flotWindRgIco {
margin-right: 10px;
}
#flotWindSack .flotWindRg .flotWindRgSack .flotWindRgLoca .flotWindRgIco img {
width: 34px;
}
#flotWindSack .flotWindRg .flotWindRgSack .flotWindRgLoca .flotWindRgName p {
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
}
@media (max-width: 499px) {
#flotWindSack {
display: flex;
}
}
#flotWind2Sack {
position: fixed;
top: 50%;
right: 0;
z-index: 1030;
transform: translateY(-50%);
opacity: 0;
transition: all 0.8s ease;
}
.flotWind2Sack {
opacity: 1 !important;
}
#flotWind2Sack .flotWind2Top {
background: #E25625;
border-radius: 50px;
padding: 6px 4px;
margin-bottom: 4px;
box-shadow: 0px 2px 10px 0px rgba(118, 0, 0, 0.5);
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li {
position: relative;
border-radius: 50%;
margin-bottom: 10px;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li:last-child {
margin-bottom: 0px;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li::after {
position: absolute;
content: "";
background: #E01E24;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
border-radius: 50%;
transition: all 0.5s ease;
transform: scale(0);
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li:hover:after {
transform: scale(1);
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopIco {
padding: 11px 8px;
position: relative;
z-index: 4;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopIco .flotWind2TopImg {
margin: auto;
margin-bottom: 4px;
display: flex;
justify-content: center;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopIco .flotWind2TopImg img {
width: 24px;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopIco .flotWind2TopIcoName p {
font-size: 12px;
color: #FFFFFF;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopHover {
position: absolute;
width: 136px;
left: -210%;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li:hover .flotWind2TopHover {
opacity: 1;
visibility: visible;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopHover .flotWind2TopHoverB {
display: flex;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopHover .flotWind2TopHoverB a {
display: block;
background: #E01E24;
padding: 11px 10px;
border-radius: 2px;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopHover .flotWind2THoSa p {
font-family: D-DIN-bold;
font-size: 16px;
color: #FFFFFF;
text-align: center;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopHover .flotWind2TopHoverB .smico {
max-height: 100%;
height: 46px;
position: relative;
width: 10px;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopHover .flotWind2TopHoverB .smico::after {
position: absolute;
content: "";
top: 50%;
transform: translateY(-50%);
left: 0;
border-top: solid 6px transparent;
border-left: solid 6px #E01E24;
border-bottom: solid 7px transparent;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopHover .flotWind2THoSa {
display: flex;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopHover .flotWind2THoSa .flotWind2TopHoverIm {
width: 116px;
background: #E01E24;
padding: 8px;
border-radius: 2px;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopHover .flotWind2THoSa .flotWind2TopHoverIm img {
width: 100%;
max-width: 100%;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopHover .flotWind2THoSa .smico {
max-height: 100%;
height: 116px;
position: relative;
width: 10px;
}
#flotWind2Sack .flotWind2Top .flotWind2TopList li .flotWind2TopHover .flotWind2THoSa .smico::after {
position: absolute;
content: "";
top: 50%;
transform: translateY(-50%);
left: 0;
border-top: solid 6px transparent;
border-left: solid 6px #E01E24;
border-bottom: solid 7px transparent;
}
#flotWind2Sack .flotWind2Bt {
background: #E25625;
border-radius: 50%;
padding: 4px;
cursor: pointer;
box-shadow: 0px 2px 10px 0px rgba(118, 0, 0, 0.5);
}
#flotWind2Sack .flotWind2Bt .flotWind2BtSack {
border-radius: 50%;
position: relative;
}
#flotWind2Sack .flotWind2Bt .flotWind2BtSack::after {
position: absolute;
content: "";
background: #E01E24;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
border-radius: 50%;
transition: all 0.5s ease;
transform: scale(0);
}
#flotWind2Sack .flotWind2Bt .flotWind2BtSack:hover:after {
transform: scale(1);
}
#flotWind2Sack .flotWind2Bt .flotWind2BtSack .flotWind2TBtIco {
padding: 11px 8px;
position: relative;
z-index: 4;
}
#flotWind2Sack .flotWind2Bt .flotWind2BtSack .flotWind2TBtIco .flotWind2BtImg {
margin: auto;
margin-bottom: 4px;
display: flex;
justify-content: center;
}
#flotWind2Sack .flotWind2Bt .flotWind2BtSack .flotWind2TBtIco .flotWind2BtImg img {
width: 24px;
}
#flotWind2Sack .flotWind2Bt .flotWind2BtSack .flotWind2TBtIco .flotWind2BtIcoName p {
font-size: 12px;
color: #FFFFFF;
text-align: center;
}
@media (max-width: 499px) {
#flotWind2Sack {
display: none;
}
}
#flotWindRogue {
position: fixed;
z-index: 99999;
width: 576px;
height: auto;
top: 50%;
left: 50%;
margin: -250px 0 0 -288px;
background: url(../images/rogue.png);
background-repeat: no-repeat;
background-size: cover;
border-radius: 0.5rem;
overflow: hidden;
}
.flotWindRogue {
transform: scale(0);
transition: transform .4s;
}
.flotWindRogue.active {
transform: scale(1);
}
#flotWindRogue .rogue {
position: relative;
}
#flotWindRogue .rogue .rogueContext {
padding: 50px 56px 50px 56px;
box-shadow: 0px 0px 10px 0px rgba(118, 0, 0, 0.5);
}
#flotWindRogue .rogue .rogueContext .rogueTitle {
padding-bottom: 14px;
}
#flotWindRogue .rogue .rogueContext .rogueTitle h2 {
font-size: 38px;
font-weight: bold;
letter-spacing: 0.06em;
color: #FFFFFF;
}
#flotWindRogue .rogue .rogueContext .rogueUl {
margin-right: calc(-.5* 0.5rem);
margin-left: calc(-.5* 0.5rem);
margin-bottom: 32px;
}
#flotWindRogue .rogue .rogueContext .rogueUl .rogueLi {
padding-right: calc(0.5rem* .5);
padding-left: calc(0.5rem* .5);
}
#flotWindRogue .rogue .rogueContext .rogueUl .rogueLi .rogueLiSack {
background: #FFFFFF33;
padding: 8px 0;
border-radius: 3px;
}
#flotWindRogue .rogue .rogueContext .rogueUl .rogueLi .rogueLiSack .rogueLiSackP p {
font-size: 18px;
font-weight: 500;
line-height: normal;
letter-spacing: 0em;
color: #FFFFFF;
text-align: center;
}
#flotWindRogue .rogue .rogueContext .rogueBtm {
display: flex;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueLf .tdCode {
width: 150px;
margin-right: 30px;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueLf .tdCode img {
width: 100%;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg {
display: flex;
flex-direction: column;
justify-content: space-between;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg .rogueRgSmT p {
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
line-height: normal;
letter-spacing: 0em;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg .rogueRgT {
padding-bottom: 16px;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg .rogueRgT p {
font-family: D-DIN-bold;
font-size: 47px;
color: #FFFFFF;
line-height: normal;
letter-spacing: 0em;
color: #FFFFFF;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg .rogueRgBt {
transition: all 0.5s ease;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg .rogueRgBt:hover {
transform: translateY(-5px);
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg .rogueRgBt a {
box-shadow: 0px 4px 10px 0px rgba(118, 0, 0, 0.3);
background: #FFFFFF;
border-radius: 3px;
display: block;
padding: 12px 0;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg .rogueRgBt a p {
font-size: 20px;
font-weight: 500;
line-height: normal;
letter-spacing: 0.1em;
color: #E01E24;
text-align: center;
}
#flotWindRogue .rogue .rogueCrosses {
position: absolute;
top: 12px;
right: 20px;
cursor: pointer;
transition: all 1.8s ease;
}
#flotWindRogue .rogue .rogueCrosses:hover {
transform: rotate(360deg);
}
#flotWindRogue .rogue .rogueCrosses .icon i {
font-size: 20px;
color: #FFFFFF;
}
@media (max-width: 1536px) {
#flotWindRogue .rogue .rogueContext .rogueTitle h2 {
font-size: 28px;
}
#flotWindRogue .rogue .rogueContext .rogueUl .rogueLi .rogueLiSack .rogueLiSackP p {
font-size: 16px;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg .rogueRgSmT p {
font-size: 14px;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg .rogueRgBt a p {
font-size: 18px;
}
}
@media (min-width: 1200px) and (max-width: 1400px) {
#flotWindRogue {
margin: -210px 0 0 -263px;
width: 526px;
}
#flotWindRogue .rogue .rogueContext {
padding: 38px 40px 35px 40px;
}
#flotWindRogue .rogue .rogueContext .rogueTitle h2 {
font-size: 32px;
}
#flotWindRogue .rogue .rogueContext .rogueUl .rogueLi .rogueLiSack .rogueLiSackP p {
font-size: 14px;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueLf .tdCode img {
width: 90%;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg .rogueRgT p {
font-size: 44px;
}
#flotWindRogue .rogue .rogueContext .rogueBtm .rogueRg .rogueRgBt a p {
font-size: 16px;
}
}
@media (max-width: 800px) {
#flotWindRogue {
display: none;
}
}
#aff-im-root {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
opacity: 0 !important;
}
.media-controls-container {
display: none !important;
opacity: 0 !important;
}
video::-webkit-media-controls-panel {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
video::--webkit-media-controls-play-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
video::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none !important;
opacity: 0 !important;
}
.media-controls {
display: none !important;
}
.media-controls-container {
display: none !important;
}
/* 后期 */
@media (min-width: 1400px) {
.ind05 .ind05Sack .ind05Loca .ind05Lf {
width: 39%;
}
.ind05 .ind05Sack .ind05Loca .ind05Rg {
width: 61%;
}
}
#soSwbtn {
overflow: hidden;
/* width: max-content; */
margin-top: 40px;
position: relative;
z-index: 99999;
transform: translateY(40%);
opacity: 0;
transition: ease 1.2s;
display: flex;
align-items: center;
justify-content: center;
}
#index-banner>.swiper-wrapper .swiper-slide.swiper-slide-active #soSwbtn {
transform: translateY(0);
opacity: 1;
transition-delay: .8s
}
#soSwbtn>a {
display: block;
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
padding: 10px 50px 12px;
position: relative;
background: #E01E24;
border-radius: 100px;
overflow: hidden;
}
#soSwbtn>a::after {
content: " ";
position: absolute;
border-radius: 50%;
left: 50%;
top: 50%;
margin-left: -120px;
margin-top: -120px;
border-width: 120px;
border-color: #fff;
border-style: dashed;
width: 0;
height: 0;
-webkit-transition: all 500ms ease-out 0s;
transition: all 500ms ease-out 0s;
opacity: .1;
visibility: hidden;
-webkit-transform: scale(.1);
transform: scale(.1);
pointer-events: none
}
#soSwbtn>a:hover:after {
-webkit-transition: all 350ms ease-in 0s;
transition: all 350ms ease-in 0s;
opacity: .15;
visibility: visible;
-webkit-transform: none !important;
transform: none !important
}
@media (max-width: 499px) {
#soSwbtn {
justify-content: flex-start;
}
#soSwbtn>a {
font-size: 14px;
padding: 6px 38px 8px;
}
#phbancc {
display: block !important;
}
}