@charset "UTF-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300&family=Noto+Serif+TC:wght@600&display=swap');
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
/*共用區域*/
* {
	text-decoration: none;
	-webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
*:actived {
	text-decoration: none;
}
*:focus {
	outline: none;
}
input, textarea, button, select, button, blockquote {
	appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
	border: none;
}
img {
	max-width: 100%;
}
html {
    /*overflow-x: hidden;*/
}
body {
    font-family: "微軟正黑體", 'Noto Sans TC', Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	margin: 0;
	padding: 0;
   
    background: #FFF;
}
ul, li, ol {
	padding: 0;
	margin: 0;
    list-style-type: none;
}

.container {
	width: 100%;
	margin: 0 auto;
    max-width: 1170px;
    /*position: relative;*/
}
.container-fluid {
	width: 100%;
	margin: 0 auto;
    /*position: relative;*/
}

header, section, footer {
    width: 100%;
    float: left;
}
section {
    /*overflow-x: hidden;*/
}
/*頁首區域*/
header {
    position: relative;
	padding: 0px 0;
	background: #FFF;
}
header .logo {
    width: 270px;
    /* float: left; */
    /* padding-bottom: 18px; */
    padding-top: 15px;
    /* padding-left: 30px;*/
}
header .logo a {
    display: block;
    line-height: 0;
    z-index: 99;
}
header .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
header .logo + nav {
	/*width: calc(100% - 210px);*/
	/*float: left;
	text-align: right;*/
}
header .logo a img {
	width: 100%;
}
nav .main-menu {
	width: 100%;
	display: block;
}
nav .main-menu a {
	color: #333;
	display: block;
	text-align: center;
	font-size: 1rem;
}
ul.menua > li a {
	display: block;
	padding: 36px 30px 20px;
}
ul.menub {
	padding: 15px 0;
}
ul.menub li a {
	display: block;
	padding: 10px 30px 10px;
}
ul.menua li {
	display: inline-block;
	margin: 0 0px;
	position: relative;
	min-width: 8rem;
	max-width: 100%;
}
ul.menua li:hover {
	background: #511481;
}
ul.menub li {
	min-width: 16rem;
}
ul.menua > li:hover > a, ul.menua li:hover ul.menub > li:hover a {
	color: #CF9823;
}
ul.menub > li:hover > a::before, ul.menub > li:hover > a::after {
	background: #CF9823;
}
ul.menub, ul.menuc {
	display: none;
}
ul.menua li:hover ul.menub {
	display: block;
	position: absolute;
	left: 0;
	background: #511481;
	min-width: 15rem;
	overflow: hidden;
	z-index: 99;
}
ul.menua li:hover ul.menub a {
	color: #FFF;
	position: relative;
	text-align: left;
}
ul.menub > li > a::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #FFF;
	vertical-align: middle;
    margin-right: 10px;
	margin-top: -2px;
}
ul.menub > li > a::after {
	content: '';
    display: inline-block;
    width: 50px;
    height: 1px;
    background: #FFF;
    position: absolute;
    left: -15px;
    margin-top: 11px;
}



