﻿.ai_banner img{width: 100%;}
.ph_box{display: none;}
.wrap_1440{width: 1440rem;margin:auto;max-width: 90%;}
@media only screen and (max-width:1024px) {
    .wrap_1440{max-width: 94%;}
}
.m_color2 .mCSB_scrollTools .mCSB_draggerRail{ width:1px !important; background: #b9c0c8 !important;}
.m_color2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width:5px !important;-webkit-border-radius:0;border-radius:0;background: #59A1FF !important;
    background: linear-gradient(180deg,rgba(89, 161, 255, 1) 0%, rgba(0, 95, 196, 1) 100%) !important;}
.m_color2 .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar,.m_color2 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,.m_color2 .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag:hover .mCSB_dragger_bar{ background: #59A1FF !important;
    background: linear-gradient(180deg,rgba(89, 161, 255, 1) 0%, rgba(0, 95, 196, 1) 100%) !important;}

@media only screen and (max-width:767px) {
.ph_box{display: block;}
.pc_box{display: none;}
}

*{box-sizing: border-box;}
.mainbox{font-size: 16rem;}
.fnt_14{font-size: 14rem;}
.fnt_16{font-size: 16rem;}
.fnt_18{font-size: 18rem;}
.fnt_24{font-size: 24rem;}
.fnt_30{font-size: 30rem;}
.fnt_40{font-size: 40rem;}
@media only screen and (max-width:1599px) {
.fnt_14{font-size: 16rem;}
.fnt_16{font-size: 18rem;}
}
@media only screen and (max-width:1279px) {
.fnt_14{font-size: 16rem;}
.fnt_16{font-size: 20rem;}
.fnt_18{font-size: 22rem;}
}
@media only screen and (max-width:1024px) {
.fnt_16 { font-size: 16rem;}
.fnt_18 { font-size: 16rem;}
.fnt_24 { font-size:18rem;}
.fnt_30 { font-size:22rem;}
.fnt_40 { font-size:24rem;}
}
    
@media only screen and (max-width:767px) {
.fnt_14 { font-size: 14px;}
.fnt_16 { font-size: 14px;}
.fnt_18 { font-size:15px;}
.fnt_24 { font-size:18px;}
.fnt_30 { font-size:20px;}
.fnt_40 { font-size:22px;}
}
/* fontsize */

