/* common */
.fix_box{display:none!important;}
.index-tit { letter-spacing: 2px;  .en {
 font-size: 16px;
 text-transform: uppercase;
 margin-bottom: 20px;
 &:before {
 content: '';
 width: 21px;
 height: 24px;
 @include backcontain;
 background-image: url('../images/icon-1.png');
 @include inline-middle;
 margin: -2px 10px 0 0;
}
}
h3 { font-size: 42px; }
p { font-size: 18px; line-height: 30px; margin-top: 20px; }
 &.gray {
 .en {
 color: #000;
}
 h3 {
 color: #333;
}
 p {
 color: #333333;
}
}
 &.white {
 .en {
 color: #fff;
}
 h3 {
 color: #fff;
}
 p {
 color: #fff;
}
}
 &.center {
 h3 {
 text-align: center;
}
 p {
 text-align: center;
}
}
}
.fix_box{display:none!important}
a.index-more { display: block; width: 140px; font-size: 16px; line-height: 48px; color: #fff; text-align: center;  background-color: $color;
transition: all .3s ease;  @media screen and (min-width: 1025px) {
 &:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 30px rgba(201,23,29,.3)
}
}
}
.video-pop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; display: none;  .bg {
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,.6);
 z-index: 1;
}
.close { width: 32px; height: 32px; position: absolute; right: 20px; top: 20px; background: url('../images/close.png') center no-repeat;  @include transition(all 500ms ease);
cursor: pointer; z-index: 2;  &:hover {
 @include transform(rotate(180deg));
}
}
video { position: absolute; top: 50%; left: 50%; max-height: 80vh; max-width: 75vw; z-index: 3;  @include transform(translate(-50%, -50%));
}
}
.c-banner { position: relative; overflow: hidden;  img {
 display: block;
 width: 100%;
 animation: o-scale 20s linear infinite;
}
.txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
h3 { font-size: 40px; color: #fff; text-align: center; letter-spacing: 2px; }
.line { position: relative; width: 90px; height: 4px; margin: 20px auto 0; background-color: #fff;  &:before {
 content: '';
 width: 45px;
 height: 4px;
 position: absolute;
 top: 0;
 left: 0;
 background-color: $color;
}
}
form { display: block; margin: 20px auto 0; width: 80%; max-width: 735px; height: 60px; position: relative;  input {
 display: block;
 width: 100%;
 height: 100%;
 font-size: 16px;
 color: #333;
 padding: 0 20px;
}
button { position: absolute; right: 0; top: 0; width: 110px; height: 100%;  background-color: $color;
 @include backimg;
background-image: url('../images/icon-1-.svg'); background-size: auto 24px; cursor: pointer; }
}
.tip { font-size: 0; text-align: center; margin-top: 1.5vw;  a {
 @include inline-top;
 line-height: 40px;
 background-color: rgba(255,255,255,.8);
 padding: 0 20px;
 margin: 0 5px;
 font-size: 15px;
 font-weight: bold;
 color: $color;
 transition: all .3s ease;
 @media screen and (min-width: 1025px) {
 &:hover {
 color: #fff;
 background-color: $color;
}
}
 &.active {
 color: #fff;
 background-color: $color;
}
}
}
}
.c-nav { padding: 0 3.125vw; display: flex; justify-content: space-between; font-size: 0;  a {
 transition: all .3s ease;
 &.home {
 width: 17px;
 height: 18px;
 @include backcontain;
 background-image: url('../images/home.png');
}
 &.link {
 font-size: 16px;
 color: #999999;
 line-height: 80px;
 &:hover, &.active {
 color: $color;
}
}
}
.left-box {  a {
 @include inline-middle;
 &:before {
 content: '>';
 font-size: 16px;
 color: #999999;
 margin: -2px 15px 0;
 @include inline-middle;
}
 &:first-of-type {
 &:before {
 display: none;
}
}
}
}
.right-box {  a {
 @include inline-top;
 &:before {
 content: '';
 width: 1px;
 height: 14px;
 background-color: #a9a9a9;
 margin: -2px 30px 0;
 @include inline-middle;
}
 &:first-of-type {
 &:before {
 display: none;
}
}
}
}
}
.comm-page { font-size: 0; text-align: center;  ul {
 @include inline-top;
}
li {
 @include inline_top; margin: 0 3px;  a {
 display: block;
 width: 40px;
 height: 40px;
 font-size: 14px;
 color: #333;
 line-height: 40px;
 text-align: center;
 border: 1px solid #dee2e6;
 @include transition(all .3s ease);
}
 &:hover, &.active {
 a {
 border-color: $color;
 background-color: $color;
 color: #fff;
}
}
}
}
.comm-share { float: left; margin-left: -100px; margin-top: 15vw; width: 40px; position: sticky; top: 90px;  span {
 margin-top: 20px;
 height: 1px;
 background-color: #e6e6e6;
 display: block;
}
a { display: block; width: 40px; height: 40px !important; padding: 0 !important; margin: 10px 0 0 !important; float: none !important; background-position: center !important; background-repeat: no-repeat !important;  @include transition(all .3s ease);
 &:first-of-type {
 border-radius: 5px;
 background-color: $color;
 background-image: url('../images/detail-1.png');
}
 &.wx {
 background-image: url('../images/detail-2.png');
 &:hover {
 background-image: url('../images/detail-2-on.png');
}
}
 &.sina {
 background-image: url('../images/detail-3.png');
 &:hover {
 background-image: url('../images/detail-3-on.png');
}
}
 &.qq {
 background-image: url('../images/detail-4.png');
 &:hover {
 background-image: url('../images/detail-4-on.png');
}
}
}
}
.inner-tit {  h3 {
 font-size: 36px;
}
p { font-size: 16px; line-height: 1.75; margin-top: 20px; }
 &:after {
 content: '';
 display: block;
 width: 22px;
 height: 3px;
 margin-top: 24px;
 background-color: $color;
}
 &.gray {
 h3 {
 color: #333;
}
 p {
 color: #999;
}
}
 &.white {
 h3 {
 color: #fff;
}
 p {
 color: #fff;
}
}
 &.center {
 text-align: center;
 &:after {
 margin-left: auto;
 margin-right: auto;
}
}
}
.c-pd { padding-top: 100px; }
.index-main {  .section {
 position: relative;
 height: 100vh;
 overflow: hidden;
}
}
.index-s1 { background-color: #000;  .item {
 height: 100vh;
 position: relative;
 overflow: hidden;
 &.swiper-slide-active {
 h3, p, .btn {
 opacity: 1;
 transform: translateY(0);
}
 h3 {
 transition-delay: .8s;
}
 p {
 transition-delay: 1s;
}
 .btn {
 transition-delay: 1.2s;
}
}
}
.bg-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0;  @include backcover;
animation: o-scale 20s linear infinite; z-index: 1; }
.txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }
h3, p, .btn { opacity: 0; transform: translateY(2vw); transition: all .6s ease; }
h3 { font-size: 56px; color: #fff; letter-spacing: 2px; }
p { font-size: 20px; line-height: 2; color: #fff; letter-spacing: 2px; max-width: 660px; margin: 20px 0; }
.button { width: 17px; height: 29px;  @include backcontain;
background-image: url('../images/prev-1.png'); position: absolute; top: 50%; margin-top: -15px; opacity: .5; transition: opacity .3s ease; z-index: 2; cursor: pointer;  @media screen and (min-width: 1025px) {
 &:hover {
 opacity: 1;
}
}
}
.button-prev { left: 5vw; }
.button-next { right: 5vw; transform: rotate(180deg); }
.pagination { position: absolute; left: 0; right: 0; bottom: 4.5vw; text-align: center; font-size: 0; z-index: 2;  .num {
 @include inline-top;
 width: 190px;
 position: relative;
 margin-left: -1px;
 opacity: .5;
 span {
 display: block;
 text-align: center;
 padding-bottom: 10px;
 font-size: 14px;
 font-family: 'DINPro-Regular';
 color: #fff;
 transition: color .3s ease;
}
 svg {
 display: block;
 width: 100%;
 height: auto;
}
 .line-1 {
 stroke: #fff;
}
 .line-2 {
 stroke: $color;
 stroke-dasharray: 560;
 stroke-dashoffset: 560;
}
 &.active {
 opacity: 1;
 z-index: 2;
 span {
 color: $color;
}
 .line-2 {
 stroke-dashoffset: 0;
 transition: all 2s ease;
}
}
}
}
.scroll { position: absolute; left: 5vw; bottom: 0; opacity: .5; z-index: 2;  span {
 display: block;
 font-size: 14px;
 color: #fff;
 transform-origin: bottom left;
 transform: rotate(-90deg) translateY(26px);
}
i { display: block; width: 1px; height: 60px; margin: 10px auto 0; position: relative; overflow: hidden;  &:before {
 content: '';
 width: 1px;
 height: 60px;
 background-color: #fff;
 display: block;
 animation: o-scroll 1.5s linear infinite;
}
}
}
}
.index-s2 { position: relative; overflow: hidden;  &:before {
 content: '';
 width: 36vw;
 height: 41.5vw;
 @include backcontain;
 background-image: url('../images/img-9.png');
 position: absolute;
 top: -7vw;
 right: -8vw;
 opacity: .015;
 z-index: 1;
}
.cont-box { height: 100%; padding-top: 70px; position: relative; z-index: 2; }
.left-box { width: 45%;  @include inline-middle;
position: relative; border-radius: 10px 10px 0 10px; overflow: hidden;  img {
 display: block;
 width: 100%;
 animation: o-scale 20s linear infinite;
}
a { width: 78px; height: 78px; position: absolute; right: 0; bottom: 0; background-color: rgba(201,23,29,.5); transition: all .3s ease;  &:before, &:after {
 content: '';
 width: 34px;
 height: 34px;
 opacity: .5;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -17px 0 0 -17px;
 transition: all .3s ease;
}
 &:before {
 @include backcontain;
 background-image: url('../images/icon-2.png');
}
 &:after {
 border: 1px solid #fff;
 border-radius: 50%;
 box-sizing: border-box;
 opacity: 0;
 transform: scale(1.5);
}
 @media screen and (min-width: 1025px) {
 &:hover {
 background-color: $color;
 &:before {
 opacity: 1;
}
 &:after {
 transform: scale(1);
 opacity: 1;
}
}
}
}
}
.right-box { width: 55%;  @include inline-middle;
padding-left: 6.25vw; }
a.index-more { margin-top: 2vw; }
.datas { margin-top: 4vw; font-size: 0; }
.data {
 @include inline-top; margin-right: 5vw; position: relative;  &:last-of-type {
 margin-right: 0;
}
 &:before {
 content: '';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 width: 180px;
 height: 180px;
 @include backcontain;
 background-image: url('../images/img-7.gif');
 filter: grayscale(100%);
 opacity: 0;
 transition: all .3s ease;
}
.num { font-size: 16px;  color: $color;
 span {
 display: inline-block;
 font-size: 42px;
 line-height: 1;
 font-family: 'DINPro-Medium';
 transform: translateY(3px);
 margin-right: 5px;
}
}
p { font-size: 16px; color: #555555; margin-top: 10px; }
 @media screen and (min-width: 1025px) {
 &:hover {
 &:before {
 opacity: .5;
}
}
}
}
 @media screen and (min-width: 1025px) {
.left-box, .index-tit, .btn, .datas { opacity: 0; transform: translateY(2vw); transition: all .6s ease; }
 &.active {
 .left-box, .index-tit, .btn, .datas {
 opacity: 1;
 transform: translateY(0);
}
 .left-box {
 transition-delay: .5s;
}
 .index-tit {
 transition-delay: .7s;
}
 .btn {
 transition-delay: .9s;
}
 .datas {
 transition-delay: 1.1s;
}
}
}
}
.index-s3 {  .bg-box {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 1;
 background-color: #000;
 overflow: hidden;
 &:after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0,0,0,.7);
 z-index: 2;
 display: none;
}
 .item {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 @include backcover;
 opacity: 0;
 transition: all .6s ease;
 animation: o-scale 20s linear infinite;
 z-index: 1;
 &.active {
 opacity: 1;
}
}
}
.cont-box { height: 100%; padding-top: 70px; position: relative; z-index: 2; }
.tab-tit { position: absolute; left: 0; right: 0; bottom: 4vw; z-index: 2;  .wrapper {
 display: flex;
}
.item { flex: 1; position: relative;  @include inline-top;
 // width: calc(20% - 1px);
margin-left: 1px; text-align: center;  &:before {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 120px;
 background-color: rgba(255,255,255,.9);
 transition: all .3s ease;
}
.icon { width: 80px; height: 80px; position: relative;  i {
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 3;
 &:after {
 animation: o-opacity 1s linear infinite;
}
}
}
h3 { font-size: 20px; }
p { font-size: 16px; }
.show { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; z-index: 2; transition: all .3s ease;  .icon {
 @include inline-middle;
}
.txt {
 @include inline-middle; max-width: calc(100% - 80px); text-align: left; }
h3 { color: #000; }
p { color: #555555; margin-top: 5px; }
}
.hide { position: relative; padding: 20px; z-index: 2; opacity: 0; visibility: hidden; transition: all .3s ease;  .icon {
 margin: 0 auto;
 &:before {
 content: '';
 position: absolute;
 top: -15px;
 left: -15px;
 right: -15px;
 bottom: -15px;
 @include backcontain;
 background-image: url('../images/icon-3.png');
 z-index: 1;
}
 &:after {
 content: '';
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-color: #fff;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
}
}
.txt { margin-top: 30px; }
h3 { color: #fff; }
p { color: #fff; margin-top: 10px; }
}
 &:nth-of-type(1) {
 .icon {
 i {
 width: 52px;
 height: 48px;
 margin: -24px 0 0 -26px;
 @include backimg;
 background-image: url('../images/ani-1.png');
 &:after {
 content: '';
 width: 25px;
 height: 48px;
 @include backcontain;
 background-image: url('../images/ani-1.svg');
 position: absolute;
 right: 0;
 top: 0;
}
}
}
}
 &:nth-of-type(2) {
 .icon {
 i {
 width: 47px;
 height: 47px;
 margin: -24px 0 0 -24px;
 @include backimg;
 background-image: url('../images/ani-2.png');
 &:after {
 content: '';
 width: 30px;
 height: 26px;
 @include backcontain;
 background-image: url('../images/ani-2.svg');
 position: absolute;
 top: 0;
 left: 15px;
}
}
}
}
 &:nth-of-type(3) {
 .icon {
 i {
 width: 41px;
 height: 47px;
 margin: -24px 0 0 -20px;
 @include backimg;
 background-image: url('../images/ani-3.png');
 &:after {
 content: '';
 width: 20px;
 height: 21px;
 @include backcontain;
 background-image: url('../images/ani-3.svg');
 position: absolute;
 top: 0;
 right: 0;
}
}
}
}
 @media screen and (min-width: 769px) {
 &.active {
 &:before {
 height: 220px;
 background-color: $color;
}
 .show {
 opacity: 0;
 visibility: hidden;
}
 .hide {
 opacity: 1;
 visibility: visible;
}
}
}
}
}
.tab-cont { padding-bottom: 180px;  .item {
 display: none;
 &.active {
 display: block;
}
 .index-tit, .btn {
 opacity: 0;
 animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
 .index-tit {
 animation-delay: .1s;
 p {
 width: 70%;
 max-width: 610px;
}
}
 .btn {
 animation-delay: .2s;
 margin-top: 2vw;
}
}
}
 @media screen and (min-width: 1025px) {
.tab-tit, .tab-cont { opacity: 0; transform: translateY(2vw); transition: all .6s ease; }
 &.active {
 .tab-tit, .tab-cont {
 opacity: 1;
 transform: translateY(0);
}
 .tab-cont {
 transition-delay: .5s;
}
 .tab-tit {
 transition-delay: .7s;
}
}
}
}
.index-s4 {  .bg-box {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 1;
 background-color: #000;
 overflow: hidden;
 &:after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: rgba(0,0,0,.7);
 z-index: 2;
}
 .item {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 @include backcover;
 opacity: 0;
 transition: all .6s ease;
 animation: o-scale 20s linear infinite;
 z-index: 1;
 &.active {
 opacity: 1;
}
}
}
.cont-box { height: 100%; padding-top: 70px; position: relative; z-index: 2;  .items {
 margin-top: 6vw;
 display: flex;
 justify-content: space-between;
 align-items: center;
}
.item { width: calc((100% - 7vw) / 4); position: relative;  i {
 display: block;
 width: 100px;
 height: 62px;
 margin: 0 auto;
 @include backcontain;
}
h3 { font-size: 20px; margin-top: 15px; text-align: center; }
p { font-size: 16px; line-height: 30px; color: #fff; margin-top: 20px; }
.show { position: absolute; left: 0; right: 0; top: 50%; padding: 3vw 1.5vw; transform: translateY(-50%); background-color: #fff; border-radius: 0 1.5vw 0 0; cursor: pointer; transition: all .3s ease;  h3 {
 color: #333333;
}
}
.hide {
 background-color: $color; background-position: 130% -50%; border-radius: 0 1.5vw 0 1.5vw; background-repeat: no-repeat; background-image: url('../images/img-5.png'); padding: 3.5vw 1.5vw; opacity: 0; visibility: hidden; cursor: pointer; transition: all .3s ease;  h3 {
 color: #fff;
}
}
 @for $i from 1 through 4 {
 &:nth-of-type(# {
$i
}
) {
 .show {
 i {
 background-image: url('../images/icon-1-#{$i}.png');
}
}
 .hide {
 i {
 background-image: url('../images/icon-1-#{$i}-on.png');
}
}
}
}
 @media screen and (min-width: 1025px) {
 &.active {
 .show {
 opacity: 0;
 visibility: hidden;
}
 .hide {
 opacity: 1;
 visibility: visible;
}
}
}
}
}
 @media screen and (min-width: 1025px) {
.index-tit, .cont-box .items { opacity: 0; transform: translateY(2vw); transition: all .6s ease; }
 &.active {
 .index-tit, .cont-box .items {
 opacity: 1;
 transform: translateY(0);
}
 .index-tit {
 transition-delay: .5s;
}
 .cont-box .items {
 transition-delay: .7s;
}
}
}
}
.index-s5 {  .bg-box {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 1;
 overflow: hidden;
 .bg {
 width: 100%;
 height: 100%;
 @include backcover;
 background-image: url('../images/img-1.jpg');
 animation: o-scale 20s linear infinite;
}
}
.cont-box { height: 100%; padding-top: 70px; position: relative; z-index: 2; }
.mid-block { margin-top: 3.5vw; font-size: 0; display: flex; justify-content: space-between;  .item {
 width: calc((100% - 84px) / 3);
 .img-box {
 overflow: hidden;
}
 .txt-box {
 margin-top: 20px;
}
 img {
 display: block;
 width: 100%;
 transition: transform .6s ease;
}
 h3 {
 font-size: 16px;
 color: #333;
 @include text-hidden;
 transition: color .3s ease;
}
 .date {
 font-size: 14px;
 color: #555555;
 font-family: 'DINPro-Regular';
 margin-top: 10px;
}
 @media screen and (min-width: 1025px) {
 &:hover {
 img {
 transform: scale(1.1);
}
 h3 {
 color: $color;
}
}
}
}
}
.bot-block { margin-top: 2vw; padding-top: 2vw; font-size: 0; border-top: 1px solid rgba(0,0,0,.05); display: flex; justify-content: space-between;  .item {
 width: calc((100% - 6vw) / 4);
 .img-box {
 @include inline-middle;
 width: 32%;
 max-width: 106px;
 overflow: hidden;
}
 .txt-box {
 @include inline-middle;
 width: 68%;
 padding-left: 15px;
}
 img {
 display: block;
 width: 100%;
 transition: transform .6s ease;
}
 h3 {
 font-size: 16px;
 line-height: 24px;
 color: #333333;
 height: 48px;
 overflow: hidden;
 transition: color .3s ease;
}
 .date {
 font-size: 14px;
 color: #555555;
 font-family: 'DINPro-Regular';
 margin-top: 10px;
}
 @media screen and (min-width: 1025px) {
 &:hover {
 img {
 transform: scale(1.1);
}
 h3 {
 color: $color;
}
}
}
}
}
 @media screen and (min-width: 1025px) {
.index-tit, .mid-block, .bot-block { opacity: 0; transform: translateY(2vw); transition: all .6s ease; }
 &.ani {
 .index-tit, .mid-block, .bot-block {
 opacity: 1;
 transform: translateY(0);
}
 .mid-block {
 transition-delay: .2s;
}
 .bot-block {
 transition-delay: .4s;
}
}
}
}
.dangzhibu-list-s1 { padding: 5vw 0;  .items {
 margin-bottom: 5vw;
}
.item { font-size: 0; transition: all .3s ease;  a {
 display: block;
 padding: 20px;
}
 &:nth-of-type(odd) {
 background-color: #f5f5f5;
}
 &:nth-of-type(even) {
 background-color: #fff;
}
.img-box {
 @include inline-middle; width: 28%; max-width: 382px; overflow: hidden; }
.txt-box {
 @include inline-middle; width: 72%; padding-left: 2.5vw; }
img { display: block; width: 100%; transition: transform .3s ease; }
.date { font-size: 16px; color: #9d9d9d; font-family: 'DINPro-Medium'; transition: color .3s ease; }
h3 { font-size: 24px; color: #333; margin: 15px 0; transition: color .3s ease; }
p { font-size: 16px; line-height: 30px; max-height: 60px; color: #9d9d9d; overflow: hidden; transition: color .3s ease; }
span { display: none; width: 116px; line-height: 42px; background-color: #fff; text-align: center; font-size: 16px; color: #333; margin-top: 15px; }
 @media screen and (min-width: 1025px) {
 &:hover {
 background-color: $color;
 img {
 transform: scale(1.1);
}
 .date, h3, p {
 color: #fff;
}
 span {
 display: block;
}
}
}
}
}
.news-list-s1 { padding-bottom: 5vw;  .form {
 padding: 3.8vw 0;
 form {
 margin: 0 auto;
 position: relative;
 width: 100%;
 max-width: 640px;
 height: 60px;
 border-radius: 5px;
 box-shadow: 0 0 1.5vw rgba(0,0,0,.1);
 overflow: hidden;
}
 input {
 display: block;
 width: 100%;
 height: 100%;
 padding: 0 24px;
 font-size: 16px;
 color: #555555;
 letter-spacing: 2px;
}
 button {
 position: absolute;
 right: 0;
 top: 0;
 width: 60px;
 height: 60px;
 @include backimg;
 background-color: transparent;
 background-image: url('../images/news/icon-2.png');
 transition: all .3s ease;
 cursor: pointer;
 &:hover {
 background-image: url('../images/news/icon-2-on.png');
}
}
}
.items { font-size: 0; margin: 0 -1vw 5vw; }
.item {
 @include inline-top; width: calc(33.33% - 2vw); margin: 2.5vw 1vw 0; position: relative; box-shadow: 0 0 1vw rgba(0,0,0,.1); transition: all .3s ease; overflow: hidden;  .show {
 img {
 display: block;
 width: 100%;
}
 .txt-box {
 padding: 1.5vw 1.5vw 2vw;
}
 .date {
 font-size: 16px;
 color: #cccccc;
 font-family: 'DINPro-Medium';
}
 h3 {
 font-size: 18px;
 line-height: 24px;
 color: #333;
 margin: 15px 0;
 height: 48px;
 overflow: hidden;
}
 span {
 font-size: 16px;
 color: #333;
 &:after {
 content: '';
 width: 8px;
 height: 12px;
 @include backcontain;
 background-image: url('../images/news/icon-1.png');
 @include inline-middle;
 margin: -2px 0 0 10px;
}
}
}
.hide { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: all .3s ease;  .img-box {
 height: 100%;
 overflow: hidden;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
.txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0 2vw; text-align: center; background-color: rgba(201,23,29,.8); }
.date { font-size: 16px; color: #fff; font-family: 'DINPro-Medium'; }
h3 { font-size: 20px; line-height: 30px; color: #fff; margin: 24px 0; }
span { display: block; margin: 0 auto; font-size: 16px; color: #333333; width: 114px; line-height: 42px; background-color: #fff; }
}
 @media screen and (min-width: 1025px) {
 &:hover {
 border-radius: 0 1.5vw 0 0;
 .hide {
 opacity: 1;
}
}
}
}
}
.news-detail-s1 {  .cont {
 display: inline-block;
 width: 100%;
 padding: 4vw 0 6vw;
}
.tit-box { text-align: center; padding-bottom: 1.5vw;  h3 {
 font-size: 36px;
 color: #333;
}
.info { margin-top: 3vw; font-size: 0; }
span {
 @include inline-top; font-size: 16px; color: #999;  &:after {
 content: '';
 width: 1px;
 height: 10px;
 background-color: #c6c6c6;
 @include inline-middle;
 margin: -2px 1.5vw 0;
}
 &:last-of-type {
 &:after {
 display: none;
}
}
}
}
.top-box { padding: 3vw 0; border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; }
a.back { display: block; width: 100px; height: 100px;  background-color: $color;
border-radius: 50%; margin: 4vw auto 0; text-align: center; box-shadow: 0 15px 30px rgba(220,6,24,.3);  @include transition(all .3s ease);
 span {
 display: block;
 font-size: 14px;
 color: #fff;
 &:before {
 content: '';
 width: 27px;
 height: 24px;
 display: block;
 margin: 0 auto 5px;
 @include backcontain;
 background-image: url('../images/return.png');
}
}
}
.other { margin-top: 4vw; font-size: 0;  h4 {
 font-size: 24px;
 color: #333;
}
.page { margin-top: 1.5vw; }
a {
 @include inline-top; width: calc(50% - 1.25vw); background-color: #fff; border: 1px solid #e6e6e6; border-top: 3px solid #454545; padding: 1.5vw 2vw; position: relative;  @include transition(all .3s ease);
 &:nth-of-type(2) {
 margin-left: 2.4vw;
}
div { font-size: 20px; color: #333333; margin-bottom: 30px; }
p { position: absolute; bottom: 1.5vw; left: 2vw; right: 2vw; font-size: 16px; color: #333;  @include text-hidden;
 @include transition(color .3s ease);
}
 @media screen and (min-width: 1025px) {
 &:hover {
 border-top-color: $color;
 box-shadow: 0 0 1.5vw rgba(0,0,0,.1);
 @include transform(translateY(-10px));
 p {
 color: $color;
}
}
}
}
}
}
.contact-s1 { padding: 6vw 0;  @include backcover;
background-image: url('../images/contact/img-1.jpg');  .cont {
 margin-top: 3vw;
 padding: 5vw;
 border-radius: 10px;
 background-color: #fff;
 box-shadow: 0 0 15px rgba(0,0,0,.1);
 font-size: 0;
 display: flex;
 justify-content: space-between;
}
.left-box { max-width: 900px;  h3 {
 font-size: 28px;
 color: #333333;
}
.tip { font-size: 14px; color: #555555; margin-top: 10px; }
.info { font-size: 0; margin-top: 24px;  span {
 @include inline-top;
 position: relative;
 width: 48%;
 font-size: 18px;
 line-height: 20px;
 padding: 10px 0;
 padding-left: 50px;
 color: #333;
 margin-top: 20px;
 &:before {
 content: '';
 width: 36px;
 height: 36px;
 border: 1px solid #ddd;
 border-radius: 50%;
 @include backimg;
 position: absolute;
 left: 0;
 top: 50%;
 margin-top: -18px;
}
 @for $i from 1 through 4 {
 &:nth-of-type(# {
$i
}
) {
 &:before {
 background-image: url('../images/contact/icon-1-#{$i}.png');
}
}
}
 @media screen and (min-width: 769px) {
 &:nth-of-type(1),  &:nth-of-type(2) {
 margin-top: 0;
}
}
}
}
}
.right-box { white-space: nowrap; }
.ewm {
 @include inline-top; width: 160px; margin-left: 2vw;  &:nth-of-type(1) {
 margin-left: 0;
}
.img { border: 1px solid #dadada; }
img { display: block; width: 100%; }
p { font-size: 16px; color: #414141; margin-top: 20px; text-align: center; font-weight: bold; }
}
}
.contact-s2 { position: relative; padding-bottom: 12vw; z-index: 2;  .map {
 height: 40vw;
 margin-top: 2vw;
}
.tab-tit { position: absolute; left: 0; right: 0; bottom: 0; transform: translateY(-50%); z-index: 999;  .items {
 border-radius: 10px;
 box-shadow: 0 0 10px #b6b6b6;
 background-color: #fff;
 font-size: 0;
}
.item {
 @include inline-top; width: 25%; height: 12vw; position: relative; cursor: pointer;  &:before {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 4px;
 background-color: $color;
 transform-origin: left top;
 transform: scaleX(0);
 transition: .6s ease;
}
 &:after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-position: center bottom;
 background-repeat: no-repeat;
 background-image: url('../images/contact/icon-2.jpg');
 background-size: 13.3vw auto;
 opacity: 0;
 transition: all .3s ease;
 z-index: 1;
}
.cell-box { height: 100%; text-align: center; position: relative; z-index: 2;  &:after {
 content: '';
 width: 1px;
 height: 4.5vw;
 background-color: #f2f2f2;
 position: absolute;
 right: 0;
 top: 50%;
 margin-top: -2.25vw;
}
}
h3 { font-size: 28px; color: #333; transition: color .3s ease; }
p { font-size: 15px; color: rgba(68,68,68,.6); margin-top: 12px; padding: 0 20px; transition: color .3s ease; }
 &:last-of-type {
 .cell-box {
 &:after {
 display: none;
}
}
}
 &:hover, &.active {
 &:after {
 opacity: 1;
}
 h3, p {
 color: $color;
}
}
 &.active {
 &:before {
 transform: scaleX(1);
}
}
}
}
.map-cont { width: 880px; margin: -10px -18px -10px -10px; font-size: 0;  .img-box {
 @include inline-middle;
 width: 280px;
 height: 180px;
 text-align: center;
 background-color: $color;
 img {
 width: auto;
 max-width: 70% !important;
 max-height: 50% !important;
}
}
.txt {
 @include inline-middle; width: 430px; padding: 0 30px; font-size: 16px; line-height: 28px; color: #333333; }
.ewm {
 @include inline-middle; width: 170px; padding-right: 20px;  img {
 display: block;
 width: 100%;
}
}
}
}
.about-chairman-s1 { padding: 6vw 0; font-size: 0;  .left-box {
 @include inline-middle;
 width: 44%;
 max-width: 598px;
 img {
 display: block;
 width: 100%;
}
}
.right-box {
 @include inline-middle; width: 56%; padding-left: 5vw; }
.para { font-size: 17px; line-height: 2.5; color: #444; }
.tip { margin-top: 24px;  span {
 @include inline-middle;
 max-width: calc(100% - 150px);
 font-size: 18px;
 color: #000;
}
img {
 @include inline-middle; max-width: 123px; margin-left: 20px; }
}
}
.about-intro-s1 { padding: 6vw 0; background-position: center bottom; background-repeat: no-repeat; background-image: url('../images/img-4.png'); background-size: 100% auto;  .img-box {
 margin: 2.5vw 0 3vw;
 img {
 display: block;
 width: 60%;
 max-width: 750px;
 margin: 0 auto;
}
}
.para { font-size: 17px; color: #444444; line-height: 2.5; }
}
.about-honor-s1 { padding: 6vw 0; font-size: 0;  .items {
 margin: 0 -18px 4.5vw
}
.item {
 @include inline-top; width: calc(33.33% - 36px); margin: 2vw 18px 0; box-shadow: 0 5px 30px rgba(0,0,0,.15); position: relative;  @media screen and (min-width: 1025px) {
 &:nth-of-type(1),  &:nth-of-type(2),  &:nth-of-type(3) {
 margin-top: 0;
}
}
.img-box { overflow: hidden; }
img { display: block; width: 100%; }
.txt-box { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; background-color: rgba(210,0,46,.7); text-align: center; background-position: center; background-repeat: no-repeat; background-image: url('../images/img-5.png'); background-size: 8vw auto; opacity: 0; visibility: hidden; transform: scale(.9); transition: all .3s ease; }
h3 { padding: 0 20px; font-size: 20px; color: #fff; }
 &:hover {
 .txt-box {
 opacity: 1;
 visibility: visible;
 transform: scale(1);
}
}
}
}
.about-history-s1 { padding: 6vw 0; font-size: 0;  @include backimg;
background-image: url('../images/img-7.jpg'); background-size: 100% auto; background-attachment: fixed;  &:after {
 content: '';
 display: block;
 clear: both;
}
.line-box { width: 250px; float: right; position: sticky; top: 50%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3;  .line {
 position: relative;
 padding-right: 55px;
 text-align: right;
 font-size: 16px;
 line-height: 40px;
 color: #bfbfbf;
 cursor: pointer;
 @include transition(all .3s ease);
 &:after {
 content: '';
 width: 24px;
 height: 1px;
 background-color: #e6e6e6;
 position: absolute;
 right: 0;
 top: 50%;
 @include transition(all .3s ease);
}
 @media screen and (min-width: 769px) {
 &.active {
 font-size: 24px;
 padding-right: 75px;
 color: $color;
 &:after {
 width: 48px;
 background-color: $color;
}
}
}
}
 &.show {
 opacity: 1;
 visibility: visible;
}
}
.cont { float: left; width: calc(100% - 250px);  .items {
 margin-right: -250px;
}
}
.item { margin-top: 4.5vw;  &:nth-of-type(1) {
 margin-top: 0;
}
.num { font-size: 220px; line-height: 1; color: #d6d6d6; opacity: .5; font-family: 'DINPro-Medium'; text-align: center; transition: all .3s ease; }
.block { padding: 6vw 3.5vw; background-color: #fff; box-shadow: 0 0 1.5vw rgba(0,0,0,.1); margin-top: -80px; position: relative; z-index: 2;  &:after {
 content: '';
 width: 100%;
 height: 8px;
 background-color: #d6d6d6;
 position: absolute;
 bottom: 0;
 left: 0;
 transition: all .3s ease;
}
}
h3 { font-size: 32px; color: #333; }
.box { margin-top: 15px; }
.left-box {
 @include inline-top; width: calc(100% - 333px); padding-right: 2vw; }
.right-box {
 @include inline-top; width: 333px;  img {
 display: block;
 width: 100%;
}
}
.year { font-size: 18px; color: #ebebeb; transition: all .3s ease;  &:after {
 content: '';
 width: 30px;
 height: 4px;
 background-color: #ebebeb;
 display: block;
 margin: 1.5vw 0;
 transition: all .3s ease;
}
}
.para { font-size: 17px; line-height: 2.5; color: #333333; }
 &.active {
 .num {
 color: $color;
}
 .block {
 &:after {
 background-color: $color;
}
}
 .year {
 color: $color;
 &:after {
 background-color: $color;
}
}
}
}
}
.about-page {  .c-banner {
 h3 {
 text-align: left;
}
 .line {
 margin-left: 0;
 margin-right: auto;
}
}
}
.about-page-s1 { padding-top: 4.5vw; font-size: 0;  .cont {
 background-color: #f5f5f5;
 padding: 30px 0;
 &:before {
 content: '';
 width: 12vw;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
 background-color: #fff;
 z-index: 1;
}
}
.block { position: relative; z-index: 2; }
.img-box { width: 50%;  @include inline-middle;
overflow: hidden;  img {
 display: block;
 width: 100%;
 transition: transform .6s ease;
}
 @media screen and (min-width: 1025px) {
 &:hover {
 img {
 transform: scale(1.1);
}
}
}
}
.txt-box { width: 50%;  @include inline-middle;
padding: 0 2vw; }
.para { font-size: 16px; line-height: 2; color: #676767; margin: 24px 0; }
a { display: block; width: 150px; font-size: 16px;  color: $color;
line-height: 46px;  border: 2px solid $color;
border-radius: 5px; text-align: center; transition: all .3s ease;  &:hover {
 background-color: $color;
 color: #fff;
 transform: translateY(-5px);
 box-shadow: 0 10px 30px rgba(201,23,29,.3);
}
}
}
.about-page-s2 { padding-top: 3vw; font-size: 0;  .item {
 @include inline-top;
 width: 25%;
 text-align: center;
 border-left: 1px solid #ebebeb;
 &:last-of-type {
 border-right: 1px solid #ebebeb;
}
 .num {
 font-size: 16px;
 color: #999999;
 span {
 font-size: 60px;
 color: #333333;
 display: inline-block;
 line-height: 1;
 font-family: 'DINPro-Medium';
}
}
 p {
 font-size: 16px;
 color: #666;
 margin-top: 10px;
}
}
}
.about-page-s3 { padding: 6vw 0;  @include backcover;
background-image: url('../images/img-10.png');  .cont {
 position: relative;
 margin-top: 3vw;
}
.airplane { position: absolute; top: 70px; width: 86%; max-width: 1240px; margin: 0 auto; left: 0; right: 0; height: 2px; border-top: 2px dashed #cecfcf;  @include transform(rotate(-20deg));
z-index: 1;  &:before {
 content: '';
 position: absolute;
 left: 0;
 width: 30%;
 height: 3px;
 top: -2px;
 background-image: linear-gradient(-90deg, rgba(244,246,248,.0), rgba(244,246,248,1));
}
 &:after {
 content: '';
 position: absolute;
 right: 0;
 width: 30%;
 height: 3px;
 top: -2px;
 background-image: linear-gradient(90deg, rgba(244,246,248,.0), rgba(244,246,248,1));
}
img { width: 114px; position: absolute; bottom: -5px; left: 0;  @include transform(translateX(-100%));
 @include transition(left .6s ease);
}
}
.tab-cont { max-width: 660px; margin: 0 auto; padding: 3.125vw; border-radius: 20px;  @include backcover;
box-shadow: 0 1vw 2vw rgba(235,19,41,.3); background-image: url('../images/img-11.jpg'); overflow: hidden; position: relative; z-index: 2;  .child {
 display: none;
 text-align: center;
 opacity: 0;
 @include animation(o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards);
 &.active {
 display: block !important;
}
}
h3 { position: relative; text-align: center; font-size: 60px; color: #fff; font-family: 'DINPro-Medium'; }
.para { display: inline-block; margin-top: 1.5vw; text-align: left; font-size: 16px; line-height: 2; color: #fff; }
}
.year { max-width: 1200px; margin: 3vw auto 0; position: relative; z-index: 2;  .item {
 position: relative;
 .box {
 text-align: center;
 cursor: pointer;
 &:before {
 content: '';
 width: 25px;
 height: 32px;
 display: block;
 margin: 0 auto;
 @include backcontain;
 background-image: url('../images/icon-2.png');
 opacity: 0;
 @include transform(translateY(10px));
 @include transition(all .3s ease);
}
 .dot {
 width: 16px;
 height: 16px;
 margin: 24px auto;
 @include backcontain;
 background-image: url('../images/icon-3.png');
 @include transition(all .3s ease);
}
 h3 {
 font-size: 24px;
 line-height: 1;
 color: #1e2835;
 opacity: .5;
 font-family: 'DINPro-Regular';
 @include transform(scale(.75));
 @include transition(all .3s ease);
 white-space: nowrap;
}
}
 .line {
 position: absolute;
 left: 100%;
 top: 62px;
 width: 100px;
 height: 4px;
 @include backcontain;
 background-image: url('../images/img-12.png');
 &:after {
 content: '';
 position: absolute;
 left: 0;
 top: 0;
 width: 0;
 height: 4px;
 border-radius: 2px;
 background-color: $color;
}
}
 @media screen and (min-width: 1025px) {
 &:hover {
 .box {
 h3 {
 opacity: 1;
 color: $color;
}
}
}
}
 &.active {
 .box {
 &:before {
 opacity: 1;
 @include transform(translateY(0));
}
 .dot {
 background-image: url('../images/icon-3-on.png');
}
 h3 {
 @include transform(scale(1));
 color: $color;
 opacity: 1;
}
}
 .line {
 &:after {
 width: 100%;
 @include transition(all 2s ease);
}
}
}
}
}
.button { position: absolute; top: 8vw; width: 44px; height: 48px;  @include backcontain;
background-image: url('../images/prev-1.png'); cursor: pointer; z-index: 2; }
.button-prev { left: 0; }
.button-next { right: 0;  @include transform(rotateY(180deg));
}
}
.about-page-s4 { padding: 4vw;  @include backcover;
background-image: url('../images/img-13.jpg'); background-attachment: fixed;  .cont {
 margin-top: 2vw;
 font-size: 0;
}
.img-box { width: 47%;  @include inline-middle;
 img {
 display: block;
 width: 70%;
 max-width: 400px;
 margin: 0 auto;
 border-radius: 10px;
}
}
.txt-box { width: 53%;  @include inline-middle;
}
h3 { font-size: 34px; color: #fff; margin-bottom: 10px; }
p { font-size: 16px; line-height: 2; color: #fff; }
a { display: block; width: 150px; font-size: 16px;  color: $color;
line-height: 46px;  border: 2px solid $color;
border-radius: 5px; text-align: center; margin-top: 2vw; transition: all .3s ease;  &:hover {
 background-color: $color;
 color: #fff;
 transform: translateY(-5px);
 box-shadow: 0 10px 30px rgba(201,23,29,.3);
}
}
}
.about-page-s5 { padding: 5vw 0;  .cont {
 padding-bottom: 130px;
 position: relative;
 margin-top: 2.5vw;
}
.tab-tit { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 0;  span {
 @include inline-top;
 margin: 0 10px;
 width: 160px;
 line-height: 60px;
 font-size: 18px;
 color: #666666;
 border-radius: 10px;
 background-color: #fff;
 box-shadow: 0 3px 13px rgba(0,0,0,.1);
 transition: all .3s ease;
 cursor: pointer;
 &:hover, &.active {
 background-color: $color;
 color: #fff;
}
}
}
.tab-cont { height: 540px; position: relative; overflow: hidden;  .child {
 display: none;
 &.active {
 display: block;
}
}
}
.range { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; width: 58vw; height: 58vw;  .item {
 position: absolute;
 left: 0;
 right: 0;
 margin: 0 auto;
 transform-origin: center bottom;
 transform: scaleY(0.28);
 &:nth-of-type(1) {
 width: 58vw;
 height: 58vw;
 bottom: 0;
}
 &:nth-of-type(2) {
 width: 47vw;
 height: 47vw;
 bottom: 1.5vw;
}
 &:nth-of-type(3) {
 width: 36vw;
 height: 36vw;
 bottom: 3.3vw;
}
 &:nth-of-type(4) {
 width: 26vw;
 height: 26vw;
 bottom: 5vw;
}
 span {
 display: block;
 width: 100%;
 height: 100%;
 border: 1px solid #f3f8fe;
 box-shadow: 0 0 20px rgba(179,242,247,1) inset;
 border-radius: 50%;
}
 i {
 width: 18px;
 height: 18px;
 border-radius: 50%;
 background-color: rgba(201,23,29,.4);
 position: absolute;
 bottom: -9px;
 left: 50%;
 margin-left: -9px;
 &:before {
 content: '';
 width: 10px;
 height: 10px;
 background-color: $color;
 position: absolute;
 top: 50%;
 left: 50%;
 margin: -5px 0 0 -5px;
 border-radius: 50%;
}
}
 &:nth-of-type(2) {
 span {
 animation: p-ani-3 20s linear infinite;
}
}
 &:nth-of-type(4) {
 span {
 animation: p-ani-3 15s linear infinite;
}
}
}
}
.hexagon { position: absolute; text-align: center; animation: p-ani-2 2.5s linear infinite;  .icon {
 width: 136px;
 height: 157px;
 @include backcontain;
 background-image: url('../images/img-19-1.png');
 transition: all .3s ease;
 cursor: pointer;
 .cell-box {
 width: 100%;
 height: 100%;
}
 span {
 font-size: 22px;
 font-weight: bold;
 color: $color;
 transition: color .3s ease;
}
 &:hover {
 background-image: url('../images/img-19-2.png');
 span {
 color: #fff;
}
}
}
 &:after {
 content: '';
 display: block;
 width: 1px;
 height: 120px;
 margin: 0 auto;
 background-position: center bottom;
 background-repeat: no-repeat;
 background-image: url('../images/img-18.png');
}
 &.s {
 .icon {
 width: 110px;
 height: 127px;
}
}
 &.d {
 &:after {
 display: none;
}
}
 &:nth-of-type(2) {
 animation-delay: .4s;
}
 &:nth-of-type(3) {
 animation-delay: 1s;
}
 &:nth-of-type(4) {
 animation-delay: 1.5s;
}
 &:nth-of-type(5) {
 animation-delay: 2s;
}
}
.box-1 {  .hexagon {
 &:nth-of-type(1) {
 right: calc(50% + 270px);
 top: 40px;
}
 &:nth-of-type(2) {
 top: 110px;
 left: 50%;
 margin-left: -68px;
}
 &:nth-of-type(3) {
 left: calc(50% + 270px);
 top: 40px;
}
}
}
.box-2 {  .hexagon {
 &:nth-of-type(1) {
 right: calc(50% + 400px);
 top: 120px;
}
 &:nth-of-type(2) {
 right: calc(50% + 210px);
 top: 20px;
}
 &:nth-of-type(3) {
 top: 110px;
 left: 50%;
 margin-left: -68px;
}
 &:nth-of-type(4) {
 left: calc(50% + 210px);
 top: 0;
}
 &:nth-of-type(5) {
 left: calc(50% + 400px);
 top: 150px;
}
}
}
.box-3 {  .hexagon {
 &:nth-of-type(1) {
 right: calc(50% + 130px);
 top: 50px;
}
 &:nth-of-type(2) {
 left: 50%;
 top: 0;
 margin-left: -55px;
}
 &:nth-of-type(3) {
 left: calc(50% + 130px);
 top: 50px;
}
 &:nth-of-type(4) {
 top: 140px;
 left: 50%;
 margin-left: -68px;
}
}
}
.box-4 { position: absolute; top: 150px; left: 0; right: 0; margin: 0 auto; text-align: center;  h3 {
 display: inline-block;
 width: 700px;
 line-height: 120px;
 text-align: center;
 font-size: 22px;
 color: #fff;
 @include backimg;
 background-image: url('../images/img-17.jpg');
 background-size: 100% 100%;
}
 &:after {
 content: '';
 display: block;
 width: 1px;
 height: 120px;
 margin: 0 auto;
 background-position: center bottom;
 background-repeat: no-repeat;
 background-image: url('../images/img-18.png');
}
}
}
.about-page-s6 { padding: 6vw 0;  @include backcover;
background-image: url('../images/img-14.jpg'); font-size: 0;  .inner-tit {
 &:after {
 display: none;
}
}
.left-box { width: 35%;  @include inline-middle;
padding-left: 13vw;  .items {
 margin-top: 20px;
}
.item { display: none; opacity: 0;  &.active {
 display: block;
 animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
h3 { display: inline-block; padding-right: 60px; position: relative;  @include text-hidden;
font-size: 18px; color: #333;  &:after {
 content: '';
 width: 50px;
 height: 1px;
 background-color: #000;
 position: absolute;
 right: 0;
 top: 50%;
}
}
p { font-size: 14px; color: #aeaeae;  @include text-hidden;
margin-top: 20px; }
span { display: block; font-size: 14px; color: #aeaeae; font-family: 'DINPro-Medium'; margin-top: 10px; }
}
.btns { font-size: 0; margin-top: 2vw; }
}
.button { width: 60px; height: 60px;  @include inline-top;
background-color: #fff;  @include backimg;
background-image: url('../images/next-1.png'); border-radius: 50%; box-shadow: 0 0 20px rgba(0,0,0,.05); cursor: pointer; transition: all .3s ease;  &:hover {
 background-image: url('../images/next-2.png');
}
}
.button-prev { transform: rotate(180deg); margin-right: 15px; }
.right-box { width: 65%; position: relative;  @include inline-middle;
padding-bottom: 5.72vw;  &:before {
 content: '';
 width: 50%;
 height: 6.25vw;
 @include backcontain;
 background-image: url('../images/img-15.png');
 position: absolute;
 left: 0;
 bottom: 0;
 z-index: 1;
}
.item { height: 13.6vw;  .cell-box {
 height: 100%;
 text-align: center;
}
img { width: auto; max-width: 100%; max-height: 100%; transform: scale(.6); transition: transform .3s ease; }
 &.swiper-slide-active {
 img {
 transform: scale(1);
}
}
}
}
.pagination { margin-top: 30px; text-align: center; font-size: 26px; color: #aeaeae; font-family: 'DINPro-Medium';  span.curr {
 color: $color;
}
}
}
.recruit-idea-s1 { padding: 5vw 0;  @include backimg;
background-image: url('../images/img-1.png');  .para {
 font-size: 18px;
 line-height: 2;
 color: #4d4d4d;
 text-align: center;
 margin-top: 2vw;
}
a { display: block; width: 150px; font-size: 16px;  color: $color;
line-height: 46px;  border: 2px solid $color;
border-radius: 5px; text-align: center; margin: 3vw auto 0; transition: all .3s ease;  &:hover {
 background-color: $color;
 color: #fff;
 transform: translateY(-5px);
 box-shadow: 0 10px 30px rgba(201,23,29,.3);
}
}
}
.recruit-idea-s2 {  .box {
 overflow: hidden;
 img {
 display: block;
 width: 100%;
 transition: transform .6s ease;
}
 &:nth-of-type(1) {
 width: 69.2%;
 max-width: 982px
}
 &:nth-of-type(2),  &:nth-of-type(3) {
 width: 29.8%;
 height: 49%;
 max-width: 423px;
 max-height: 276px;
 position: absolute;
 right: 0;
}
 &:nth-of-type(2) {
 top: 0;
}
 &:nth-of-type(3) {
 bottom: 0;
}
 @media screen and (min-width: 1025px) {
 &:hover {
 img {
 transform: scale(1.1);
}
}
}
}
}
.recruit-idea-s3 { padding: 5vw 0; font-size: 0;  .items {
 display: flex;
 padding: 0 4vw;
}
.item { width: 33.33%; border-left: 1px solid #f2f2f2; padding: 0 20px; text-align: center;  &:last-of-type {
 border-right: 1px solid #f2f2f2;
}
h3 { font-size: 30px; color: #333; }
p { font-size: 18px; color: #666666; margin-top: 15px; }
}
}
.recruit-idea-s4 { padding: 6vw 0;  @include backcover;
background-image: url('../images/img-3.jpg'); background-attachment: fixed;  .items {
 font-size: 0;
 margin-top: 7vw;
}
.item {
 @include inline-top; width: 25%; margin-top: 5vw; text-align: center;  &:nth-of-type(1),  &:nth-of-type(2),  &:nth-of-type(3),  &:nth-of-type(4) {
 margin-top: 0;
}
 &:before {
 content: '';
 width: 48px;
 height: 48px;
 @include backcontain;
 display: block;
 margin: 0 auto;
 transition: background .3s ease;
}
h3 { font-size: 20px; color: #fff; margin-top: 15px; transition: color .3s ease; }
 @for $i from 1 through 8 {
 &:nth-of-type(# {
$i
}
) {
 &:before {
 background-image: url('../images/icon-1-#{$i}.png');
}
 @media screen and (min-width: 1025px) {
 &:hover {
 &:before {
 transform: rotateY(360deg);
 background-image: url('../images/icon-1-#{$i}-on.png');
 transition: all 1s ease;
}
}
}
}
}
 @media screen and (min-width: 1025px) {
 &:hover {
 h3 {
 color: $color;
}
}
}
}
}
.recruit-idea-s5 { padding: 6vw 0; font-size: 0;  .cont {
 margin-top: 2.5vw;
 font-size: 0;
 position: relative;
 box-shadow: 0 0 2vw rgba(0,0,0,.1);
}
.left-box { width: 50%; padding: 3.5vw;  @include backimg;
background-image: url('../images/img-6.png'); background-size: 9vw auto;  .item {
 width: 50%;
 @include inline-top;
 padding: 2vw 0;
 text-align: center;
 cursor: pointer;
 &:before {
 content: '';
 width: 54px;
 height: 54px;
 @include backcontain;
 display: block;
 margin: 0 auto;
 transition: background .3s ease;
}
 h3 {
 font-size: 20px;
 color: #555555;
 margin-top: 15px;
}
 @for $i from 1 through 4 {
 &:nth-of-type(# {
$i
}
) {
 &:before {
 background-image: url('../images/icon-2-#{$i}.png');
}
 &:hover, &.active {
 &:before {
 transform: rotateY(360deg);
 background-image: url('../images/icon-2-#{$i}-on.png');
 transition: all 1s ease;
}
}
}
}
 &:hover, &.active {
 h3 {
 color: $color;
}
}
}
}
.right-box { width: 50%; height: 100%; position: absolute; right: 0; top: 0; background-color: #000;  .item {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 opacity: 0;
 visibility: hidden;
 transition: all .3s ease;
 img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
 &.active {
 opacity: 1;
 visibility: visible;
}
}
}
}
.recruit-idea-s6 { padding: 3vw 0;  @include backcover;
background-image: url('../images/img-4.jpg'); text-align: center;  h3 {
 font-size: 42px;
 color: #333;
}
p { font-size: 16px; color: #666; margin-top: 15px; }
a { display: block; width: 150px; font-size: 16px; color: #fff; line-height: 50px;  background-color: $color;
border-radius: 5px; text-align: center; margin: 3vw auto 0; transition: all .3s ease;  &:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 30px rgba(201,23,29,.3);
}
}
}
.recruit-list-s1 { position: relative; padding: 5vw 0 4vw; background-color: #f5f5f5; z-index: 2;  .cont {
 margin-top: 3vw;
 padding-right: 100px;
 font-size: 0;
 position: relative;
 .box {
 @include inline-top;
 width: calc(33.33% - 24px);
 position: relative;
 margin-right: 24px;
 &:after {
 content: '';
 width: 14px;
 height: 8px;
 @include backimg;
 background-image: url('../images/icon-4.png');
 position: absolute;
 right: 20px;
 top: 50%;
 margin-top: -4px;
}
 &.open {
 ul {
 display: block;
}
}
}
 input {
 display: block;
 width: 100%;
 height: 60px;
 padding: 0 20px;
 background-color: #fff;
 font-size: 16px;
 color: #666666;
 transition: all .3s ease;
 cursor: pointer;
}
 ul {
 position: absolute;
 top: 100%;
 left: 0;
 right: 0;
 display: none;
 li {
 display: block;
 font-size: 16px;
 line-height: 50px;
 padding: 0 18px;
 background-color: #fff;
 color: #333;
 transition: all .3s ease;
 cursor: pointer;
 @media screen and (min-width: 1025px) {
 &:hover {
 background-color: $color;
 color: #fff;
}
}
}
}
 a {
 display: block;
 position: absolute;
 right: 0;
 top: 0;
 width: 100px;
 height: 60px;
 background-color: $color;
 @include backimg;
 background-image: url('../images/icon-3.png');
}
}
}
.recruit-list-s2 { padding: 2.5vw 0 5vw;  .head-box {
 background-color: $color;
 border-radius: 3px;
 display: flex;
 span {
 @include inline-top;
 font-size: 16px;
 color: #fff;
 line-height: 80px;
 width: 12.66%;
 padding: 0 12px;
 text-align: center;
 @include text-hidden;
 &:nth-of-type(1) {
 width: 24%;
 text-align: left;
 padding-left: 3vw;
}
}
}
.items { margin: 1.5vw 0 5vw; }
.item { margin-top: 24px; border-radius: 3px; background-color: #fff; box-shadow: 0 0 20px rgba(0,0,0,.1); overflow: hidden;  &:nth-of-type(1) {
 margin-top: 0;
}
.show { display: flex; background-color: #fff; cursor: pointer; transition: all .3s ease;  span {
 @include inline-top;
 font-size: 16px;
 color: #333;
 line-height: 80px;
 width: 12.66%;
 padding: 0 12px;
 text-align: center;
 @include text-hidden;
 &:nth-of-type(1) {
 width: 24%;
 text-align: left;
 padding-left: 3vw;
}
 &:last-of-type {
 @include backimg;
 background-image: url('../images/icon-6-1.png');
}
}
}
.hide { display: none; padding: 3vw; }
.m-show { display: none; }
.box { margin-bottom: 2vw;  h4 {
 font-size: 16px;
 color: #000;
}
.para { font-size: 15px; line-height: 2; color: #6e6e6e; margin-top: 10px; }
}
.info-box { display: flex; text-align: center;  .info {
 width: 25%;
 border-right: 1px solid #e3e3e3;
 &:last-of-type {
 border: none;
}
 &:before {
 content: '';
 width: 42px;
 height: 42px;
 display: block;
 margin:  0 auto;
 @include backcontain;
}
 @for $i from 1 through 4 {
 &:nth-of-type(# {
$i
}
) {
 &:before {
 background-image: url('../images/icon-5-#{$i}.png');
}
}
}
 h3 {
 font-size: 15px;
 color: #333333;
 margin-top: 10px;
}
}
}
 &.active {
 .show {
 background-color: #d0d0d0;
 span {
 &:last-of-type {
 background-image: url('../images/icon-6-2.png');
}
}
}
}
}
}
.solution-page1, .solution-page2, .solution-page3 {  .c-banner {
 img.cover {
 height: calc(100vh - 160px);
 object-fit: cover;
}
 p {
 font-size: 16px;
 line-height: 2;
 color: #fff;
 max-width: 900px;
 margin: 2vw auto;
 text-align: center;
}
 a.tel {
 display: block;
 width: 220px;
 font-size: 18px;
 line-height: 58px;
 color: #fff;
 text-align: center;
 margin: 0 auto;
 font-family: 'DINPro-Medium';
 background-color: $color;
 &:before {
 content: '';
 width: 24px;
 height: 24px;
 @include backcontain;
 background-image: url('../images/icon-1.png');
 @include inline-middle;
 margin: -2px 10px 0 0;
}
}
}
}
.solution-tabtit { margin: 3.5vw 0 calc(3.5vw + 40px); text-align: center; font-size: 0; background-position: center left; background-image: url('../images/icon-7.png'); background-repeat: repeat-x;  .item {
 @include inline-top;
 margin: 0 62px;
 position: relative;
 width: 72px;
 height: 72px;
 border-radius: 50%;
 background-color: #fff;
 border: 2px solid #dfe0e2;
 transition: all .3s ease;
 cursor: pointer;
 i {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 border-radius: 50%;
 @include backimg;
 transition: all .3s ease;
 &.hide {
 opacity: 0;
}
}
 span {
 position: absolute;
 bottom: -40px;
 left: 50%;
 white-space: nowrap;
 transform: translateX(-50%);
 font-size: 16px;
 line-height: 20px;
 padding-top: 20px;
 transition: color .3s ease;
}
 .line {
 position: absolute;
 top: 32px;
 right: -62px;
 transform: translateX(50%);
 width: 90px;
 height: 4px;
 &:after {
 content: '';
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: auto;
 width: 0;
 border-radius: 4px;
 background-color: $color;
}
}
 &.gray {
 span {
 color: #30313a;
}
}
 &.white {
 span {
 color: #fff;
}
}
 &:hover, &.active {
 background-color: $color;
 border-color: $color;
 i {
 &.show {
 opacity: 0;
}
 &.hide {
 opacity: 1;
}
}
 span {
 color: $color;
}
}
 &.active {
 .line:after {
 animation: o-width 2s linear infinite;
}
}
}
}
.solution-tabcont {  .child {
 display: none;
 &.active {
 display: block;
}
 .img-box {
 position: relative;
 opacity: 0;
 animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
 img {
 display: block;
 width: 100%;
 &.ani {
 position: absolute;
 top: 0;
 left: 0;
 animation: p-ani-4 1s linear infinite;
}
}
 .para {
 font-size: 16px;
 line-height: 2;
 max-width: 1180px;
 margin: 3vw auto 0;
 text-align: center;
 opacity: 0;
 animation: o-upfade-top 0.7s .1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 &.white {
 color: #fff;
}
 &.gray {
 color: #30313a;
}
}
}
}
.solution-s1 { padding: 5vw 0;  &.bg {
 background-color: #f6f8fb;
}
.para { margin-top: 2.5vw; text-align: center; font-size: 16px; line-height: 2; color: #30313a; }
.img-box { margin: 4vw -33px 0;  img {
 display: block;
 max-width: 100%;
 margin: 0 auto;
}
}
}
.solution-s2 { padding: 5vw 0; background-color: #20252d; background-position: center bottom; background-repeat: no-repeat; background-image: url('../images/img-8.jpg'); background-size: 100% auto; }
.solution-s3 { padding: 5vw 0; background-position: center bottom; background-repeat: no-repeat; background-image: url('../images/img-3.png'); background-size: 100% auto;  &.bg {
 background-color: #f6f8fb;
}
.para { margin-top: 2.5vw; text-align: center; font-size: 16px; line-height: 2; color: #30313a; }
.img-box { margin-top: 2.5vw;  img {
 display: block;
 max-width: 100%;
 margin: 0 auto;
}
}
.items { margin: 2.5vw -1vw 0; font-size: 0; display: flex; flex-wrap: wrap; }
.item { width: calc(33.33% - 2vw); margin: 2vw 1vw 0; position: relative; background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.1); transition: all .3s ease;  @media screen and (min-width: 769px) {
 &:nth-of-type(1),  &:nth-of-type(2),  &:nth-of-type(3) {
 margin-top: 0;
}
}
 &:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 1;
 @include backcover;
 background-image: url('../images/img-4.jpg');
 opacity: 0;
 transition: all .3s ease;
}
.box { position: relative; padding: 30px; z-index: 2; }
h3 { display: inline-block; padding-right: 30px; position: relative; font-size: 24px; color: #333333; transition: color .3s ease;  &:after {
 content: '';
 width: 29px;
 height: 26px;
 @include backcontain;
 background-image: url('../images/icon-2-1.png');
 position: absolute;
 right: 0;
 top: -10px;
 transition: all .3s ease;
}
}
p { font-size: 14px; line-height: 2; color: #333333; margin-top: 15px; transition: color .3s ease; }
 @media screen and (min-width: 1025px) {
 &:hover {
 transform: translateY(-10px);
 box-shadow: 0 10px 30px rgba(201,23,29,.3);
 &:before {
 opacity: 1;
}
 h3:after {
 background-image: url('../images/icon-2-2.png');
}
 h3, p {
 color: #fff;
}
}
}
}
}
.solution-s4 { padding: 5vw 0;  &.bg {
 background-color: #f6f8fb;
}
.para { text-align: center; font-size: 16px; line-height: 1.75; color: #555555; margin-top: 20px; }
.bot-block { margin-top: 6vw; }
.swiper-wrapper { align-items: center; }
.item { padding: 10px; text-align: center;  .box {
 padding: 3.5vw 2.5vw;
 background-color: #fff;
 box-shadow: 0 0 10px rgba(0,0,0,.1);
}
.icon { width: 104px; height: 104px; margin: 0 auto; position: relative;  &:before, i {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 @include backcontain;
}
 &:before {
 content: '';
 background-image: url('../images/icon-4.png');
 opacity: 0;
 transition: all .3s ease;
}
}
h3 { font-size: 22px; color: #333333; }
h4 { font-size: 14px; color: #555555; font-family: 'DINPro-Regular'; margin-top: 10px; }
p { font-size: 15px; line-height: 28px; margin-top: 1.5vw; display: none; }
span { display: block; width: 42px; height: 38px; margin: 1.5vw auto 0; font-size: 12px; color: #b6b6b6; line-height: 30px;  @include backcontain;
background-image: url('../images/icon-6.png'); }
 &.swiper-slide-active {
 .icon {
 &:before {
 opacity: 1;
}
}
 h3 {
 margin-top: 1.5vw;
}
 p {
 display: block;
}
 span {
 color: $color;
}
}
}
.pagination { font-size: 0; text-align: center; margin-top: 2vw;  span {
 @include inline-top;
 width: 12px;
 height: 12px;
 background-color: $color;
 margin: 0 5px;
 transition: all .3s ease;
 cursor: pointer;
 opacity: .3;
 border-radius: 6px;
 &.active {
 width: 24px;
 opacity: 1;
}
}
}
}
.solution-s5 { padding: 5vw 0; background-color: #f6f8fb;  .img-box {
 margin-top: 20px;
 img {
 display: block;
 width: 92%;
 max-width: 1298px;
 margin: 0 auto;
}
}
}
.solution-s6 { padding: 5vw 0; background-position: center bottom; background-repeat: no-repeat; background-image: url('../images/img-7.jpg'); background-size: 100% auto;  background-color: $color;
 .inner-tit:after {
 display: none;
}
p { text-align: center; font-size: 20px; color: #fff; margin-top: 15px; margin-bottom: 2vw; }
a.tel { display: block; width: 220px; font-size: 18px; line-height: 58px;  color: $color;
text-align: center; margin: 0 auto; font-family: 'DINPro-Medium'; background-color: #fff;  &:before {
 content: '';
 width: 24px;
 height: 24px;
 @include backcontain;
 background-image: url('../images/icon-3.png');
 @include inline-middle;
 margin: -2px 10px 0 0;
}
}
}
.solution-s7 { font-size: 0; padding: 6vw 0;  @include backcover;
background-image: url('../images/img-10.jpg');  .txt-box {
 @include inline-middle;
 width: 43.65%;
 padding-right: 3.125vw;
}
h3 { font-size: 40px; color: #fff; letter-spacing: 2px; }
p { font-size: 16px; line-height: 2; color: #fff; margin: 24px 0; }
a.tel { display: block; width: 220px; font-size: 18px; line-height: 58px; color: #fff; text-align: center; font-family: 'DINPro-Medium';  background-color: $color;
 &:before {
 content: '';
 width: 24px;
 height: 24px;
 @include backcontain;
 background-image: url('../images/icon-1.png');
 @include inline-middle;
 margin: -2px 10px 0 0;
}
}
.img-box {
 @include inline-middle; width: 56.35%;  .box {
 position: relative;
 margin-right: -3.125vw;
}
img { display: block; width: 100%; max-width: 860px; }
.ani { position: absolute; top: 0; left: 0; animation: p-ani-5 2s linear infinite; }
.ani2 { animation-delay: 1s; }
}
}
.solution-s8 { padding: 5vw 0; background-color: #f5f6fa;  &.nobg {
 background-color: #fff;
}
.items { margin-top: 2.5vw; padding: 3vw 0; background-color: #fff; box-shadow: 0 0 2.5vw rgba(0,0,0,.1); display: flex; }
.item { width: 25%; padding: 2vw 3vw; text-align: center; border-left: 1px solid #e6e6e6;  &:nth-of-type(1) {
 border-top: none;
}
 &:before {
 content: '';
 width: 73px;
 height: 73px;
 display: block;
 margin: 0 auto;
 @include backcontain;
}
 @for $i from 1 through 4 {
 &:nth-of-type(# {
$i
}
) {
 &:before {
 background-image: url('../images/icon-9-#{$i}.png');
}
}
}
h3 { font-size: 24px; color: #222; margin: 20px 0 15px; }
p { font-size: 15px; line-height: 26px; color: #808080; }
}
}
.solution-s9 { padding: 5vw 0; background-color: #20252d; background-position: center bottom; background-repeat: no-repeat; background-image: url('../images/img-8.jpg'); background-size: 100% auto;  .para {
 font-size: 16px;
 line-height: 2;
 color: #fff;
 max-width: 1140px;
 margin: 2vw auto 0;
 text-align: center;
}
.img-box { margin-top: 5vw;  img {
 display: block;
 width: 100%;
}
}
}
.solution-s10 { padding: 5vw 0;  &.bg {
 background-color: #f6f8fb;
}
.cont { margin-top: 3.5vw; font-size: 0; }
.img-box {
 @include inline-middle; width: 50%; max-width: 686px;  img {
 display: block;
 width: 100%;
}
}
.txt-box {
 @include inline-middle; width: 50%; padding-left: 4vw; }
.para { font-size: 18px; line-height: 2; color: #30313a; }
.info { padding-top: 20px;  p {
 background-position: left 10px;
 background-repeat: no-repeat;
 background-image: url('../images/icon-10.png');
 font-size: 16px;
 line-height: 2;
 color: #5e656e;
 padding-left: 30px;
}
}
}
.solution-s11 { padding: 5vw 0;  .cont {
 margin-top: 3.5vw;
 font-size: 0;
}
.img-box {
 @include inline-middle; width: 50%; max-width: 686px; position: relative;  img {
 display: block;
 width: 100%;
}
.ani { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.box { position: absolute; top: 0; left: 0; right: 0; bottom: 0;  img {
 transition: all .3s ease;
 &.hide {
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
}
}
 &.active {
 img {
 &.show {
 opacity: 0;
}
 &.hide {
 opacity: 1;
}
}
}
}
}
.txt-box {
 @include inline-middle; width: 50%; padding-right: 4vw; }
.para { font-size: 18px; line-height: 2; color: #30313a; }
.info { padding-top: 10px;  p {
 background-position: left 10px;
 background-repeat: no-repeat;
 background-image: url('../images/icon-10.png');
 font-size: 16px;
 line-height: 2;
 color: #5e656e;
 padding-left: 30px;
 font-weight: bold;
}
}
}
.solution-s12 { padding: 5vw 0; }
.solution-s13 { padding: 5vw 0; font-size: 0; background-color: #30313a; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; background-image: url('../images/img-20.png');  .left-box {
 @include inline-middle;
 width: 50%;
 img {
 display: block;
 width: 100%;
}
}
.right-box {
 @include inline-middle; width: 50%; padding-left: 6vw; }
.para { font-size: 16px; line-height: 2; color: #fff; margin-top: 30px; }
}
.solution-s14 { padding: 5vw 0; background-color: #f5f6fa;  .cont {
 margin-top: 3vw;
 font-size: 0;
}
.img-box {
 @include inline-top; width: 65%; max-width: 914px;  img {
 display: block;
 width: 100%;
}
}
.txt-box {
 @include inline-top; width: 35%; padding-top: 6.5vw; }
.box { margin-top: 20px; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 10px 30px rgba(0,0,0,.05);  &:nth-of-type(1) {
 margin-top: 0;
}
h3 { font-size: 20px; color: #30313a; }
p { font-size: 16px; color: #666666; margin-top: 10px; }
}
}
.solution-s15 { font-size: 0; padding: 6vw 0;  @include backcover;
background-image: url('../images/img-22.jpg');  .txt-box {
 @include inline-middle;
 width: 41.3%;
 padding-right: 3.125vw;
}
h3 { font-size: 40px; color: #fff; letter-spacing: 2px; }
p { font-size: 16px; line-height: 2; color: #fff; margin: 24px 0; }
a.tel { display: block; width: 220px; font-size: 18px; line-height: 58px; color: #fff; text-align: center; font-family: 'DINPro-Medium';  background-color: $color;
 &:before {
 content: '';
 width: 24px;
 height: 24px;
 @include backcontain;
 background-image: url('../images/icon-1.png');
 @include inline-middle;
 margin: -2px 10px 0 0;
}
}
.img-box {
 @include inline-middle; width: 58.7%;  .box {
 position: relative;
 margin-right: -3.125vw;
}
img { display: block; width: 100%; max-width: 860px; }
.ani { position: absolute; top: 0; left: 0; animation: p-ani-5 2s linear infinite; }
.ani2 { animation-delay: .6s; }
.ani3 { animation-delay: 1.2s; }
}
}
.solution-s16 { padding: 5vw 0;  &.bg {
 background-color: #f6f8fb;
}
.items { margin-top: 2.5vw; }
.item {  .img-box {
 overflow: hidden;
}
img { display: block; width: 100%; transition: transform .6s ease; }
.txt-box { margin-top: 1.5vw; }
h3 { font-size: 24px; color: #333; }
p { font-size: 14px; line-height: 2; color: #333; margin-top: 15px; }
}
.pagination { font-size: 0; text-align: center; margin-top: 2vw;  span {
 @include inline-top;
 width: 12px;
 height: 12px;
 background-color: $color;
 margin: 0 5px;
 transition: all .3s ease;
 cursor: pointer;
 opacity: .3;
 border-radius: 6px;
 &.active {
 width: 24px;
 opacity: 1;
}
}
}
}
.solution-s17 { padding: 5vw 0; font-size: 0; background-color: #30313a; background-position: center bottom; background-repeat: no-repeat; background-size: 100% auto; background-image: url('../images/img-20.png');  .cont {
 margin-top: 3.5vw;
}
.img-box {
 @include inline-middle; width: 50%;  img {
 display: block;
 width: 100%;
}
}
.txt-box {
 @include inline-middle; width: 50%; padding-left: 4vw; }
.para { font-size: 16px; line-height: 2; color: #fff; }
}
.solution-s18 { padding: 5vw 0; font-size: 0; background-color: #fff;  .cont {
 margin-top: 3.5vw;
}
.txt-box {
 @include inline-middle; width: 50%; padding-right: 4vw; }
.para { font-size: 16px; line-height: 2; color: #30313a; }
.img-box {
 @include inline-middle; width: 50%;  img {
 display: block;
 width: 100%;
}
}
}
/* other */
.search-s2 { position: relative; background-color: #fff; padding: 4.5vw 0 6vw;  .cont {
 max-width: 1200px;
 margin: 0 auto;
}
.tip { font-size: 18px; color: #333;  b {
 color: $color;
}
}
.nocont { margin-top: 20px; }
.items { margin-bottom: 2vw; }
.item { border-bottom: 8px solid #f5f5f5;  @include transition(all .3s ease);
 a {
 display: block;
 padding: 3.125vw 0;
}
.date { font-size: 14px;  color: $color;
font-style: italic; }
h3 { font-size: 20px; color: #333333;  @include text-hidden;
margin-top: 20px; }
.url { font-size: 16px; line-height: 24px; color: #808080;  @include text-hidden;
margin-top: 15px; }
span { display: inline-block; font-size: 16px;  color: $color;
margin-top: 20px; }
 @media screen and (min-width: 1025px) {
 &:hover {
 border-color: $color;
}
}
}
}
.sitemap-s1 { padding: 4.5vw 0 6vw; position: relative; background-color: #fff;  .cont {
 max-width: 1200px;
 margin: 0 auto;
}
.item { padding: 2vw 0; border-bottom: 1px solid #e6e6e6; font-size: 0; }
a.btn {
 @include inline_top; width: calc((100% - 5vw) / 5); line-height: 60px; font-size: 16px; text-align: center;  @include transition(color .3s ease, background .3s ease);
}
h3 {  a.btn {
 display: block;
 background-color: $color;
 color: #fff;
}
}
.link { margin-top: 1.25vw;  a.btn {
 background-color: #e6e6e6;
 margin-right: 1.25vw;
 margin-top: 1.25vw;
 color: #666;
 &:nth-of-type(5n) {
 margin-right: 0;
}
 &:hover {
 background-color: $color;
 color: #fff;
}
}
}
}