/* Fonts */
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Montserrat", sans-serif;
  --nav-font: "Lato", sans-serif;
}

/* Global Colors */
:root {
  --background-color: #ffffff;
  --background-color-rgb: 255, 255, 255;
  --default-color: #212529;
  --default-color-rgb: 33, 37, 41;
  --primary-color: #e84545;
  --primary-color-rgb: 232, 69, 69;
  --secondary-color: #32353a;
  --secondary-color-rgb: 50, 53, 58;
  --contrast-color: #ffffff;
  --contrast-color-rgb: 255, 255, 255;
}

/* Nav Menu Colors */
:root {
  --nav-color: #3a3939;
  --nav-hover-color: #e84545;
  --nav-dropdown-color: #3a3939;
  --nav-dropdown-hover-color: #e84545;
  --nav-dropdown-background-color: #ffffff;
  --nav-mobile-background-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}


html, body { position: relative; height: 100%;}
body { background: #f2f2f2; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000;margin: 0; padding: 0;}
a{ color:black !important; text-decoration:none !important;}

.swiper {width: 100%; height: 100%; }
.swiper-slide { text-align: center; font-size: 18px; display: flex; justify-content: center; align-items: center;}
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;}
.swiper-slide a{ color:white !important;}

.header{ background-color:rgba(0,0,0,0.3); height:80px; line-height:80px; width:100%; overflow:hidden; zoom:1; display:block; position:fixed; z-index:999; left:0; top:0; text-align:center;}
.header .logo{ max-height:80px;}
.footer{ background-color:rgba(255,255,255,0.8); height:40px; line-height:40px; width:100%; overflow:visible; zoom:1; display:block; position:fixed; z-index:999; left:0; bottom:0; text-align:center;}

.bt1{ font-size:3rem; line-height:4rem; color:white; font-weight:bold;}
.bt2{ font-size:2rem; line-height:3rem; color:white; font-weight:bold;}
.bt3{ font-size:2rem; line-height:3rem; color:white; font-weight:bold; margin-top:5rem;}
.bt3 a{ color:white;}
.homewx{ padding:20px; background:rgba(255,255,255,0.8); border-radius:20px; margin:0 auto; width:150px; text-align:center; color:black; line-height:10px;}
.homewx img{ width:150px; }