section .container-fluid {
	position: relative;
}
.page-bg-left {
	position: absolute;
	z-index: 0;
	/*padding-right: calc((100vw - 1170px) / 2);*/
	line-height: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom left;
	width: calc(1170px + ((100% - 1170px) / 2));
	min-height: 80vh;
}
.page-bg-right {
	position: absolute;
	z-index: 0;
	/*padding-right: calc((100vw - 1170px) / 2);*/
	line-height: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom right;
	width: calc(1170px + ((100% - 1170px) / 2));
	min-height: 80vh;
	right: 0;
}
.page-title {
	background: #511481;
    padding: 20px 30px 0px 0;
    display: inline-block;
    margin-top: 100px;
    line-height: 0;
    /* width: calc((100vw - 1170px) / 2); */
    text-align: right;
    /* margin-left: calc((1170px - 100vw) / 2); */
    padding-left: calc((100vw - 1170px) / 2);
	z-index: 1;
}
.page-intro {
	background: #511481;
	padding: 0px calc((100vw - 1170px) / 2 + 30px) 0px 30px;
	display: inline-block;
	margin-top: 250px;
	line-height: 2;
	width: 50%;
	text-align: left;
	/*position: absolute;
	right: 0;*/
	z-index: 1;
}
.index-slogan h1 {
	padding: 60px 30px 0px calc((100vw - 1170px) / 2 + 30px);
	color: #FFF;
	font-size: 2.5rem;
}
.index-title,
.index-slogan{
	width: 100%;
	position: relative;
	z-index: 2;
}
.index-title h1 {
	padding: 30px 30px 30px calc((100vw - 1170px) / 2 + 30px);
	color: #FFF;
	background: #511481;
	display: inline-block;
	font-size: 2.5rem;
}
.page-intro h1 {
	color: #FFF;
	font-size: 1.75rem;
	font-weight: 300;
	text-align: justify;
	line-height: 1.5;
	margin-bottom: 10px;
	border-bottom: 1px solid #FFF;
	padding-bottom: 10px;
}
.page-intro h3 {
	color: #FFF;
	font-size: 1.15rem;
	font-weight: 300;
	text-align: justify;
}
.page-intro p,
.subtitle{
	color: #FFF;
	font-size: 1.15rem;
	font-weight: 300;
	text-align: justify;
}
h1.title {
	color: #FFF;
	font-size: 2rem;
	font-weight: 300;
	line-height: 1;
	padding-left: 20px;
}
h1.title::after {
	content: '';
    display: inline-block;
    width: calc((100vw - 1170px) / 2 + 20px);
    height: 1px;
    background: #FFF;
    position: absolute;
    left: 0;
    margin-top: 19px;
}
h1.title::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #FFF;
	vertical-align: middle;
    margin-right: 10px;
	margin-top: -2px;
}
.index-about-title {
	width: 50%;
	padding-top: 30px;
	/*padding: 30px 30px 30px calc((100vw - 1170px) / 2 + 30px);*/
}
.index-about-title h1, .index-about-title p {
	padding: 0px 30px 0px calc((100vw - 1170px) / 2 + 30px);
	margin: 0 0 0rem;
	color: #FFF;
}
.index-about-title h1 {
	font-size: 3rem;
	font-weight: 400;
	text-align: right;
}
.index-about-title p {
	text-align: justify;
	margin-top: 30px;
	line-height: 2;
	font-size: 1.2rem;
	font-weight: 300;
}
.about-title-img {
	padding-right: 30px;
}
.index-about-features {
	background-color: #FFF;
	margin-top: 100px;
	width: 50%;
	padding: 30px calc((100vw - 1170px) / 2 + 30px) 30px 80px;
	min-height: 500px;
	display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}
