
img { display: block; width: 100%; }
.whitecover { position: absolute; top: 100%; left: 0; z-index: 1; width: 100%; height: 100%; background: #fff; }
.redbg { position: absolute; top: 0; left: 0; z-index: 2; overflow: hidden; width: 0; height: 100%; background-color: #d82a49; color: #fff; white-space: nowrap; font-weight: 700; line-height: 1; }
.line1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -o-text-overflow: ellipsis; }
.line2 { display: -webkit-box; overflow: hidden; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; -o-text-overflow: -o-ellipsis-lastline; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; }
.line3 { display: -webkit-box; overflow: hidden; text-overflow: -o-ellipsis-lastline; text-overflow: ellipsis; -o-text-overflow: -o-ellipsis-lastline; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; }
.ai-top { position: relative; display: none; overflow: hidden; }
.p1 { position: relative; overflow: hidden; color: #272727; }
.p1 h1 { margin-left: 50px; font-weight: 700; font-size: 250px; -webkit-animation: moveup .5s ease-out 0s 1 forwards; -moz-animation: moveup .5s ease-out 0s 1 forwards; -o-animation: moveup .5s ease-out 0s 1 forwards; animation: moveup .5s ease-out 0s 1 forwards; }
.p2p13 { overflow: hidden; }
.p2 { position: relative; float: left; overflow: hidden; margin-right: 310px; margin-left: 40px; color: #272727; font-size: 72px; }
.p2 h2 { letter-spacing: 6px; font-weight: 300; font-size: 72px; line-height: 1; -webkit-transform: translateY(10rem); -moz-transform: translateY(10rem); -o-transform: translateY(10rem); transform: translateY(10rem); -webkit-animation: moveup .5s ease-out .35s 1 forwards; -moz-animation: moveup .5s ease-out .35s 1 forwards; -o-animation: moveup .5s ease-out .35s 1 forwards; animation: moveup .5s ease-out .35s 1 forwards; -ms-transform: translateY(10rem); }
.p3 { position: relative; z-index: 5; float: left; padding: 19px 20px; font-size: 58px; }
.p3 h3 { color: #d82a49; font-weight: 700; font-size: 58px; line-height: 1; -webkit-transform: translateY(10rem); -moz-transform: translateY(10rem); -o-transform: translateY(10rem); transform: translateY(10rem); -webkit-animation: moveup .4s ease-out .1s 1 forwards; -moz-animation: moveup .4s ease-out .1s 1 forwards; -o-animation: moveup .4s ease-out .1s 1 forwards; animation: moveup .4s ease-out .1s 1 forwards; -ms-transform: translateY(10rem); }
.p3 .redbg { -webkit-animation: moveright .6s ease-out 1.1s 1 forwards; -moz-animation: moveright .6s ease-out 1.1s 1 forwards; -o-animation: moveright .6s ease-out 1.1s 1 forwards; animation: moveright .6s ease-out 1.1s 1 forwards; }
.p3 .redbg span { position: absolute; top: 14px; left: 20px; font-size: 58px; line-height: 1; }
.p4 { position: absolute; z-index: 5; padding: 10px 50px 20px 100px; }
.p4 h4 { color: #d82a49; font-weight: 700; line-height: 1; -webkit-transform: translateY(10rem); -moz-transform: translateY(10rem); -o-transform: translateY(10rem); transform: translateY(10rem); -webkit-animation: moveup .5s ease-out .2s 1 forwards; -moz-animation: moveup .5s ease-out .2s 1 forwards; -o-animation: moveup .5s ease-out .2s 1 forwards; animation: moveup .5s ease-out .2s 1 forwards; -ms-transform: translateY(10rem); }
.p4 .redbg { -webkit-animation: moveright .6s ease-out 1.5s 1 forwards; -moz-animation: moveright .6s ease-out 1.5s 1 forwards; -o-animation: moveright .6s ease-out 1.5s 1 forwards; animation: moveright .6s ease-out 1.5s 1 forwards; }
.p4 .redbg span { position: absolute; top: 10px; left: 100px; }
.p5 { z-index: 5; display: inline-block; padding: 19px 20px; background-color: #d82a49; color: #fff; font-size: 58px; line-height: 1; }
.p5 h3 { color: #d82a49; font-weight: 700; line-height: 1; -webkit-transform: translateY(10rem); -moz-transform: translateY(10rem); -o-transform: translateY(10rem); transform: translateY(10rem); -webkit-animation: moveup .4s ease-out .1s 1 forwards; -moz-animation: moveup .4s ease-out .1s 1 forwards; -o-animation: moveup .4s ease-out .1s 1 forwards; animation: moveup .4s ease-out .1s 1 forwards; -ms-transform: translateY(10rem); }
.p5 .redbg { -webkit-animation: moveright .6s ease-out 1.1s 1 forwards; -moz-animation: moveright .6s ease-out 1.1s 1 forwards; -o-animation: moveright .6s ease-out 1.1s 1 forwards; animation: moveright .6s ease-out 1.1s 1 forwards; }
.p5 .redbg span { position: absolute; top: 10px; left: 10px; }

@-webkit-keyframes moveup {
    from { -webkit-transform: translateY(10rem); }
    to { -webkit-transform: translateY(0); }
}

@-moz-keyframes moveup {
    from { -moz-transform: translateY(10rem); transform: translateY(10rem); }
    to { -moz-transform: translateY(0); transform: translateY(0); }
}

@-o-keyframes moveup {
    from { -o-transform: translateY(10rem); transform: translateY(10rem); }
    to { -o-transform: translateY(0); transform: translateY(0); }
}

@keyframes moveup {
    from { -webkit-transform: translateY(10rem); -moz-transform: translateY(10rem); -o-transform: translateY(10rem); transform: translateY(10rem); }
    to { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); }
}

@-webkit-keyframes moveright {
    from { width: 0; }
    to { width: 100%; }
}

@-moz-keyframes moveright {
    from { width: 0; }
    to { width: 100%; }
}

@-o-keyframes moveright {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes moveright {
    from { width: 0; }
    to { width: 100%; }
}

@-webkit-keyframes movein_pc {
    from { -webkit-transform: translateX(-10rem); }
    to { -webkit-transform: translateX(0); }
}

@-moz-keyframes movein_pc {
    from { -moz-transform: translateX(-10rem); transform: translateX(-10rem); }
    to { -moz-transform: translateX(0); transform: translateX(0); }
}

@-o-keyframes movein_pc {
    from { -o-transform: translateX(-10rem); transform: translateX(-10rem); }
    to { -o-transform: translateX(0); transform: translateX(0); }
}

@keyframes movein_pc {
    from { -webkit-transform: translateX(-10rem); -moz-transform: translateX(-10rem); -o-transform: translateX(-10rem); transform: translateX(-10rem); }
    to { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}

@-webkit-keyframes movein_mob {
    from { -webkit-transform: translateX(10rem); }
    to { -webkit-transform: translateX(0); }
}

@-moz-keyframes movein_mob {
    from { -moz-transform: translateX(10rem); transform: translateX(10rem); }
    to { -moz-transform: translateX(0); transform: translateX(0); }
}

@-o-keyframes movein_mob {
    from { -o-transform: translateX(10rem); transform: translateX(10rem); }
    to { -o-transform: translateX(0); transform: translateX(0); }
}

@keyframes movein_mob {
    from { -webkit-transform: translateX(10rem); -moz-transform: translateX(10rem); -o-transform: translateX(10rem); transform: translateX(10rem); }
    to { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}


.ai-content { display: none; margin-top: -10px; /* -moz-transform:translateY(10rem); 
  -webkit-transform:translateY(10rem);
  -o-transform:translateY(10rem);
  -ms-transform:translateY(10rem);
  transform:translateY(10rem); */ -webkit-animation: moveup 0.5s ease-out 0s 1 forwards; -moz-animation: moveup 0.5s ease-out 0s 1 forwards; -o-animation: moveup 0.5s ease-out 0s 1 forwards; animation: moveup 0.5s ease-out 0s 1 forwards; }
.ai-subnav { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; margin: 0 auto; width: calc(100% - 6.25%); border-bottom: #000 solid 1px; }
.ai-subnav li { margin-right: 4%; font-size: 22px; }
.ai-subnav li a { display: block; padding: 0 0 20px; color: #000; text-decoration: none; font-family: ArchivoMedium; }
.ai-subnav li.on a { color: #d82a49; }

.ai-list { margin: 0 auto; width: calc(100% - 6.25%); color: #000; }
.ai-list-single { display: none; }
.ai-list-single.on { display: block; }
.ai-list-single.industry { display: block; }
.ai-list-single .box-ai { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 2.5rem 0; border-bottom: #000 solid 1px; }
.ai-list-single .box-ai:last-child { border-bottom: 0; }
.ai-list-single .box-ai .infomation { width: -webkit-calc(33.3333% - ( 0.66666666666667 * 30px ) ); width: -moz-calc(33.3333% - ( 0.66666666666667 * 30px ) ); width: calc(33.3333% - ( 0.66666666666667 * 30px ) ); /* -moz-animation: movein_pc 0.25s ease-out 0s 1 forwards;
  -webkit-animation: movein_pc 0.25s ease-out 0s 1 forwards;
  -o-animation: movein_pc 0.25s ease-out 0s 1 forwards;
  -ms-animation: movein_pc 0.25s ease-out 0s 1 forwards;
  animation: movein_pc 0.25s ease-out 0s 1 forwards; */ }
.ai-list-single .box-ai .cases { width: -webkit-calc(66.6666% - ( 0.66666666666667 * 30px ) ); width: -moz-calc(66.6666% - ( 0.66666666666667 * 30px ) ); width: calc(66.6666% - ( 0.66666666666667 * 30px ) ); }
.ai-list-single .box-ai .cases .box-wrap { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.ai-list-single .box-ai .cases .case { width: -webkit-calc(50% - ( 0.5 * 30px ) ); width: -moz-calc(50% - ( 0.5 * 30px ) ); width: calc(50% - ( 0.5 * 30px ) ); }
.box.case { cursor: pointer }
.ai-list-single .box-ai .cases .box .pic img { }
.ai-list-single .box-ai .box i { display: block; margin-bottom: 2rem; font-style: normal; font-size: 22px; }
.ai-list-single .box-ai .box .infoes { height: 25.4rem; cursor: pointer; }
.ai-list-single .box-ai .box .infomation-title { margin-bottom: 2rem; padding: .15rem 0; font-family: ArchivoMedium; font-size: 3.9rem; line-height: 1; }
.ai-list-single .box-ai .box .infomation-title span {margin-right: 2.5rem;font-size: 2rem;display: none;}
.ai-list-single .box-ai .box .infomation-text { margin-bottom: 2rem; font-weight: 300; font-size: 24px; }
.ai-list-single .box-ai .box .infomation-btn { overflow: hidden; width: 18rem; }
/* .ai-list-all { display: none; } */
.ai-list-all.on { display: block; }
.ai-list-all .box-allAi { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; padding: 2.5rem 0; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
.ai-list-all .box-allAi .selects { width: -webkit-calc(33.3333% - (.66666666666667 * 30px)); width: -moz-calc(33.3333% - (.66666666666667 * 30px)); width: calc(33.3333% - (.66666666666667 * 30px)); }
.ai-list-all .box-allAi .selects .box-select { margin-bottom: 4rem; }
.ai-list-all .box-allAi .selects .box-select h3 { margin-bottom: 2rem; width: 100%; text-align: left; font-family: ArchivoMedium; font-size:3.9rem; line-height: 1; }
.ai-list-all .box-allAi .selects .box-select li { margin-bottom: 2rem; font-size: 22px; }
.ai-list-all .box-allAi .selects .box-select li a { color: #000; text-decoration: none; }
.ai-list-all .box-allAi .selects .box-select li a em { display: inline-block; margin-right: 1rem; width: 20px; height: 20px; border: #000 solid 1px; border-radius: 10px; background-color: #fff; vertical-align: middle; }
.ai-list-all .box-allAi .selects .box-select li.on a em { border: #d82a49 solid 1px; background-color: #d82a49; }
.ai-list-all .box-allAi .lists { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: flex-start; }
.ai-list-all .box-allAi .lists .box { position: relative; margin-bottom: 2.5rem; padding: 2.5rem 0 0; width: 32%; margin-right: 2%; }
.ai-list-all .box-allAi .lists .box:nth-child(3n+1)::after { position: absolute; top: 0; left: 0; width: 311%; height: 1px; background-color: #000; content: ""; }
.ai-list-all .box-allAi .lists .box:first-child { padding: 0; }
.ai-list-all .box-allAi .lists .box:nth-child(2) { padding: 0; }
.ai-list-all .box-allAi .lists .box:nth-child(3) { padding: 0; }
.ai-list-all .box-allAi .lists .box:nth-child(3n) { margin-right: 0; }
.ai-list-all .box-allAi .lists .box:first-child::after { width: 0; height: 0; }
.ai-list-all .box-allAi .lists .box .pic { }
.ai-list-single .box-ai .cases .box .pic { }

.box .pic { position: relative; overflow: hidden; width: 100%; cursor: none; }
.box .pic::after { position: absolute; top: 50%; left: 50%; margin-top: -26px; margin-left: -17px; width: 34px; height: 52px; background-color: #d82a49; color: #fff; content: "+"; text-align: center; font-size: 2rem; line-height: 52px; opacity: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; pointer-events: none; }
.box .pic:hover::after { opacity: 0; }
.box .pic img { -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); /* height: 350px; */ /* object-fit: cover;         */ }
.box .pic img:hover { /* -webkit-transform:scale(1.1);
     -moz-transform:scale(1.1);
      -ms-transform:scale(1.1);
       -o-transform:scale(1.1);
          transform:scale(1.1); */ }
.ai-list-all .box-allAi .lists .box .case-title { margin: 22px auto; height: 40px; }
.ai-list-single .box-ai .box .case-title {  margin: 22px auto; height: 40px; }


.more { cursor: pointer; }
.move_pc { -webkit-animation: movein_pc .25s ease-out 0s 1 forwards; -moz-animation: movein_pc .25s ease-out 0s 1 forwards; -o-animation: movein_pc .25s ease-out 0s 1 forwards; animation: movein_pc .25s ease-out 0s 1 forwards; }
.move_mob { -webkit-animation: movein_mob .25s ease-out 0s 1 forwards; -moz-animation: movein_mob .25s ease-out 0s 1 forwards; -o-animation: movein_mob .25s ease-out 0s 1 forwards; animation: movein_mob .25s ease-out 0s 1 forwards; }

.all-ai {position: relative; display: block; padding: 0 8px; width: 224px; height: 47px; border: 1px solid #eb0045; color: #eb0045; font-size: 20px; line-height: 47px; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.all-ai:hover { background-color: #eb0045; color: #fff; }
.all-ai:after { position: absolute; top: -67%; right: 20%; width: 15%; height: 231%; border-right: 1px solid #eb0045; border-left: 1px solid #eb0045; background-color: #fff; content: ''; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -ms-transform: rotate(45deg); }


@media screen and (max-width: 1609px) and (min-width: 992px) {
    .ai-list-all .box-allAi .lists .box .pic img { }
}

@media screen and (min-width: 1609px) {
    .ai-list-all .box-allAi .lists .box .pic img { }
}

@media screen and (max-width: 991px) {
    html { font-size: 10px; }
    .p3 { padding: .5rem 5rem .5rem .5rem; }
    .p4 { padding: .5rem 1rem .5rem 5rem; }
    .p3 .redbg span { top: .5rem; left: .5rem; }
    .p4 .redbg span { top: .5rem; left: 5rem; }
    .container { width: 100%; }
    .navbox { background: #fff; }

    .ai-subnav { margin: 0 7.33%; width: auto; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
    .ai-subnav li { margin-right: 0; font-size: 1.5rem; }
    .ai-subnav li a { padding: 1rem 0; }
    .ai-list { margin: 0 0 0 7.33%; width: 92.8%; overflow-x: hidden;}
    .ai-list-single .box-ai { display: block; }
    .ai-list-single .box-ai .box .infoes { height: auto; }
    .ai-list-single .box-ai .box.infomation { margin-bottom: 2rem; width: 92.466%; }
    .ai-list-single .box-ai .box i{display: none;}
    .ai-list-single .box-ai .box .infomation-title span {margin-right: 2.5rem;display: block;float: left;}
    .ai-list-single .box-ai .cases { overflow-x: scroll; overflow-y: hidden; width: 100%; }
    .ai-list-all { width: 92.8%; }
    .ai-list-all .box-allAi { display: block; }
    .ai-list-all .box-allAi .selects { width: 100%; }
    .ai-list-all .box-allAi .selects .box-select { padding: 1rem 0 0 0; }
    .ai-list-all .box-allAi .lists { display: block; width: 100%; }
    .ai-list-all .box-allAi .lists .box { width: 100%; }
    /* .ai-list-all .box-allAi .lists .box:nth-child(odd)::after { width: 100%; height: 1px; } */
    /* .ai-list-all .box-allAi .lists .box:first-child { padding: 2.5rem 0 0; } */
    .box .pic img:hover { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); -ms-transform: scale(1); }
    .box .pic::after { display: none; }
    .ai-list-all .box-allAi .selects .box-select li { font-size: 1.6rem; }
    .ai-list-all .box-allAi .selects .box-select h3 { font-size: 3.5rem; }
    ::-webkit-scrollbar { display: none; }

    .ai-list-single .box-ai .box .case-title, .ai-list-all .box-allAi .lists .box .case-title { font-size:20px; line-height: 28px; height: 30px; margin: 15px auto 10px; }
    .ai-list-single .box-ai .box .case-text, .ai-list-all .box-allAi .lists .box .case-text, .ai-list-single .box-ai .box .infomation-text { overflow: hidden; margin-top: 5px; height: auto; font-size: 14px; line-height: 18px; }
    .ai-list-single .box-ai .box .infomation-title, .ai-list-all .box-allAi .selects .box-select h3 { font-size: 23px; margin-bottom: 15px; }
}



@media (min-width:1920px) {
    .p3 h3 { font-size: 36px; }
    .p3 .redbg span { top: 18px; font-size: 36px; }
}

@media (max-width:1920px) {
    .p1 h1 { font-size: 25.5rem; }
}

@media screen and (max-width:1600px) {
    /* .ai-list-single .box-ai .box .infomation-title{font-size: 60px;} */
}

@media screen and (max-width:1440px) {
    .ai-list-all .box-allAi { padding: 35px 0 0 0; }
}

@media (max-width:1366px) {
    .p2 { margin-right: 225px; }
    .ai-list-all .box-allAi { padding: 32px 0 0 0; }
    /* .ai-list-single .box-ai .box .infomation-title{font-size: 50px;} */
    .ai-list-single .box-ai .box .infoes{height: 18.4rem;}
}

@media screen and (max-width:1024px) {
    .p1 h1 { font-size: 13.5rem; }
    .p3 .redbg span { font-size: 13.5rem; }
    .p3 h3 { font-size: 30px; }
    .p3 .redbg span { top: 19px; font-size: 2.5rem; }
    .ai-top .ai_title_en { font-size: 152px; }
}

@media (max-width: 992px) {
    .p2 { margin-right: 10px; }
    .p3 .redbg span { top: 8px; }
    .p3 { top: -30px; }
}

@media (max-width: 767px) {
    .box .pic img { max-width: 100%; /* height: 212px;*/ }
    .ai-list-all .box-allAi .lists .box .pic { }
    .ai-list-all .box-allAi .lists .box .pic img { }

    .all-ai { border: 1px solid #fff; color: #fff; background-color: #eb0045; overflow: hidden; font-size: 14px; width: 160px; height: 30px; line-height: 30px; }
    .all-ai:after { border-right: 1px solid #eb0045; border-left: 1px solid #eb0045; }
}
