img { max-width: 100%; }
.com-box{width: 90%;margin: 0 auto;max-width: 1600px;}

/***** Top menu *****/
header{background:#9c27b0;border: 0;-o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;}
ul.navbar-nav {font-size: 16px;font-weight: bold;}
#mainNav{background-color: rgba(0,0,0,.8);text-align: center;}

.header-nav li{display: inline-block;}
.navbar-expand-md .navbar-nav .nav-link{color: #fff;border-bottom: 1px solid transparent; }
.navbar-expand-md .navbar-nav .nav-link:hover,
.navbar-expand-md .navbar-nav .active .nav-link,
.navbar-expand-md .navbar-nav .nav-link.active{ color: #fff; outline: 0; opacity: 1; border-bottom: 1px solid #fff; }
.navbar-expand-md .navbar-nav .language{color: #fff;}
.navbar-expand-md .navbar-nav .language a{display: inline-block;padding: 0 .5rem}
.logo img{display: inline-block;width:2.6rem;height:2.6rem;}

.page1{margin-top: 0rem; padding-top:0rem;padding-bottom: 0rem;background: url("../images/banner.jpg") no-repeat center bottom; background-size:100% 100%;}
.page1-text{padding: 0 20%;font-size: 1.2rem;}
.btn-down{border-radius: 2rem;}
.link-list a{color: #fff;padding: 0 1rem;}
.py-200{padding-top: 4rem;padding-bottom: 2rem;}
.backdiv{padding-top:17rem;padding-bottom: 10rem;background-color:rgba(225,190,231,.6);margin-top: 0px;}
.pl-5{padding-left: 50rem;padding-right: 5rem;}

.text-666{color: #666;}
.text-777{color: #666;text-align: right;}
.line-height-48{line-height:200%;}

.page2{background-color: #fcfcfc;padding-top: 5rem;padding-bottom: 5rem;}
.page2-icon{width: 12.5rem;height:12.5rem;}

.page3{background-color: #f3e5f5;padding-top: 5rem;padding-bottom: 5rem;}
.page-circle .rounded-circle{width: 11rem;height: 11rem;min-width: 11rem; background-color: #00b8ff;margin: 1rem 1rem;text-align: center;padding: 0 1rem;}
.page-circle .rounded-circle:nth-child(1){background-color: #008efe;background-image: linear-gradient(-40deg,#008efe 0%,#00b9ff 100%);background-image: -webkit-linear-gradient(-40deg,#008efe 0%,#00b9ff 100%);background-image: -moz-linear-gradient(-40deg,#008efe 0%,#00b9ff 100%);background-image: -o-linear-gradient(-40deg,#008efe 0%,#00b9ff 100%);}
.page-circle .rounded-circle:nth-child(3){background-color: #fb6c5a;background-image: linear-gradient(-40deg,#fb6c5a 0%,#fd8175 100%);background-image: -webkit-linear-gradient(-40deg,#fb6c5a 0%,#fd8175 100%);background-image: -moz-linear-gradient(-40deg,#fb6c5a 0%,#fd8175 100%);background-image: -o-linear-gradient(-40deg,#fb6c5a 0%,#fd8175 100%);}
.page-circle .rounded-circle:nth-child(5){background-color: #995af6;background-image: linear-gradient(-40deg,#995af6 0%,#f075d8 100%);background-image: -webkit-linear-gradient(-40deg,#995af6 0%,#f075d8 100%);background-image: -moz-linear-gradient(-40deg,#995af6 0%,#f075d8 100%);background-image: -o-linear-gradient(-40deg,#995af6 0%,#f075d8 100%);}
.page-circle .rounded-circle:nth-child(7){background-color: #ffc54e;background-image: linear-gradient(-40deg,#ffc54e 0%,#ff8f51 100%);background-image: -webkit-linear-gradient(-40deg,#ffc54e 0%,#ff8f51 100%);background-image: -moz-linear-gradient(-40deg,#ffc54e 0%,#ff8f51 100%);background-image: -o-linear-gradient(-40deg,#ffc54e 0%,#ff8f51 100%);}
.page-circle .rounded-circle:nth-child(9){background-color: #4ee0f9;background-image: linear-gradient(-40deg,#4ee0f9 0%,#51fbd2 100%);background-image: -webkit-linear-gradient(-40deg,#4ee0f9 0%,#51fbd2 100%);background-image: -moz-linear-gradient(-40deg,#4ee0f9 0%,#51fbd2 100%);background-image: -o-linear-gradient(-40deg,#4ee0f9 0%,#51fbd2 100%);}
.caret {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-right: 0px solid transparent;;
    border-left: 10px solid black;
    border-bottom: 10px solid transparent;
}

.page4{background-color: #fcfcfc;padding-top: 5rem;padding-bottom: 5rem;}
.page-4-link-list a{width:21%;display:inline-block;margin-bottom:2.5rem;margin-left: 3%; box-shadow:1px 1px 1px rgba(0,0,0,.1);}
.page-4-link-list:hover a img,
.share-list:hover a{opacity: .5;filter:alpha(opaticy=50);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}
.page-4-link-list a:hover img,
.share-list:hover a:hover{opacity:1;filter:alpha(opaticy=100);-webkit-filter: grayscale(0%);-moz-filter: grayscale(0%);-ms-filter: grayscale(0%);-o-filter: grayscale(0%);filter: grayscale(0%);filter: gray;}

.page5{background-color: #f3e5f5;padding-top: 5rem;padding-bottom: 15rem;}

footer{background: #9c27b0 no-repeat center bottom; position: relative;
    margin-top:0rem;padding-top:10rem;}
.footer-logo{width:9.5rem;height:9.5rem;margin-left: -4.8rem; position: absolute;left: 50%;top:-4rem;}
.share-list a{display: inline-block;padding: 0 1rem;}
.share-list a img{width: 1.8rem;height: 1.8rem;}


html,body{font-size: 16px;width: 100%;overflow-x: hidden;}
.main{position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow-y: auto;}
.code-img{box-shadow: 0 0 .5rem rgba(0,0,0,.2);width: 16rem;}
#pills-tab li{width: 48%;text-align: center;}
.nav-pills .nav-link{background-color: #6c757d;color: #fff;}
#pills-tab li:first-child{margin-right: 4%;}