ul.features-list {
	width: 100%;
}
ul.features-list p{
	font-size: 1.25rem;
	color: #333;
}
ul.features-list li {
	position: relative;
	margin: 0 0 30px;
}
li.icon-cloud::before {
	content: '';
	display: inline-block;
	width: 30px;
	background-image: url("../img/cloud.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: 30px;
	position: absolute;
	margin-left: -40px;
}
li.icon-flag::before {
	content: '';
	display: inline-block;
	width: 30px;
	background-image: url("../img/flag.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: 30px;
	position: absolute;
	margin-left: -40px;
}

.more-btn-link a {
	color: #333;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.more-btn-link a span {
	margin-right: 30px;
}
.more-btn-link{
	text-align: right;
	width: 100%;
}
.arrow_btn, .arrow_up {
	display: block;
    width: 53px;
    height: 53px;
    background: #511481;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    right: 5%;
	cursor: pointer;
	bottom: 30%;
	border:2px solid #511481;
}
.arrow_up {
	right: inherit;
}
.arrow_btn::before,
.arrow_btn::after,
.arrow_up::before,
.arrow_up::after{
	content: ' ';
	width: 15px;
	height: 2px;
	background: #FFF;
	display: inline-block;
	top:23px;
	position: absolute;
	border-radius: 5px;
}
.arrow_btn::before,
.arrow_up::before,
.more-btn-link button::before,
.flex-direction-nav button::before{
	transform: rotate(-45deg);
	left: 12px;
}
.arrow_btn::after,
.arrow_up::after,
.more-btn-link button::after,
.flex-direction-nav button::after{
	transform: rotate(45deg);
	right: 12px;
}
.arrow_btn:hover{
	background-color:#FFF;
}
.arrow_btn:hover::before,
.arrow_btn:hover::after {
	background-color:#511481;
}
section.main-section,
section.index-section{
	min-height: 80vh;
}
section.main-section .container-fluid,
section.index-section .container-fluid{
	position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
section.index-section {
	background-color:#511481;
	z-index: -2;
}
section.index-section .container-fluid {
	flex-wrap: wrap;
	/*overflow-x: hidden;*/
}
article {
	width: 100%;
}
article h4, article ol{
	padding: 0 15px;
	font-size: 1.5rem;
}
article p {
	max-width: 100%;
	float: left;
	padding: 0 15px;
}
section.article-section {
	padding: 40px 0;
}
section.article-section.article-bgcolor {
	background-color: rgba(81,20,129,1);
}
.article-bgcolor h1, .article-bgcolor h2 {
	color: #FFF;
}
.article-bgcolor .solution-item li {
	color: #FFF;
}
p + h2 {
	margin-top: 2rem;
}
section.article-section article p,
.solution-item{
	display: block;
	width: 100%;
	float: none;
	line-height: 1.75;
	font-size: 1.1rem;
	text-align: justify;
	margin: 0.5rem 0;
}
.solution-item {
	width: 50%;
}
section.article-section h1 {
	font-size: 2.5rem;
	margin: 2rem 0 0.5rem -5px;
	position: relative;
	display: block;
    width: 100%;
}
section.article-section h2 {
	margin: 2rem 0 0rem 15px;
	position: relative;
	font-size: 1.5rem;
	width: 100%;
}
section.article-section ul {
	padding-left: 15px;
	margin: 1rem 0;
}
section.article-section ul li {
	line-height: 2;
    font-size: 1.25rem;
    text-align: justify;
	list-style-type: disc;
}
section.article-section h1::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #000;
    vertical-align: middle;
    margin-right: 10px;
    margin-top: -2px;
}
section.article-section h1::after {
	content: '';
    display: inline-block;
    width: calc((100vw - 1170px) / 2 + 60px);
    min-width: 60px;
    height: 1px;
    background: #000;
    position: absolute;
    right: 100%;
    margin-top: 30px;
}
article p {
	position: relative;
}
article p img + span {
	display: inline-block;
	width: 90%;
	padding: 10px 15px;
	font-size: 1rem;
	background-color: #511481;
	color: #FFF;
	position: absolute;
	bottom: -5%;
	left: 5%;
}
.article-bgcolor article p img + span {
	background-color: #FFF;
	color: #000;
}
.article-bgcolor h1::after,
.article-bgcolor h1::before{
	background-color: #FFF!important;
}
.article-section article {
	padding: 0 5%;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}
.article-bgcolor p {
	color: #FFF;
	font-weight: 300;
	text-align: justify;
	margin-top: 0;
}
blockquote {
	display: block;
	width: 100%;
	float: left;
	max-width: calc(1170px - 10%);
	margin: 0;
	padding: 10px 5% 30px;
}
blockquote p {
	background-color: #511481;
	padding: 15px 5%;
	width: 100%!important;
	max-width: inherit;
	color: #FFF;
}
.article-bgcolor blockquote p {
	background-color: #FFF;
	color: #000;
}
.page-title.right {
	margin-top: 100px;
    line-height: 0;
    width: calc((100vw - 1170px) / 2 + 10%);
    text-align: left;
    /* margin-right: calc((100vw - 1170px) / 2); */
    right: 0;
    /* position: absolute; */
    z-index: 1;
    padding-left: inherit;
}
.container-fluid.flex-end {
	justify-content: flex-end!important;
}
h1.title.right {
    color: #FFF;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1;
    display: inline-block;
    position: relative;
    padding-left: 5%;
}
h1.title.right::before {
	content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #FFF;
    vertical-align: middle;
    margin-left: 95%;
    margin-top: 15px;
    position: absolute;
}
h1.title.right::after {
	content: '';
    display: inline-block;
    width: calc((100vw - 1170px) / 2);
    height: 1px;
    background: #FFF;
    position: absolute;
    left: 115%;
    margin-top: 20px;
}
#develop.container {
	position: relative;
}
#develop .date-company, #develop .image-company {
	float: left;
	width: 50%;
	position: relative;
	overflow-y: hidden;
}
#develop .image-company {
	overflow-y: inherit;
}
#develop .image-company {
	padding-left: 5%;
	padding-top: 5%;
}
#develop .date-company::before {
	content: '';
    display: block;
    width: 5px;
    height: 1000vh;
    background-color: #511481;
    position: absolute;
}
ul.datelist {
	padding-top: 50px;
	padding-left: 5%;
	padding-right: 5%;
}
ul.datelist li h1 {
	color: #511481;
	font-weight: 600;
	display: inline-block;
	margin: 0;
	font-size: 2rem;
}
ul.datelist li h1::before {
	content: '';
    display: block;
    width: 36px;
    height: 36px;
    background-color: #511481;
    border-radius: 50%;
    position: absolute;
    margin-left: -44px;
	margin-top: 6px;
}
#develop .date-company {
	padding-left: 25px;
}
ul.datelist li h1 + p {
	margin: .5rem 0 3rem;
	font-size: 1.25rem;
	line-height: 1.75;
}
ul.imagelist li p {
	
	line-height: 1.75;
	margin: 0;
}
ul.imagelist li p + p {
	background-color: #511481;
	color: #FFF;
	margin-top: -2rem;
	margin-left: 2rem;
	padding: 10px 15px;
	position: absolute;
	width: 100%;
}
ul.imagelist li {
	margin-bottom: 3rem;
	position: relative;
}
ul.imagelist li:nth-child(odd){
	margin-right: 10%;
}
ul.imagelist li:nth-child(even){
	margin-left: 10%;
}
ul.article-item-list {
	width: 100%;
	padding-left: calc((100% - 1170px) / 2);
	overflow-x: hidden;
}
ul.news-item-list {
	width: calc(100% + 10px);
	display: flex;
	justify-content: flex-start;
	align-content: stretch;
	margin-left: -10px;
	margin-right: -10px;
	flex-wrap: wrap;
}
li.news-item {
	width: calc(100% / 3 - 20px);
	margin-left: 10px;
	margin-right: 10px;
}
section.article-list,
section.news-list{
	padding: 50px 0;
}
.news-info {
	color: #333;
}
.article-img {
	line-height: 0;
	width:300px;
	height: 300px;
	flex-shrink:0;
}
li.article-item,
li.news-item {
	margin-bottom: 30px;
}
li.article-item a {
	display: flex;
	justify-content: flex-start;
	align-content: stretch;
	width: 100%;
	color: #000;
	transform: scale(1);
	transition: .25s ease-out transform;
}
li.article-item a:hover {
	transform: scale(1.015);
	transition: .25s ease-out transform;
}
li.news-item {
	display: inline-block;
}
li.news-item a {
	transform: scale(1);
	display: block;
	transition: .25s ease-out transform;
}
li.news-item a:hover {
	transform: scale(1.015);
	transition: .25s ease-out transform;
}
.article-info {
	width: calc(100% - ((100% - 1170px) / 2));
	display: flex;
    flex-wrap: wrap;
	font-weight: 300;
}
.article-title {
	background-color: #511481;
	padding: 20px 30px 5px;
	color: #FFF;
	width: 100%;
}
.article-summary {
	padding: 10px calc((100% - 1170px) / 2 + 300px) 10px 30px;
	line-height: 1.75;
	background-color: #FFF;
}
.article-title h1, .article-title h3 {
	margin: 0 0 10px;
	font-weight: 300;
	width: calc(100% - 300px);
}
.article-date {
	background-color: #511481;
	padding: 0 calc((100vw - 1170px) / 2 + 5%) 0 30px;
	color: #FFF;
	display: flex;
	justify-content:space-between;
	align-content: stretch;
	width: 100%;
}
.article-date p {
	margin: 0.5rem 0;
}
.solution-item {
	padding: 0 2.5%;
}
.solution-item h2{
	margin-bottom: 0;
	margin-left: -24px;
}
.solution-item h2::before {
	content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #511481;
    vertical-align: middle;
    margin-right: 10px;
    margin-top: -2px;
}
.solution-item li {
	margin-bottom: 1rem;
	padding-left: 18px;
	position: relative;
}
.solution-item li::before {
	content: '';
	display: inline-block;
    width: 2px;
    height: 100%;
    border-radius: 5px;
    background: #511481;
    vertical-align: top;
	position: absolute;
	left: 0;
}
.ellipsis {
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.article-nav {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
	color: #511481;
	font-size: 1.25rem;
}
.article-nav a, .article-nav span {
	display: inline-block;
	margin: 0 10px;
	color: #511481;
	padding-bottom: 3px;
	border-bottom: 2px solid rgba(81,20,129,0);
}
.article-nav span, .article-nav a.page-btn:hover {
	border-bottom: 2px solid rgba(81,20,129,1);
}
.article-nav button,
.more-btn-link button,
.flex-direction-nav button{
	display: block;
    width: 53px;
    height: 53px;
    background: #FFF;
    border-radius: 50%;
    position: relative;
    z-index: 1;
	cursor: pointer;
	border: 2px solid #511481;
}
.article-nav button::before,
.article-nav button::after,
.more-btn-link button::before,
.more-btn-link button::after,
.flex-direction-nav button::before,
.flex-direction-nav button::after{
	content: ' ';
	width: 15px;
	height: 2px;
	background: rgba(81,20,129,1);;
	display: inline-block;
	top:22px;
	position: absolute;
	border-radius: 5px;
}
.prev {
	transform: rotate(-90deg);
}
.next {
	transform: rotate(90deg);
}
.article-nav button:hover,
.more-btn-link a:hover button, 
.flex-direction-nav button:hover{
	background: rgba(81,20,129,1);
}
.article-nav button:hover::before,
.article-nav button:hover::after,
.flex-direction-nav button:hover::before,
.flex-direction-nav button:hover::after,
.more-btn-link a:hover button::before,
.more-btn-link a:hover button::after{
	background: #FFF;
}
.article-nav button::before, 
.flex-direction-nav button::before{
	transform: rotate(-45deg);
	left: 12px;
}
.article-nav button::after, 
.flex-direction-nav button::after{
	transform: rotate(45deg);
	right: 12px;
}
.prev + span {
	margin-left: 20px;
}
.news-title h1 {
	font-weight: 400;
}
.news-title h1 small {
	font-size: 70%;
}
.index-news-title {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	padding-right: calc((100vw - 1170px) / 2);
	align-items: flex-end;
	padding-bottom: 20px;
}
.index-article-title {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding-right: calc((100vw - 1170px) / 2);
	align-items: flex-start;
	padding-bottom: 20px;
	overflow-x: hidden;
}
.index-news-title + .container{
	padding: 30px 0;
	background-color: #FFF;
}
.index-news-title h1, .index-article-title h1 {
	font-size: 2.5rem;
	color: #FFF;
	font-weight: 400;
	margin: 0 10px 0 0;
	position: relative;
}
.index-news-title h1::before {
	content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #FFF;
    vertical-align: middle;
    margin-right: 10px;
    margin-top: -6px;
}
.index-news-title h1::after {
	content: '';
    display: inline-block;
    width: 1000%;
    height: 1px;
    background: #FFF;
    position: absolute;
    /* left: 0; */
    margin-top: 29px;
    right: 100%;
}
.index-article-title h1::before {
	content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: #FFF;
    vertical-align: middle;
    margin-right: 10px;
    margin-top: 28px;
    /* margin-right: 0; */
    position: absolute;
    right: calc(5vw - 30px);
}
.index-article-title h1::after {
	content: '';
    display: inline-block;
    width: 1000%;
    height: 1px;
    background: #FFF;
    position: absolute;
    left: calc(100% - 5vw + 20px);
    margin-top: 32px;
}

.index-article-title h1 {
	text-align: right;
	width: 100%;
	padding-right: 5vw;
}
.index-news-list {
}
.index-news-info {
	color: #333;
}
.index-news-info h1 {
	font-weight: 300;
	font-size: 1.25rem;
	color: #333;
}
.flexslider.carousel {
	background-color: #FFF;
    padding: 30px 10% 30px 15%;
    margin-right: calc((100vw - 1170px) / 2);
	overflow-x: hidden;
	position: relative;
	width: 100%;
}
ul.flex-direction-nav {
	position: absolute;
    top: 50%;
	width: 1100px;
	    display: flex;
    justify-content: space-between;
}
li.flex-nav-prev {
	margin-left: -100px;
}
li.flex-nav-next {
	right: 0;
}
#index-article {
	margin-left: calc((100vw - 1170px) / 2);
	margin-right: inherit;
}




