﻿ .bbfont {
    font-family: 微软雅黑 !important;
    font-weight: bold !important;
}
html{ background: #000}
.s-logo{ text-align: left;}

.slide-text >  .h1{text-shadow: none; margin-bottom: 25px}
.slide-text >  .h1 span{
	background: -webkit-linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%);
    background: -o-linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%);
    background: linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: none;
	position: relative;
}
.slide-text .logi_btns{ text-align: left}
 
.bs-slider > .carousel-inner > .item .main_img{ transform-origin: right !important;}
.pc-mode{ display: block !important;}
.sp-mode{ display: none !important;}

.bs-slider > .carousel-inner > .item .main_img{ height: 0 !important; padding-bottom: 45vmax !important; -webkit-animation-name:none !important;
    animation-name: none !important; background-position: center top !important;}

#bootstrap-touch-slider .item .main_img{
	    transition: transform ease 6s; 
	transition-delay: 1s;
    -webkit-animation-name: LR_move;
    animation-name: LR_move;
    transition-duration: 6s;
    -moz-animation-duration: 6s;
    animation-duration: 6s;
    -moz-animation-iteration-count: infinite;
}


.bs-slider{ height: 45vmax; max-height: none !important;}

 .slide-text{  top: 50%; transform: translateY(-50%); width: 100%; box-sizing: border-box; padding: 0 100px; z-index: 3} 

.logi_btns { text-align: center}



.logi_btns a{ 
	display: inline-block; margin-right: 15px; font-size: 1em; 
	padding: 0 40px; line-height:60px; border-radius: 35px; 
	box-shadow: 1px 1px 5px #000; }
.slide-text > p{ display: block; margin:0; text-align: left; font-weight: bold} 

.gold{ color:#FFDF00; margin: 0 0.5em }
.logi_btns{margin-top: 30px; display: block; font-size:2em; font-weight: bold}
.logi_btns .join_btn{ background-color: #d42715; color: #fff;}
.logi_btns .login_btn{ background-color: #fff; color: #363A43; text-shadow: none}

.logi_btns .join_btn:hover, .logi_btns .login_btn:hover{
 	background: -webkit-linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%) !important;
    background: -o-linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%) !important;
    background: linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%) !important;
    text-shadow: 1px 1px 0px #fff !important;
    color: #000 !important;
}
.control-round .carousel-control.left{    background-image: url(../images/home2/prev.svg) !important;}
.control-round .carousel-control.right {  background-image: url(../images/home2/next.svg) !important;}

.control-round .carousel-control.left:hover, .control-round .carousel-control.right:hover{ background-color: rgba(255,255,255,0.25); opacity: 1}

.slide-text .logi_btns {
  opacity: 0;
  transform: translateY(200px);
  transition: all 1s ease;       /* 定義過渡效果 */
  transition-delay: 2s;          /* 延遲兩秒才開始 */
}

.active .slide-text .logi_btns {
  opacity: 1;
  transform: translateY(0);
}

.B_fadeIn {
  animation: B_fadeIn 1s ease forwards; transition-delay: 2s; animation-delay: 2s 
}


/*20251202主視覺優化 如果是用圖片*/
.bs-slider > .carousel-inner > .item picture.main_img,
.bs-slider > .carousel-inner > .item picture.main_img img,
#main_banner .item picture, #main_banner .item img {
  width: 110% !important;
  height: 110%  !important;
  padding-bottom: 0  !important;
  object-fit: cover  !important;   /* 核心：模擬 background-size: cover */
  object-position: center  !important; /* 對齊方式 */
  display: block  !important;
}

/*RWD換主視覺圖 電腦版*/

.bs-slider > .carousel-inner > .item .main_img.M1{ background-image:url(../images/home2/M1.webp) }
.bs-slider > .carousel-inner > .item .main_img.M2{ background-image:url(../images/home2/M2.webp) }
.bs-slider > .carousel-inner > .item .main_img.M3{ background-image:url(../images/home2/M3.webp) }
.bs-slider > .carousel-inner > .item .main_img.M4{ background-image:url(../images/home2/M4.webp) }

@media screen and (max-width: 1440px) {
 	.bs-slider > .carousel-inner > .item .main_img.M1{ background-image:url(../images/home2/M1-1400.webp) }
	.bs-slider > .carousel-inner > .item .main_img.M2{ background-image:url(../images/home2/M2-1400.webp) }
	.bs-slider > .carousel-inner > .item .main_img.M3{ background-image:url(../images/home2/M3-1440.webp) }
	.bs-slider > .carousel-inner > .item .main_img.M4{ background-image:url(../images/home2/M4-1400.webp) }
}
@media screen and (max-width: 1000px) {
 	.bs-slider > .carousel-inner > .item .main_img.M1{ background-image:url(../images/home2/M1-1000.webp) }
	.bs-slider > .carousel-inner > .item .main_img.M2{ background-image:url(../images/home2/M2-1000.webp) }
	.bs-slider > .carousel-inner > .item .main_img.M3{ background-image:url(../images/home2/M3-1000.webp) }
	.bs-slider > .carousel-inner > .item .main_img.M4{ background-image:url(../images/home2/M4-1000.webp) }
}

