@charset "utf-8";
/* CSS Document */
/*MAIN*/
.visualSlider .el{ position:relative; overflow:hidden; height:100vh; background:#fff}
.visualSlider .el .bg{ position:absolute; left:0; top:0; width:100%; height:100%}
.visualSlider_wrap{ position:relative}
.visualSlider_wrap .visual_con{ position:absolute; left:3em;; top:calc(10vh + 7em); width:100%; z-index:10; box-sizing:border-box;}
.visualSlider_wrap .slogan{ color:#fff;}
.visualSlider_wrap .slogan .txt{ margin-top:1em;}
.visualSlider_wrap .slogan .t1{ font-size:3.375em; font-weight:700; letter-spacing:1px;}
.visualSlider_wrap .slogan .t2{ font-size:1.5em; line-height:1.6;}
.visualSlider_wrap .slogan .inAni{ overflow:hidden;}
.visualSlider_wrap .slogan .inAni .in{ transform:translateY(100%); opacity:0}
.visualSlider_wrap .slogan .txt{ transform:translateX(5em); opacity:0}
.visualSlider.swiper-container-initialized ~ .visual_con .slogan .inAni .in{ transform:translateY(0); opacity:1; transition:1.2s}
.visualSlider.swiper-container-initialized ~ .visual_con .slogan .txt{ transform:translateX(0); opacity:1; transition:1.6s; transition-delay:.2s}
/*.visualSlider .el.swiper-slide-active .bg,
.visualSlider .el.swiper-slide-duplicate-active .bg{ transform:scale(1.1) rotate(.001deg); transition:6s;}*/
.visualSlider_wrap .swiper_control{ position:absolute; z-index:11; left:0; width:100%; bottom:6vh; color:#fff}
.visualSlider_wrap .swiper_control .paging{ position:relative; display:flex;}
.visualSlider_wrap .swiper_control .paging > span{ position:relative; width:.75em; height:.75em; opacity:.5; background:#fff; border-radius:0; transition:.2s;}
.visualSlider_wrap .swiper_control .paging > span.swiper-pagination-bullet-active{ width:5em; background:#fff; opacity:1;}
.visualSlider_wrap .swiper_control .swiperBtn{ opacity:1; display:none;}

.mainScroll{ position:absolute; left:50%; bottom:2em; transform:translateX(-50%); z-index:100}
.mainScroll a{ line-height:1; color:#fff; animation-name: downAni; animation-duration: 3s; animation-iteration-count: infinite; position:relative}
.mainScroll a .xi{ font-size:2.5em}
.mainScroll a:before{ content:""; position:absolute; left:calc(50% - 1px); top:100%; width:1px; height:4em; background:#fff}

@keyframes downAni{
70% { transform:translateY(0)}
85% { transform:translateY(.5em)}
100% { transform:translateY(0)}
}

.main_box{ padding:8.75em 0;}
.main_box.bg1{ background:#f7f7f7;}
.main_box.bg2{ background:#f2f2f2;}
.main_box.bg3{ background:linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,.05) 50%, rgba(0,0,0,.05) 100%);}

.main_txt{}
.main_txt *{ vertical-align:baseline;}
.main_txt strong{ font-weight:500;}
.main_txt b{ font-weight:700;}
.main_txt .line{ display:block; margin:2em 0; background:#005aff;}
.main_txt .line.h{ width:1px; height:5em;}
.main_txt .line.w{ width:2.5em; height:1px;}
.main_txt.ac .line{ margin-left:auto; margin-right:auto;}
.main_txt > .tit{ margin-bottom:2em;}
.main_txt > .tit.mg1{ margin-bottom:1em;}
.main_txt > .txt .tt{ line-height:1.6;}
.main_txt .op{ opacity:.8;}
.main_txt .tt{}
.main_txt .t0{ font-size:1em;}
.main_txt .t1{ font-size:1.125em;}
.main_txt .t2{ font-size:1.250em;}
.main_txt .t3{ font-size:1.5em;}
.main_txt .t4{ font-size:1.875em;}
.main_txt .t5{ font-size:2.5em; letter-spacing:-1px; text-indent:1px;}
.main_txt .t6{ font-size:3.250em; letter-spacing:-1.5px; text-indent:1.5px;}
.main_txt .tt.c1{ color:#666;}

.main_txt .num{ margin-bottom:1em;}
.main_txt .num > .addNum{ width:1.75em; height:1.75em; background:#005aff; border-radius:50%; text-align:center; color:#fff;}


.cb .main_txt .tt {color:#000}
.cw .main_txt .tt{ color:#fff;}
.cw .main_txt .line{ background:#fff;}

/**/
.main_missionWrap{}
.main_mission{ height:31.25em; flex:1; margin:0 0 -.25em -.25em;}
.main_mission > li,
.main_mission > li .wrap_in,
.main_mission > li .wrap_in .main_txt{ flex:1;}
.main_mission > li,
.main_mission > li .wrap_in .main_txt .ani{ transition:all 0.4s ease 0s;}
.main_mission > li .wrap_in{ position:relative; margin:0 0 .25em .25em; padding:0em 2em;}
.main_mission > li .wrap_in:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(rgba(0,0,0,.5) 0%, rgba(0,0,0,.5) 100%); transition:1s;}
.main_mission > li .wrap_in > *{ position:relative;}
.main_mission > li .wrap_in .main_txt{ min-height:7em;}
.main_mission > li .wrap_in .main_txt .ani{ width:0; height:0; border-top:1px solid #fff; box-sizing:border-box; overflow:hidden; opacity:0;}
.main_mission > li:hover{ flex:3;}
.main_mission > li:hover .wrap_in:before{ background:linear-gradient(rgba(0,0,0,.1) 0%, rgba(0,0,0,.4) 60%, rgba(0,0,0,.8) 100%);}
.main_mission > li:hover .wrap_in .main_txt{}
.main_mission > li:hover .wrap_in .main_txt .tit .tt{ font-size:1.625em;}
.main_mission > li:hover .wrap_in .main_txt .ani{ width:100%; height:5em; margin-top:1em; padding-top:1em; opacity:1;}
.en_tx {font-size: 1em; font-weight:300;}


.movBg_wrap{}
.movBg{ position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden;}
.movBg > .vod{ position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; transform:translate(-50%, -50%);}

.main_vod{ position:relative;}
.main_vod:after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.55;}
.main_vod > .movBg ~ *{ position:relative; z-index:2;}

/*.diagram_circle_wrap{ width:47em; max-width:100%; padding:4em 8em; margin:0 auto; box-sizing:border-box;}
.diagram_circle{ position:relative;}
.diagram_circle > li{ flex:1;}
.diagram_circle > li .wrap_in{ flex:1; text-align:center; color:#fff;}
.diagram_circle > li .wrap_in .resize{ padding-bottom:45%;}
.diagram_circle > li .wrap_in .bg:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.35); border:2px solid #fff; border-radius:20em; transform:scale(1.9);}
.diagram_circle > li .wrap_in .in{ flex:1;}
.diagram_circle > li .wrap_in .icon{ width:3em; height:3em; background:#fff; border-radius:50%; margin:0 auto 1em auto;}
.diagram_circle > li .wrap_in .icon svg{ width:2em; height:2em; position:static;}
.diagram_circle > li .wrap_in .txt{}
.diagram_circle > li .wrap_in .txt .t1{ margin-bottom:.75em; opacity:.8;}
.diagram_circle > li .wrap_in .txt .t2{ font-size:1.375em; font-weight:700;}
.diagram_circle > li.center{ position:absolute; z-index:2; height:100%; top:0; left:50%; transform:translateX(-50%);}
.diagram_circle > li:nth-child(1) .wrap_in .in{ transform:translateX(-6em);}
.diagram_circle > li:nth-child(3) .wrap_in .in{ transform:translateX(6em);}
.diagram_circle > li:nth-child(1) .wrap_in .bg:before{ border-color:#005aff;}
.diagram_circle > li:nth-child(3) .wrap_in .bg:before{ border-color:rgba(255,255,255,.7);}*/

.diagram_circle_wrap{ width:47em; max-width:100%; padding:4em 8em; margin:0 auto; box-sizing:border-box;}
.diagram_circle{ position:relative;}
.diagram_circle > li{ flex:1;}
.diagram_circle > li .wrap_in{ flex:1; text-align:center; color:#fff;}
.diagram_circle > li .wrap_in .resize{ padding-bottom:45%;}
.diagram_circle > li .wrap_in .bg:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.35); border:2px solid #fff; border-radius:20em; transform:scale(1.9);}
.diagram_circle > li .wrap_in .in{ flex:1;}
.diagram_circle > li .wrap_in .icon{ width:3em; height:3em; background:#fff; border-radius:50%; margin:0 auto 1em auto;}
.diagram_circle > li .wrap_in .icon svg{ width:2em; height:2em; position:static;}
.diagram_circle > li .wrap_in .txt{}
.diagram_circle > li .wrap_in .txt .t1{ margin-bottom:.75em; opacity:.8;}
.diagram_circle > li .wrap_in .txt .t2{ font-size:1.375em; font-weight:700;}
.diagram_circle > li.center{ position:absolute; z-index:2; height:100%; top:0; left:50%; transform:translateX(-50%);}
.diagram_circle > li:nth-child(1) .wrap_in .in{ transform:translateX(-6em);}
.diagram_circle > li:nth-child(3) .wrap_in .in{ transform:translateX(6em);}
.diagram_circle > li:nth-child(1) .wrap_in .bg:before{ border-color:rgba(255,255,255,.7);}
.diagram_circle > li:nth-child(2) .wrap_in .bg:before{ border-color:#005aff;}
.diagram_circle > li:nth-child(3) .wrap_in .bg:before{ border-color:rgba(255,255,255,.7);}

.main_serviceWrap .main_txt {text-align:center;}
.main_serviceWrap .en {text-transform:uppercase;}
.main_serviceWrap .ser_t {color:#005aff;}
.main_serviceWrap .ser_t span {color:#000;}
.main_serviceWrap{ position:relative;}
.main_serviceWrap .tab{width:calc(45% + 2.5em); margin:3em auto;}
.main_serviceWrap .tab > li{ flex:1;}
.main_serviceWrap .tab > li .link{ flex:1; margin:0 0 2px 2px; padding:2em 1em; text-align:center; background:#f5f5f5; color:#555;}
.main_serviceWrap .tab > li .link .in{ flex:1;}
.main_serviceWrap .tab > li .link .icon{ margin-bottom:1em;}
.main_serviceWrap .tab > li .link .icon svg{ width:3em; height:3em;}
.main_serviceWrap .tab > li .link .tt{ font-size:1.125em; font-weight:500;}
.main_serviceWrap .tab > li.on .link{ background:#005aff; color:#fff;}
.main_serviceWrap .tab > li.on .link .icon svg .color{ fill:#fff;}
.main_service > .con_wrap{ width:45%;}
.main_service > .img_wrap{ flex:1; min-height:40.5em;}
.main_service > .con_wrap .wrap_in{ padding:10em 4em 3em 5em;}

.main_customer{ text-align:center;}
.main_customer > li{ flex:1; padding:0 .75em;}
.main_customer > li .wrap_in{ flex:1; position:relative; padding:4.5em 1em 16em 1em; border-radius:1.25em; overflow:hidden;}
.main_customer > li .wrap_in > *{ position:relative;}
.main_customer > li .wrap_in .txtAni{ transition:.3s;}
.main_customer > li .wrap_in .btnAni{ position:absolute; left:0; bottom:0; width:100%; opacity:0; visibility:hidden; transition:.3s;}
.main_customer > li .wrap_in:before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; transition:.3s;}
.main_customer > li .wrap_in:hover{ overflow:visible;}
.main_customer > li .wrap_in:hover:before{ background:#005aff; opacity:1; transform:scale(1.1,1.1);}
.main_customer > li .wrap_in:hover .txtAni{ transform:translateY(2em);}
.main_customer > li .wrap_in:hover .btnAni{ opacity:1; visibility:visible; transform:translateY(-4em);}

.main_btn{ padding:0 3em; display:inline-flex; align-items:center; height:4.5em; color:#fff; position:relative; transition:.3s; margin:.5em; min-width:15em; justify-content:center}
.main_btn:before,
.main_btn:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.2); box-sizing:border-box; border:2px solid transparent; border-radius:3em; transition:.3s}
.main_btn:before{ background:rgba(0,0,0,.2); transform:translate(.5em, .5em)}
.main_btn:after{ background:#005aff;}
.main_btn .tt{ position:relative; z-index:1; font-weight:700; font-size:1.25em;}
.main_btn .tt .xi{ font-size:1em}
.main_btn .tt .no{ vertical-align:baseline; font-size:1.25em}
.main_btn.c1:after{ background:#535252}
.main_btn[href] .tt:after{ content:"+"; margin-left:2em; vertical-align:top; transition:.3s}
.main_btn[href]:hover{ color:#005aff;}
.main_btn[href]:hover:after{ background:#fff; border-color:#005aff;}
.main_btn2{ padding:1em 1.5em; color:#005aff; font-size:1.063em; font-weight:500; transition:.3s; border: 1px solid #005aff;}
.main_btn2:after{ content:"+"; margin-left:1em; vertical-align:top}
.main_btn2:hover{ background:#005aff; color:#fff; box-shadow:0 0 1em rgba(0,0,0,.2)}
.main_btn2.re{ border:1px solid #fff; background:transparent; color:#fff;}

.main_more{ }
.main_more .xi{ width:1.5em; line-height:1.5em; border-radius:50%; margin-left:3em; text-align:center; transition:.3s;}
.main_more .xi:before{content:"\e913"}
.main_more:hover .xi{ background:#fff; box-shadow:0 0 1em rgba(0,0,0,.1); color:#005aff;}
.main_more:hover .xi:before{ transform:rotate(180deg)}

.main_cert{ width:60%}
.main_board{ width:32%}
.main_cert .board_photo > li{ width:25%}
.main_board .list > li{ margin-bottom:1em}
.main_board .list > li > a:before{ content:"-"; margin-right:.25em; vertical-align:top}
.main_board .list > li > a:hover .tt{ text-decoration:underline}
.main_board .list > li > a .date{ font-size:.813em; color:#777; margin-left:1.5em}


.logo_open {width:3.5em;}
.logo_mile {width:3em;}