body{background:#fff;font-family:"Open Sans",sans-serif;font-size:14px;color:#222} *{margin:0;padding:0} ul{list-style:none} a{outline:none;text-decoration:none} .lsize{width:1170px;margin:0 auto} .lsize2{width:945px;margin:0 auto} .center{text-align:center} .clear{clear:both} .clearfix:after{content:" ";visibility:hidden;display:block;height:0;clear:both} ::selection{background:#c1272d;color:#fff} ::-moz-selection{background:#c1272d;color:#fff} .title_bdr{background:#c1272d;width:150px;height:1px;margin:0 auto} .title_sub_bdr{color:#fff} .sec_title{font-size:40px;line-height:75px;color:#222;text-transform:uppercase} .title_slog{color:#888;font-size:16px} .blue_btn{background:#c1272d;display:inline-block;color:#fff;font-weight:600;font-size:16px;font-family:"Open Sans",sans-serif;text-transform:uppercase;padding:0 40px;border:1px solid #c1272d;border-radius:50px;height:50px;line-height:50px;cursor:pointer;transition:all .3s;-webkit-transition:all .3s} .blue_btn.white_btn{background:#fff;color:#222} .blue_btn:hover{background:#888;color:#fff} #home{background:url(../images/home_bg.jpg) no-repeat 0 0/100% auto;height:100vh} #home .slogan h2{font-size:50px;line-height:60px;color:#fff;padding:200px 0 30px} #home .slogan p{font-size:20px;line-height:30px;color:#fff;padding:40px 0 0} #home .sticky_header{height:60px} #home header{background:#000;width:1170px;height:60px;border-bottom:1px solid #c1272d;transition:all .5s;-webkit-transition:all .5s} #home header.sticky{background:#000;position:fixed;z-index:10;top:0;left:0;right:0;width:100%;margin:0 auto} #home header .logo{float:left;margin-left:15px} #home header .logo a{background-image:url(../images/logo.png);background-repeat:no-repeat;background-position:0 center;background-size:auto 60px;display:block;text-indent:-9999px;width:240px;height:60px} #home header nav{float:right} #home header nav .mob_dd{display:none;background-image:url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20height%3D%2212px%22%20version%3D%221.1%22%20viewBox%3D%220%200%2018%2012%22%20width%3D%2218px%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asketch%3D%22http%3A//www.bohemiancoding.com/sketch/ns%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%3E%3Ctitle/%3E%3Cdesc/%3E%3Cdefs/%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%3E%3Cg%20fill%3D%22%23000000%22%20id%3D%22Core%22%20transform%3D%22translate%28-87.000000%2C%20-342.000000%29%22%3E%3Cg%20id%3D%22menu%22%20transform%3D%22translate%2887.000000%2C%20342.000000%29%22%3E%3Cpath%20d%3D%22M0%2C12%20L18%2C12%20L18%2C10%20L0%2C10%20L0%2C12%20L0%2C12%20Z%20M0%2C7%20L18%2C7%20L18%2C5%20L0%2C5%20L0%2C7%20L0%2C7%20Z%20M0%2C0%20L0%2C2%20L18%2C2%20L18%2C0%20L0%2C0%20L0%2C0%20Z%22%20id%3D%22Shape%22%20fill%3D%22%23fff%22%20/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E);background-repeat:no-repeat;background-size:25px auto;background-position:center center;width:25px;height:40px;margin-right:20px;text-indent:-9999px} #home header nav ul li{float:left} #home header nav ul li a{color:#fff;display:block;height:40px;line-height:40px;padding:0 25px;text-transform:uppercase;font-weight:600;transition:all .3s;-webkit-transition:all .3s;margin:10px 5px 10px 0;border-radius:5px} #home header nav ul li a:hover{background:#c1272d} #home header nav ul li a.active{background:#c1272d} #about_us .expert_box{background:#f7f7f7 url(../images/export_img_1.jpg) no-repeat 100% 0;background-size:auto 616px;padding:55px 0;min-height:616px;box-sizing:border-box} #about_us .expert_box .left_side{margin-right:530px} #about_us .why_title{font-size:24px;margin-bottom:15px} #about_us .expert_box .left_side .title_slog{margin-bottom:20px} #about_us .about_compny li{color:#888;margin-bottom:10px} #portfolio{padding:70px 0} #portfolio .prod_detl_title{font-size:16px;font-weight:600;margin:20px 0 10px} #portfolio ul{margin:50px 0 0} #portfolio ul li{width:58.37607%;padding:0 6px;box-sizing:border-box;margin:50px 0} #portfolio ul li:nth-child(odd){float:left} #portfolio ul li:nth-child(odd) .portfolio_img{float:right} #portfolio ul li:nth-child(odd) .portfolio_desc{float:right;margin-right:20px} #portfolio ul li:nth-child(even){float:right} #portfolio ul li:nth-child(even) .portfolio_img{float:left} #portfolio ul li:nth-child(even) .portfolio_desc{float:left;text-align:left;margin-left:30px} #portfolio ul li .portfolio_img{position:relative} #portfolio ul li .portfolio_img .img_box{width:170px;height:170px;overflow:hidden;border:7px solid #f1f1f1;border-radius:50%} #portfolio ul li .portfolio_img .img_box img{width:170px} #portfolio ul li .portfolio_img:before{background:#f1f1f1;content:"";width:1px;height:300px;position:absolute;bottom:-300px;left:0;right:0;margin:auto} #portfolio ul li .portfolio_desc{width:400px} #portfolio ul li .portfolio_desc .desc_title{font-size:18px;font-weight:600;margin-bottom:10px} #portfolio ul li .portfolio_desc .desc_title span{display:block} #portfolio ul li .portfolio_desc .desc_text{color:#888;color:#888} #portfolio ul li:last-child .portfolio_img:before{display:none} #contact{background:#111;padding:70px 0} #contact .cont_title{color:#fff} #contact .cont_laft{float:left;width:48%;margin-right:20px} #contact .cont_laft .cont_address{color:#f1f1f1;margin:0 0 10px} #contact .cont_laft .cont_address b{font-size:20px;color:#fff} #contact .cont_laft ul{margin:10px 0 20px} #contact .cont_laft ul li{margin-bottom:10px} #contact .cont_laft ul li a{display:block;line-height:20px;padding-left:30px;box-sizing:border-box;color:#f1f1f1;background-repeat:no-repeat;background-position:5px center} #contact .cont_laft ul li a:hover{color:#c1272d} #contact .cont_laft ul li a.phn_icon{background-size:auto 20px;background-image:url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20%3F%3E%3Csvg%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%20width%3D%2248%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M31%202h-16c-2.76%200-5%202.24-5%205v34c0%202.76%202.24%205%205%205h16c2.76%200%205-2.24%205-5v-34c0-2.76-2.24-5-5-5zm-8%2042c-1.66%200-3-1.34-3-3s1.34-3%203-3%203%201.34%203%203-1.34%203-3%203zm9-8h-18v-28h18v28z%22%20fill%3D%22%23888%22/%3E%3Cpath%20d%3D%22M0%200h48v48h-48z%22%20fill%3D%22none%22/%3E%3C/svg%3E)} #contact .cont_laft ul li a.mail_icon{background-size:18px auto;background-position:5px 5px;background-image:url(data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%2020010904//EN%22%20%22http%3A//www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd%22%3E%0A%3Csvg%20version%3D%221.0%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22375.000000pt%22%20height%3D%22242.000000pt%22%20viewBox%3D%220%200%20375.000000%20242.000000%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%3E%0A%3Cg%20transform%3D%22translate%280.000000%2C242.000000%29%20scale%280.100000%2C-0.100000%29%22%20fill%3D%22%23888%22%20stroke%3D%22none%22%3E%0A%3Cpath%20d%3D%22M45%202408%20c-27%20-15%20-35%20-28%20-35%20-61%200%20-37%2021%20-75%2062%20-113%2048%20-46%201624%20-891%201695%20-909%2073%20-19%20143%20-19%20216%200%2071%2018%201647%20863%201695%20909%2041%2038%2062%2076%2062%20113%200%2034%20-8%2046%20-37%2062%20-31%2016%20-3629%2015%20-3658%20-1z%22/%3E%0A%3Cpath%20d%3D%22M5%201778%20c-3%20-7%20-4%20-376%20-3%20-820%20l3%20-806%2030%20-43%20c17%20-24%2050%20-57%2074%20-74%20l43%20-30%201723%200%201723%200%2043%2030%20c24%2017%2057%2050%2074%2074%20l30%2043%200%20816%200%20817%20-30%200%20c-20%200%20-305%20-144%20-866%20-438%20-789%20-412%20-839%20-438%20-905%20-446%20-38%20-4%20-100%20-4%20-138%200%20-65%208%20-116%2033%20-904%20446%20-459%20240%20-848%20439%20-863%20441%20-18%203%20-31%20-1%20-34%20-10z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E)} #contact .cont_right{float:left;width:calc(100% - (48% + 20px))} #contact .cont_right .txtbox{display:block;border:1px solid #888;border-radius:5px;margin-bottom:30px;width:100%;height:50px;line-height:50px;text-indent:10px;font-size:16px;font-family:"Open Sans",sans-serif} #contact .cont_right .txtarea{display:block;border:1px solid #888;border-radius:5px;margin-bottom:30px;width:100%;height:150px;resize:none;padding:5px 10px;box-sizing:border-box;font-size:16px;font-family:"Open Sans",sans-serif} footer{background:#111} footer .copyright{padding:30px 0;border-top:1px solid #fff;color:#fff} @media screen and (min-width: 320px) and (max-width: 479px) { body{font-size:12px} .lsize{width:100%} .lsize2{width:100%} .sec_title{font-size:26px;line-height:46px} #home{background-position:center center;background-size:auto 100%} #home .sticky_header{height:40px} #home .slogan h2{padding:80px 0 30px;font-size:26px;line-height:36px} #home .slogan p{font-size:13px;line-height:20px} #home header{position:fixed;width:100%;height:40px;z-index:11} #home header .logo a{background-size:auto 40px;height:40px} #home header nav .mob_dd{display:block} #home header nav ul{background:rgba(34,34,34,0.8);display:none;position:absolute;top:41px;right:0;width:100%;border-bottom:1px solid #c1272d} #home header nav ul li{float:none;text-align:center} #home header nav ul li a{margin:5px;padding:0;height:30px;line-height:30px} #about_us .sec_title{text-align:center} #about_us .title_slog{text-align:center;font-size:13px} #about_us .expert_box{padding:50px 10px;background-image:none} #about_us .expert_box .left_side{margin:0} #portfolio{padding:50px 10px} #portfolio ul li{width:100%} #portfolio ul li .portfolio_desc{width:100%} #portfolio ul li .portfolio_desc .prod_detl_txt{text-align:left} #portfolio ul li .portfolio_desc .prod_detl_title{text-align:left} #portfolio ul li .portfolio_img .img_box{margin:0 auto} #portfolio ul li .portfolio_img:before{display:none} #portfolio ul li:nth-child(odd){float:none} #portfolio ul li:nth-child(odd) .portfolio_img{float:none} #portfolio ul li:nth-child(odd) .portfolio_desc{float:none;text-align:center;margin-right:0} #portfolio ul li:nth-child(even){float:none} #portfolio ul li:nth-child(even) .portfolio_img{float:none} #portfolio ul li:nth-child(even) .portfolio_desc{float:none;text-align:center;margin-left:0} #contact{padding:50px 10px} #contact .cont_laft{float:none;margin:0 0 30px;width:100%} #contact .cont_laft ul li{float:none;width:100%} #contact .cont_right{float:none;width:100%} } @media screen and (min-width: 480px) and (max-width: 639px) { body{font-size:12px} .lsize{width:100%} .lsize2{width:100%} .sec_title{font-size:26px;line-height:46px} #home{background-position:center center;background-size:auto 100%} #home .sticky_header{height:40px} #home .slogan h2{padding:80px 0 30px;font-size:26px;line-height:36px} #home .slogan p{font-size:13px;line-height:20px} #home header{position:fixed;width:100%;height:40px;z-index:11} #home header .logo a{background-size:auto 40px;height:40px} #home header nav .mob_dd{display:block} #home header nav ul{background:rgba(34,34,34,0.8);display:none;position:absolute;top:41px;right:0;width:100%;border-bottom:1px solid #c1272d} #home header nav ul li{float:none;text-align:center} #home header nav ul li a{margin:5px;padding:0;height:30px;line-height:30px} #about_us .sec_title{text-align:center} #about_us .title_slog{text-align:center;font-size:13px} #about_us .expert_box{padding:50px 10px;background-image:none} #about_us .expert_box .left_side{margin:0} #portfolio{padding:50px 10px} #portfolio ul li{width:100%} #portfolio ul li .portfolio_desc{width:100%} #portfolio ul li .portfolio_desc .prod_detl_txt{text-align:left} #portfolio ul li .portfolio_desc .prod_detl_title{text-align:left} #portfolio ul li .portfolio_img .img_box{margin:0 auto} #portfolio ul li .portfolio_img:before{display:none} #portfolio ul li:nth-child(odd){float:none} #portfolio ul li:nth-child(odd) .portfolio_img{float:none} #portfolio ul li:nth-child(odd) .portfolio_desc{float:none;text-align:center;margin-right:0} #portfolio ul li:nth-child(even){float:none} #portfolio ul li:nth-child(even) .portfolio_img{float:none} #portfolio ul li:nth-child(even) .portfolio_desc{float:none;text-align:center;margin-left:0} #contact{padding:50px 10px} #contact .cont_laft{float:none;margin:0 0 30px;width:100%} #contact .cont_right{float:none;width:100%} } @media screen and (min-width: 640px) and (max-width: 767px) { body{font-size:12px} .lsize{width:100%} .lsize2{width:100%} .sec_title{font-size:26px;line-height:46px} #home{background-position:center center;background-size:auto 100%} #home .sticky_header{height:40px} #home .slogan h2{padding:80px 0 30px;font-size:26px;line-height:36px} #home .slogan p{font-size:13px;line-height:20px} #home header{position:fixed;width:100%;height:40px;z-index:11} #home header .logo a{background-size:auto 40px;height:40px} #home header nav .mob_dd{display:block} #home header nav ul{background:rgba(34,34,34,0.8);display:none;position:absolute;top:41px;right:0;width:100%;border-bottom:1px solid #c1272d} #home header nav ul li{float:none;text-align:center} #home header nav ul li a{margin:5px;padding:0;height:30px;line-height:30px} #about_us .sec_title{text-align:center} #about_us .title_slog{text-align:center;font-size:13px} #about_us .expert_box{padding:50px 10px;background-image:none} #about_us .expert_box .left_side{margin:0} #portfolio{padding:50px 10px} #portfolio ul li{width:100%} #portfolio ul li .portfolio_desc{width:100%} #portfolio ul li .portfolio_desc .prod_detl_txt{text-align:left} #portfolio ul li .portfolio_desc .prod_detl_title{text-align:left} #portfolio ul li .portfolio_img .img_box{margin:0 auto} #portfolio ul li .portfolio_img:before{display:none} #portfolio ul li:nth-child(odd){float:none} #portfolio ul li:nth-child(odd) .portfolio_img{float:none} #portfolio ul li:nth-child(odd) .portfolio_desc{float:none;text-align:center;margin-right:0} #portfolio ul li:nth-child(even){float:none} #portfolio ul li:nth-child(even) .portfolio_img{float:none} #portfolio ul li:nth-child(even) .portfolio_desc{float:none;text-align:center;margin-left:0} #contact{padding:50px 10px} #contact .cont_laft{float:none;margin:0 0 30px;width:100%} #contact .cont_right{float:none;width:100%} } @media screen and (min-width: 768px) and (max-width: 1023px) { body{font-size:12px} .lsize{width:100%} .lsize2{width:100%} #home{height:380px} #home .sticky_header{height:50px} #home .slogan h2{padding:30px 0;font-size:40px;line-height:50px} #home .slogan p{font-size:18px;line-height:26px} #home header{width:100%;height:50px} #home header .logo a{background-size:auto 50px;height:50px} #home header nav ul li a{padding:0 15px;height:40px;line-height:40px;margin:5px} #about_us .expert_box{background-image:none;padding:60px 10px;min-height:auto} #about_us .expert_box .left_side{margin:0} #about_us .expert_box .left_side .sec_title,#about_us .expert_box .left_side .title_slog{text-align:center} #portfolio{padding:60px 10px} #portfolio ul{margin:20px 0 0} #portfolio ul li{width:472px} #portfolio ul li .portfolio_desc{width:246px} #contact{padding:60px 10px} } @media screen and (min-width: 1024px) and (max-width: 1179px) { .lsize{width:100%} .lsize2{width:100%} #home{background-size:auto 100%;background-position:center center} #home header{width:100%} #portfolio,#contact{padding:70px 10px} #about_us .expert_box{background-position:105% 0;padding:70px 10px} #about_us .expert_box .left_side{margin-right:350px} }