@media screen and (max-width: 750px) {
 	.bs-slider > .carousel-inner > .item .main_img.M1{ background-image:url(../images/home2/M1s.webp) }
	.bs-slider > .carousel-inner > .item .main_img.M2{ background-image:url(../images/home2/M2s.webp) }
	.bs-slider > .carousel-inner > .item .main_img.M3{ background-image:url(../images/home2/M3s.webp) }
	.bs-slider > .carousel-inner > .item .main_img.M4{ background-image:url(../images/home2/M4s.webp) }
}


header.MW_logo{ box-sizing: border-box; padding: 0 30px; text-align: left; position: absolute; top: 25px; width: 100%; left: 0; z-index: 3}
header.MW_logo .R_log_box{ float: right; text-align: left}
header.MW_logo .R_log_box  a{ display: inline-block; position: relative !important; margin-left: 10px; font-size: 1.5em; color: #000; background-image: none; line-height: 40px; height: 40px; padding: 0 30px; border-radius: 20px;  background-color: #fff; font-weight: bold;    font-family: 微软雅黑;}


header.MW_logo .R_log_box  a:hover{
 	background: -webkit-linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%) !important;
    background: -o-linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%) !important;
    background: linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%) !important;
    text-shadow: 1px 1px 0px #fff !important;
    color: #000 !important;
}


header.MW_logo .R_log_box  a.btn_red{ background-color: #d42715; color: #fff}

header.MW_logo h1{ display: inline-block}
header.MW_logo h1 a{ display: block; width: 90px; height: 40px}

#bootstrap-touch-slider .item .h1 span:after{
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	position: absolute;
	right: -45px;
	top: -35px;
	background: url(../images/home2/flash-light.webp) center no-repeat; background-size: contain;
	z-index: 2;
	transition: all 2s;
	transition-delay: 1s;
	animation: zoomLoop 10s linear infinite;
	transform-origin: center
}
@media screen and (max-width: 767px) {
    .control-round .carousel-control {display:  block;}
	.control-round .carousel-control{ top: auto; bottom:20px; opacity: 0.5   }
	.control-round .carousel-control.left{ left: 20px !important ;}
	.control-round .carousel-control.right{ right:20px !important ;}
}
 @keyframes zoomLoop {
  0% {
    transform:  rotate(0deg) scale(1); opacity: 1
  }
  50% {
    transform:   rotate(90deg) scale(0.7); opacity: 0.5
  }
  100% {
    transform:  rotate(180deg) scale(1); opacity: 1
  }
}

.zoom-loop {
  animation: zoomLoop 10s linear infinite;
}

@keyframes B_fadeIn {
  from { opacity: 0;  transform:translateY(200px) }
  to   { opacity: 1; transform: translateY(0) }
}
@media screen and (max-width: 990px) {
	 .logi_btns a{ margin: 0 5px; padding: 0 25px; line-height: 48px; font-size: 0.8em;}
}
@media screen and (max-width: 750px) {
	.bs-slider{ height: 0; padding-bottom: 140%}
 
	.pc-mode{ display: none !important}
	.sp-mode{ display: block !important}
	
	.bs-slider > .carousel-inner > .item .main_img{   
		transform-origin: top !important; width: 100%; padding-bottom: 140% !important; background-position: center top !important}
	
	.slide-text {left: 0; top: auto; bottom: 15%; text-align: center; transform: none; padding: 0 40px}
	.logi_btns{ font-size:1.6em; }
	.slide-text > p{ text-align: center}
	.slide-text > p br{ display: none}
	 .slide-text > .h1 {
        font-size: 4em;
		 margin-bottom: 20px
    }
	
	header.MW_logo .R_log_box{ display: none}
	.slide-text .logi_btns{ text-align: center}
}


@media screen and (max-width: 480px) {
	.slide-text{ padding: 0 25px}
	.slide-text > .h1{ font-size: 3.3em}
	.bs-slider{  padding-bottom: 170%}
	.bs-slider > .carousel-inner > .item .main_img{padding-bottom: 170% !important;   }
	.slide-text > p {font-size: 1.5em; }
}
@media screen and (max-width: 480px) and (max-height: 850px) {
	.bs-slider{  padding-bottom: 100VH}
	.bs-slider > .carousel-inner > .item .main_img{padding-bottom: 100VH !important;   }
}
#fives{
	background: none;
 	padding: 70px 0 140px 0;
 	position: relative;
	border-top: 2px solid #e0af3c
}
#fives .fixed_bg{
	display: block;
	background:#000  url(../images/home2/BG-HOUSE.webp) center no-repeat  ;
   position: fixed;
  top: -50px; left: 0; right: 0; bottom:-50px;
	width: 100%; height: calc(100VH + 100px);
   background-size: cover !important;
  z-index: -1; /* 放在內容後面 */
}

