﻿.about-company{ background: #FFFFFF; padding: 30px;}
.about-company-left{ width: 52%;}
.about-company-left h2{ font-size:2rem; line-height: 36px;}
.about-company-left-info{ width: 100%; margin-top: 20px;}

.about-company-right{ width: 45%;}
.about-company-right img{ width: 100%; height: auto;}


.about-mission{ background: url(../images/about-mission.png) no-repeat center; background-size:cover; text-align: center; color: #FFFFFF; padding: 45px 120px;}
.about-mission b{ display: block; color: #FFFFFF; font-size:1.6rem; line-height: 32px; margin-bottom: 15px;}



.about-vision{background: #FFFFFF; padding: 30px;}
.about-vision-left{ width: 47%;}
.about-vision-left b{ display: block;  font-size:1.6rem; line-height: 32px; margin-bottom: 15px;}

.about-vision-right{ width: 49%;}
.about-vision-right dl{ width: 100%;}
.about-vision-right dl dt{ width: 48px; height: 48px;}
.about-vision-right dl dd{ width:calc(100% - 80px); border-bottom: 1px solid #EEEEEE; padding: 15px 0;}


.about-vision1{background: #f9f9f9; }
.about-vision1-left{ width: 43%;}
.about-vision1-left img{ width: 100%; height: auto;}
.about-vision1-right{ width: 57%; padding: 35px 40px;}
.about-vision1-right p{ margin-bottom: 30px;}


.about-team{ padding: 30px; background: #FFFFFF;}
.about-team b{ display: block;  font-size:1.6rem; line-height: 32px; margin-bottom: 15px;}

.about-team-list{ padding-top: 30px;}
.about-team-list dl{ width: 48%; text-align: center;}
.about-team-list dl dt img{ width: 100%; height: auto;}
.about-team-list dl dd{background: #F9F9F9; box-shadow: 0px 6px 10px 1px rgba(0,0,0,0.1); height: 60px; line-height: 60px; font-size: 1.2rem;}


.about-info{ padding:30px; margin-bottom:30px; width:100%;}
.about-info h2{ font-size:1.8rem; line-height:36px;}
.about-info h2 a{ display: inline-block; height: 42px; line-height: 42px; border-radius: 4px; background: #00A2E9; color: #FFFFFF; font-size: 1rem; font-weight: normal; padding: 0 25px;}

.about-info-content{ padding-top:20px; line-height:26px;}
.about-info-content img{max-width:100%; height:auto;}

/*support*/
.support-left-menu{ display:none;}
.support-left{ width:20%; background:#fff; padding:25px;}
.support-left h1{ font-size:1.8rem; line-height:36px; margin-bottom:10px;}
.support-left a{ display:block; line-height:32px;}
.support-right{ width:78%; background:#fff; padding:25px;}
.support-right h2{ font-size:1.8rem; line-height:36px; margin-bottom:10px;}
.support-right-info{ line-height:28px;}


/*Contact-Us*/
.contact-box h1{ font-size:1.8rem; line-height:36px; text-align:center;}
.contact-box-main{ width:100%; margin-top:30px;}
.contact-box-main-left{ width:49%; background:#fff; padding:30px;}
.contact-box-main-left h2{font-size:1.2rem; line-height:36px;}
.contact-box-main-left h2 a{ color: #00A2E9; text-decoration: underline;}



.contact-box-main-right{ width:49%; background:#fff; padding:30px;}
.contact-box-main-right h3{font-size:1.2rem; line-height:36px;}
.contact-box-main-rightinfo{ line-height:28px;}

.contact-map{ margin-top:30px; height:400px;}

/*Blogs*/
.blog-list{ width:100%;}
.blog-list dl{ width:24%; background:#fff; padding:20px; border-radius:6px; margin:0.5%;}
.blog-list dl dt img{ width:100%; height:auto;}
.blog-list dl dd{ padding-top:15px;}
.blog-list dl dd em{ display:block; height:24px; line-height:24px;}
.blog-list dl dd a{ display:block; font-weight:bold; height:28px; line-height:28px; overflow:hidden;}

.blog-show{ background:#fff; border-radius:6px; padding:30px;}
.blog-show h1{font-size:1.8rem; line-height:36px; text-align:center; margin-bottom:10px;}
.blog-time{ width:100%; height:24px; line-height:24px; text-align:center; color:#999;}
.blog-info{ width:100%; padding:25px 0; line-height:26px;}
.blog-info img{ max-width:100%; height:auto;}
.next-prev-single{ line-height:32px;}
.next-prev-single p{ height:32px; overflow:hidden;}

.relate-blog{ margin-top:25px;}
.relate-blog h2{font-size:1.6rem; line-height:36px; text-align:center; margin-bottom:10px;}
.relate-blog-list dl{ width:24%; background:#fff; padding:20px; border-radius:6px; margin:0.5%;}
.relate-blog-list dl dt img{ width:100%; height:auto;}
.relate-blog-list dl dd{ padding-top:15px;}
.relate-blog-list dl dd em{ display:block; height:24px; line-height:24px;}
.relate-blog-list dl dd a{ display:block; font-weight:bold; height:28px; line-height:28px; overflow:hidden;}

/*brand*/
.brand-navigation-box{ position:relative;}
.brand-navigation-box h1{font-size:1.8rem; line-height:36px; text-align:center; margin-bottom:10px;}
.brand-navigation{position:sticky; left:0; top:0; z-index:777;}
.brand-navigation ul{ text-align:center; padding:10px 0; width:100%; }
.brand-navigation ul li{ padding:15px; display:inline-block; background:#fff; border-radius:3px; margin:2px 0; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.2);}

.brand-navigation-list{ margin-top:15px;}
.brand-navigation-list dl{ width:100%; margin-bottom:10px; background:#fff; border-radius:3px; padding:30px; border:1px solid #eee;}
.brand-navigation-list dl dt{ font-weight:bold; font-size:1.2rem; line-height:28px; margin-bottom:8px;}
.brand-navigation-list dl dd a{ display:block; width:32.3%; height:38px; line-height:38px; overflow:hidden; border-bottom:1px solid #eee; margin:0 0.5%;}

.brand-info-box{ padding:30px; background:#fff;  border-radius:6px; position:sticky; left:0; top:0; box-shadow: 3px 3px 20px 0 rgba(0,0,0,.2);}
.brand-info-box-left{ width:20%; height:auto;}
.brand-info-box-left img{ width:100%; height:auto;}
.brand-info-box-right{ width:78%; height:auto;}
.brand-info-box-right h1{ font-size:1.5rem; line-height:30px; margin-bottom:10px;}
.brand-info-box-right-info{ line-height:26px;}


.brand-info-list{ margin-top:15px;}
.brand-info-list dl{ width:100%; margin-bottom:10px; background:#fff; border-radius:3px; padding:30px; border:1px solid #eee;}
.brand-info-list dl dt{ font-weight:bold; font-size:1.2rem; line-height:28px; margin-bottom:8px;}
.brand-info-list dl dd a{ display:block; width:32.3%; height:38px; line-height:38px; overflow:hidden; border-bottom:1px solid #eee; margin:0 0.5%;}

@media (max-width: 768px) {
	
.about-company{ padding: 20px;}
.about-company-left{ width: 100%;}
.about-company-left h2{ font-size:1.4rem; line-height: 26px;}
.about-company-left-info{ width: 100%; margin-top: 10px;}

.about-company-right{ width: 100%; margin-top: 20px;}



.about-mission{ padding: 20px;}
.about-mission b{ font-size:1.4rem; margin-bottom: 5px;}



.about-vision{padding: 20px;}
.about-vision-left{ width: 100%;}
.about-vision-left b{  font-size:1.4rem;  margin-bottom: 5px;}

.about-vision-right{ width: 100%;}


.about-vision1-left{ width:100%;}
.about-vision1-right{ width:100%; padding: 20px;}
.about-vision1-right p{ margin-bottom: 10px;}


.about-team{ padding: 20px; }
.about-team b{  font-size:1.4rem;  margin-bottom: 5px;}

.about-team-list{ padding-top: 10px;}
.about-team-list dl{ width: 100%; text-align: center; margin-bottom: 20px;}


.about-info{ padding:20px;}
.about-info h2{ font-size:1.4rem; line-height:30px;}





/*support*/
.support-left-menu{ display:block; width:100%; height:42px; line-height:42px; background:#fff; padding:0 20px; cursor:pointer;}
.support-left-menu b{font-size:1.4rem;}
.support-left-menu i{ line-height:42px; font-size:1.2rem;}
.support-left{ width:100%; display:none; padding:20px;}
.support-left h1{display:none; }
.support-left a{ display:block; line-height:26px;}
.support-right{ width:100%; padding:20px; margin-top:10px;}
.support-right h2{ font-size:1.2rem; line-height:30px; }
.support-right-info{ line-height:26px;}


/*Contact-Us*/
.contact-box h1{ font-size:1.5rem; }
.contact-box-main{  margin-top:20px;}
.contact-box-main-left{ width:100%; padding:20px;}
.contact-box-main-left h2{font-size:1.2rem;}


.contact-box-main-right{ width:100%; padding:20px; margin-top:10px;}
.contact-box-main-right h3{font-size:1.1rem; line-height:26px;}
.contact-map{ margin-top:10px; height:300px;}

/*Blogs*/
.blog-list dl{ width:100%; margin:0.5% 0;}

.blog-show{ padding:20px;}
.blog-show h1{font-size:1.4rem; line-height:26px; }
.blog-info{padding:20px 0; }
.next-prev-single{ line-height:26px;}
.next-prev-single p{ height:26px; overflow:hidden;}

.relate-blog{ margin-top:15px;}
.relate-blog h2{font-size:1.3rem; line-height:26px;}
.relate-blog-list dl{ width:100%; margin:0.5% 0;}


/*brand*/
.brand-navigation-box h1{font-size:1.4rem; line-height:30px; }
.brand-navigation ul{ padding:5px 0;}
.brand-navigation ul li{ padding:10px;}

.brand-navigation-list{ margin-top:10px;}
.brand-navigation-list dl{padding:20px;}
.brand-navigation-list dl dt{ font-size:1rem; margin-bottom:5px;}
.brand-navigation-list dl dd a{ width:49%; height:32px; line-height:32px; overflow:hidden; }


.brand-info-box{ padding:20px; }
.brand-info-box-left{ width:100%; height:auto; text-align:center;}
.brand-info-box-left img{ width:50%; height:auto;}
.brand-info-box-right{ width:100%; height:auto; padding-top:15px;}
.brand-info-box-right h1{ font-size:1.4rem; }
.brand-info-box-right-info{ line-height:24px;}



.brand-info-list dl{ padding:20px; }
.brand-info-list dl dt{  font-size:1.1rem; }
.brand-info-list dl dd a{ width:100%; margin:0;}

}