﻿@charset "utf-8";
/* CSS Document */

#main_banner{ width: 100%; background: #000}
#banner{ position: relative; width: 100%; margin: 0}

#banner .item{	position: relative; width: 100vw; height: 688px; overflow: hidden}

#banner .item .img{display: block; width: 100%; height: 688px; background-position: center top; background-size: cover; position: absolute; left: 0; top: 0; transform: scale(1);}

.home #main .container{
	width: 90%; max-width: 1500px
}
.home #main .container.smaller{ max-width: 63VW}
#banner .item  .slogn{
	position: absolute;
	left: 15%;
	top: 50%;
	transform: translateY(-50%);
	color: #fff; line-height: 1.5;
	z-index: 2
}

#banner .item  .slogn .h1{
	display: block;
	font-size: 5em;
	color: #e6d6ae;
	margin-bottom: 0.5em;
	text-shadow: 1px 1px 3px #000
}
#banner .item  .slogn p{
	font-size: 2em;
	font-weight: bold;
	color: #fff;
	line-height: 2;
	text-shadow: 1px 1px 2px #000
}
#banner .slick-prev, #banner .slick-next{
	width: 44px; height: 44px; background-color: rgba(0,0,0,0.5); background-position: center; background-repeat: no-repeat; background-size: contain; transform-origin: center; background-image: url(../images/ICON/ico-com-back-btn.svg);
	opacity: 0; transition: all 1s; border-radius: 50%;
	z-index: 1000
}
#banner .slick-next{ background-image: url(../images/ICON/ico-com-next-btn.svg);; right:150px; left: auto}
#banner .slick-prev{ left: 150px; right: auto;}
#banner .slick-prev:hover, #banner .slick-next:hover{ background-color: rgba(255,255,255,0.3)}
#banner:hover .slick-next, #banner:hover .slick-prev{ opacity: 1}
#banner:hover .slick-next{  right: 50px}
#banner:hover .slick-prev{ left: 50px}
.logi_btns{
	margin-top: 50px;
}