#fives:before, #fives:after{
	content: "";
	display: block;
	position: absolute;
	z-index: 2;
	background:  url(../images/home2/rose.webp) center no-repeat;
	background-size: contain;
 
}


#fives:before{
	width: 22vw; height: 22vw;
	right: -7vw; top: -7vw
}

#fives:after{
	width: 13vw; height: 13vw;
	left: -3vw; bottom: -5vw
}

.gold_tit{
	display: block;
	position: relative;
	margin-bottom: 60px;
	text-align: center;
}
.gold_tit:after{
	content: "";
	display: block;
	width: 20px; height: 17px;
	background: url(../images/home2/tit-V.webp) center no-repeat;
	background-size: contain !important;
	position: absolute;
	left: 50%;
	margin-left: -10px;
	bottom:-40px;
	opacity: 0.5
}

.gold_tit.black:after{background: url(../images/home2/tit-V-b.webp) center no-repeat;}

.gold_tit h2{
	font-size: 5em;
	display: inline-block;
	position: relative;
	 background: -webkit-linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%);
    background: -o-linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%);
    background: linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%);
    background-clip: text;
   -webkit-background-clip: text;
   color: transparent;
	text-shadow: none;
	margin-bottom: 0.5em;
	line-height: 1.22
	
}

.gold_tit.black h2{
	background: none;
	background-clip: border-box;
	-webkit-background-clip:border-box;
	color: #000
}

.gold_tit p{
	display: block;
	color: #fff;
	font-weight: bold;
	font-size: 2.7em;
	text-shadow: 0 0 3px #000;
	line-height: 1.5
}