/*頁腳*/
footer {
	background: #511481;
	padding: 100px 0 30px;
	position: relative;
	overflow: hidden;
}
footer .container-fluid {
	background-color: #FFF;
}
footer .container {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}
footer a {
	color: #FFF;
}
footer a:hover {
	color: #CF9823;
}
footer .com-info {
	color: #FFF;
	font-weight: 300;
	max-width: 400px;
	width: 50%;
	line-height: 1.7;
	padding: 0px 0 0;
	background-color: #511481;
	z-index: 1;
}
footer .com-copyright {
	color: #FFF;
	font-weight: 300;
	max-width: 400px;
	width: 50%;
	line-height: 1.7;
	padding: 20px 0 0;
}
footer .com-policy-link {
	width: 50%;
	padding: 20px 0 0;
}
footer ul.policylink {
	width: 100%;
	flex-wrap: nowrap;
	justify-content: flex-end;
	display: flex;
}
footer ul.policylink li {
	display: inline-block;
	margin-left: 20px;
}
footer ul.policylink li a {
	color: #FFF;
}
footer .com-link {
	padding: 20px 35px;
	background: #FFF;
	width: 100%;
	flex-wrap: wrap;
	display: flex;
}
footer ul.quicklink {
	width: 50%;
}
footer ul.quicklink li a {
	color: #511481;
}
footer ul.quicklink li {
	width: 100%;
	margin-bottom: 1rem;
}
footer ul.quicklink li a:hover,
footer ul.policylink li a:hover{
	color: #CF9823;
}
footer ul.quicklink li a::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #511481;
	vertical-align: middle;
    margin-right: 10px;
	margin-top: -2px;
}
footer ul.policylink li a::before {
	content: '';
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #FFF;
	vertical-align: middle;
    margin-right: 10px;
	margin-top: -2px;
}
footer ul.quicklink li a:hover::before,
footer ul.policylink li a:hover::before{
	background: #CF9823;
}
footer .com-name, footer .com-address, footer .com-tel, footer .com-fax, footer .com-name-cht {
	margin-bottom: .5rem;
}
footer .com-address::before {
	content: '';
	display: inline-block;
	width: 30px;
	background-image: url("../img/map.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: 30px;
	background-color: #511481;
	position: absolute;
	margin-left: -40px;
}
footer .com-tel::before {
	content: '';
	display: inline-block;
	width: 30px;
	background-image: url("../img/tel.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
	height: 30px;
	background-color: #511481;
	position: absolute;
	margin-left: -40px;
}
footer .com-bg {
	background: #511481;
	position: absolute;
	left: 0;
	width: 35%;
    height: 100%;
    z-index: 0;
} 
.toggle-mobile {
	opacity: 0;
	display: none;
}

@media screen and (max-width: 768px) {
	.toggle-mobile {
		position: fixed;
		right: 15px;
		top:17px;
		display: flex;
        justify-content: flex-end;
        align-items: center;
		z-index: 1000;
		cursor: pointer;
		opacity: 1;
		background-color: #FFF;
        width: 43px;
        height: 42px;
        flex-wrap: wrap;
	}
    .toggle-mobile p {
        margin: 0;
        position: relative;
        width: 38px;
        height: 38px;
        margin-left: 2px;
        margin-top: 2px;
	}
    .toggle-mobile span.top {
		width: 34px;
		height: 2px; 
		background-color: #511481;
		display: block;
		position: absolute;
		top: 4px;
		transition: all 0.1s linear;
	}
	.toggle-mobile span.mid {
		width: 34px;
		height: 2px; 
		background-color: #511481;
		display: block;
		position: absolute;
		top: 18px;
		transition: all 0.1s linear;
	}
	.toggle-mobile span.btm {
		width: 34px;
		height: 2px; 
		background-color: #511481;
		display: block;
		position: absolute;
		bottom: 4px;
		transition: all 0.1s linear;
	}
	.toggle-mobile.active span.top {
		width: 40px;
		height: 2px; 
		background-color: #000;
		display: block;
		position: absolute;
		top: 17px;
		left: 0;
		transform: rotate(45deg);
		transition: all 0.1s linear;
	}
	.toggle-mobile.active span.mid {
		display: none;
	}
	.toggle-mobile.active span.bottom {
		width: 40px;
		height: 2px; 
		background-color: #000;
		display: block;
		position: absolute;
		bottom: 18px;
		left: 0;
		transform: rotate(-45deg);
		transition: all 0.1s linear;
	}
	
	nav .main-menu {
		display: none;
		position: fixed;
		z-index: 3;
		background: #FFF;
		width: 100%;
		left: 0;
		padding-top: 70px;
	}
	ul.menua li {
		width: 100%;
		min-width: inherit;
	}
	ul.menua li:hover ul.menub {
		width: 100%;
		min-width: inherit;
	}
	.index-news-title {
		flex-wrap: wrap;
	}
	.page-bg-left,
	.index-about-title,
	.index-about-features,
	footer .com-info,
	footer .com-copyright,
	footer .com-policy-link,
	section.article-section article p,
	#develop .date-company, 
	#develop .image-company
	{
		width: 100%;
		max-width: inherit;
	}
	.index-slogan h1, 
	.index-title h1, 
	.index-about-title p,
	.index-about-features,
	.page-intro,
	#develop.container{
		padding-left: 5%;
		padding-right: 5%;
	}
	ul.features-list {
		padding-left: 15%;
	}
	.flexslider.carousel {
		margin: 0!important;
		padding: 30px 5% 90px;
		overflow: hidden;
	}
	ul.flex-direction-nav {
		width: 100%;
		padding: 30px 15%;
		top: inherit;
		bottom: 0;
		justify-content: flex-end;
	}
	li.flex-nav-next {
		margin-left: 15px;
	}
	footer .container {
		flex-wrap: wrap-reverse;
	}
	footer .com-bg {
		display: none;
	}
	footer .com-info{
		padding-left: 15%;
		padding-right: 15%;
		padding-top: 30px;
		padding-bottom: 30px;
		max-width: inherit;
	}
	footer .com-copyright {
		text-align: center;
	}
	footer ul.policylink {
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	footer ul.policylink li {
		width: 100%;
		margin-left: 20px;
		margin-bottom: 20px;
	}
	footer ul.quicklink li {
		width: 100%;
	}
	.news-title-img {
		width: 100%!important;
	}
	footer .com-copyright {
		max-width: inherit;
	}
	.index-article-title h1 {
		overflow-x: hidden;
	}
	header .logo {
		padding: 15px 15px;
		position: relative;
    	z-index: 101;
	}
	.toggle-mobile p {
		margin-left: 0;
		margin-top: 0;
	}
	.page-intro {
		width: 100%;
	}
	section.main-section .container-fluid, 
	section.index-section .container-fluid {
		flex-wrap: wrap;
		
	}
	.page-title {
		margin-bottom: 10px;
		width: auto;
		padding: 20px 15px 0px;
	}
	.page-title.right {
		width: 100%;
		text-align: right;
	}
	ul.imagelist li {
		margin-bottom: 5rem;
	}
	ul.imagelist li p + p {
		margin-left: 0;
	}
	ul.datelist {
		padding-left: 28px;
	}
	#develop .date-company::before {
		height: 2000px;
	}
	h1.title {
		padding-left: 0;
		font-size: 1.5rem;
	}
	h1.title::after {
		width: 100px;
		display: none;
	}
	.page-title.right {
		margin-top: 0;
	}
	h1.title.right::before {
		display: none;
	}
	article p {
		padding: 0 0;
	}
	article p img + span {
		position: relative;
	}
	blockquote p {
		padding:15px 15px;
	}
	blockquote {
		padding-left: 0;
		padding-right: 0;
	}
	.solution-item {
		width: 100%;
	}
	ul.article-item-list {
		padding: 0;
	}
	li.article-item {
		width: 100%;
	}
	li.article-item a {
		flex-wrap: wrap;
	}
	.article-title {
		padding: 20px 5% 10px;
	}
	.article-title h3 {
		text-align: justify;
	}
	.article-img, .article-img img, .article-info, .article-title h1, .article-title h3 {
		width: 100%;
	}
	.article-title h3 {
		padding-top: 10px;
		border-top: 1px solid #FFF; 
	}
	.ellipsis {
		white-space: inherit;
	}
	.article-title {
		line-height: 1.7;
	}
	.article-summary {
		padding: 10px 5%;
		widows: 100%;
	}
	.article-date {
		flex-wrap: wrap;
		padding: 10px 5%;
	}
	ul.news-item-list {
		padding: 0 5%;
		width: 100%;
		margin: 0;
	}
	li.news-item {
		margin-left: 0px;
    	margin-right: 0px;
		width: 100%;
	}
	.page-bg-right, .page-bg-left {
		width: 100%;
		min-height: 40vh;
	}
	.page-intro {
		margin-top: 10vh;
		padding: 10px 5%;
	}
	section.main-section, section.index-section {
		min-height: 40vh;
	}
	.news-img, .news-img img {
		width: 100%;
	}
	footer .container {
		padding-left: 0;
		padding-right: 0;
	}
	h1.title::before {
		display: none;
	}
}