.logi_btns a{ display: inline-block; margin-right: 15px; font-size: 2.2em; padding: 0 40px; line-height:60px; border-radius: 15px; box-shadow: 1px 1px 5px #000 }
.logi_btns.txt_center a{ margin: 8px;}
.logi_btns a.join{ background-color: #d42715; color: #fff}
.logi_btns a.login{ background-color: #fff; color: #363A43;}

.logi_btns a:hover{
	/*background: #8E6B3E !important; color: #fff !important;*/
	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;
}


#Reviue_slick .img_bg{ width: 100%; height: 0; padding-bottom: 100%; background-position: center; background-size: cover; display: block}

#Reviue_slick #show_4{ display:block; list-style: none; padding: 0; margin: 0; position: relative;}

#Reviue_slick #show_4 .item{ display: block; position: relative;}

#Reviue_slick #show_4 .item em{
	display: block; box-sizing: border-box; line-height: 1; padding: 2em 0 1.5em 0;
	font-size: 3em; color: #fff;
	text-align: center; font-style: normal; 
	background: -webkit-linear-gradient(rgba(0,0,0,0) 6%, rgba(0,0,0,0.6) 49%, rgba(0,0,0,0.7) 100%);
	background: -o-linear-gradient(rgba(0,0,0,0) 6%, rgba(0,0,0,0.6) 49%, rgba(0,0,0,0.7) 100%);
	background: linear-gradient(rgba(0,0,0,0) 6%, rgba(0,0,0,0.6) 49%, rgba(0,0,0,0.7) 100%); 
	position: absolute; left: 0; bottom: 0; width: 100%;
	z-index: 2
}

#Reviue_slick #show_4 .slick-dots{
	width: 100%;
	position: absolute;
	bottom: 10px;
	text-align: center;
}
#Reviue_slick #show_4 .slick-dots li{ display: inline-block; width: 10px; height: 10px;  border-radius: 50%; margin: 0 5px; border: none !important; background: rgba(255,255,255,0.5);  padding: 0; }
#Reviue_slick #show_4 .slick-dots li.slick-active{background: rgba(255,255,255,1) }
#Reviue_slick #show_4 .slick-dots li button{width: 10px; height: 10px; padding: 0 ; margin: 0; display: inline-block; border: none !important;}
#Reviue_slick #show_4 .slick-dots li button:before{ display: none}


.N_title{ width: 100%; margin-bottom: 30px; }
.N_title h2{font-size: 5em;}
.N_title h2 span{ 
	margin-bottom: 18px;
     background: -webkit-linear-gradient(#161616 0%, #303030 25%, #666 50%, #000000 51%, #1c1c1c 80%, #131313 100%);
    background: -o-linear-gradient(#161616 0%, #303030 25%, #666 50%, #000000 51%, #1c1c1c 80%, #131313 100%);
    background: linear-gradient(#161616 0%, #303030 25%, #666 50%, #000000 51%, #1c1c1c 80%, #131313 100%) ;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-shadow: none;
	line-height: 1.2
}

.N_title.light h2 span{ display: inline-block; position: relative}
.flash_light span{ display: inline-block; position: relative}
.flash_light span:after{
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	position: absolute;
	right: -50px;
	top: -37px;
	background: url(../images/home_v2/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
}

.N_title.light h2 i.dash:after{ display: none}

#Why_us .flash_light span:after{ right: -25px}
.blogo.flash_light span:after{ top: 22%; right: -40px}

.flash_light.out span:after{ transform: scale(0.5) rotate(180deg); opacity: 0;}
.flash_light.show span:after{ transform: scale(1) rotate(0deg); opacity: 1;}

.N_title p{ display: block; font-size: 1.8em; font-weight: bold; color: #000}

.N_title.light h2 span, #banner .item .slogn .h1{ 
    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
}
.N_title.light p{ color: #fff; line-height: 1.6; text-shadow: 1px 1px 2.5px #000}

.dark{ background-color: #000; color: #fff;}

.txts{ font-size:1.8em; line-height: 1.8; }
.txts a{ font-weight: bold; color: #000; text-decoration: underline}
.txts a:hover{ color: #d42715}
.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}
#Last_choice{ text-align: center; color: #fff;}

.home .sec_pd{padding: 80px 0 ;}
#Brand{ position: relative; background: url(../images/home_v2/logos_bg.gif)}
#Brand .L_man{
	position: absolute;
	left: -50px;
	bottom: 0
}
#Brand .L_man, #Brand .R_girl{ max-width: 18vw; height: auto !important}
#Brand .L_man{ max-width: 20vw;  }
#Brand .R_girl{
	position: absolute;
	right: -20px;
	bottom: 0
}

.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.part6 li{
	padding:30px 15px
}

.cards.part6 li a{ color: #000 ; display: block}
.cards.part6 li a:hover h3{ color: #780002}
.cards h3{ margin-bottom: 15px}
.cards.part6 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/home_v2/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/home_v2/china-coner-gold.svg) center no-repeat;}



.cards.part3 li{ width: calc(33.3% - 20px)}
.cards.part4 li{ width: calc(25% - 20px)}
.cards.part6 li{ width: calc((100% / 6) - 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/home_v2/ico-scan.svg)}
.ico_ball.i_brand_2{ background-image: url(../images/home_v2/ico-safe.svg)}
.ico_ball.i_brand_3{ background-image: url(../images/home_v2/ico-best.svg)}

.ico_ball.i_why_1{ background-image: url(../images/home_v2/ico-like.svg)}
.ico_ball.i_why_2{ background-image: url(../images/home_v2/ico-scan.svg)}
.ico_ball.i_why_3{ background-image: url(../images/home_v2/ico-king940.svg)}
.ico_ball.i_why_4{ background-image: url(../images/home_v2/ico-talk.svg)}
.ico_ball.i_why_5{ background-image: url(../images/home_v2/ico-km.svg)}
.ico_ball.i_why_6{ background-image: url(../images/home_v2/ico-mwpoints.svg)}

.ico_ball.i_trust_1{ background-image: url(../images/home_v2/ico-ai-team.svg)}
.ico_ball.i_trust_2{ background-image: url(../images/home_v2/ico-eye.svg)}
.ico_ball.i_trust_3{ background-image: url(../images/home_v2/ico-social.svg)}
.ico_ball.i_trust_4{ background-image: url(../images/home_v2/ico-like.svg)}

.ico_ball.ic_1{ background-image: url(../images/home_v2/ico-scan.svg)}
.ico_ball.ic_2{ background-image: url(../images/home_v2/ico-help.svg)}
.ico_ball.ic_3{ background-image: url(../images/home_v2/ico-ai-plus.svg)}
.ico_ball.ic_4{ background-image: url(../images/home_v2/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}

#Why_us{ background: url(../images/home_v2/BG-HOUSE.webp) center top no-repeat; background-size: cover; background-attachment: fixed}

#Trust{ background: url(../images/home_v2/red-dark-bg.webp) center top no-repeat; background-size: cover; background-attachment: fixed}

#Vision{ background: url(../images/home_v2/about_bg.webp) center 20% no-repeat; background-size: cover}

#Vision .txts{ width: 50%}
#Vision .txts p{ margin-bottom: 15px}
#Vision .N_title, #Feedbacks .N_title { margin-bottom: 25px}
.space_bar{ display: block; width: 90px ; height: 5px; border: 0; background: rgba(0,0,0,0.35); margin-bottom: 30px}

#Feedbacks{ background: linear-gradient(rgba(232, 215, 177, 1) 0%, rgba(223, 189, 131, 1) 100%);}

#Feedbacks .space_bar{ margin: 0 auto 30px auto}
#Feedbacks .talks{ margin-top: 50px}

#Feedbacks dt{font-size: 3em; text-shadow: 2px 2px 0px #fff; margin-bottom: 30px; text-align: center; display: block; overflow: hidden}
#Feedbacks dt h3{ display: inline-block;  position: relative;}
#Feedbacks dt h3:before, #Feedbacks dt h3:after{
	content: "";
	display: block;
	border-top: 1px solid #000;
	position: absolute;
	width: 150%;
	height: 1px;
	top: 50%;
}

#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 dt h3:before{right: calc(100% + 15px)}
#Feedbacks dt h3:after{ left: calc(100% + 15px)}
#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}

#Feedbacks dd .img_bg{ width: 140px; height: 140px; border-radius: 50%; background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: contain}

#Feedbacks dd .m_txt{ width: calc(100% - 140px - 30px)}

#Feedbacks dd p{ font-size: 1.7em;}
#Feedbacks dd h4{ font-size: 2.2em; margin-bottom: 20px; }
#Feedbacks dd h4 big{ font-size: 136% ; margin-right: 10px;}
#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 .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}

#Club_940{ background: url(../images/home_v2/FAQ-BG-s.webp); background-attachment: fixed}
#Club_940 .cards{ margin-bottom: 30px}
#Club_940 h3{ font-size: 2.4em;}


#Trust .cards h3{ font-size: 2.5em}

.R_btn{    
	display: inline-block;
    margin: 10px;
    line-height: 40px;
    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;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
a.R_btn .ico.i_line {
    background-image: url(../images/home/ico-line-bk.svg);
    width: 1.6em;
    height: 1.45em;
}
a.R_btn .ico.i_plus{background-image: url(../images/home/ico-plus-bk.svg);}
a.R_btn:hover .ico.i_plus{background-image: url(../images/home/ico-plus-w.svg);}


.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
}
.R_btn.gold:hover .ico.i_line {
	  background-image: url(../images/home/ico-line-white.svg) !important;
}


#Reviue_slick{ border-top: 2px solid #e0af3c; border-bottom:2px solid #e0af3c}
#Last_choice .flex_part li{ padding-left: 40px; padding-right: 40px; width: 50%;     box-sizing: border-box;}
#Last_choice .flex_part li:first-child{ border-right:2px solid #e0af3c }

#Last_choice .blogo{ margin-bottom:60px; display: inline-block; position: relative}

#Last_choice .N_title{ margin-bottom: 30px}
#Last_choice .flex_bottom .N_title{ margin-bottom: 15px}
#Last_choice .logi_btns{ margin-top: 0}

#Last_choice .flex_bottom{ display: flex !important; align-items: flex-end;-webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;  flex-wrap: wrap;padding-bottom: 0px !important}

#Last_choice .flex_bottom .N_title,#Last_choice .flex_bottom .txt_center, .flex_bottom  .v_center  { width: 100%}
#Last_choice .flex_bottom { padding-left: 0 !important; padding-right: 0 !important}
#Last_choice .v_center{
	padding:100px 40px 50px 40px; box-sizing: border-box;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+45 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 45%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}

/*捲動出現動畫 代替 AOS*/
.aos_zom {
  transition: transform 0.6s ease, opacity 0.8s ease;
	transition-delay: 0.15s
}
.aos_zom.out {
  opacity: 0;
  transform: scale(2);
}
.aos_zom.show {
  opacity: 1;
  transform: scale(1);
}



/* 初始狀態 */
@keyframes zoomIn {
  0% {
    transform: scale(1.15);
  }
 	 100% {
    transform: scale(1);
  }
}

 @keyframes zoomLoop {
  0% {
    transform:  rotate(0deg);
  }
  50% {
    transform:   rotate(90deg);
  }
  100% {
    transform:  rotate(180deg);
  }
}

.zoom-loop {
  animation: zoomLoop 10s linear infinite;
}

#banner .item.slick-active .img {
  animation: zoomIn 6s forwards;
}
#Last_choice .N_title h2{ font-size: 4em}


@media (max-width: 1400px) {
	#Last_choice .N_title h2{ font-size: 3em}
	#banner .item, #banner .item .img{ height: 500px}
	#banner .item .slogn{ left: 100px; max-width: calc(100% - 140px);}
	#banner .item .slogn .h1{ font-size: 4em}
	.logi_btns a{font-size: 1.8em; padding: 0 25px; line-height: 55px;}
 }

@media (max-width: 1200px){
	.cards.part6 li{width: calc((100% / 3) - 20px);}	
	#Vision {
		background: url(../images/home_v2/about_bg.webp) 80% 20% no-repeat;
		background-size: cover;
	}
}

@media (max-width: 1100px){
	#Feedbacks .flex_part dl {  width: 100%; margin: 0; margin-bottom: 15px}
	#banner .item, #banner .item .img { height: 410px;    }
 	#banner .item .slogn .h1 {font-size: 4vw;}
	#banner .item .slogn p {font-size: 1.6em;}
	.logi_btns {margin-top: 25px;}
	#banner .item .img{background-position: 80% top;}
	#banner .item .slogn{ top: auto; transform: none; bottom: 40px; left:35px;  max-width: calc(100% - 70px);}
	
}

@media (max-width: 1000px) {
	#Last_choice .N_title h2{ font-size: 2.5em}
	#Last_choice .N_title p{ font-size: 1.5em}
	#Last_choice .blogo{ max-width: 30%}
	.cards.part4 li { width: calc(50% - 20px);}
	.cards.part3 li { width: 100%; margin: 0 0 15px 0}
 }

@media (max-width: 768px) {
	.home #main .container.smaller{ width: calc(100% - 120px); max-width: calc(100% - 120px)}
	#Brand   { padding-bottom: 85vw }
	#Brand .L_man, #Brand .R_girl{ max-width: 50%; z-index: 2}
	#Brand .L_man{ max-width: 55%; left: 35px; z-index: 3}
	#Brand .R_girl{ right: 35px ; max-width: 45%;}
	.N_title h2{ font-size: 7vw;}
	#banner .item .slogn p {font-size: 1.4em; line-height: 1.5}
	.logi_btns a {
        font-size: 1.6em;
        padding: 0 20px;
        line-height: 45px;
    }
	#banner .item .img{ opacity: 0; transition: opacity 1s}
	#banner .item.slick-active .img{ opacity: 0.7}
	#Last_choice .flex_part li{ width: 100%;}
	#Last_choice .flex_part li:first-child {
    border-right: 0; border-bottom: 2px solid #e0af3c
}
}

@media (max-width: 700px) {
	.cards.part6 li {
        width: calc((100% /2) - 20px);
    }
	#Vision .txts{width: 100%;}
	#Vision{ padding-bottom: 70VW; background:#e8d7b1 url(../images/home_v2/about_bg-s.webp) center bottom no-repeat; background-size: contain}
}

@media (max-width: 700px) {
	#banner .item .slogn .h1 {
        font-size: 5vw;
    }
}

@media (max-width: 500px) {
	 #banner .item .slogn .h1 {font-size: 2.8em;}
	.N_title h2{ font-size: 7vw;}
	#banner .item .slogn p br{ display: none}
	.cards.part6 li, .cards.part4 li{width: 100%; margin: 0 0 10px 0;}
	.R_btn{ font-size: 1.6em; margin: 5px}
	.flex_part li{ width: 100%}
	.home #Why_us .container{ width: 80%}
	#Last_choice .flex_part li:first-child{    border-right: 0; border-bottom: 2px solid #e0af3c;}
	.home .sec_pd { padding: 50px 0;}
	.cards.part6 li h3 br, #Last_choice .N_title p br{ display: none}
	.home #main .container{ width: 80%}
	#Feedbacks dd{ display: block; text-align: center;}
	#Feedbacks dd .img_bg{ display: inline-block; margin-bottom: 0px}
	#Feedbacks dd .m_txt{ width: 100%}
	#Feedbacks dt{ font-size: 2.2em}
	#Feedbacks dd h4,.txts {font-size: 1.6em;}
	#Feedbacks dd p{ font-size: 1.5em}
	#Reviue_slick #show_4 .item em{ font-size: 2em}
	#Last_choice .v_center{    padding: 150px 20px 50px 20px;}
	#Last_choice .R_btn.gold {padding: 0 1em;  margin: 5px;}
	#Last_choice .R_btn.gold .ico{ display: none; padding: 0 1em; margin: 5px}
	#Last_choice .blogo {max-width: 40%;margin-bottom: 35px;}
	.blogo.flash_light span:after {top: 23%;right: -18%;}
	#Feedbacks dd .img_bg{ width: 100px; height: 100px}
	#Brand .R_girl {right: 19px;}
	#Brand .L_man {left: 25px;}
	.cards.dark_gold h3, .cards.part6 li h3, #Club_940 h3{ font-size: 1.8em}
	#Trust .cards h3 {font-size: 2em;}
	.cards.dark_gold h3 big {font-size: 135%;}
	.flash_light span:after { height: 60px;width: 60px;right: -30px;top: -25px;}
	.ico_ball{ width: 80px; height: 80px;}
	#Why_us .flash_light span:after {right: -16px;}
	.N_title.light h2 span .dash{ display: none}
}