@charset "utf-8";
*{margin:0;padding: 0;}
ul,ol{list-style:none;}
a{text-decoration:none;}

.title-1 {text-align: center;margin-top:20px; }
.title-1 p{width: 90%;margin: 10px auto;font-size:1.2vw;}
.title-1 h2{font-size:2vw;}
.title-1 h1{font-size:2.2vw;}
.title-1 i{width:76px ;height:3px;background:#F36F2F;display: block;margin: 18px auto 18px;}

.banner {position: relative;width: 100%;text-align: center;}
.banner img {width: 100%;vertical-align: middle;}
.banner h1,
.banner p {position: absolute;left: 50%;transform: translateX(-50%);color: #fff;width: 100%;}
.banner h1 {top: 30%;font-size: 3vw;width: 80%;}
.banner p {top: 50%; font-size: 1.25vw;}

.about-index{width: 85%;margin: 2% auto;}
.about-index .long-about{display: none;}
.about-index .long-about a{color: #002fa7;}
.about-youtube{width: 80%;margin: 0 auto;}
.desktop-image {display: block;}
.mobile-image {display: none;}
@media (max-width: 767px) {
.title-1 h1{font-size:2vh;}
.desktop-image {display: none;}
.mobile-image {display: block;}}

.Product {width: 80%;margin: 0 auto;}
.product-type-1 {position: relative;display: flex;flex-direction: column;align-items: center;box-shadow: 0 0 5px 1px #ddd; margin-bottom:30px;}
.product-type-1 a{color: #111;}
/*.product-type-1 a:hover{box-shadow: 0 0 5px 1px #ddd;}*/
.product-content {display: flex;width: 100%;align-items: center;}
.product-content.reverse {flex-direction: row-reverse;}
.product-content img, .product-content .introduce {flex-basis: 50%;max-width: 50%;}
.product-content img {margin: 0;margin-top: 20px;}
.product-content .introduce {padding: 10px;}
.category {display: none;}
.active {display: block;width: 100%;margin: 0 auto;}
.desktop-image {display: block;}
.parameter{padding:5px; }
.introduce {width: 100%; position: static; transform: none; }
.introduce .model p{font-size: 1.5vw;color: #fff;padding: 5px;background-color: #f36f2f;display: inline-block;}
.product-title h2{font-size: 1.45vw;font-weight: bold;margin-top: 5px;}
.introduce p{font-size: 1vw;margin-top: 10px;}
.learn {display: inline-block;padding: 5px 10px;background-color: #f36f2f;color: #fff;font-size: 1vw;transition: background-color 0.1s;margin-top: 1vw;}
.learn:hover {background-color: #fff;color: #f36f2f;}

@media screen and (max-width: 900px) {
    .Product { width: 95%;  }
    .product-content, .product-content.reverse { flex-direction: column; align-items: stretch; }
    .product-content img, .product-content .introduce ,.product-content.reverse{ flex-basis: 100%; max-width: 100%; }
    .product-content .introduce { padding: 5px; }
    .introduce .model p, .learn { font-size: 3vw; }
    .product-title h2 { font-size: 5vw; }
    .introduce p { font-size: 4vw; }}


.Applications{width: 100%;}
.applications{width: 80%;margin: 0 auto; display: flex;flex-wrap: wrap;justify-content: space-between;}
.applications-img{width: 80%; margin: 0 auto;}
.applications-img img {flex: 100%;max-width: 100%;vertical-align: middle; margin: 0 auto;}
.applications-text{width: 100%;}
.applications-text-applications{width: 100%;display: flex;flex-wrap: wrap;justify-content:start;}
.applications-text-applications li{font-size: 1.2rem;padding-right: 15px;}

.itt-Others{width: 80%; margin: 0 auto ;}
.itt-other {display: flex;flex-wrap: wrap;justify-content: space-around;}
.itt-others {width: 30%;background-color: #eee; /* text-align: center; *//* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */}
.itt-h3{height: 60px;}
.itt-others img {width: 100%;height: auto;}
.itt-others h3 {color: #333;font-size: 1.5em;margin:10px;}
.itt-others p {color: #666;font-size: 1em;line-height: 1.4;margin: 10px;}

@media screen and (max-width:767px){
	.applications{width: 99%;}
.applications-img{width: 100%;}

.itt-h3{height:20px;}
.itt-Others{width: 95%;}
.itt-others{width: 100%;margin-bottom: 20px;}}

.it-Others{width: 80%; margin: 0 auto}
.it-other {display: flex;flex-wrap: wrap;justify-content: space-around;}
.it-others {width: 45%; }
.it-others img {width: 100%;height: auto;}
.it-others h3 {color: #333;font-size: 1.5em;margin: 10px 0;}
.it-others p {color: #333;font-size: 1.2em;line-height: 1.4;margin: 15px;}
.it-others p strong{color: #111;}
@media screen and (max-width:900px){
.it-Others{width: 95%;}
.it-others {width: 100%;}}


.pt-Others{width: 80%; margin: 0 auto }
.pt-other {display: flex;flex-wrap: wrap;justify-content: space-around;}
.pt-others {width: 23%	; text-align: center;/* box-shadow: 0 4px 8px rgba(0,0,0,0.1); */}
.pt-others img {width: 100%;height: auto;}
.pt-others h3 {color: #333;font-size: 1em;margin: 10px 0;}
.pt-others p {color: #666;font-size: 1em;line-height: 1.4;margin-bottom: 15px;}
button {color: white;padding: 5px 10px;border: none;cursor: pointer;font-size: 1em;transition: background-color 0.3s ease;background-color: #f36f2f;}
button:hover {background-color: #bb0007;}
@media screen and (max-width:767px){
.pt-Others{width: 95%;}
.pt-others {width: 100%;}}



.Videos{width: 80%;margin: 0 auto;}
.video-list{width: 100%;display:flex;flex-wrap: wrap;justify-content:space-between;}
.video-2{width: 33%;border-radius: 15px;overflow: hidden;}



.contact {width: 70%; margin: 0 auto;background-image: url('https://www.hprt.com/themes/simpleboot3/product/tto/css/contact-background.jpg');background-size: 100% 100%;background-position: center;color: #fff;text-align: center;padding: 4% ;}
.contact h2 {font-size: 2.7vw;}
.contact h3 {font-size: 1.5vw;}
.contact p {color: #fff;margin: 3%;font-size: 1.2rem;}
.contact-us{width: 20%;margin: 0 auto;line-height: 60px;background-color: #fff;border-radius: 10px;}
.contact-us:hover{background-color: #f36f2f;}
.contact-us p{color: #555;}
.contact-us p:hover{color: #fff;}



.FAQ-QA {width: 70%; margin: 20px auto;}
.faq-section {margin-bottom: 20px;}
.faq-title:hover {background-color: #eee; transition: background-color 0.3s;}
.faq-title {font-size: 18px; cursor: pointer; font-weight: bold; padding: 10px ;border-radius: 10px;}
.faq-title i.fa::before {color:#f36f2f;content: "\f067";}/* + */
.faq-title.open i.fa::before {color:#f36f2f;content: "\f068"; }/* - */
.faq-content {display: none; margin-top: 10px;}
.faq-content p{margin-top: 5px;}
.FAQ-QA i{float: right;}



.blog-section {width: 80%;display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;margin: 0 auto;}
.blog-section a:hover {color: #f36f2f;}
.blog-post {display: flex;align-items: center;background-color: #eee;text-decoration: none;color: inherit;}
.blog-post img {width: 40%;margin-right: 15px;}
.blog-content h3 {margin:10px ;font-size: 1.2em;}
.blog-content p {margin: 0;font-size: 1em;}
@media screen and (max-width: 600px) {
.blog-section {grid-template-columns: 1fr;}
.blog-section{width: 95%;}
.blog-post {flex-direction: column; align-items: flex-start; }
.blog-post img {width: 100%; height: auto; margin: 0 0 15px 0; }}



@media screen and (max-width:767px){
.title-1 h2{font-size:2vh;}
.title-1 p{width: 100%;margin: 0 auto;font-size: 12px;}
.banner{margin-top:50px;}
.banner h1 {top: 30%;font-size: 2vh;}
.banner p {font-size: 1vh;}

.about-index{width: 95%;margin: 2% auto;}
.about-img li{width: 45%;}
.about-youtube{width: 95%;}

.FAQ-QA {width: 95%; margin: 20px auto;}
.faq-title {font-size: 18px;}

.contact {width: 92%;background-image: url('contact-background-m.jpg');background-size: 100% 100%;background-position: center;
color: #fff;text-align: center;}
.contact-us{width: 40%;}
.contact-us{line-height: 40px;}
.contact h2 {font-size: 2.5vh;}
.contact h3 {font-size: 1.17em;}



.Videos{width: 95%;}
.video-2{width: 100%;}}

@media screen and (min-width:768px) and (max-width: 1150px){

.about-index{width: 95%;margin: 2% auto;}

.FAQ-QA {width: 95%; margin: 20px auto;}
.faq-title {font-size: 16px;}


}

@media screen and (min-width:1151px) and (max-width: 1400px){
.banner h1 {font-size: 2.25rem;}
.about-index{width: 85%;margin: 2% auto;}

.FAQ-QA {width: 85%; margin: 20px auto;}
.faq-title {font-size: 16px; }
}