.gold_tit.black  p{ color: #000; text-shadow: none;}

.flash_light:after{
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	position: absolute;
	right: -50px;
	top: -37px;
	background: url(../images/home2/flash-light.webp) center no-repeat; background-size: contain;
	z-index: 2;
	transition: all 2s;
	transition-delay: 1s;
	animation: zoomLoop 10s linear infinite;
	transform-origin: center
}
 @keyframes zoomLoop {
  0% {
    transform:  rotate(0deg); opacity: 1
  }
  50% {
    transform:   rotate(90deg); opacity: 0.5
  }
  100% {
    transform:  rotate(180deg); opacity: 1
  }
}


.cards{ display: flex; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.cards.gold_bg{ background: none}

.cards li{
	display: block; margin: 10px; padding:50px 30px; box-sizing: border-box; border-radius: 15px; text-align: center;
	line-height: 1.5; position: relative; box-shadow: 2px 2px 5px #000
}
.cards.part5 {
	margin-bottom: 70px
}
.cards.part5 li{
	padding:30px 15px
}

.cards.part5 li a{ color: #000 ; display: block}
.cards.part5 li a:hover h3{ color: #780002}
.cards h3{ margin-bottom: 15px}
.cards.part5 li h3{
	font-size: 2.3em;
}

.cards.gold_bg  li{
	color: #000;
	 background: -webkit-linear-gradient(left, rgba(223,189,131,1) 0%, rgba(232,215,177,1) 100%);
	 background: -o-linear-gradient(left, rgba(223,189,131,1) 0%, rgba(232,215,177,1) 100%);
	 background: linear-gradient(to right, rgba(223,189,131,1) 0%, rgba(232,215,177,1) 100%);  
 }
.cards.gold_bg2  li{
	color: #000;
 	background: -webkit-linear-gradient(rgba(232,215,177,1) 0%, rgba(223,189,131,1) 100%);
	background: -o-linear-gradient(rgba(232,215,177,1) 0%, rgba(223,189,131,1) 100%);
	background: linear-gradient(rgba(232,215,177,1) 0%, rgba(223,189,131,1) 100%);  
 }

.cards.dark_gold  li{
	color: #fff; 
	background: -webkit-linear-gradient(rgba(98,80,67,1) 0%, rgba(35,19,12,1) 100%);
	background: -o-linear-gradient(rgba(98,80,67,1) 0%, rgba(35,19,12,1) 100%);
	background: linear-gradient(rgba(98,80,67,1) 0%, rgba(35,19,12,1) 100%);
	box-shadow: none
 }

/*金色框*/
.cards.dark_gold li:before{
	content: "";
	display: block;
	position: absolute;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	left: 8px; top: 8px;
	border: #d6bd00 1px solid;
	opacity: 0.5;
	border-radius: 12px;
} 
.cards p{ font-size: 1.6em; line-height: 1.8}
.cards.chinas .bef, .cards.chinas .aft{
	display: block;
	position: absolute;
	width: calc(100% - 26px);
  	left: 13px;
}
.cards p a{ font-weight: bold; text-decoration: underline; color: #000}
.cards p a:hover{ color:#DA3C2D}
.cards.chinas .bef{	top: 13px}
.cards.chinas .aft{	bottom: 13px; opacity: 0.4}


.cards.chinas .bef:before, .cards.chinas .bef:after,
.cards.chinas .aft:before, .cards.chinas .aft:after{
	display: block; content: ""; position: absolute;
	width: 50px; height: 50px; background: url(../images/home2/china-coner.svg) center no-repeat;
	background-size: contain !important; transform-origin: center;
	opacity: 0.75
}

.cards.gold_bg2.chinas .aft, .cards.gold_bg2.chinas .bef{ opacity:0.4;}


.cards.chinas .bef:before{ transform: rotate(00deg); left: 0; top: 0;}
.cards.chinas .bef:after{ transform: rotate(90deg); right: 0; top: 0}
.cards.chinas .aft:before{ transform: rotate(270deg); left: 0; bottom: 0;}
.cards.chinas .aft:after{ transform: rotate(180deg); right: 0; bottom: 0;}

.cards.dark_gold.chinas .bef:before, .cards.dark_gold.chinas .bef:after,
.cards.dark_gold.chinas .aft:before, .cards.dark_gold.chinas .aft:afte{background: url(../images/home2/china-coner-gold.svg) center no-repeat;}



.cards.part3 li{ width: calc(33.3% - 20px)}
.cards.part4 li{ width: calc(25% - 20px)}
.cards.part5 li{ width: calc((100% / 5) - 20px)}


/*黑色ICON圓球*/
.ico_ball {
	display: inline-block;
    background-position: center;
    background-size: contain;
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 10px;
    background-color: #000;
    box-shadow: 0 2px 3px #fff;
    transition: all 0.3s;
}
li:hover .ico_ball{ transform: translateY(-5px);}

li a:hover .ico_ball{background-color: #351C00; transform: scale(1.1)}

.ico_ball:before {
    content: "";
    display: block;
    width: 62%;
    height: 62%;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 5px;
    transform: translateX(-50%);
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
    background: -o-linear-gradient(rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
}

.ico_ball.i_brand_1{ background-image: url(../images/home2/ico-scan.svg)}
.ico_ball.i_brand_2{ background-image: url(../images/home2/ico-safe.svg)}
.ico_ball.i_brand_3{ background-image: url(../images/home2/ico-best.svg)}

.ico_ball.i_why_1{ background-image: url(../images/home2/ico-like.svg)}
.ico_ball.i_why_2{ background-image: url(../images/home2/ico-scan.svg)}
.ico_ball.i_why_3{ background-image: url(../images/home2/MW_ICO_3.svg)}
.ico_ball.i_why_4{ background-image: url(../images/home2/ico-talk.svg)}
.ico_ball.i_why_5{ background-image: url(../images/home2/MW_ICO_5.svg)}
 
.ico_ball.i_trust_1{ background-image: url(../images/home2/ico-ai-team.svg)}
.ico_ball.i_trust_2{ background-image: url(../images/home2/ico-eye.svg)}
.ico_ball.i_trust_3{ background-image: url(../images/home2/ico-social.svg)}
.ico_ball.i_trust_4{ background-image: url(../images/home2/ico-like.svg)}

.ico_ball.ic_1{ background-image: url(../images/home2/ico-scan.svg)}
.ico_ball.ic_2{ background-image: url(../images/home2/ico-help.svg)}
.ico_ball.ic_3{ background-image: url(../images/home2/ico-ai-plus.svg)}
.ico_ball.ic_4{ background-image: url(../images/home2/ico-safe.svg)}


.cards h3, .cards p{ position: relative; z-index: 2}
.cards.gold_bg2 h3, .cards.gold_bg h3{ text-shadow: 0 1px 1px #fff}
.cards.dark_gold h3{
	display: block;
	font-size: 2em;
	line-height: 1.5;
	color: #fff;
	text-shadow: 1px 1px 1px #000, 1px 1px 3px #000;
	margin-bottom: 20px
}
.cards.dark_gold h3 big{ font-size:165%; color:#ffdf00  }
.cards.dark_gold h3 big, .cards.dark_gold h3 small{ display: block}
.cards.dark_gold p{text-shadow: 1px 1px 2px #000}


.calc_txt{
	text-align: center;
	line-height: 1.33;
	text-shadow: 0 0 3px #000;
	color: #fff;
	font-size: 3.2em;
	font-weight: bold;
	margin-bottom: 45px
}

.calc_txt big ~ sup{ color:#ffdf00 ; transform: translateY(-10px); font-size: 80%; display: inline-block}

.calc_txt big{ font-size:152%; color:#ffdf00; display: inline-block}

.calc_txt .gold{ color:#ffdf00; margin: 0 8px  }

.calc_txt .in_line{ display: inline-block}


.R_btn {
    display: inline-block;
    margin: 10px;
    line-height: 55px;
    border-radius: 27px;
    box-sizing: border-box;
    font-size: 2em;
    border: 1px solid #000;
    padding: 0 1em 0 0.6em;
    font-family: "微软雅黑";
    font-weight: bold;
    background-color: #fff;
    color: #000;
    box-shadow: 2px 2px 6px #000;
    text-decoration: none;
}
.R_btn .ico{
    display: inline-block;
    vertical-align: middle;
    width: 1.3em;
    height: 1.3em;
    margin-top: -0.1em;
    margin-right: 0.4em;
    margin-left: 0.4em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.R_btn.gold {
    background: -webkit-linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%);
    background: -o-linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%);
    background: linear-gradient(#ab800c 0%, #ffffff 50%, #ab800c 51%, #ffce80 72%);
    text-shadow: 1px 1px 0px #fff;
    color: #000;
}
.R_btn.gold:hover{
	background: -webkit-linear-gradient(#161616 0%, #303030 25%, #2c2c2c 50%, #000000 51%, #1c1c1c 80%, #131313 100%) !important;
	background: -o-linear-gradient(#161616 0%, #303030 25%, #2c2c2c 50%, #000000 51%, #1c1c1c 80%, #131313 100%) !important;
	background: linear-gradient(#161616 0%, #303030 25%, #2c2c2c 50%, #000000 51%, #1c1c1c 80%, #131313 100%) !important;
	text-shadow: none; border: 1px solid #ffd44d; color: #fff !important;
	box-shadow: 0 0 10px #ffce80, 0 0 4px #ffce80
}
a.R_btn .ico.i_plus{background-image: url(../images/home2/ico-plus-bk.svg);}
a.R_btn:hover .ico.i_plus{background-image: url(../images/home2/ico-plus-w.svg);}
a.R_btn .ico.i_line {
    background-image: url(../images/home2/ico-line-bk.svg);
    width: 1.6em;
    height: 1.45em;
}
.R_btn.gold:hover .ico.i_line {
    background-image: url(../images/home2/ico-line-white.svg) !important;
}
@media screen and (max-width: 1440px) {
 	#fives .fixed_bg{
 	background: #000 url(../images/home2/BG-HOUSE-1400.webp) center no-repeat;
    background-size: cover;
 }
}

@media screen and (max-width: 991px) {
    .container {
         max-width: calc(100% - 58px);
    }
	

}
@media screen and (max-width: 990px) {

	#fives .cards.part5{
		justify-content: center
	}

	#fives .cards.part5 li{
		width: calc(33% - 20px)
	}
	.gold_tit h2{ font-size: 4em}
	.calc_txt{ font-size: 2.5em}
 	#fives .fixed_bg{
		background:#000  url(../images/home2/BG-HOUSE-w990.webp) center no-repeat;
		background-size: cover;
	 }
}

@media screen and (max-width: 700px) {
	 #fives .cards.part5 li{width: calc(50% - 20px)	}
	.gold_tit p{ font-size:1.8em }
	.gold_tit h2{ font-size: 3.5em}
 	.calc_txt{ font-size: 2em}
	.ico_ball{ width: 80px; height: 80px;}
	.cards.part5 li h3 { font-size: 2em;}
	#fives:before, #fives:after{ display: none}
	.gold_tit p br{ display: none}
}

@media screen and (max-width: 480px) {
	 #fives .cards.part5 li{width: calc(100% - 20px);}
	.gold_tit h2 { font-size: 3em;}
	#fives .container {max-width: calc(100% - 100px);  }
	.flash_light:after {width: 70px;height: 70px;right: -32px;top: -31px;}
	#fives {  padding: 50px 0 90px 0;}
	.cards.part5 { margin-bottom: 30px;}
	.calc_txt {margin-bottom: 15px;}
 	#fives .fixed_bg{
		background: #000 url(../images/home2/BG-HOUSE-w390.webp) center no-repeat;
		background-size: cover;
	 }
}


.flex_part {
    display: flex;
    justify-content: center;
    list-style: none;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex_part li{ display: block; width: 50%; background-position: center}

 #Feedbacks{ 
	background: linear-gradient(rgba(232, 215, 177, 1) 0%, rgba(223, 189, 131, 1) 100%);
	position: relative;
	padding: 30px 0 50px}

.max{ width: calc(100% - 80px); margin: 0 auto; max-width: 1550px}

#Feedbacks .max:after{
	content: "";
	display: block;
	width: 36vw;
	height: 36vw;
	background: url(../images/home2/rose.webp) center no-repeat;
    background-size: contain;
	z-index: 0;
	opacity: 0.1;
	right: 0;
	top: 50%;
	transform: translate(20%,-50%);
	position: absolute
	
}



#Feedbacks:before, #Feedbacks:after{
	content: "";
	display: block;
	width: 100%;
	height: 75px;
	position: absolute;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	left: 0;
	z-index: 1
 }

#Feedbacks:before{
	background-image: url(../images/home2/cuvebg-top.webp);
	background-position: center bottom;
	 top: -74px;
}

#Feedbacks:after{
	background-image: url(../images/home2/cuvebg-bottom.webp);
	background-position: center top;
	bottom: -74px;
}

#Feedbacks .flex_part{ justify-content: space-between; -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;}
#Feedbacks .flex_part dl{ width: calc(50% - 10px)}

#Feedbacks dd{ line-height: 1.5; box-sizing: border-box; padding:30px 40px; border-radius: 25px ; margin-bottom:15px; display: flex ; justify-content: space-between; align-items: center; position: relative;z-index: 2}

#Feedbacks dd .img_bg{ width: 140px; height: 140px; border-radius: 50%; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: contain; border: 10px solid #fff}

#Feedbacks dd .img_bg.man1{ background-image:url(../images/home2/man01.webp) }
#Feedbacks dd .img_bg.man2{ background-image:url(../images/home2/man02.webp) }
#Feedbacks dd .img_bg.girl1{ background-image:url(../images/home2/girl01.webp) }
#Feedbacks dd .img_bg.girl2{ background-image:url(../images/home2/girl02.webp) }

#Feedbacks dd .m_txt{ width: calc(100% - 140px - 30px); text-align: left}

#Feedbacks dd p{ font-size: 1.7em;}
#Feedbacks dd h4{ 
    font-size: 2.2em;
    margin-bottom: 10px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
    padding-bottom: 10px;}



#Feedbacks dd h4 big{ font-size: 136% ; margin-right: 10px;}
#Feedbacks dd h4 .op5{
	margin: 0 0.5em; opacity: 0.5
}
#Feedbacks .mans_talk dd{
	color: #fff;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#625043+0,23130c+100 */
background: linear-gradient(to right,  rgba(98,80,67,1) 0%,rgba(35,19,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#Feedbacks .girls_talk dd{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.5+0,1+100 */
background: linear-gradient(to right,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

#Feedbacks .girls_talk dd h4{border-bottom: 1px dashed rgba(0, 0, 0, 0.5);}

#Feedbacks .mans_talk dt{ color:#06a1b6}
#Feedbacks .mans_talk dd h4 big{ color: #6fffff}
#Feedbacks .girls_talk dt{ color:#bf5680}
#Feedbacks .girls_talk dd h4 big{ color: #bc6680}




#Faqsss{ background: url(../images/home2/FAQ-BG-s.webp) center; color: #fff; padding: 140px 0 70px 0; background-attachment: fixed}



#Faqsss .faq_list{ 
	display: flex; padding: 0; list-style: none; justify-content: center;  margin-bottom: 50px;
	-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}

#Faqsss .faq_list li{
	display: block; width: calc(33.33% - 10px);  margin: 5px;
	padding: 15px;  box-sizing: border-box; border-radius: 15px;
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#dfbd83+0,e8d7b1+100 */
	background: -webkit-linear-gradient(left, rgba(223,189,131,1) 0%, rgba(232,215,177,1) 100%);
	background: -o-linear-gradient(left, rgba(223,189,131,1) 0%, rgba(232,215,177,1) 100%);
	background: linear-gradient(to right, rgba(223,189,131,1) 0%, rgba(232,215,177,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

 }
#Faqsss .faq_list li:hover{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f7e7be+0,f9f5ed+100 */
background: -webkit-linear-gradient(left, rgba(247,231,190,1) 0%, rgba(249,245,237,1) 100%);
background: -o-linear-gradient(left, rgba(247,231,190,1) 0%, rgba(249,245,237,1) 100%);
background: linear-gradient(to right, rgba(247,231,190,1) 0%, rgba(249,245,237,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
#Faqsss .faq_list li a{
	text-align: left; line-height: 1.5;
	display: block; color: #000;padding-left: 100px;position: relative}

#Faqsss .faq_list li a:before{
	content: ""; display: block;
	    width: 70px;
    height: 100px;
	background: rgba(0,0,0,0.5) url(../images/home2/I_FAQ.svg) center no-repeat;
	background-size: contain !important;
	border-radius: 41px;
	position: absolute;
	left: 5px;
	top:50%; transform: translateY(-50%)
 
}
#Faqsss .faq_list li a:hover:before, #Faqsss .faq_list li a:focus:before{
	background: rgba(0,0,0,1) url(../images/home2/I_FAQ.svg) center no-repeat;}
#Faqsss .faq_list li a:hover, #Faqsss .faq_list li a:focus{ text-decoration: none}
#Faqsss .faq_list li a .label_Q{
	display: inline-block; line-height: 24px;
	font-size: 14px;
	font-family: 微软雅黑;
    font-weight: bold;
	padding: 0 14px;
	color: #fff;
	background: #000;
	border-radius: 15px;
}

#Faqsss .faq_list li a h4{
	font-size: 2.5em;
	font-family: 微软雅黑;
    font-weight: bold;
	color: #000;
	display: block
}

#Faqsss .faq_list li a p{
	display: block;
	padding-top: 5px;
	margin-top: 10px;
	border-top: 1px dashed rgba(0,0,0,0.2);
	font-size: 1.7em;
	font-weight: bold;
	margin-bottom: 0
}

@media (max-width: 1100px) {
    #Feedbacks .flex_part dl {
        width: 100%;
        margin: 0;
        margin-bottom: 15px;
    }
}
@media (max-width: 500px) {
	#Feedbacks .max:after{ display: none}
	#Feedbacks dd {
        display: block;
        text-align: center;
		padding: 20px 25px 30px;
    }
    #Feedbacks dd .img_bg {
        width: 100px;
        height: 100px;
		display: inline-block;
        margin-bottom: 0px; border: 6px solid #fff;
    }
	#Feedbacks dd h4, .txts {
        font-size: 1.6em;
    }
	#Feedbacks dd p {
        font-size: 1.5em;
    }
	#Feedbacks dd .m_txt{
		width: 100%; text-align: center
	}
	#Feedbacks:before, #Feedbacks:after {
    	background-size: 100% 50%;
 
	}
	#Faqsss .faq_list{ margin-bottom: 20px}
	#Faqsss { padding: 100px 0 50px 0;}
	#Feedbacks { padding: 20px 0 20px;}
	#Faqsss{ background: url(../images/home2/FAQ-BG-s100.webp) center;}

}