.btns{ text-align:center; margin-top:10rem; overflow:visible ;zoom:1; display:block;}
.btns a{ color:white; font-size:2rem; border:solid 2px #fff; border-radius:4rem; padding:1rem 2rem;}
.btns a:hover{ background-color:rgba(255,255,255,0.3);}

.home-trmrp{ background:url('/Resources/Web/TR/Imgs/home-mrp.jpg') center center;}
.home-trjxc{ background:url('/Resources/Web/TR/Imgs/home-jxc.jpg') center center;}
.home-trwd{ background:url('/Resources/Web/TR/Imgs/home-trwd.jpg') center center;}
.home-trkd{ background:url('/Resources/Web/TR/Imgs/home-trkd.jpg') center center;}
.home-dzkf{ background:url('/Resources/Web/TR/Imgs/home-dzkf.jpg') center center;}
.home-lxwm{ background:url('/Resources/Web/TR/Imgs/home-lxwm.jpg') center center;}


#divWeiXinCode{ position:fixed; bottom:45px; left:50%; margin-left:170px; line-height:12px; font-size:12px; color:#666 !important; z-index:999; width:120px; color:black; height:140px; border-radius:5px; overflow:hidden ;zoom:1; display:block; background:#fff; display:none; box-shadow:3px 3px 3px rgba(0,0,0,0.1);}
#divWeiXinCode img{ width:120px;}

.container{ margin:0 auto;}
.container .title{}
.container .title h1{ text-align:center;}

.mxheader{ height:80px; line-height:80px; width:100%; overflow:hidden; zoom:1; display:block; position:relative; z-index:999; left:0; top:0; text-align:center; border-bottom:solid 1px #ccc;}
.mxheader .logo{ max-height:80px; text-align:center;}
.mxheader .nav{ display:none;}
.flow{ width:100%; text-align:center;}
.flow img{ width:100%; }

.mt50{ margin-top:50px !important;}

.section-title {text-align: center;padding-bottom: 60px;}
.section-title h2 {font-size: 32px;font-weight: 700;position: relative;}
.section-title h2:before,.section-title h2:after {content: "";width: 50px;height: 2px;background: var(--primary-color);display: inline-block;}
.section-title h2:before {margin: 0 15px 10px 0;}
.section-title h2:after {margin: 0 0 10px 15px;}
.section-title p {margin-bottom: 0;}

.services .service-item {position: relative;padding-top: 40px;}
.services .service-item:before {content: "";position: absolute;top: 0;left: 0;right: 0;height: 2px;background: rgba(var(--default-color-rgb), 0.1);}
.services .service-item::after {content: "";position: absolute;top: 0;left: 0;width: 30px;height: 2px;background: var(--primary-color);border-right: 5px solid var(--background-color);}
.services .service-item .icon {width: 48px;height: 48px;position: relative;margin-right: 50px;line-height: 0;}
.services .service-item .icon i {color: rgba(var(--default-color-rgb), 0.7);font-size: 56px;transition: ease-in-out 0.3s;z-index: 2;position: relative;}
.services .service-item .icon:before {position: absolute;content: "";height: 30px;width: 30px;background: rgba(var(--primary-color-rgb), 0.3);border-radius: 50px;z-index: 1;bottom: -15px;right: -15px;transition: 0.3s;}
.services .service-item .title {font-weight: 700;margin-bottom: 15px;font-size: 18px;}
.services .service-item .title a {color: var(--secondary-color);}
.services .service-item .title a:hover {color: var(--primary-color);}
.services .service-item .description {line-height: 24px;font-size: 14px;}

.pricing {padding: 60px 0 120px 0;}
.pricing .section-title {margin-bottom: 40px;}
.pricing .pricing-item {box-shadow: 0 3px 20px -2px rgba(var(--default-color-rgb), 0.1);padding: 60px 40px;height: 100%;position: relative;border-radius: 15px;}
.pricing h3 {font-weight: 600;margin-bottom: 15px;font-size: 20px;text-align: center;}
.pricing .icon {margin: 30px auto 20px auto;width: 70px;height: 70px;background: var(--primary-color);border-radius: 50%;display: flex;align-items: center;justify-content: center;transition: 0.3s;transform-style: preserve-3d;}
.pricing .icon i {color: var(--background-color);font-size: 28px;transition: ease-in-out 0.3s;line-height: 0;}
.pricing .icon::before {position: absolute;content: "";height: 86px;width: 86px;border-radius: 50%;background: rgba(var(--primary-color-rgb), 0.2);transition: all 0.3s ease-out 0s;transform: translateZ(-1px);}
.pricing .icon::after {position: absolute;content: "";height: 102px;width: 102px;border-radius: 50%;background: rgba(var(--primary-color-rgb), 0.1);transition: all 0.3s ease-out 0s;transform: translateZ(-2px);}
.pricing h4 {font-size: 48px;color: var(--primary-color);font-weight: 700;font-family: var(--heading-font);margin-bottom: 25px;text-align: center;}
.pricing h4 sup {font-size: 28px;}
.pricing h4 span {color: rgba(var(--default-color-rgb), 0.5);font-size: 18px;font-weight: 400;}
.pricing ul {padding: 20px 0;list-style: none;color: rgba(var(--default-color-rgb), 0.8);text-align: left;line-height: 20px;}
.pricing ul li {padding: 10px 0;display: flex;align-items: center;}
.pricing ul i {color: #059652;font-size: 24px;padding-right: 3px;}
.pricing ul .na {color: rgba(var(--default-color-rgb), 0.3);}
.pricing ul .na i {color: rgba(var(--default-color-rgb), 0.3);}
.pricing ul .na span {text-decoration: line-through;}
.pricing .buy-btn {color: rgba(var(--default-color-rgb), 0.8);background-color: var(--contrast-color);display: inline-block;padding: 10px 40px;border-radius: 4px;border: 1px solid rgba(var(--default-color-rgb), 0.2);transition: none;font-size: 16px;font-weight: 600;font-family: var(--heading-font);transition: 0.3s;}
.pricing .buy-btn:hover {background-color: var(--primary-color);color: var(--contrast-color);}
.pricing .featured {z-index: 10;border: 3px solid var(--primary-color);}
.pricing .featured .buy-btn {background-color: var(--primary-color);color: var(--contrast-color);}
.pricing .featured .buy-btn:hover {background-color: rgba(var(--primary-color-rgb), 0.9);}

@media (min-width: 992px) {
    .pricing .featured {transform: scale(1.15);}
}

@media (min-width: 576px) {
}

@media (min-width: 768px) {
    .bt1{ font-size:4rem; line-height:6rem;}
    .bt2{ font-size:3rem; line-height:4rem;}
    .bt3{ font-size:2rem; line-height:4rem; margin-top:5rem;}
}

@media (min-width: 992px) {
    .bt1{ font-size:6rem; line-height:8rem;}
    .bt2{ font-size:4rem; line-height:6rem;}
    .bt3{ font-size:3rem; line-height:5rem; margin-top:5rem;}

    
    .container{ max-width:992px; margin:0 auto;}
    .mxheader .logo{ float:left;}
    .container{ width:992px; margin:0 auto;}
    .container .nav{ display:block; float:right;}
    .container .nav ul{ list-style:none; padding:0; margin:0;}
    .container .nav ul li{ float:left; width:100px;}
    .container .nav ul li a{ font-size:16px; font-weight:bold;}
}