@charset "UTF-8";
:root{
--color-b: #00ade1;
}

body{overflow-x: hidden;}

p{font-size: var(--basics-size); color: var(--color-k); line-height: 2; font-weight: 500;}
p span{color: var(--color-b); font-weight: 700;}
iframe {width: 100%; height: 100%; border: none;}

.kv_wrap{width: 100%; display: inline-block;
background:#f4f5f0e5 url(../img/kv-bg.jpg) center top no-repeat; background-size: 2560px;}
.kv_td{width: 100%; height: 550px; float: left;}
.kv_td ul{width: 1200px; height: 100%; position: relative; left: 50%; margin-left: -600px;}
.kv_td ul li{position: absolute;}
.kv_td ul li img{width: 100%;}
.kv-map{width: 1200px; left: 0; top: 0;}
.kv-sub-tit{width: 372px; left: 141px; bottom: 0;}
.kv-tit{width: 1200px; left: 0; top: 0;}
.kv-photo1{width: 280px; left: -139px; bottom: 0;}
.kv-photo2{width: 324px; left: 513px; bottom: 0;}
.kv-photo3{width: 482px; left: 513px; bottom: 0;}
.kv-photo4{width: 345px; left: 995px; bottom: 0;}

.m_kv, .mid_kv{display: none;}

.nav_wrap{width: 100%; background: var(--color-w); float: left;}
.menu{text-align: center; display: flex; justify-content: center; align-items: center;}
.menu li{font-size: var(--third-size); font-weight: 700; display: inline; cursor: pointer; margin: 12px 0; border-right: 1px solid var(--color-bk);}
.menu li:last-child{border-right: none;}
.menu li a{display: inline-block; color: var(--color-bk); padding: 8px 60px; transition: 0.5s;}
.menu li a:hover{color:var(--color-b); transition: 0.5s;}
.mobile{display: none;}
.m_tit{display: none;}

.cd-auto-hide-header{transform: translateZ(0); will-change: transform; transition: transform .5s;}
.cd-secondary-nav{position: relative; z-index: 9; transform: translateZ(0); will-change: transform; transition: transform .5s;}
.cd-secondary-nav.fixed{position: fixed; top: 0; box-shadow: 1px 2px 18px 1px #cacaca;}
.cd-secondary-nav.slide-up{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: var(--color-bk); 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: var(--color-b);}
.tit_wrap ul{margin: 20px 20px 0 30px;}
.tit_wrap ul li{list-style-type: disc; text-align: left; margin-bottom: 5px; color: var(--color-k);}
.tit_wrap ul li, .tit_wrap ul li span{font-size: var(--fourth-size); line-height: 2; font-weight: 500;}
.division-discount{display: flex; justify-content: space-between; align-items: center; background: #eff8ff; padding: 30px 90px; margin-bottom: 40px;}
.content{width: 100%;}
.content p{font-size: var(--fourth-size);}
p.att{ font-size: var(--smallest-size); display: block; color: #666; font-weight: normal; line-height: 2; margin-top: 20px; font-weight: 500;}
.content ul{display: inline-block; font-weight: 700; color: var(--color-k); font-size: var(--fourth-size); text-align: left; margin-top: 20px;}
.content ul li{list-style-type: disc; margin-bottom: 10px;}
.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; align-items: center;}
.content-intro{width: 45%; text-align: left; padding: 0 15px 0 30px;}
.content-intro h2{font-size: var(--second-size); color: var(--color-b); margin-bottom: 5px;}
.content-intro p{margin-bottom: 10px; font-size: var(--fourth-size);}
.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;}
.first{flex-direction: row;}
.second{flex-direction: row-reverse;}

/* video */
#video{width: 1200px; position: relative; left: 50%; margin-left: -600px; background: var(--color-bk);}
.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: var(--color-bk);}
.tabs{font-size: 0; list-style: none; padding-left: 0; display: flex; justify-content: space-between; border-bottom: 1px solid var(--color-line);}
.tabs li{width: 49.5%; text-align: center;}
.tabs li a{text-decoration: none; display: block; padding: 6px 20px; position: relative; color: var(--color-w);}
.tabs li a h2, .tabs li a p{position: relative; z-index: 1; color: var(--color-grey);}
.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: #e3e4de;}
.tabs li.active a h2, .tabs li.active a p, .tabs li a:hover h2, .tabs li a:hover p{color: var(--color-w);}
.tabs li.active a::before, .tabs li.active a::after,
.tabs li a:hover::before, .tabs li a:hover::after{background: var(--color-b); transition: .5s;}
.tabs li h2{font-size: 1.5rem; display: inline; font-weight: 700;}
.tabs li p{font-size: var(--basics-size); display: inline; font-weight: 700; padding-left: 10px;}

.entry-content{width: 100%; float: left; margin-bottom: 10px; border-radius: 0 0 5px 5px;}
.product_list{width: 100%; background: var(--color-w); 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 var(--color-line); border-left: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); 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: var(--second-size); color: var(--color-bk); font-weight: 500; transition: .5s; margin-bottom: 20px;}
.card_td p{line-height: 1.75; color: var(--color-k); 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: var(--color-k); font-size: var(--basics-size); line-height: 1.75; margin-bottom: 5px;}
.product_list li ul.sp li::before{content: '★'; margin-right: 5px;}