@media (max-width: 1200px) {
    #Faqsss .faq_list li {
        width: calc(50% - 10px);
    }
	#Faqsss .faq_list li a h4 {
        font-size: 2em;
    }
	#Faqsss .faq_list li a {
        padding-left: 75px;
    }
	#Faqsss .faq_list li a:before {
        width: 60px;
        height: 90px;
        left: 0;
    }
}
@media (max-width: 900px) {
    #Faqsss .faq_list li a {
        padding-left: 75px;
    }
	#Faqsss .faq_list li a:before {
        width: 60px;
        height: 90px;
        left: 0;
    }
}
@media (max-width: 660px) {
    #Faqsss .faq_list li {
        width: 100%;
        margin: 0 0 10px 0;
    }
	#Faqsss .faq_list li a h4 {
        margin-bottom: 5px;
		
    }
	#Faqsss .faq_list li a p {
        padding-top: 5px;
    }
	#Faqsss .faq_list li a {
        padding-left: 60px;
    }
	#Faqsss .faq_list li a:before {
        width: 50px;
        height: 70px;
		top: 35px;
    }
}
@media (max-width: 500px) {
	#Faqsss .faq_list li a h4 {	font-size: 1.75em;}
	#Faqsss .faq_list li a p{font-size: 1.5em;}
}

