

.mv{position:relative; }
.mv .video_ctn{position:relative; width: 100%; height: 100vh; overflow: hidden;}
.mv .video_ctn video{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); min-width: 100%; min-height: 100%;}
.mv .txt{position:absolute; bottom: 70px; left: 125px;}
.mv .txt h2{font-weight:bold; font-size:60px; color: #fff;}
.mv .txt h2 span{font-weight:500; font-size:26px;}
.mv .m_progress{position:absolute; bottom: 0; left: 0; width: 100%; height: 10px; background: #ffffff40;}
.mv .m_progress span{position:absolute; top: 0; left: 0; width: 0; height: 10px; background: var(--red); animation:bar 40.5s infinite linear}
.mv .m_progress.on span{animation-play-state: paused; }
@keyframes bar{
	0%{width: 0;}
	100%{width: 100%;}
}
.m_pro{padding-top: 140px;}
.m_pro .tab{display:flex; justify-content:center; margin: 40px 0 70px;}
.m_pro .tab li{width: 50%; line-height: 60px; max-width: 380px; background: #f8f8f8; font-weight:500; font-size:18px; color: #222; text-align: center; margin-right: 20px; cursor: pointer;}
.m_pro .tab li:last-of-type{margin-right: 0;}
.m_pro .tab li.on{background: var(--red); color: #fff; font-weight:bold;}
.m_pro .slide_wrap .slide_ctn .item{position:relative; text-align: center;}
.m_pro .slide_wrap .slide_ctn .item a{position:absolute; top: 0; left: 0; width: 100%; height: 100%;}
.m_pro .slide_wrap .slide_ctn .item h3{font-weight:600; font-size:18px; color: #222; margin-top: 50px;}
.m_pro .slide_wrap .slide_ctn .item .img{position:relative; width: 100%; height: 100%;}
.m_pro .slide_wrap .slide_ctn .item .img figure{position:relative; padding-bottom:79%; overflow: hidden;}
.m_pro .slide_wrap .slide_ctn .item .img figure img{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); height: 100%; max-width: inherit;} 
.m_pro .slide_wrap .slide_ctn .item .img .hover{position:absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff78; opacity: 0; transition:0.4s;}
.m_pro .slide_wrap .slide_ctn .item .img .hover .arrow_btn{position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);}
.m_pro .slide_wrap .slide_ctn .item:hover .img .hover{opacity: 1;}
.m_pro .slide_wrap .slide_ui{display:flex; align-items:center; margin-top: 70px;}
.m_pro .slide_wrap .slide_ui .progress{display:flex; align-items:center; width: calc(100% - 76px);}
.m_pro .slide_wrap .slide_ui .progress p{width: 55px; font-weight:600; font-size:16px; color: #999;}
.m_pro .slide_wrap .slide_ui .progress p .num{color: var(--red);}
.m_pro .slide_wrap .slide_ui .progress .bar{position:relative; width: calc(100% - 67px); height: 2px; background: #eeeeee; margin-left: 15px;}
.m_pro .slide_wrap .slide_ui .progress .bar span{position:absolute; top: 0; left: 0; width: 50%; height: 2px; background: var(--red); transition:0.4s}
.m_pro .slide_wrap .slide_ui .slide_btn{display:flex; align-items:center;}
.m_pro .slide_wrap .slide_ui .slide_btn > div{width: 30px; height: 30px; text-align: center; cursor: pointer;}
.m_pro .slide_wrap .slide_ui .slide_btn > div i{line-height: 30px; font-size:16px; color: #999999;}
.m_pro .slide_wrap .slide_ui .slide_btn > span{display:block; height: 30px;}
.m_pro .slide_wrap .slide_ui .slide_btn > span a{display:inline-block}
.m_pro .slide_wrap .slide_ui .slide_btn > span a i{ font-size:16px; color: #999999; line-height: 30px;}


.m_gua{padding: 150px 0;}
.m_gua .flex_box{display:flex; align-items:center; justify-content:space-between; background: #f8f8f8; box-sizing:border-box; padding: 0 80px; background:url(/img/main/m_guarantee01.png) 50% 50% no-repeat; background-size:cover; height: 285px; border-radius:20px}
.m_gua .info{display:flex; align-items:center;}
.m_gua .info .item{display:flex; align-items:center; margin-right: 80px;}
.m_gua .info .item:last-of-type{margin-right: 0;}
.m_gua .info .item figure{width: 70px;}
.m_gua .info .item figure img{}
.m_gua .info .item .txt{width: calc(100% - 70px); box-sizing:border-box; padding-left: 24px;}
.m_gua .info .item .txt h3{font-size:20px; color: #222;}
.m_gua .info .item .txt p{font-weight:600; font-size:24px; color: #222;}

.img_txt{position:relative; height: 100vh; width: 100%; background:url(/img/main/m_txt_bg01.png) 50% 50% no-repeat; background-size:cover;}
.img_txt h2{font-weight:300; font-size:60px; color: #fff; text-align: center;}
.img_txt h2 span{font-weight:600; color: #fff;}
.img_txt .arrow_btn{text-align: center; margin-top: 36px;}

.m_biz{}
.m_biz .tab_ctn{position:relative; }
.m_biz .tab_ctn::after{content:""; position:absolute; top: 90px; left: 0; width: 100%; height: 1px;background: #fff; opacity: 0.2;}
.m_biz .tab_ctn .b_tab{display:flex; align-items:center; margin: 56px 0 44px;}
.m_biz .tab_ctn .b_tab li{position:relative; width: 33.33%; text-align: center; padding-bottom:16px; cursor: pointer; transition:0.3s}
.m_biz .tab_ctn .b_tab li::after{content:""; position:absolute; bottom: -1px; left: 50%; height: 1px; transform:translateX(-50%); width: 0; background: #fff; transition:0.3s}
.m_biz .tab_ctn .b_tab li span{display:inline-block; vertical-align: top; width: 35px; height: 35px; background-size:cover !important; transition:0.3s}
.m_biz .tab_ctn .b_tab li .icon01{background:url(/img/main/icon_m_biz01.png) 50% 50% no-repeat;}
.m_biz .tab_ctn .b_tab li .icon02{background:url(/img/main/icon_m_biz02.png) 50% 50% no-repeat;}
.m_biz .tab_ctn .b_tab li .icon03{background:url(/img/main/icon_m_biz03.png) 50% 50% no-repeat;}
.m_biz .tab_ctn .b_tab li p{font-size:18px; color: #fff; margin-top: 16px; transition:0.3s}
.m_biz .tab_ctn .b_tab li.on::after{width: 100%;}
.m_biz .tab_ctn .b_tab li.on .icon01{background:url(/img/main/icon_m_biz01R.png) 50% 50% no-repeat;}
.m_biz .tab_ctn .b_tab li.on .icon02{background:url(/img/main/icon_m_biz02R.png) 50% 50% no-repeat;}
.m_biz .tab_ctn .b_tab li.on .icon03{background:url(/img/main/icon_m_biz03R.png) 50% 50% no-repeat;}
.m_biz .tab_ctn .b_tab li.on p{font-weight:bold;}
.m_biz .tab_ctn .cont{}
.m_biz .tab_ctn .cont .item{}
.m_biz .tab_ctn .cont .item figure{}
.m_biz .tab_ctn .cont .item .txt{display:flex; justify-content:space-around; margin-top: 40px; padding-bottom:170px;}
.m_biz .tab_ctn .cont .item .txt li{position:relative; font-weight: 300; font-size:18px; color: #fff; text-align: center; box-sizing:border-box; padding-left: 24px;}
.m_biz .tab_ctn .cont .item .txt li::after{content:""; position:absolute; top: 6px; left: 0; width: 7px; height: 7px; border:2px solid var(--red)}
.m_biz .tab_ctn .cont .item .txt li .s{display:block; text-align: center; font-size:14px; opacity: 0.5; margin-top: 6px;}

@media (max-width: 1500px){
	.mv .txt{left: 40px;}
	.m_gua .flex_box{padding: 0 40px;}
	.m_gua .info .item{flex-wrap:wrap; text-align: center; justify-content:center;}
	.m_gua .info .item .txt{width: 100%; padding-left: 0; margin-top: 14px;}
	.img_txt h2{font-size:40px; line-height: 1.7;	}
	.img_txt h2 img{max-width: 300px; position: relative; top: 5px;	}
}

@media (max-width: 1200px){
	.mv{margin-top: 80px;}
	.mv .video_ctn{height: calc(100vh - 80px);}
	.mv .txt{left: 16px;}
	.m_pro{padding-top: 100px;}
	.m_pro .tab li{font-size:16px;}
	.m_pro .slide_wrap .slide_ctn .item h3{margin-top: 25px;}
	.m_pro .slide_wrap .slide_ui{margin-top: 40px;}
	.m_gua{padding: 100px 0;}
	.img_txt h2{font-size:4vw;}
	.img_txt h2 img{width: 27vw; top: 7px;}
	.m_biz .tab_ctn .cont .item .txt{justify-content:flex-start; flex-wrap:wrap; padding-bottom:100px;}
	.m_biz .tab_ctn .cont .item .txt li{width: 50%; text-align: left; margin-bottom:20px;}
	.m_biz .tab_ctn .cont .item .txt li .s{text-align: left;}
	.m_biz .tab_ctn .cont .item .txt li:last-of-type{margin-bottom:0;}

}

@media (max-width: 1000px){
	.m_pro{padding-top: 70px;}
	.m_gua{padding: 70px 0;}
	.m_gua .flex_box{flex-wrap:wrap; justify-content:center; text-align: center; height: auto; padding: 40px 20px; background: url(/img/main/m_guarantee01.png) 100% 50% no-repeat; background-size:cover}
	.m_gua .info{width: 100%; margin-top: 40px;}
	.m_gua .m_tit.tal{text-align: center;}
	.m_gua .info .item{margin-right:  0;width: 33.33%;}
	.img_txt{height: 65vh;}
	.m_biz .tab_ctn .cont .item .txt{padding-bottom:70px;}
}

@media (max-width: 800px){
	.mv .txt h2{font-size:46px;}
	.m_gua .info .item .txt p{font-size:20px;}
	.img_txt h2{font-size:30px; padding: 0 16px;}
	.img_txt h2 br{display:none; }
	.img_txt h2 img{width: 202px;}
	.m_biz .tab_ctn .cont .item .txt{margin-top: 30px;}
	.m_biz .tab_ctn .cont .item .txt li{width: 100%;}
}