.card_price{font-size: var(--smallest-size); color: #555; font-weight: normal; text-align: right; margin-top: auto; font-weight: 500;}
.big{color: var(--color-o); font-size: var(--second-size); text-decoration: none; font-weight: 700; padding: 0 5px; line-height: 1.5;}

.card_btn{font-size: var(--basics-size); color: var(--color-w); background: var(--color-b); border-radius: 20px; text-align: center; padding: 5px 25px 7px; margin-top: 8px; float: right; transition: .5s; font-weight: 700;}

.cta{width: 350px; height: 60px; background: var(--color-o); color: var(--color-w); font-weight: 700; font-size: var(--third-size); line-height: 60px; display: inline-block; border-radius: 40px; margin: 30px 0 0;}
.cta a{display: block; width: 100%; height: 100%; text-decoration: none; cursor: pointer; border-radius: 40px; color: var(--color-w); transition: .5s;}
.cta a:hover{text-decoration: none; background: #CA4931; transition: .5s;}

/* back to top */
#back-top{position: fixed; bottom: 200px; 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: var(--first-size); color: var(--color-w); font-weight: normal; transition: 1s;}
#back-top a{display: block; width: 100%; height: 100%; transition: 1s; color: var(--color-w);}
#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%; float: left;}
.mid_kv img{width: 100%;}
}

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

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

@media screen and (max-width: 800px){
section{padding-top: 60px;}
.tabs li h2,.tabs li p{font-size: var(--fourth-size); padding-right: 0; padding-left: 0;}
.tabs li p, .product_list li ul li{font-size: var(--fourth-size);}
.product_list li{width: 50%;}
.product_list li:nth-child(2){border-right: 1px solid var(--color-line);}
.product_list li:nth-child(3){border-right: none;}
.product_list li:nth-child(5){border-left: 1px solid var(--color-line);}
.product_list li.Zhushan{border-right: 1px solid var(--color-line);}
.big{font-size: var(--third-size);}
.menu li{font-size: var(--fourth-size);}
.menu li a{padding: 8px 25px;}
.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; text-align: left;}
.pc-br{display: none;}
.division-map{flex-wrap: wrap; margin-bottom: 20px;}
.content-intro{width: 100%; padding: 0;}
.content-intro-pic{width: 100%; margin-bottom: 10px;}
.content-intro h2, .card_td h2{font-size: var(--third-size);}
.content-intro h2{ margin: 5px 0;}
.content-intro p{font-size: var(--basics-size);}
.content ul{margin-left: 20px;}
}

@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;}
.nav{width: 60px; height: 0; color: var(--color-w);}
.menu{margin-top: 60px; width: 100%; padding: 0; pointer-events: none; flex-wrap: wrap; justify-content: left; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease-out, opacity 0.2s ease-out;}
.menu.open{background: var(--color-b); pointer-events: auto; max-height: 100vh; opacity: 1; transition: max-height 1.5s ease-out, opacity 1s ease-out;}
.menu li{font-size: var(--basics-size); font-weight: normal;  margin: 0; border-bottom: 1px dotted #006d49; width: 100%;}
.menu li a{display: block; width: 100%; font-weight: 700; padding: 15px 20px; color: var(--color-w);}
.menu li a:hover{color: var(--color-line);}
.menu li:last-child{border-bottom: none;}
.menu li:after{content: none;}

.hamburger{font-size: 50px; display: inline-block; width: 38px; height: 38px; margin: 0 auto; padding: 0; cursor: pointer; transition: transform .2s ease-in-out; margin: 15px 12px 0 12px; vertical-align: middle; border: 0 none; background: transparent;}
.hamburger:focus{outline: 0;}
.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; background: var(--color-bk);}
.hamburger.active .icon{transform: scale(0);}
.hamburger.active:before{transform: translateY(7px) rotate(135deg);}
.hamburger.active:after{transform: translateY(-9px) rotate(-135deg);}
.m_tit{display: block; position: absolute; line-height: 62px; left: 70px;}
.m_tit h2{color: var(--color-bk); font-size: var(--fourth-size); font-weight: 700;}
.tabs{ justify-content: left; flex-wrap: wrap; margin-bottom: 10px; border-bottom: none; justify-content: center;}
.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;}
.cta{width: 70%;}
.product_list li{width: 100%;}
.product_list li:nth-child(1){border-top: 1px solid var(--color-line);}
.product_list li:nth-child(2){border-left: 1px solid var(--color-line);}
.product_list li:nth-child(3),.product_list li:nth-child(5), .product_list li:nth-child(7){border-right: 1px solid var(--color-line);}
}

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

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

/* animation */
.fadeIn{
	animation: fadeIn 3s ease-in-out;	
	visibility: visible !important;	
}

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

.fadeIn2{
	animation: fadeIn2 2s;	
	visibility: visible !important;	
}

@keyframes fadeIn2 {
	0%{opacity: 0;}
  10%{opacity: 0;}
	100%{opacity: 1; transform: translateX(0%);}
}

.fadeIn3{
	animation: fadeIn3 2.5s;	
	visibility: visible !important;	
}

@keyframes fadeIn3 {
	0%{opacity: 0; transform: translateX(-8%);}
  70%{opacity: 0; transform: translateX(-8%);}
	100%{opacity: 1; transform: translateX(0%);}
}

.fadeIn4{
	animation: fadeIn4 1.5s;	
	visibility: visible !important;	
}

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

.fadeIn5{
	animation: fadeIn5 1.8s;	
	visibility: visible !important;	
}

@keyframes fadeIn5 {
  0%{opacity: 0;}
	60%{opacity: 0;}
	100%{opacity: 1; transform: translateX(0%);}
}

.fadeIn6{
	animation: fadeIn6 1.8s;	
	visibility: visible !important;	
}

@keyframes fadeIn6 {
  0%{opacity: 0;}
	80%{opacity: 0;}
	100%{opacity: 1; transform: translateX(0%);}
}

.slideRight{
	animation: slideRight 1s;
	visibility: visible !important;	
}

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