#Steps_join{
	position: relative;
	padding: 70px 0;
	background:  url(../images/home2/red-dark-bg.webp) center no-repeat;
	background-size: cover !important;
	background-attachment: fixed;
	border-top: 2px solid #e0af3c
}
#Steps_join:before{
	content: "";
	display: block;
	width: 21vw;
	height: 21vw;
	position: absolute;
	right: -6vw;
	top:0;
	transform: translateY(-45%);
	z-index: 1;
	background:  url(../images/home2/rose.webp) center no-repeat;
	background-size: contain;
}

#Steps_join h3 {
    font-size: 2.4em;
}

#Steps_join .cards.part3{ margin-bottom: 45px}

#Steps_join .cards.part3 .ico_ball .ic_1{ background-image:  url(../images/home2/ico-ai-plus.svg) }
#Steps_join .cards.part3 .ico_ball .ic_2{ background-image:  url(../images/home2/ico-scan.svg) }
#Steps_join .cards.part3 .ico_ball .ic_3{ background-image:  url(../images/home2/ico-help.svg) }
#Steps_join .lines_box{ margin-bottom: 80px}

#Steps_join .forget{
	display: block; text-align: center;
	margin-top: 40px
}

#Steps_join .forget a{
	color:#fff;
	font-size: 2em;
	display: inline-block;
	position: relative;
}

