@charset "UTF-8";

body, html{
-webkit-text-size-adjust: 100%;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-family: 'Noto Sans TC', Arial, Helvetica, sans-serif;}
body{ overflow-x: hidden; background: #fff;}

p{ font-size: 1rem; color: #333; line-height: 2; font-weight: 500;}
p span{ color: #FD5A2C; font-weight: 700;}

.kv_wrap{ width: 100%; display: inline-block;
background:#fdf4e5 url(../img/kv-bg.jpg) center top no-repeat; background-size: 2560px;}
.kv_td{ width: 100%; height: 550px;}
.kv_td ul{ width: 1450px; height: 100%; position: relative; left: 50%; margin-left: -725px;}
.kv_td ul li{ position: absolute;}
.kv_td ul li img{ width: 100%;}
.kv-photo1{ width: 1098px; left: 177px; top: 0;}
.kv-photo2{ width: 463px; right: 0; top: 0;}
.kv-tit1{ width: 560px; left: 0; top: 0;}
.kv-peo1{ width: 177px; left: 0; top: 275px;}
.kv-peo2{ width: 129.5px; left: 177px; top: 356px;}
.kv-peo3{ width: 253px; left: 306px; top: 275px;}
.kv-cat{ width: 427.5px; left: 560px; top: 356px;}
.kv-tit2{ width: 681px; left: 594px; bottom: 0;}

.m_kv, .mid_kv{ display: none;}

.nav_wrap{ width: 100%; background: #fff;}
.menu{ text-align: center; display: flex; justify-content: center; align-items: center;}
.menu li{ font-size: 1.25rem; font-weight: 700; display: inline; cursor: pointer; margin: 12px 0; border-right: 1px solid #111;}
.menu li:last-child{ border-right: none;}
.menu li a{ display: inline-block; color: #111; padding: 8px 60px; transition: 0.5s;}
.menu li a:hover{ color:#FD5A2C; transition: 0.5s;}
.mobile{ display: none;}
.m_tit{ display: none;}

.cd-auto-hide-header{
-webkit-transform: translateZ(0);
transform: translateZ(0); will-change: transform;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;}
.cd-secondary-nav{ position: relative; z-index: 9;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
-webkit-transition: -webkit-transform .5s;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;}
.cd-secondary-nav.fixed{ position: fixed; top: 0; box-shadow: 1px 2px 18px 1px #cacaca;}
.cd-secondary-nav.slide-up{
-webkit-transform: translateY(-85px);
-ms-transform: translateY(-85px);
transform: translateY(-85px);}

section{ width: 1920px; position: relative; left: 50%; margin-left: -960px; overflow: hidden; padding-top: 80px;}
.product_td{ width: 1200px; position: relative; left: 50%; margin-left: -600px; text-align: center;}
.last{ padding-bottom: 40px;}
.tit_wrap{display: inline-block; margin-bottom: 40px;}
.tit_wrap h2{color: #111; font-weight: 900; font-size: 3rem; line-height: 1.375; letter-spacing: 3px; position: relative; display: inline-block;}
.tit_wrap h2 span, .tit_wrap ul li span{color: #FD5A2C;}
.tit_wrap ul{ margin: 20px 20px 0 30px;}
.tit_wrap ul li{ list-style-type: disc; text-align: left; margin-bottom: 5px; color: #333; font-size: 1.125rem; line-height: 2; font-weight: 500;}
.tit_wrap ul li span{font-size: 1.125rem;}
.division-discount{ display: flex; justify-content: space-between; align-items: center; background: #FFFAF6; padding: 30px 90px;}
.content{ width: 60%; text-align: left;}
.content p{ font-size: 1.125rem;}
p.att{ font-size: 0.94rem; display: block; color: #666; font-weight: normal; line-height: 2; margin-top: 20px; font-weight: 500;}
.content ul{ display: inline-block; font-size: 0.94rem; color: #666; line-height: 2; text-align: left; padding: 0 20px 0 38px; font-weight: 500;}
.content ul li{ list-style-type: decimal;}
.content ul li a{ color: #36bec0; cursor: pointer;}
.content ul li a:hover{ color: #43c9cb; text-decoration: underline; transition: .5s;}
.division-map{ display: flex; justify-content: space-between; margin-bottom: 40px;}
.content-intro{ width: 45%; text-align: left; padding: 0 15px 0 30px;}
.content-intro p{ margin-bottom: 10px; font-size: 1.125rem;}
.content-intro-pic{ width: 55%; overflow: hidden; position: relative;}
.content-intro-pic img{ width: 100%; display: block; transition: transform 0.4s ease;}
.content-intro-pic img:hover{ transform: scale(1.2);}
.m-br{ display: none;}

/* video */
#video{ width: 1200px; position: relative; left: 50%; margin-left: -600px; background: #000;}
.video-container{ width: 1000px; position: relative; padding-bottom: 56.25%; height: 0; margin: 0 auto;}
.video-container iframe{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #000;}
.video-nav{ list-style: none; padding-left: 0; display: flex; background: #FFFAF6; padding: 20px 30px; flex-wrap: wrap;}
.video-nav li{ border: 1px solid #CA4931; border-radius: 30px; margin: 5px; transition: .5s;}
.video-nav li a{ text-decoration: none; display: block; color: #fff; padding: 10px 20px; cursor: pointer;}
.video-nav li:hover{ background: rgba(202, 73, 49, 0.1); color: #111; transition: .5s;}
.video-nav li p{ color: #CA4931; font-weight: 700;}

.tabs{ font-size: 0; list-style: none; padding-left: 0; display: flex; justify-content: space-between;}
.tabs li{ width: 24.5%; text-align: center;}
.tabs li a{ text-decoration: none; display: block; padding: 6px 20px; position: relative; color: #fff;}
.tabs li a h2, .tabs li a p{ position: relative; z-index: 1; color: #fff;}
.tabs li a::before,.tabs li a::after{
content: ''; position: absolute; backface-visibility: hidden;
z-index: 0; bottom: 0; width: 50%; height: 100%; transition: .5s;}
.tabs li a::before{ left: 0; border-radius: 10px 0 0 0; transform-origin: left bottom;}
.tabs li a::after{ border-radius: 0px 10px 0 0; right: 0; transform-origin: right bottom;}
.tabs li a::before, .tabs li a::after{ background: #F58C59;}
.tabs li.active a h2, .tabs li.active a p, .tabs li a:hover h2, .tabs li a:hover p{ color: #fff;}
.tabs li.active a::before, .tabs li.active a::after,
.tabs li a:hover::before, .tabs li a:hover::after{ background: #CA4931; transition: .5s;}
.tabs li h2{ font-size: 1.5rem; display: inline; font-weight: 700;}
.tabs li p{ font-size: 1rem; display: inline; font-weight: 700; padding-left: 10px;}

.entry-content{ width: 100%; margin-bottom: 10px; border-radius: 0 0 5px 5px;}
.product_list{ width: 100%; background: #fff; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; display: flex; text-align: left; flex-wrap: wrap;}
.product_list li{ border-right: 1px solid #B0B7BB; border-left: 1px solid #B0B7BB; border-bottom: 1px solid #B0B7BB; width: 33.33%; display: inline-flex; align-items: stretch;}
.product_list li:nth-child(2), .product_list li:nth-child(5){ border-right: none; border-left: none;}
.product_list li:nth-child(7){ border-right: none;}
.product_list li.noo{ display: block;}

a.menulink{ transition: .5s; flex-grow: 1; display: flex; flex-direction: column;}
a.menulink:hover h2{ color: #CA4931; transition: .5s;}
a.menulink:hover img{ opacity: 80%; transition: .5s;}
a.menulink:hover .card_btn{ background: #CA4931; transition: .5s;}

.card{ padding: 15px; flex-grow: 1; display: flex; flex-direction: column;}
.card_td img{ width: 100%; margin-bottom: 10px; transition: .5s;}
.card_td h2{ font-size: 1.375rem; color: #111; font-weight: 500; transition: .5s; margin-bottom: 20px;}
.card_td p{ line-height: 1.75; color: #333; margin-bottom: 10px;}
p.feature{ border: 1px solid #F58C59; padding: 2px 16px 3px; font-size: 0.88rem; color: #F58C59; display: inline-block; border-radius: 3px; font-weight: 700;}
p.highlights{ border: 1px solid #56C5A3; padding: 2px 16px 3px; font-size: 0.88rem; color: #0DAE71; display: inline-block; border-radius: 3px; font-weight: 700; margin-top: 20px;}
.product_list li ul.sp{ margin-bottom: 10px;}
.product_list li ul.sp li{ width: 100%; border: none; color: #333; font-size: 1rem; line-height: 1.75; margin-bottom: 5px;}
.product_list li ul.sp li::before{ content: '★'; margin-right: 5px;}

.card_price{ font-size: 0.813rem; color: #555; font-weight: normal; text-align: right; margin-top: auto;}
.big{ color: #FD5A2C; font-size: 1.375rem; text-decoration: none; font-weight: 700; padding: 0 3px; line-height: 1.5;}

.card_btn{ font-size: 1rem; color: #fff; background: #FD5A2C; border-radius: 20px; text-align: center; padding: 5px 25px 7px; margin-top: 8px; float: right; transition: .5s; font-weight: 700;}

.cta{background: #FD5A2C; color: #fff; font-weight: 700; font-size: var(--first-size); display: inline-block; border-radius: 40px; margin: 30px 0 0;}
.cta a{ display: block; width: 100%; height: 100%; padding: 0.75rem 5rem; text-decoration: none; cursor: pointer; border-radius: 40px; color: #fff; transition: .5s;}
.cta a:hover{ text-decoration: none; background: #CA4931; transition: .5s;}

/* back to top */
#back-top{ position: fixed; bottom: 100px; right: 0; z-index: 999;
text-align: center; width: 50px; height: 50px; display: block; border-radius: 3px;
background: rgba(85,85,85,0.5); line-height: 50px; font-size: 24px; color: #fff; font-weight: normal;
-webkit-transition: 1s; -moz-transition: 1s; transition: 1s;}
#back-top a{ display: block; width: 100%; height: 100%; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; color: #fff;}
#back-top:hover{ background-color: rgba(85,85,85,0.3);}

@media screen and (max-width: 1500px){
section{ width: 100%; left: 0; margin-left: 0;}
}

@media screen and (max-width: 1399px){
.kv_wrap{ display: none;}
.mid_kv{ display: block; width: 100%;}
.mid_kv img{ width: 100%;}
}

@media screen and (max-width: 1250px){
.product_td, #video{ width: 90%; left: 0; margin-left: 5%;}
.division-discount{ padding: 30px 60px;}
.video-container{ width: 100%;}
.cta{font-size: var(--third-size);}
}

@media screen and (max-width: 1023px){
.mid_kv{ display: none;}
.m_kv{ display: block; width: 100%;}
.m_kv img{ width: 100%;}
.menu li a{ padding: 8px 40px;}
.btn_wrap{ padding-bottom: 60px;}
.rg-container{ width: 100%;}
.division-discount{ padding: 30px;}
.video-nav{ padding: 20px;}
.tabs li a{ padding: 6px 20px 8px;}
.tabs li p{ display: block; padding-left: 0; line-height: 1.5;}
}

@media screen and (max-width: 850px){
.video-nav li{ margin-bottom: 10px;}
}

@media screen and (max-width: 800px){
section{ padding-top: 60px;}
.tabs li h2,.tabs li p{ font-size: 1.125rem; padding-right: 0; padding-left: 0;}
.tabs li p, .product_list li ul li{ font-size: 1.125rem;}
.product_list li{ width: 50%;}
.product_list li:nth-child(2){ border-right: 1px solid #B0B7BB;}
.product_list li:nth-child(3){ border-right: none;}
.product_list li:nth-child(5){ border-left: 1px solid #B0B7BB;}
.product_list li.Zhushan{ border-right: 1px solid #B0B7BB;}
.big{ font-size: 1.25rem;}
.menu li{ font-size: 1.125rem;}
.menu li a{ padding: 8px 25px; font-weight: 700;}
.cen{ text-align: left;}
.tit_wrap h2{ font-size: 2.5rem;}
.product_list li.noo{ display: none;}
.division-discount{ flex-wrap: wrap; justify-content: center;}
.content{ width: 100%;}
.division-map{ flex-wrap: wrap;}
.content-intro{ width: 100%; padding: 0;}
.content-intro-pic{ width: 100%; margin-bottom: 10px;}
}

@media screen and (max-width: 600px){
.entry-content{ border-radius: 5px;}
.nav_wrap{ position: relative; z-index: 999;}
.mobile{ display: block;}
.nav_wrap ul{ padding: 0; opacity: 0;}
.menu{ margin-top: 60px; width: 100%; height: 0; padding: 0; pointer-events: none; line-height: 40px; flex-wrap: wrap; opacity: 0; transition: height 0.3s ease, opacity 0.3s ease; background: #f4f4f4;}
.menu.open{ height: auto; opacity: 1; pointer-events: auto;}
.menu li{ display: block; font-size: 1rem; font-weight: normal; width: 100%;
margin: 0; border-bottom: 1px solid #999; border-right: none;}
.menu li:last-child{ border-bottom: none;}
.menu li a{ color: #333; display: block; width: 100%; padding: 5px;}
.menu li:after{ content: none;}
.menu li.menuLink a{ display: block; padding: 0; height: auto;}
.nav{ width: 65px; height: 0; color: #333;}
.hamburger{ font-size: 50px; display: inline-block; width: 38px; height: 38px; margin: 0 auto; padding: 0;
cursor: pointer; transition: transform .2s ease-in-out; -moz-transition: transform .2s ease-in-out;
-webkit-transition: transform .2s ease-in-out; margin: 15px 12px 0 12px;
vertical-align: middle; border: 0 none; background: transparent;}
.hamburger::-moz-focus-inner{ padding:0;border:0 none;}
/*** Focus fix for Chrome*/
.hamburger:focus{ outline: 0;}
/*** Styling the icon*/
.hamburger:before, .hamburger:after{ content: ""; box-sizing: border-box;}
.hamburger:before, .hamburger .icon, .hamburger:after{ display: block; width: 40px; height: 2px; margin: 0 0 6px; transition: transform .5s ease-in-out;
-moz-transition: transform .5s ease-in-out; -webkit-transition: transform .5s ease-in-out; background: #333;}
/*** Styles for the active `.hamburger` icon*/
.hamburger.active:before, .hamburger.active .icon, .hamburger.active:after{ background: #333;}
/*** VERTICAL HAMBURGER*/
.hamburger.hamburger-vertical.active{ transform: rotate(270deg); -moz-transform: rotate(270deg); -webkit-transform: rotate(270deg);}
/*** CLOSE/CANCEL/CROSS*/
.hamburger.hamburger-cancel.active .icon{ transform: scale(0);-moz-transform: scale(0); -webkit-transform: scale(0);}
.hamburger.hamburger-cancel.active:before{ transform: translateY(7px) rotate(135deg); -moz-transform: translateY(7px) rotate(135deg);  -webkit-transform: translateY(7px) rotate(135deg);}
.hamburger.hamburger-cancel.active:after{ transform: translateY(-9px) rotate(-135deg); -moz-transform: translateY(-9px) rotate(-135deg); -webkit-transform: translateY(-9px) rotate(-135deg);}
.m_tit{ display: block; position: absolute; line-height: 62px; left: 70px;}
.m_tit h2{ color: #333; font-size: 1.125rem; font-weight: 700;}
.tabs{ justify-content: left; flex-wrap: wrap; margin-bottom: 20px;}
.tabs li{ width: auto; margin: 8px 5px;}
.tabs li a{ padding: 6px 25px 8px;}
.tabs li a::before{ border-radius: 20px 0 0 20px;}
.tabs li a::after{ border-radius: 0 20px 20px 0;}
.tabs li p{ display: inline;}
.product_list li{ width: 100%;}
.product_list li:nth-child(1){ border-top: 1px solid #B0B7BB;}
.product_list li:nth-child(2){ border-left: 1px solid #B0B7BB;}
.product_list li:nth-child(3),.product_list li:nth-child(5), .product_list li:nth-child(7){ border-right: 1px solid #B0B7BB;}
}

@media screen and (max-width: 500px){
.big{ font-size: 1.125rem; line-height: 1;}
.video-container{ padding-bottom: 75%;}
.tit_wrap{ margin-bottom: 20px;}
.tit_wrap h2{ font-size: 2rem;}
.division-discount, .video-nav{ padding: 10px;}
.video-nav li a{ padding: 10px 15px;}
.cta{font-size: var(--fourth-size);}
}

@media screen and (max-width: 350px){
.big{ font-size: 1rem;}
.m-br{ display: block;}
}

/* animation */
.slideRight{
	animation: slideRight 2s cubic-bezier(0.36, 0, 0.66, -0.56);
  visibility: visible !important;	
}

@keyframes slideRight {
	0% { transform: translateX(-20%); opacity: 0;}
  50% { opacity: 0;}
	100% { transform: translateX(0%); opacity: 1;}	
}

.slideDown{
	animation: slideDown 2s cubic-bezier(0.36, 0, 0.66, -0.56);
	visibility: visible !important;						
}

@keyframes slideDown {
	0% { transform: translateY(-20%); opacity: 0;}
  50% { opacity: 0;}	
	100% {transform: translateY(0%); opacity: 1;}		
}

.fadeIn1{
	animation: fadeIn1 .5s cubic-bezier(0.36, 0, 0.66, -0.56);
	visibility: visible !important;	
}

@keyframes fadeIn1 {
	0% { opacity: 0;}
	100% { opacity: 1;}		
}

.fadeIn2{
	animation: fadeIn2 1s cubic-bezier(0.36, 0, 0.66, -0.56);	
	visibility: visible !important;	
}

@keyframes fadeIn2 {
	0% { opacity: 0;}
  40% { opacity: 0;}
	100% { opacity: 1;}		
}

.fadeIn3{
	animation: fadeIn3 1.5s cubic-bezier(0.36, 0, 0.66, -0.56);
	visibility: visible !important;	
}

@keyframes fadeIn3 {
	0% { opacity: 0;}
  60% { opacity: 0;}
	100% { opacity: 1;}		
}

.fadeIn4{
	animation: fadeIn4 2s cubic-bezier(0.36, 0, 0.66, -0.56);
	visibility: visible !important;	
}

@keyframes fadeIn4 {
	0% { opacity: 0;}
  70% { opacity: 0;}
	100% { opacity: 1;}		
}

.pulse{
	animation: pulse 3s infinite;
}

@keyframes pulse {
	0% { transform: scale(1);}
  30% { transform: scale(1);}
	35% { transform: scale(0.9);}
  40% { transform: scale(1);}
	45% { transform: scale(0.9);}
  50% { transform: scale(1);}
	100% { transform: scale(1);}			
}