.ai_bg01{background-image: url(../images/ai/ai_bg_01.jpg);    background-position: top center;}
.ai_01,.ai_box02{margin-bottom: 90rem; position: relative;box-shadow: 0 0 10px 2px rgba(0, 15, 79, 0.05);border-radius: 10rem;overflow: hidden;border: 1rem solid #fff;}
.ai_title{text-align: center; margin-bottom: 30rem;}
.ai_title h3{line-height: 1em;}
.ai_title i{display: block;width: 80rem;height: 1rem;background: #c30020; margin: auto;margin-top: 30rem;}
.ai_more{padding-top: 40rem;}
.ai_more a{display: inline-block;width: 172rem;height: 50rem;line-height: 50rem;background: #c30020; color: #fff; border-radius: 30rem; padding-left: 44rem;    position: relative;}
.ai_more a i{left: auto;right: 25rem;width: 16rem;height: 16rem;border: 1rem solid #fff; border-radius: 50%;transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;}
.ai_more a b{width: 2rem;height: 2rem;background: #fff;border-radius: 50%;}

.ai_01{margin-top: -70rem;z-index: 9; }
.ai_01>img{width: 100%;}
.ai_01 .ai_title{text-align: left;}
.ai_01 .ai_title i{margin-left: 0;}
.ai_plan{position: absolute;top:0;left: 0;width: 100%;height: 100%; padding: 80rem 75rem;width: 57%;}
.ai_plan_p{line-height: 1.8em; height: 16.2em;overflow: hidden;}

.ai_box02{background-image: url(../images/ai/a_03.jpg);    background-position: top center;overflow: hidden; height: 778rem;}
.ai_box02 .left,.ai_box02 .right{height: 100%;}
.ai_box02 .left{float: left;width: 31.8%; background: url(../images/ai/a_02.jpg) no-repeat ;background-size: cover; padding: 70rem 30rem;}
.ai_box02 .left li{margin-bottom: 40rem; cursor: pointer;}
.ai_box02 .left li dt{position: relative;padding: 5rem 0;}
.ai_box02 .left dt::after{content: "";position: absolute;left: -30rem; top:0;width: 5rem;height: 0;    background: #c30020;transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;}
.ai_box02 .left li:last-child{margin-bottom: 0;}
.ai_box02 .right{float: right;width: 68.2%; padding: 70rem 80rem;    padding-right: 130rem;}
.ai_box02 .right ul,.ai_box02 .right li{height: 100%;}
.ai_box02 .right h3{line-height: 1.2em; margin-bottom: 40rem;}
.ai_box02 .left h3{position: relative; padding-left: 35rem; line-height: 24rem;transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;}
.ai_box02 .left h3 span{font-weight: bold;position: absolute; left: 0;top:0; width: 24rem;height: 24rem; background: #5788ec; border-radius: 50%; border: 1rem solid #fff;color: #fff;}
.ai_box02 .left li.on h3{font-weight: bold;}
.ai_box02 .left li.on dt::after{height: 100%;}

.ai_box02 .right li{overflow: hidden; display: none;}
.ai_box02 .right li.on{display: block;}
.ai_teach_iteam{margin-bottom: 30rem;}
.ai_teach_iteam:last-child{margin-bottom: 0;}
.ai_teach_iteam h4{line-height: 1.6em;margin-bottom: 10rem;}
.ai_teach_p p{line-height: 1.8em;margin-bottom: 10rem;}
.ai_teach_p p:last-child{margin-bottom: 0;}
.ai_box02 .mCSB_scrollTools .mCSB_dragger{height: 350rem;}
.ai_box02 .mCSB_outside+.mCSB_scrollTools{right: -80rem;}

.ai_box02 .left ul,.ai_box02 .right ul{ display:block;}
.ai_box02 .left ul li{ height: auto;}

.ai_03{padding: 105rem 0 90rem 0;    background-image: url(../images/ai/ai_bg_02.jpg);background-position: top center;}
.ai_03 .ai_title{color: #fff;}
.ai_03 .ai_title i{background: #fff;}

.ai_way li{margin-bottom: 20rem;background: #fff url(../images/ai/a_04.jpg) no-repeat 0 0; background-size: cover; padding: 60rem;padding-top: 40rem; border-radius: 10rem;border: 1rem solid #fff;}
.ai_way dl{overflow: hidden;}
.ai_way dt{overflow: hidden;line-height: 50rem;margin-bottom: 20rem;}
.ai_way dt img{width: 50rem;float: left;}
.ai_way dt h3{width: calc(100% - 90rem);float: right;}
.ai_way dd{padding-left: 90rem;}
.ai_p01{line-height: 1.8em;}
.ai_p01 p{margin-bottom: 20rem;}
.ai_p01 p:last-child{margin-bottom: 0;}

.ai_p02{position: relative;padding-top: 6rem;}
.ai_p02::after{content: "";position: absolute;left: 96rem;top:0;height: 100%;width: 3rem;background: rgba(188, 208, 254, 0.65);}
.ai_process{overflow: hidden;margin-bottom: 30rem;}
.ai_process:last-child{margin-bottom: 0;}
.ai_process span,.ai_process p{line-height: 1.8em;float: left;}
.ai_process span{width: 130rem; position: relative;}
.ai_process span i{width:18rem ;height: 18rem; border-radius: 50%; position: absolute;top:6rem;left: 88rem;background: rgba(188, 208, 254, 0.65);z-index: 9;}
.ai_process span i::after{background: #2d76fc; width: 9rem;height: 9rem;border-radius: 50%; content: "";transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%); position:absolute; left:50%; top:50%;}
.ai_process p{float: right;width: calc(100% - 130rem);}

.ai_bg02{padding: 95rem 0 105rem 0;    background: url(../images/ai/ai_bg_03.jpg) no-repeat 0 0;background-size: cover;}
.ai_04{margin-bottom: 70rem;}

.ai_down{padding-bottom: 50rem;padding-top: 25rem;}
.ai_down ul{overflow: hidden;margin:0 -15rem;}
.ai_down li{float: left;width: 50%; margin-bottom: 20rem;}
.ai_down li a{      overflow: hidden;  box-shadow: 0 0 10px 2px rgba(0, 15, 79, 0.05); line-height: 40rem; display: block;margin:0 15rem;background: #F1F4FF; padding: 45rem 40rem;padding-right: 45rem; border-radius: 10rem;
    background: linear-gradient(90deg,rgba(241, 244, 255, 1) 0%, rgba(255, 255, 255, 1) 100%); border: 1rem solid #fff;}
.ai_down li a>img{width: 39rem;height: 39rem;float: left;margin-right: 30rem;}
.ai_down li a>i{width: 24rem;float: right;}
.ai_down li a>i img{width: 100%;    vertical-align: middle;}
.ai_down li a>span{width: calc(100% - 110rem);white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float: left;}

.ai_act{ background-image: url(../images/ai/a_05.jpg); padding: 60rem; border-radius: 10rem;color: #fff;text-align: center;    border: 1rem solid #fff;}
.ai_act .ai_more a{text-align: left;}

.ai_about{padding: 60rem 45rem; padding-right: 65rem;background: #fff;border-radius: 10rem;}
.ai_about dl{display: flex; flex-wrap: wrap;}
.ai_about dt,.ai_about dd{height: 100%;}
.ai_about dt{width: 31%; padding-right: 35rem;padding-top: 15rem;}
.ai_about dt img{width: 100%;}
.ai_about dd{width: 69%;padding-left: 45rem;border-left: 1rem solid #b8b8b8;}
.ai_about dd p{line-height: 1.8em;}
@media only screen and (max-width:1024px) {
    .ai_bg01{padding-top: 50rem;}
    .ai_plan{padding: 30rem;}
    .ai_title i{margin-top: 20rem;}
    .ai_more{padding-top: 20rem;}
    .ai_plan_p{height: 12.6em;}
    .ai_01{margin-top: 0;}

    .ai_box02 .right{padding: 30rem;}
    .ai_box02 .mCSB_outside+.mCSB_scrollTools{right: -20rem;}
    .ai_box02 .left{padding: 30rem;}
    .ai_box02 .left li{margin-bottom: 20rem;}
    .ai_way li{padding: 40rem;}
    .ai_down li a{padding: 30rem;}
}

@media only screen and (max-width:767px) {
    .ai_title i{height: 1px;width: 50px;}
    .ai_bg01 .wrap_1440{width: 100%;max-width: 100%;}
    .ai_01, .ai_box02{border: 0; border-radius: 0;box-shadow:none}
    .ai_bg01{padding-top: 0;}
    .mCSB_outside+.mCSB_scrollTools{right: -6px;}
    .ai_plan{width: 100%;padding: 55rem;}
    .ai_01 .ai_title{text-align: center;}
    .ai_01 .ai_title i{display: none;}
    .ai_more a{width: 120px;padding: 0 20px;height: 36px; line-height: 36px; border-radius: 30px;}
    .ai_more a i{width: 12px;height: 12px; right: 20px;}
    .ai_more a i b{width: 4px;height: 4px;}
    .ai_01{background: #eaecfb;padding-bottom: 150rem;}
    .ai_plan{position: static;}
    .ai_01>img{position: absolute;left: 0;bottom: 0;}
    .ai_plan_p{height: auto;}
    .ai_more{padding-top: 80rem;}
    .ai_title i{height: 1px;margin-top: 15px;}
    .ai_title{margin-bottom: 30px;}
    .ai_03{padding:100rem 20rem;}
    .ai_way dt img{width: 40px;height: 40px;}
    .ai_way dt{line-height: 40px;}
    .ai_way dt h3{width: calc(100% - 60px);}
    .ai_way dd{padding-left: 60px;}
    .ai_way .ai_processbox{padding-left: 0;}
    .ai_process span{width: 100px;}
    .ai_process p{width: calc(100% - 110px);}
    .ai_p02::after{left: 84px;width: 2px;}
    .ai_process span i{width: 18px;height: 18px; left: 76px; top: 3px;}
    .ai_process span i::after{width: 6px;height: 6px;}
    .ai_act{ background-image: url(../images/ai/a_05_ph.jpg);padding: 80rem 30rem 60rem 30rem;}
    .ai_act .ai_more{padding-top: 20px;}
    .ai_about dt,.ai_about dd{float: none;width: 100%;border: 0;padding: 0;}
    .ai_down li{float: none;width: 100%;}
    .ai_down li a>img{width: 30px;height: 30px;}
    .ai_down li a>i{width: 18px;}
    .ai_down li a>span{width: calc(100% - 70px);    text-overflow: inherit;    white-space: inherit;}
    .ai_down li a{line-height: 30px;padding: 20px;}
    .ai_about dd .ai_more{padding-top: 30px;}
    .ai_about dd .ai_more a{display: block;margin:auto;}
    .ai_about_p p{margin-bottom: 20rem;}
    .ai_about_p p:last-child{margin-bottom: 0;}
    .ai_about dt img{max-width: 80%;}
    .ai_about dt{text-align: center;padding-bottom: 25px;margin-bottom: 25px;border-bottom: 1px solid #b8b8b8;}
    .ai_03{ background-image: url(../images/ai/ai_bg_02_ph.jpg);background-position: top center;}


    .ai_01{margin-bottom: 0;}
    .ai_02{ padding:55rem 0 30rem; margin: 10px 0; background: url(../images/ai/a_02_phone.jpg) no-repeat; background-size: cover;}
    .ai_02 .ai_title i{ display: none;}
    .ai_box02{ height: auto; margin: 20rem 0; background: none;}
    .ai_box02 .left,.ai_box02 .right{width: 100%;}
    .ai_box02 .left ul,.ai_box02 .right ul{ display: flex;}
    .ai_box02 .left{padding: 0; height: auto; border-bottom: 1px solid #B9B9B9; background: none;}
    .ai_box02 .left::before{content: ""; position: absolute; lefT:95rem; bottom:0; right:95rem; height: 3px; background: #C3033F;}
    .ai_box02 .left ul li{padding: 0 0 15px; margin: 0;}
    .ai_box02 .left ul li dl{margin: 0 96rem;}
    .ai_box02 .left ul li dt{padding: 0;}
    .ai_box02 .left h3{ height: auto; height:3em; line-height: 1.5; font-weight: bold; padding-left:45px;}
    .ai_box02 .left h3 span{ width: 30px; height: 30px; }
    .ai_box02 .left dt::after{ display: none;}
    .ai_box02 .right{padding: 0; margin:40rem 0 0 20rem; width: calc(100% - 50rem);}
    .ai_box02 .right li{ display: block; height: 880rem;padding: 50rem 50rem 50rem 50rem; background: #fff; border-radius: 10px;}
    .ai_box02 .right li .inner{ /*height:780rem; overflow-y: auto; padding-right: 20rem;*/}
    .ai_box02 .mCSB_outside+.mCSB_scrollTools{right:10px; top:50rem;bottom:50rem;}
}

@media only screen and (min-width:1025px) {
    .ai_more a:hover{color: #fff !important;opacity: 0.9;}
    .ai_more a:hover i{right: 30rem;}
    .ai_box02 .left li:hover h3{font-weight: bold;}
} 

