#Steps_join .forget a:hover{ color:#ffdf00; font-weight: bold}

#Steps_join .forget a:before, #Steps_join .forget a:after{
	content: "";
	display: block;
	width: 75px;
	height: 1px;
	border-bottom: 1px solid #fff;
	position: absolute;
	top: 50%;
}

#Steps_join .forget a:before{left: -80px;}
#Steps_join .forget a:after{ right: -80px;}
#Steps_join  .L_man, #Steps_join  .R_girl{
	max-width: 18vw;
    height: auto !important;
	position: absolute;
}
#Steps_join  .L_man{
	max-width: 20vw
}

#Steps_join  .L_man {
    position: absolute;
    left: -50px;
    bottom: 0;
}

#Steps_join .R_girl {
    position: absolute;
    right: -20px;
    bottom: 0;
}
@media (max-width: 800px) {
   #Steps_join .L_man {
        max-width: 55%;
        left: 35px;
        z-index: 3;
    }
	 #Steps_join .R_girl {
        right: 35px;
        max-width: 45%;
    }
	
   #Steps_join{
        padding-bottom: 90vw;
    }
}
@media (max-width: 660px) {
	#Steps_join  h3 {font-size: 1.8em; }
	.cards.part3 li {width: 100%; margin-bottom: 15px}
	.cards li {	padding: 30px 30px 40px;}
	.R_btn { margin: 5px; line-height: 55px; font-size: 1.5em;}
	#Steps_join{background:  url(../images/home2/red-dark-bg-500.webp) center no-repeat;}
	#Steps_join:before{ display: none}
}

