*{margin:0;padding:0;}
html{width:100%;font-size: 16px;}
body{margin:0;padding:0;color:#FFF;line-height: 1.4; font-size:1rem;background:#212121;overflow-x: hidden; font-family:"NotoSansTC", "PingFang","serif"; font-weight: 400;}
@font-face {
    font-family:"NotoSansTC";
    src: url("fonts/NotoSansTC-Regular.ttf");
	font-weight: 400;
}
@font-face {
    font-family:"NotoSansTC";
    src: url("fonts/NotoSansTC-Bold.ttf");
	font-weight: 700;
}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{font-family:inherit;line-height:inherit;font-size: inherit}
ul li{list-style:none;}
ul{padding: 0;margin: 0;}
input{ -webkit-appearance: none; }
textarea{ -webkit-appearance: none; resize:none;}
input::-webkit-input-safebox-button{display: none;}
select{ -webkit-appearance: none;}
img{max-width:100%;border:none;vertical-align:middle;text-decoration:none;}
a{cursor:pointer; color: #000}
a:hover{transition: 0.3s ease-out;}
a,a img, button{border:none;outline:none;cursor:pointer;text-decoration:none;background:none;}
span:focus,img:focus,button:focus{outline: none!important; border:none;box-shadow: none!important;}
a:focus,a:hover{text-decoration:none;outline:none; }
select,select:focus,select:active{outline:none;}
input:focus,textarea:focus,select:focus{outline:none!important;box-shadow: none!important;}
select{-webkit-appearance: none; appearance: none;}
input::-moz-placeholder{color:#999!important;opacity:1}
input:-ms-input-placeholder{color:#999!important}
input::-webkit-input-placeholder{color:#999!important}
input{color: #000;}
h1{margin: 0;}
.top_nav_icon{display: none;}
.top_nav_icon:hover span:nth-of-type(1) {
-webkit-transform: translateY(1px) rotate(-3deg);
-ms-transform: translateY(1px) rotate(-3deg);
transform: translateY(1px) rotate(-3deg);
}

.top_nav_icon:hover span:nth-of-type(2) {
opacity: 0.9;
}

.top_nav_icon:hover span:nth-of-type(3) {
-webkit-transform: translateY(-1px) rotate(3deg);
-ms-transform: translateY(-1px) rotate(3deg);
transform: translateY(-1px) rotate(3deg);
}
.top_nav_icon{ position:absolute; right:20px; top:50%;margin-top: -13px;cursor:pointer; z-index: 2}
.top_nav_icon span{width:22px; height:2px; background:#FFF; display:block; margin:5px 0px; border-radius: 10px;}
header{position: relative;padding: 20px 0;display: inline-block;width: 100%;border-bottom: 1px solid #616161;}
header .container{display: flex; align-items: center; justify-content: space-between;}
.logo{max-width: 159px;}
.menu a{color: #FFF; display: inline-block; margin-left: 30px;}
.menu a:hover{color: #00E6FD;}
.banner{background: url("../images/background-1.jpg") no-repeat center center; background-size: cover;}
.banner_content{width: 55%; float: right;}
.banner_title{color: #00E6FD;font-weight: 700;font-size: 64px;line-height: 1.4; margin-bottom: 20px;}
.banner_bg{background: url("../images/image_bg.png") repeat-y center center;background-size: cover;  padding: 100px 0;display:flex; justify-content: center; align-items: center;width: 100%;min-height: 600px;}
.banner_txt{font-size: 24px;}
.section_rag{background: url("../images/background-2.jpg") repeat-y top center;background-size: cover;position: relative;padding: 70px 0 30px;}
.section_rag:after{content: ""; background: rgba(0, 0, 0, 0.5); z-index: 1;width: 100%; height: 100%;position: absolute; left: 0; top: 0;}
.section_rag .container{z-index: 2; position: relative;}
.rag_title{margin-bottom: 50px; color: #00E6FD;font-size: 30px;font-weight: 700; text-align: center;}
.rag_title_span{display: inline-block;position: relative;padding-bottom: 10px;}
.rag_title_span:after{background: radial-gradient(50% 50% at 50% 50%, #00E6FD 0%, rgba(0, 230, 253, 0) 100%); content: "";position: absolute; left: 0; top:100%;height: 8px;width: 100%;}
.rag_list{display: flex; align-items: center;width: 100%; justify-content: space-between;padding-bottom: 50px;}
.rag_list_left{width: 50%;padding-right: 30px;}
.rag_list_left .title{font-size: 26px; margin-bottom: 15px;}
.rag_list_left .txt{font-size: 18px;}
.rag_list_right{width: 50%;}
.section_workflow{background: url("../images/background-3.jpg") no-repeat center center;background-size: cover; position: relative;}
.section_workflow:after{content: ""; background:  url("../images/image3.png") repeat-y top center;background-size: cover; z-index: 1;width: 100%; height: 100%;position: absolute; left: 0; top: 0;}
.section_workflow .container{z-index: 2;position: relative;}
.workflow_list{display: flex; align-items: center;width: 100%; justify-content: space-between;padding: 50px 0;}
.workflow_list_left{width: 50%;}
.workflow_list_left .title{font-size: 30px; color: #00E6FD;text-align: center; position: relative;padding-bottom: 10px;margin-bottom: 30px; font-weight: 700;}
.workflow_list_left .title:after{background: radial-gradient(50% 50% at 50% 50%, #00E6FD 0%, rgba(0, 230, 253, 0) 100%); content: "";position: absolute; left: 0; top:100%;height: 8px;width: 100%;}
.workflow_list_left .txt{font-size: 18px;}
.workflow_list_right{width: 50%;padding-left: 30px;}
.copyright{background: #000;padding: 15px 0; text-align: center;}
.contact{display: inline-block;;width: 100%;padding: 30px 0; color: rgba(255,255,255,0.5);}
.contact_li{float: left;width: 33.333%;}
.contact_li a{color: #FFF;display: block; margin-top: 5px;}
.contact_li a i{color: rgba(255,255,255,0.5); margin-right: 5px;}
.contact_li a:hover{text-decoration: underline}
.top_nav_Close{display: none}
@media (min-width:1500px) {
.container{max-width: 1400px;}
}
@media (max-width:1400px) {
    .banner_title{font-size: 52px;}
    .banner_txt{font-size: 20px;}
}
@media (max-width:1280px) {
   
     .banner_title{font-size: 32px;}
    .banner_txt{font-size: 16px;}
    .banner_bg{min-height: 400px;}
   
}
@media (max-width: 767px) {
     .top_nav_icon{display: block;}
    .menu{position:fixed;  top:0px; right:-100%;  height:100%;  width:90%; max-width: 350px;z-index:99; background:#212121; box-shadow: -4px 0px 48px 0px #000000;opacity:1; overflow:auto;transition: all 0.4s ease-out; }
    .menu a{display: block; padding: 15px 0; font-size: 20px;}
    .menu a+a{border-top: 1px solid #424242}
     .menu:after{ backdrop-filter: blur(24px);background: rgba(0,0,0,0.85);width: 100%; position: fixed; z-index:1; left:-100%; top:0px; height: 100%; content:""; display: block;}
    .menu.top_nav_mobile{right: 0px;}
     .menu.top_nav_mobile:after{left: 0px;}
     .top_nav_Close{display: flex;align-items: center; justify-content: center;color: #FFF; font-size: 14px; border-radius: 50px; border: 1px solid #FFF;position: absolute; top: 20px; right:20px; cursor: pointer;width: 24px; height: 24px;text-align: center;}
    .top_nav_Close i:before{font-weight: bold!important}
    .menu_bg{z-index: 2;position: relative;height: 100%;box-shadow: -4px 0px 48px 0px #000000;background: #212121; padding:50px 0px;}
    .banner_content{width: 100%;float: none;text-align: center;}
    .banner_bg{min-height: auto;padding: 60px 0;backdrop-filter: blur(16px);background: rgba(0,0,0,0.8);}
    .logo{max-width: 85px;margin-left: 5px;}
    .section_rag{padding: 30px 0 10px;}
    .rag_title{font-size: 28px;}
    .section_rag::after{background: rgba(0,0,0,0.85);backdrop-filter: blur(24px);}
    .rag_list{display: block;}
    .rag_list_left{width: 100%;padding-right: 0;text-align: center; margin-bottom: 20px;}
    .rag_list_right{width: 100%;}
    .workflow_list{display: block;}
    .workflow_list_left{width: 100%;margin-bottom: 20px;}
    .workflow_list_right{width: 100%;padding-left: 0;}
    .workflow_list_left .title{font-size: 28px;}
    .workflow_list_left .txt{text-align: center; }
    .section_workflow::after{background: rgba(0,0,0,0.85);backdrop-filter: blur(16px);}
    .contact_li{float: left;width: 100%;text-align: center;margin: 10px 0;}
    .contact{padding: 15px 0;}
    .copyright{font-size: 14px;}
}