@charset "utf-8";

/* company */
#page_company {position:relative;width:100%;margin:0;padding:0;font-size:13px}
#page_company:after {display:block;visibility:hidden;clear:both;content:""}

#page_company .text_box {position:relative;width:100%;margin:0;padding:20px;border:1px solid #ccc}
#page_company .text_box p {display:block;padding:0 0 20px;font-size:17px;text-align:center;word-break:keep-all}
#page_company .text_box p.text1 {font-size:25px}
#page_company .text_box p.text4 {position:relative;margin:0 auto;max-width:800px;line-height:35px;color:#555}

.designweb_img {position:relative;width:90%;height:auto;margin:40px auto;padding:0}
.designweb_img:after {display:block;visibility:hidden;clear:both;content:""}
.designweb_img .img_wrap {float:left;position:relative;width:25%;margin-bottom:10px;text-align:center}
.designweb_img .img_wrap .img {position:relative;width:70%;margin:0 auto;text-align:center}
.designweb_img .img_wrap .img:before {content:"";display:block;padding-top:100%}
.designweb_img .img_wrap .img span {font-size:1.6em}
.designweb_img .img_wrap .img div {position:absolute;top:0;left:0;right:0;bottom:0;border-radius:200px;box-shadow:1px 1px 3px #ccc}
.designweb_img .img_wrap .img1 {background:#FFD00D;padding-top:40%;opacity:1;color:#fff}
.designweb_img .img_wrap .img2 {background:#151343;padding-top:40%;opacity:1;color:#fff}
.designweb_img .img_wrap .img3 {background:#FF5555;padding-top:40%;opacity:1;color:#fff}
.designweb_img .img_wrap .img4 {background:#34862E;padding-top:35%;opacity:1;color:#fff}
.designweb_img .img_wrap .img1:hover {background:#ddd;color:#333}
.designweb_img .img_wrap .img2:hover {background:#ddd;color:#333}
.designweb_img .img_wrap .img3:hover {background:#ddd;color:#333}
.designweb_img .img_wrap .img4:hover {background:#ddd;color:#333}

#page_company .map_box {position:relative;width:100%;height:400px;margin:0;padding:0}
#page_company .map_box .box {position:relative;width:100%;height:400px;margin:0;padding:0}

/* business */
#business_wrap {background:url('../img/business_bg.jpg') center;background-size:cover;padding:0 0 60px}
#business_title {display:block;padding:40px 0;text-align:center;font-size:2em;font-weight:bold;color:#333}
#business_title .line {position:relative;width:40px;height:3px;background:#333;margin:10px auto 0}
#business {position:relative;width:96%;max-width:1300px;height:auto;margin:0 auto;padding:40px 0;background:#fff;box-shadow:0 0 5px #fff}
#business:after {display:block;visibility:hidden;clear:both;content:""}
#business .box {float:left;position:relative;width:50%;height:auto;margin:0;padding:0}
.visu_content3 {position:relative;width:86%;height:270px;margin:15px auto;padding:50px 6%;text-align:center;border:1px solid #ccc;background:#f2f2f2;box-shadow:3px 3px 0 #ddd}
.visu_content3 p.text1 {display:inline-block;text-align:center;padding-bottom:30px;margin-bottom:30px;border-bottom:1px  solid #ccc;width:70%;color:#FF3636;font-size:1.4em;font-weight:bold}
.visu_content3 p.text2 {display:block;text-align:center;font-size:1.2em;line-height:22px;font-weight:normal;word-break:keep-all}
.visu_content3 p.text3 {display:block;text-align:center;margin-bottom:35px;color:#FF3636;font-size:1.4em;font-weight:bold}
.visu_content3 p.text4 {display:block;color:#aaa;font-size:1.8em}
.visu_content3 p.text5 {display:block;text-align:center;margin-top:35px}
.visu_content3 p.text5 a {display:inline-block;padding:8px 30px;background:#6799FF;color:#fff;text-decoration:none;font-size:13px}
.visu_content3 p.text5 a:hover {background:#ccc;color:#333}

/* process */
#process_wrap {background:url('../img/process_bg.jpg') center;background-size:cover;padding:0 0 60px}
#process_title {display:block;padding:40px 0;text-align:center;font-size:2em;font-weight:bold;color:#333}
#process_title .line {position:relative;width:40px;height:3px;background:#333;margin:10px auto 0}
#process {position:relative;width:96%;max-width:1300px;height:auto;margin:0 auto;padding:40px 3%;background:#fff;box-shadow:0 0 5px #fff}
#process:after {display:block;visibility:hidden;clear:both;content:""}

#process_content1 {float:left;position:relative;width:70%;height:100%;margin:0;padding:0}
#making_process {position:relative;width:100%;height:auto;margin:0 0 20px;padding:0}
#making_process:after {display:block;visibility:hidden;clear:both;content:""}
#making_process div.head1 {float:left;width:25%;min-width:190px;padding:10px;display:inline-block;font-size:1.25em;font-weight:bolder;color:#333;border-radius:8px;border-bottom:1px solid #CC3D3D}
#making_process div.content1 {float:left;padding:10px;margin-left:20px;display:block;background:#fff}
#making_process div.head1 span.title {font-size:0.75em;color:#CC3D3D;display:block}
#making_process div.head1 span.con {display:block;padding-left:30px}
#process_content2 {float:left;position:relative;width:30%;height:100%;margin:0;padding:0;text-align:center}
#process_content2 .title1 {display:inline-block;text-align:center;width:60%;margin-bottom:50px;padding:150px 0 20px;border-bottom:2px solid #bbb;font-size:2em;font-weight:bold;font-family:arial}
#process_content2 .title2 {line-height:22px;font-size:1.1em}
i.fa-arrow-down {font-size:1.8em}
span.process_arrow1 {color:#333}
span.process_arrow2 {color:#666}
span.process_arrow3 {color:#999}
span.process_arrow4 {color:#bbb}
span.process_arrow5 {color:#eee}



@media (max-width:1000px) {

.designweb_img .img_wrap {width:50%}
.designweb_img .img_wrap .img span {font-size:1em}

}

@media (max-width:900px) {

#process_content2 {display:none}
#process_content1 {width:100%}
#making_process div.head1 {float:none}
#making_process div.content1 {float:none}

#business .box {width:100%}

}

@media (max-width:700px) {



}


@media (max-width:600px) {

.designweb_img .img_wrap .img {width:90%}

.visu_content3 {position:relative;width:93%;height:200px;margin:15px auto;padding:30px 6%;text-align:center;border:1px solid #ccc}
.visu_content3 p.text1 {display:inline-block;text-align:center;padding-bottom:20px;margin-bottom:20px;border-bottom:1px  solid #ccc;width:70%;color:#FF3636;font-size:1.2em;font-weight:bold}
.visu_content3 p.text2 {display:block;text-align:center;font-size:1em;line-height:22px;font-weight:normal}
.visu_content3 p.text3 {display:block;text-align:center;margin-bottom:35px;color:#FF3636;font-size:1.2em;font-weight:bold}
.visu_content3 p.text4 {display:block;color:#aaa;font-size:1.8em}
.visu_content3 p.text5 {display:block;text-align:center;margin-top:35px}
.visu_content3 p.text5 a {display:inline-block;padding:8px 30px;background:#6799FF;color:#fff;text-decoration:none;font-size:13px}
.visu_content3 p.text5 a:hover {background:#ccc;color:#333}

}