.scrollToLog {
    display: none;
}

.scrollToLog .btn-red {
    background-color: #DA3C2D;
    color: #fff;
    border: 1px solid #DA3C2D;
}
@media (max-width: 767px) {
    .scrollToLog {
        color: #fff;
        position: fixed;
        bottom: 40%;
        right: 0;
        width: 40px;
        height: 70px;
        z-index: 1005;
        display: block;
    }
	    .scrollToLog {
        bottom: 50%;
    }
	    .scrollToLog .btn-md {
        margin: 3px 0;
        line-height: 1.2;
			font-size: 15px;
        border-radius: 6px;
		padding: 15px 8px;
        border-radius: 6px 0 0 6px;
		opacity: 0.6;	
    }
 
 
	.scrollToLog .btn-md:hover{ opacity: 1}
}


/*AOS ZOOM*/
.aos_zom{ transition: all 0.5s; transform-origin: center; transition-delay: 0.3s}

.aos_zom.out{
	opacity: 0;
	transform: translate(0,-100%) scale(2)
}
.aos_zom.show{
	opacity: 1;
	transform: translate(0%) scale(1)
}



.L_man.aos_zom.out{
	opacity: 0;
	transform: translate(-50%,0%)  
}
.L_man.aos_zom.show{
	opacity: 1;
	transform: translate(0%,0%)  
}

.R_girl.aos_zom.out{
	opacity: 0;
	transform: translate(50%,0%)  
}
.R_girl.aos_zom.show{
	opacity: 1;
	transform: translate(0%,0%)  
}


.scroll{
	display:block;
	position: absolute;
	left:50%;
	margin-left:-21px;
	bottom:60px;
	z-index:5;
	width:42px;
	height:42px;
	border-radius: 50%;
	 background-image: url(../images/home2/scroll.svg);
    background-position: center;
    background-repeat: no-repeat;
	background-color: rgba(0,0,0,.4);
	background-size: 80%;
	border: 1px solid #fff;
	-webkit-animation-name: scroll;
    animation-name: scroll;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation: scroll 2s infinite;
    -webkit-animation-fill-mode: both;
	animation: scroll 2s infinite;
    animation-fill-mode: both; 
	
	}

.scroll:hover{ background-color: rgba(0,0,0,.8);}

@keyframes scroll{
    0% { bottom:30px;}
   50% { bottom:20px;}
  100% { bottom:30px;}
}

#sp_go_top {
    position: fixed;
    width: 50px;
    height: 50px;
    font-size: 0;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    right: 10px;
    bottom: 10px;
    z-index: 20000;
    background-image: url(https://www.matchurwish.com/Public/images/gotop.png);
    background-position: center;
    background-repeat: no-repeat;
}
#sp_go_top:hover{background-color: rgba(0, 0, 0, 0.8);}

@media (max-width: 767px) {
	.scroll{ background-color: rgba(0, 0, 0, 0); border: none;}
	
}
