@charset "UTF-8";
/* ------------------------------------------------------------------
author:        谷辰網路資訊
email:         service@gcii.tw
website:       http://www.gcii.tw
 -------------------------------------------------------------------*/
 
/*-----------------------------------------------------------------------------------*/
/*	CSS Reset & Clearfix - http://meyerweb.com/eric/tools/css/reset/
/*-----------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote,q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing:0;}
input,textarea {font:inherit;resize:none;vertical-align: bottom;}
video {max-width: 100%;height: auto;}
iframe,embed,object {max-width: 100%;}
.clear {clear: both;display: block;font-size: 0px;height: 0px;line-height: 0;width: 100%;overflow:hidden;}
.clearfix {position:relative;display: block;clear: both;}

html,body {font-size: 15px;line-height: 25px;letter-spacing: 1px;color: #324664;font-family: "Montserrat","Arial","蘋果儷中黑","Apple LiGothic Medium","微軟正黑體","Microsoft JhengHei",sans-serif;margin-left: 0px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;background-color:#ffffff;}
a {text-decoration: none !important;color: #221814;}
a:hover {color: #cc0000;}
a img {border: none;}
img {max-width: 100%;display:block;}
iframe {border: none !important;}
.ih0 {position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0;}


/* wrapper */
#mainbody {position:relative;width: 100%;background-color:#ffffff;min-height: 500px;background-image: url("../images/main_bg.png");background-repeat:repeat-x;background-position:top center;overflow: hidden;}
#mainbody section {position: relative;width: 100%;}
.mainpage {padding: 0px 0 0 0;margin: 0;background-image: none;background-repeat: no-repeat;background-position: bottom right;background-color:#FFFFFF;width: 100%;}
.mainpage .page-title {width: 100%;color: #7F7F7F;font-weight: 600;font-size: 24px;letter-spacing: 2px;line-height: 26px;text-align: center;margin: 60px 0 40px 0;}
/* wrapper */


/* header */
#header {position: fixed;z-index: 99;background-color: rgba(255, 255, 255, 1);width: 100%;min-height: 96px;}
#header .header {display: flex;justify-content: space-between;}
#header .header .header-logo {padding: 15px 0 0 50px;}
#header .header .header-logo img {max-width: 257px;}
#header .header-menu {text-align: right;padding: 0 50px 0 0;}
#header .header-menu ul.menu {display: flex;flex-wrap: nowrap;justify-content: flex-end;}
#header .header-menu ul.menu > li {line-height:96px;padding: 0;color: #324664;font-size: 18px;font-weight: 500;}
#header .header-menu ul.menu > li > a {color: #324664;border-right: 1px solid #446ED4;padding: 0 25px;transition: all 0.5s;}
#header .header-menu ul.menu > li.noborder a {border-right: 0px solid #ffffff;}
#header .header-menu ul.menu > li.active > a {color: #446ED4;font-weight: 600;}
#header .header-menu ul.menu > li a:hover, #header .header-menu li a:active {color: #446ED4;}
#header .header-menu ul.menu > li.menuLi2 > a {border-right: 0px solid #ffffff;}
#header .header-menu ul.menu > li.menuLi3 > a {background-color:#326EDC;border-radius: 25px;line-height: 25px;color: #FFFFFF;padding: 12px 25px;transition: all 0.5s;}
#header .header-menu li.menuLi3 a:hover {opacity: .8;}
#header .header-menu li.menuLi3 i {font-size: 22px;}
#header .header-menu ul.menu > li.menuLi4 {line-height:30px;}
#header .header-menu ul.menu > li.menuLi4.menuLi41 {margin-left:30px;}
#header .header-menu ul.menu > li.menuLi4 > a {display: inline-block;border-right: 0px solid #446ED4;padding: 0 8px 0 8px;margin-top:34px;}
#header .header-menu li.menuLi4 i {color: #324664;font-size: 30px;}
#header .header-menu li .menu_sub {display: none;position: absolute;width: 150px;background-color: rgba(255, 255, 255, 0.30);margin: 0 0 0 0px;line-height: 25px;text-align: center;}
#header .header-menu li .menu_sub a {display: inline-block;width:90%;font-size: 16px;color: #FFFFFF;padding: 15px 0;border-right: 0px solid #ffffff !important;border-bottom: 1px solid #ffffff;}
#header .header-menu li .menu_sub a:last-child {border-bottom: 0px solid #ffffff;}
/* header */


/* breadcrumb */
#mainbody .breadcrumb {padding: 30px 0;}
#mainbody .breadcrumb li {color: #969696;font-size: 20px;font-weight: 600;}
#mainbody .breadcrumb li a {color: #969696;}
#mainbody .breadcrumb li.active {color: #326EDC;}
/* breadcrumb */


/* index */
.index_01 {position: relative;z-index: 1;overflow: hidden;}
.index_01 .swiper-slide-title {position: absolute;z-index: 2;margin: 20% 0 0 10%;}
.index_01 .swiper-slide-title h3 {font-size: 28px;font-weight: 600;margin-bottom: 30px;}
.index_01 .swiper-slide-title p {font-size: 20px;font-weight: 600;}
.index_01 .swiper-slide-img {position: relative;z-index: 1}
.index_01 .swiper-slide-video {position: relative;z-index: 1}
.index_01 .swiper-slide-video video {width: 100%;height: auto;position: static;}
.index_02 {position: relative;z-index: 2;margin-top: -170px;background-image: url("../images/index_01.png");background-repeat:no-repeat;background-position:top center;background-size:100%;background-color: transparent;display: flex;flex-wrap: nowrap;justify-content: center;align-items: center;padding-top:300px;padding-bottom:100px;}
.index_02 h3 {color:#326EDC;font-size: 22px;font-weight: 600;margin-bottom: 40px;}
.index_02 p {margin-top: 15px;margin-bottom: 40px;color:#324664;line-height: 24px;}
.index_02 a {background-color: #FFFFFF;color: #326EDC;font-size: 16px;border-radius: 25px;padding: 10px 30px;border: 1px solid #326EDC;}
.index_02 a:hover {background-color: #326EDC;color: #FFFFFF;}
.index_021 {width:35%;order: 1;position: relative;padding-left: 150px;padding-right: 150px;}
.index_022 {width:65%;order: 2;position: relative;padding: 30px 0 150px 0;}
.index_022_1 {width:65%;order: 2;position: relative;padding: 0;}
.index_0221 {position: relative;z-index: 1;margin: 0 auto;}
.index_0222 {position: absolute;z-index: 2;left:20px;bottom:50px;}
.index_0223 {position: absolute;z-index: 3;left:350px;bottom:-50px;}
.index_031 {background-color:#FFFFFF;padding: 10px 10px 35px 10px;margin: 50px 50px;}
.index_03 {background-color:#E6FAFF;padding: 50px 0;text-align: center;}
.index_031 img {margin: 0 auto 15px auto;}
.index_031 h4 {color:#326EDC;font-size: 18px;font-weight: 600;margin-bottom: 30px;}
.index_031 a {background-color: #FFFFFF;color: #326EDC;font-size: 16px;border-radius: 25px;padding: 10px 30px;border: 1px solid #326EDC;}
.index_031 a:hover {background-color: #326EDC;color: #FFFFFF;}
.index_04 .cases_list {margin-top: 0px !important;margin-bottom: 0px !important;}
.index_04 .cases_lists {margin-bottom: 0 !important;}
/* index */


/* about */
.about_00 {margin: 0 -5px;padding: 50px 0;background-color:#ffffff;background-image: url("../images/about_bg.png");background-repeat:no-repeat;background-position:top center;}
.about_00 h3 {color:#326EDC;font-size: 22px;font-weight: 600;margin-bottom: 20px;}
.about_01 {margin-bottom: 100px;}
.about_02 {margin-bottom: 100px;}
.about_02 h3 {margin-bottom: 35px;}
.about_02 img {margin: 0 auto;margin-bottom: 20px;}
.about_02 h4 {color:#326EDC;font-size: 18px;font-weight: 600;margin-bottom: 15px;}
.about_02 p {padding: 0 30px;}
.about_03 {padding: 50px 0;}
.about_03 h3 {color:#326EDC;font-size: 22px;font-weight: 600;margin-bottom: 20px;}
.about_031 {width:100%;background-color:#E6FAFF;padding: 50px 150px 30px 250px;margin: 80px 0 40px;border-radius: 99em;}
.about_031 h4 {position: absolute;color:#FFFFFF;font-size: 21px;font-weight: 600;background-color:#326EDC;border-radius: 99em;padding: 15px 40px 15px 70px;margin: -75px 0 0 50px;}
.about_031 h4:before {position: absolute;content: attr(data-nos);width:70px;height:70px;background-color:#FFFFFF;border-radius: 99em;border: 5px solid #326EDC;color:#326EDC;font-size: 30px;margin: -22px 0 0 -85px;line-height:60px;}
.about_031 p {position: relative;text-align: left;font-size: 18px;line-height: 30px;padding-left: 14px;}
.about_031 p:before {position: absolute;content: '•';left: 0;}
/* about */


/* work */
.work_00 {margin: 0 -5px;}
.work_00 h3 {color:#326EDC;font-size: 22px;font-weight: 600;margin-bottom: 20px;}
.work_00 span {display: inline-block;color:#326EDC;font-size: 15px;background-color: #E6FAFF;padding:5px 10px;border-radius: 15px;margin-right:10px;}
.work_00 .work_02 span {color:#326EDC;background-color: #FFFFFF;}
.work_00 p {margin-top: 15px;color:#324664;line-height: 24px;}
.work_01 {background-color: transparent;display: flex;flex-wrap: nowrap;justify-content: center;align-items: center;}
.work_011 {width:35%;order: 1;position: relative;padding-left: 150px;padding-right: 150px;}
.work_012 {width:65%;order: 2;position: relative;padding: 30px 0 150px 0;}
.work_012_1 {width:65%;order: 2;position: relative;padding: 0 0 30px 0;}
.work_0121 {position: relative;z-index: 1;margin: 0 auto;}
.work_0122 {position: absolute;z-index: 2;left:20px;bottom:50px;}
.work_0123 {position: absolute;z-index: 3;right:20px;bottom:50px;}
.work_02 {background-color: #E6FAFF;display: flex;flex-wrap: nowrap;justify-content: center;align-items: center;}
.work_021 {width:45%;order: 2;position: relative;padding-left: 150px;padding-right: 150px;}
.work_022 {width:55%;order: 1;position: relative;padding: 50px 0 150px 0;}
.work_022_1 {width:55%;order: 1;position: relative;padding: 30px 0 0 0;}
.work_0221 {position: relative;z-index: 1;margin: 0 auto 0 -10px;}
.work_0222 {position: absolute;z-index: 2;left:200px;bottom:0px;}
.work_0223 {position: absolute;z-index: 3;right:50px;bottom:0px;}
.work_03 {background-color: #FFFFFF;display: flex;flex-wrap: nowrap;justify-content: center;align-items: center;}
.work_031 {width:45%;order: 1;position: relative;padding-left: 150px;padding-right: 150px;}
.work_032 {width:55%;order: 2;position: relative;padding: 50px 0 150px 0;}
.work_032_1 {width:55%;order: 2;position: relative;padding: 30px 0 0 0;}
.work_0321 {position: relative;z-index: 1;margin: 0 -10px 0 auto;}
.work_0322 {position: absolute;z-index: 3;right:-5%;bottom:5%;}
.work_0323 {position: absolute;z-index: 2;left:15%;bottom:0px;}
/* work */


/* cases */
.cases_menu {text-align: center;margin-bottom: 30px;}
.cases_menu a {color: #969696;font-size: 18px;font-weight: 600;margin: 0 10px;}
.cases_menu a.active, .cases_menu a:hover {color: #326EDC;}
.cases_list {margin-top: 30px;margin-bottom: 60px;}
.cases_lists {margin-bottom: 30px;padding-right: 0;padding-left: 0;}
.cases_lists .image-frame-text {top: 45%;left: 45%;transform: translate(-40%, -40%);-ms-transform: translate(-40%, -40%);}
.cases_lists .image-frame-text h4 {color: #ffffff;font-size: 20px;text-align: center;margin-bottom: 12px;}
.cases_lists .image-frame-text p {color: #ffffff;font-size: 15px;text-align: center;}
.cases-d h1 {text-align: center;font-size: 24px;font-weight: 600;color: #326EDC;margin-bottom: 30px;}
.cases-d .cases-d-img {margin: 50px 0;}
.cases-d .gallery-img {margin-bottom: 15px;}
/* cases */


/* contact */
.contact_01 {display: flex;flex-wrap: nowrap;justify-content: center;align-items: center;padding-bottom: 50px;border-bottom: 1px solid #326EDC;}
.contact_011 {width:35%;padding-left:100px;}
.contact_012 {width:65%;}
.contact_011 h3 {color: #326EDC;font-size: 24px;font-weight: 600;margin-bottom: 15px;}
.contact_011 p {font-size: 18px;}
.contact_02 {padding-top: 50px;padding-bottom: 50px;text-align: center;}
.contact_02 h3 {color: #326EDC;font-size: 24px;font-weight: 600;margin-bottom: 15px;}
.contact_021 .form-group {display: flex;flex-wrap: nowrap;border: 1px solid #326EDC;border-radius: 25px;margin-bottom:15px;padding: 5px 30px 5px 10px;}
.contact_021 .form-group label.control-label {width: 20%;text-align: left;padding:5px 0 0 20px;margin-right:5px;border-right: 1px solid #326EDC;}
.contact_021 .form-group .form-controlA {width: 80%;margin-left: 20px;border: 0px solid #ffffff;}
.contact_0211 {padding-top: 20px;padding-bottom: 20px;}
.contact_0211 .btn-gc {background-color: #326EDC;color: #FFFFFF;font-size: 18px;border-radius: 25px;padding: 10px 30px;}
/* contact */


/* footer */
#footer {background-color: #192841;padding: 80px 0 30px 0;color: #969696;}
#footer .footer {display: flex;justify-content: space-between;}
#footer .footer .footer-right {display: flex;flex-wrap: nowrap;justify-content: flex-end;}
#footer .footer .footer-right .footer-right-01 {position: relative;width:112px;margin-left: 40px;}
#footer .footer .footer-right .footer-right-01::before {content: "";position: absolute;right:0;top:-3px;width:1px;height:25px;border-right: 1px solid #446ED4;}
#footer .footer .footer-right .footer-right-01:last-child::before {content: "";position: absolute;right:0;width:1px;height:15px;border-right: 0px solid transparent;}
#footer .footer .footer-right .footer-right-01 h3 {font-size: 18px;color: #FFFFFF;margin-bottom:12px;}
#footer .footer .footer-right .footer-right-01 h3 a {font-size: 18px;color: #FFFFFF;transition: all 0.5s;}
#footer .footer .footer-right .footer-right-01 p {margin-bottom:6px;}
#footer .footer .footer-right .footer-right-01 p a {font-size: 15px;color: #969696;transition: all 0.5s;}
#footer .footer .footer-right .footer-right-01 a:hover {opacity: .8;}
#footer .footer-bottom {padding: 40px 0 0 0;}
#footer .footer-bottom {display: flex;justify-content: space-between;}
#footer .footer-bottom a {color: #969696;}
#footer .footer-bottom-right-01 {text-align: right;}
#footer .footer-bottom-right-01 a {margin-left: 10px;}
#footer .footer-bottom-right-01 i {font-size: 30px;color: #969696;}
/* footer */


/* page_banner */
.page_banner {position: relative;z-index: 1;width: 100%;}
.page_banner .page_banner_con {position: relative;padding-top: 96px;height: 625px;background-color:#326EDC;overflow: hidden;}
.page_banner .page_banner_title {position: relative;z-index: 3;margin-top: 80px;margin-left: calc(100% - 1550px);}
.page_banner .page_banner_title h3 {font-size: 32px;color: #FFFFFF;font-weight: 700;margin-bottom:10px;}
.page_banner .page_banner_title h4 {font-size: 22px;color: #FFFFFF;font-weight: 700;}
.page_banner .page_banner_img {position:absolute;z-index:1;right:0;bottom:0;}
.page_banner .page_banner_img2 {position:absolute;z-index:2;left:0;bottom:0;}
/* page_banner */


/* mobile menu */
.button_container {display: none;position: fixed;height: 27px;width: 35px;cursor: pointer;z-index: 100;top: 24px;right: 25px;-webkit-transition: opacity .25s ease;transition: opacity .25s ease;}
.button_container span {background: #192841;border: none;height: 5px;width: 100%;position: absolute;top: 0;left: 0;-webkit-transition: all .35s ease;transition: all .35s ease;cursor: pointer;}
.button_container:hover {opacity: .8;}
.button_container.active .top {-webkit-transform: translateY(11px) translateX(0) rotate(45deg);-ms-transform: translateY(11px) translateX(0) rotate(45deg);transform: translateY(11px) translateX(0) rotate(45deg);}
.button_container.active .middle {opacity: 0;}
.button_container.active .bottom {-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);-ms-transform: translateY(-11px) translateX(0) rotate(-45deg);transform: translateY(-11px) translateX(0) rotate(-45deg);}
#wrapper .button_container span {background: #326EDC;}
#wrapper .button_container.active span {background: #FFFFFF;}
.button_container span:nth-of-type(2) {top: 11px;}
.button_container span:nth-of-type(3) {top: 22px;}
.overlay {position: fixed;background-color: rgba(50, 110, 220, 0.9);z-index: 99;top: 0;right: 0;width: 60%;height: 0%;opacity: 1;visibility: hidden;-webkit-transition: opacity .35s, visibility .35s, width .5s;transition: opacity .35s, visibility .35s, width .5s;overflow: hidden;}
.overlay.open {opacity: 1;visibility: visible;height: 100%;}
.overlay nav {position: relative;margin-top: 20%;text-align: left;}
.overlay ul {list-style: none;position: relative;}
.overlay ul > li {width: 100%}
.overlay ul > li > a > h3 {font-size: 20px;line-height: 22px;font-weight: 600;letter-spacing: 3px;color: #ffffff;padding: 0 0 10px 15%;margin-bottom: 10px;}
.overlay ul > li > a {display: block;color: #ffffff;text-decoration: none;margin-bottom: 5px;}
.overlay ul > li.overlay-menu-ab > a {width: 90%;padding: 5px 0 5px 12%;}
.overlay ul > li.overlay-menu-ab > a > h3 {font-size: 15px;line-height: 20px;font-weight: 600;letter-spacing: 3px;color: #ffffff;padding: 0 0 2px 10%;margin-bottom: 0px;}
.overlay ul > li.overlay-menu-ab > a:last-child {margin-bottom: 18px;}
.overlay ul > li > ul.overlay-menu-ul.active {display: block;}
.overlay ul > li > ul.overlay-menu-ul > li {width: 90%}
.overlay ul > li > ul.overlay-menu-ul > li > a {display: block;	color: #ffffff;text-decoration: none;margin-bottom: 5px;}
.overlay .overlay-menu .overlay-menu-community {padding: 15px 0 10px 15%;}
.overlay .overlay-menu .overlay-menu-community i {color: #FFFFFF;font-size: 30px;font-weight: 500;padding: 0 15px 0 0;}
/* mobile menu */


@media (max-width: 1800px) {	
	.work_0222 {max-width:40%;left: 5%;bottom: 5%;}
	.work_0223 {max-width:40%;right: 5%;bottom: 5%;}
}
@media (max-width: 1700px) {
	.work_0322 {max-width:40%;right: -5%;bottom: 5%;}
	.work_0323 {max-width:40%;left: 10%;bottom: 0;}
}
@media (max-width: 1600px) {
	.page_banner .page_banner_con {padding-top: 96px;height: 510px;}
	.page_banner .page_banner_con .page_banner_img {max-width: 1000px;}
	.page_banner .page_banner_con .page_banner_img2 {max-width: 650px;}
	.page_banner .page_banner_title {margin-top: 70px;margin-left: calc(100% - 1200px);}
	.index_021 {padding-left: 50px;padding-right: 50px;}
	.index_022 {overflow: hidden;}
	.work_011,.work_021,.work_031 {padding-left: 100px;padding-right: 100px;}
}
@media (max-width: 1400px) {
	#header {min-height: 86px;}
	#header .header .header-logo {padding: 8px 0 0 20px;}
	#header .header-menu ul.menu > li {line-height: 86px;}
	.about_031 {padding: 50px 100px 30px 200px;}
	.page_banner .page_banner_con {padding-top: 86px;height: 458px;}
	.page_banner .page_banner_con .page_banner_img {max-width: 900px;}
	.page_banner .page_banner_con .page_banner_img2 {max-width: 550px;}
	.page_banner .page_banner_title {margin-top: 70px;margin-left: calc(100% - 1100px);}	
	.work_0222 {max-width:40%;left: 5%;bottom: 10%;}
	.work_0223 {max-width:40%;right: 5%;bottom: 10%;}
	.work_032 {padding: 30px 0 80px 0;}
	.work_0322 {max-width:40%;right: -5%;bottom: 5%;}
	.work_0323 {max-width:40%;left: 10%;bottom: 0;}
}
@media (max-width: 1199px) {
	#header {min-height: 80px;}
	#header .header .header-logo {padding: 8px 0 0 15px;}
	#header .header-logo img {max-width:230px !important;}
	#header .header-menu ul.menu > li {line-height: 80px;font-size: 17px;}
	#header .header-menu ul.menu > li > a {padding: 0 15px;}
	#header .header-menu ul.menu > li.menuLi3 a {border-radius: 22px;line-height: 22px;padding: 10px 20px;}
	#mainbody .breadcrumb li {font-size: 18px;}
	.index_02 {margin-top: -110px;padding-top: 200px;padding-bottom: 100px;}
	.about_031 {padding: 50px 30px 30px 100px;}
	.work_011,.work_021,.work_031 {padding-left: 50px;padding-right: 50px;}	
	.work_0222 {max-width:40%;left: 5%;bottom: 15%;}
	.work_0223 {max-width:40%;right: 5%;bottom: 15%;}
	.contact_011 {padding-left:0px;}
	.page_banner .page_banner_con {padding-top: 80px;height: 349px;}
	.page_banner .page_banner_con .page_banner_img {max-width: 650px;}
	.page_banner .page_banner_con .page_banner_img2 {max-width: 450px;}
	.page_banner .page_banner_title {margin-top: 50px;margin-left: calc(100% - 850px);}

}
@media (max-width: 1024px) {
	#header {min-height: 71px;}
	#header .header .header-logo {padding: 8px 0 0 10px;}
	.index_02 {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;padding-top: 80px;padding-bottom: 50px;}
	.index_02 h3 {padding-top: 100px;margin-bottom: 20px;}
	.index_02 p {margin-top: 0;}
	.index_021 {width: 100%;padding-bottom: 50px;}
	.index_022 {width: 100%;}
	.index_022_1 {width: 100%;}
	.work_01,.work_02,.work_03 {flex-wrap: wrap;padding: 50px 0;}
	.work_011,.work_012,.work_021,.work_022,.work_031,.work_032 {width:100%;}
	.work_021 {order: 1;}
	.work_022 {order: 2;padding: 30px 0 80px 0;}

	.work_012_1 {width: 100%;padding: 30px 0 0 0;}
	.work_022_1 {width: 100%;order: 2;}
	.work_032_1 {width: 100%;}
	#footer {background-color: #192841;padding: 60px 0 20px 0;}
	#footer .footer {flex-wrap: wrap;}
	#footer .footer .footer-left {width: 100%;text-align: center;}
	#footer .footer .footer-left img {margin: 0 auto;}
	#footer .footer .footer-right {width: 100%;flex-wrap: wrap;justify-content: center;margin-top:50px;}
}
@media (max-width: 991px) {
	#header .header-menu {display: none;}	
	.page_banner {padding-top: 0;}
	.page_banner .page_banner_con {padding-top: 71px;height: 320px;}
	.page_banner .page_banner_con .page_banner_img {max-width: 100%;}
	.page_banner .page_banner_con .page_banner_img2 {max-width: 350px;}
	.page_banner .page_banner_title {margin-top: 13%;margin-left: 10px;}
	#mainbody .breadcrumb {padding: 20px 0;}
	#mainbody.index {padding-top:71px;}
	.index_02 h3 {margin-bottom: 25px;padding-bottom: 50px;padding-top: 100px;}
	.index_0222 {max-width:80%;}
	.index_0223 {max-width:80%;}
	.index_031 {padding: 10px 10px 30px 10px;margin: 20px 10px;}
	.about_00 {padding: 15px 0;}
	.about_01 {margin-bottom: 50px;}
	.about_02 {margin-bottom: 50px;}
	.about_03 {padding: 25px 0;}
	.about_03 h3 {margin-bottom: 0px;}
	.about_031 {padding: 50px 30px 30px 60px;border-radius: 40px;}
	.work_01 {padding: 15px 0 15px 0;}
	.work_012 {padding: 30px 0 80px 0;}
	.work_0122 {max-width:40%;left: 5%;bottom: 5%;}
	.work_0123 {max-width:40%;right: 5%;bottom: 5%;}
	.work_02 {padding: 15px 0 15px 0;}
	.work_022 {padding: 30px 0 80px 0;}
	.work_03 {padding: 15px 0 15px 0;}
	.cases_list .image-frame-img {position: relative;z-index: 1;}
	.cases_list .image-frame-overlay {top: auto;bottom: 0;left: 0;right: 0;height: 25%;width: 100%;opacity: 1;background-color:rgba(50, 110, 220, 0.6);overflow: hidden;z-index: 2;}
	.cases_lists {position: relative;}
	.cases_lists .image-frame-text {position: relative;margin: 0 auto;text-align: center;left: 40%;}
	.cases_lists .image-frame-text h4 {font-size: 18px;margin-bottom: 0;}
	.cases_list .image-frame-text p {display: none;}
	#footer .footer-bottom {display: flex;flex-wrap: wrap;justify-content: center;}
	#footer .footer-bottom-left {width: 100%;text-align: center;}
	#footer .footer-bottom-right {width: 100%;text-align: center;}
	#footer .footer-bottom-right-01 {text-align: center;margin-top: 10px;}
	#footer .footer-bottom-right-01 a {margin-left: 10px;}
	#footer .footer-bottom-right-01 i {font-size: 25px;}
	.button_container {display: block;}
}
@media (max-width: 767px){
	#header {background-color: rgba(255, 255, 255, 1);}
	.page_banner .page_banner_con {padding-top: 71px;height: 280px;}
	.page_banner .page_banner_con .page_banner_img {max-width: 100%;}
	.page_banner .page_banner_con .page_banner_img2 {max-width: 250px;}
	.page_banner .page_banner_title {margin-top: 8%;margin-left: 10px;}
	.index_02 {margin-top: -75px;}
	.index_02 h3 {padding-top: 100px;margin-bottom: 20px;}
	.index_0222 {max-width:40%;}
	.index_0223 {max-width:40%;left: auto;right: 5%;bottom: 10%;}
	.about_02 p {padding: 0 30px 30px 30px;}
	.about_031 {margin: 60px 0 40px;padding: 40px 30px 30px 60px;}
	.about_0311 {margin: 70px 0 40px;}
	.about_031 h4 {font-size: 20px;padding: 10px 30px 10px 70px;margin: -65px 0 30px 50px;}
	.about_031 h4:before {width: 60px;height: 60px;font-size: 30px;margin: -18px 0 0 -85px;line-height: 50px;}
	.about_031 p {font-size: 17px;}
	/*.work_0121,.work_0122,.work_0123,.work_0221,.work_0222,.work_0223,.work_0321,.work_0322,.work_0323 {position: relative;z-index: 3;left:0;top:0;bottom:0;right:0;}*/
	.work_0222 {max-width:40%;left: 5%;bottom: 5%;}
	.work_0223 {max-width:40%;right: 5%;bottom: 5%;}
	.contact_01 {flex-wrap: wrap;padding-bottom: 0px;}
	.contact_011 {width:100%;margin-bottom:10px;}
	.contact_012 {width:100%;padding: 30px 0 30px 0;}
	.contact_021 .form-group {padding: 5px 10px 5px 10px;}
	.contact_021 .form-group label.control-label {padding: 5px 0 0 5px;margin-right: 0px;border-right: 1px solid #326EDC;}
	#footer .footer .footer-right .footer-right-01 {margin-bottom: 20px;}
}
@media (max-width: 668px) {	
	.index_02 {margin-top: -65px;}
	.index_01 .swiper-slide-title {margin: 50% 0 0 10%;}
	.index_01 .swiper-slide-title h3 {font-size: 22px;margin-bottom: 20px;}
	.index_01 .swiper-slide-title p {font-size: 15px;}
	.index_02 {margin-top: -70px;padding-top: 120px;padding-bottom: 0px;}
}
@media (max-width: 568px) {
	.page_banner .page_banner_con {padding-top: 71px;height: 250px;}
	.page_banner .page_banner_con .page_banner_img2 {max-width: 200px;}
	.page_banner .page_banner_title h3 {font-size: 28px;margin-bottom: 5px;}
	.page_banner .page_banner_title h4 {font-size: 18px;}
	.index_02 h3 {margin-bottom: 20px;}
	.index_031 h4 {margin-bottom: 20px;}
	.about_031 h4 {padding: 10px 30px 10px 50px;margin: -65px 0 30px 0px;}
	.about_031 h4:before {margin: -18px 0 0 -65px;line-height: 50px;}
	.work_011, .work_021, .work_031 {padding-left: 20px;padding-right: 20px;}
	.work_012,.work_022,.work_032 {padding: 30px 0 30px 0;}
	.contact_021 .form-group {flex-wrap: wrap;padding: 5px 10px 10px 10px;}
	.contact_021 .form-group label.control-label {width: 100%;border-right: 0px solid #ffffff;margin-bottom:10px;}
	.contact_021 .form-group .form-controlA {width: 100%;margin-left: 0px;background-color: #eeeeee;}
}
@media (max-width: 479px) {	
	#header .header .header-logo {padding: 10px 0 0 5px;}
	#header .header-logo img {max-width:210px !important;}
	.index_02 {margin-top: -45px;padding-top: 0px;padding-bottom: 0px;}
	.index_02 h3 {padding-top: 100px;margin-bottom: 20px;padding-bottom: 20px;}
	.index_03 {padding: 20px 0;}
	.index_031 img {max-width:35%;}	
	.about_02 {margin-bottom: 20px;}
	.page_banner .page_banner_con {padding-top: 71px;height: 240px;}
	.cases_menu {margin-bottom: 15px;}
	.cases_menu a {font-size: 16px;margin: 0 5px;}
	#footer .footer .footer-right .footer-right-01 {width: 112px;margin-left: 20px;}
}
@media (max-width: 379px) {
	#header .header-logo img {max-width:200px;}	
	.index_02 {padding-top: 100px;padding-bottom: 0px;}
	.index_02 h3 {padding-top: 0px;margin-bottom: 10px;padding-bottom: 0px;}
	.index_022 {padding: 30px 0 100px 0;}
	.index_0222 {bottom: 15px;}
	.index_0223 {max-width:40%;left: auto;right: 5%;bottom: 10%;}
	.index_031 {padding: 10px 10px 30px 10px;margin: 10px 10px;}
	.index_031 a {font-size: 15px;border-radius: 25px;padding: 8px 26px;}
	#mainbody .breadcrumb {padding: 15px 0;}
	.page_banner .page_banner_con {padding-top: 71px;height: 220px;}
	.about_00 {padding: 10px 0 5px 0;}
	.about_00 h3 {margin-bottom: 10px;}
	.about_01 {margin-bottom: 20px;}
	.about_02 {margin-bottom: 10px;}
	.about_03 {padding: 10px 0 5px 0;}
	.about_031 {margin: 80px 0 30px;padding: 40px 20px 30px 25px;}
	.work_011, .work_021, .work_031 {padding-left: 10px;padding-right: 10px;}
	.work_00 span {font-size: 14px;padding: 4px 8px;margin-right: 6px;}
	.work_0222 {max-width:35%;left: 5%;bottom: 2%;}
	.work_0223 {max-width:35%;right: 5%;bottom: 2%;}
	.about_02 p {padding: 0 15px 15px 15px;}
	#footer .footer-bottom {padding: 20px 0 0 0;}
}
@media (max-width: 330px) {
	.page_banner .page_banner_con {padding-top: 71px;height: 200px;}
}