@import url("layout.css");
@import url("bootstrap.css");
@import url("bootstrap-grid.css");
@font-face {
    font-family: 'notobs';
    src: url("../fonts/�鰵�鸌��𡡞��.TTF") format("opentype");
}
html{
	   margin: auto;
}
body {
    margin: 0;
    font-family: 'Microsoft JhengHei', sans-serif;
    font-size: 1.6rem;
}

header{
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
}
.indexBar{
    max-width: 1530px;
    height: auto;
   
    margin: auto;
    margin-bottom: 76px;
}
.indexContent{
    max-width: 1024px;
    height: auto;
   
    margin: auto;
    margin-bottom: 76px;
}
.navbar {
    box-shadow: 1.364px 1.463px 9.94px 0.06px rgba(3, 4, 4, 0.28);
    margin-bottom: 0 !important;
    background-color: #fff;
    width: 100%;
    position: absolute;
    max-width: 1400px;
    z-index: 1;
    margin: 0 auto;
    display: block;
    top: 60px;
    border-radius: 10px;
}

.menu-box {
    display: block;
    margin: auto;
    text-align: center;
    padding: 22px 24px;
    position: relative;
    
}
.menu-box ul {
    list-style: none;
    margin-bottom: 0;
    text-align: right;
    padding-left: 0;
}
.menu-box .link {
    display: inline-block;
    
}
.menu-box_btn {
display: inline-block;
  margin-left: 20px;

}


.menu-box_btn .item{
   
    margin: 0 3px;
}


.menu-box .link a span{
    position: relative;
    display: inline-block;
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    transition: transform .3s;
    font-weight: bold;
}

.menu-box_logo{
    float: left;
    margin-top: 6px;
}

.menu-box ul li{
    position: relative;
}
.link_item {
color: #333333;
    
    display: inline-block;
    font-size: 1.2em;
    letter-spacing: 2px;
position: relative;
    text-decoration: none;
    -webkit-transition: background .1s ease-out;
    transition: background .1s ease-out;     
    padding: 20px 14px;
}



.link_item:hover.link_item span:before{
    right:0;
}
.menu-box ul li a:hover {
    color: #1d2088;
   
}
.menu-box ul li a:focus {
    color: #1d2088;
     
  }
  #search {
    display: inline-block;
    margin-right: 20px;
    vertical-align: top;
    font-size: 4rem;
    color: #797979;
    margin-top: -6px;
    height: 38px;
    margin-left: 9px;
    padding: 0px 7px;
    -webkit-transform: rotate(181deg);
    -moz-transform: rotate(181deg);
    -ms-transform: rotate(181deg);
    -o-transform: rotate(181deg);
    transform: rotate(106deg);
}
.search_box {
    display: flex;
    clear: both;
    position: absolute;
    float: right;
    right: 17px;
    top: 63px;
    width: 305px;
    background: rgba(255, 255, 255, 0.5411764705882353);
    margin: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.search_box input {
    width: 90%;
    height: 33px;
    font-size: 1.6rem;
    padding-left: 10px;
    margin: 0px;
    border: none;
    background: rgba(255, 255, 255, 0.8);
}

.search_box.active {
    height: auto;
    padding: 8px;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}
.search_box input.search_icon {
    clear: both;
    width: 66px;
    height: auto;
    padding: 1%;
    margin: 0;
    float: right;
    border: medium none;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
    background: #1f296f;
    opacity: 1;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -ms-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
}
  /* banner頛芣偘 */
.banner_bg{
    width: 100%;
}
.bannerallbg{
    position: relative;
}
.banner-txt{
        
    position: absolute;
    z-index: 1;
    bottom: 15%;
    font-size: 16px;
    letter-spacing: 4px;
    left: 22px;
    color: #fff;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
.banner-txt .line{
    background-color: #fff;
    width: 1px;
    height: 80px;
    position: absolute;
    bottom: 93px;
    left: 12px;


}
.banner_text .text01{
    text-align: initial;
}
.banner_text .text02{
padding-right: 9px;
    margin-top: 73px;
}
  .box{
    width:900px;
    height:200px;
    margin:100px auto;
    overflow: hidden;
  }
  .img-g{
    width:1500px;
    height:200px;
    position:relative;
  }
  .img-g img{
    float:left;
    width:300px;
    height:200px;
  }
  .button-g{
    position:relative;
    top:-20px;
    text-align:center;
  }
  .button-g span{
    display:inline-block;
    position:relative;
    z-index:10;
    width:10px;
    height:10px;
    margin:0 5px;
    border-radius:100%;
  }
  
.bannerallbg_box{
    position: relative;
}


:focus{
  outline: none;
}
a:focus {
    outline: none;
    text-decoration: none;
}


/* ��𨀣䲰��穃�� */
.index_about_box{
    margin: 0;
}
.index_about_box .col-md-7{
padding: 0;
}
.index_about_box .col-md-5{
display: flex;
    align-items: center;
}
.index_about_box{
    background-image: -moz-linear-gradient( 88deg, rgb(5,167,220) 0%, rgb(1,146,117) 100%);
  background-image: -webkit-linear-gradient( 88deg, rgb(5,167,220) 0%, rgb(1,146,117) 100%);
  background-image: -ms-linear-gradient( 88deg, rgb(5,167,220) 0%, rgb(1,146,117) 100%);

}
.index_about_box .pic{
    width: 100%;
    margin-top: -111px;
    box-shadow: 1.364px 1.463px 10.94px 0.06px rgba(3, 4, 4, 0.2);
}
.index_about_box .right-info{
    width: 38%;
    margin-left: 66px;


}
.right-info .title{
    font-size: 3.4rem;
    color: #fff;
    font-weight: bold;
}
.right-info .txt{
    font-size: 1.6rem;
    color: #fff;
    margin-top: 10px;
    line-height: 1.8;
}
.right-info .more{
border: 1px solid #fff;
color: #fff;

padding: 10px 20px;
display: inline-block;
margin-top: 41px;
}
.right-info .more:hover{
    background-color: #fff;
    color: #04a1bf;
    font-weight: bold;
}


/* �瓲敹��𤩎��  */
.prod-info_block{
    display: flex;
}
.index_prod{
    position: relative;
    background-image: url(../images/bg_prod.png);
}
.index_prod_box{
    position: absolute;
    width: 100%;
    top: calc( 50% - 233px );
    max-width: 1366px;
    margin: 0 auto;
    left: calc( 50% - 700px );
}
.index_prod_box .row{
margin: 0;
padding: 0;
}
.index_prod_box_title{
    color: #797979;
    font-size: 4.6rem;
    font-weight: bold;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    letter-spacing: 4px;
}
.prod-info_block_left .title{
    color: #484848;
    font-size: 3.6rem;
    font-weight: bold;
    margin-top: 20px;
}
.prod-info_block_right img{
width: 100%;
}
.prod-info_block_left .txt{
    font-size: 1.6rem;
    line-height: 2;
    margin-top: 30px;
    width: 78%;
}

.prod-info_block_left .more{
background-color: #009cd6;
color: #fff;
padding: 7px 15px;
font-weight: bold;
font-size: 1.6rem;
letter-spacing: 1px;
margin-top: 40px;
position: relative;
overflow: hidden;
transition: all 0.4s;
display: inline-block;
}
.prod-info_block_left .more:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .6;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19,1,0.22,1);
    width: 50px;
    z-index: 0;
}
.prod-info_block_left .more:hover:after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19,1,0.22,1);
}
.prod-info_block_left{
    margin-top: 59px;
}
.index_prod_box .slick-dots{
    position: absolute;
    bottom: 40px;
    height: 20px;
    display: block;
    width: auto;
    left: 0;
    top: 29px;

}
.index_prod_box .slick-dots li button:before {
   
    width: 28px;
    height: 5px;
    border-radius: 0;
    content: "";

    background-color: #009cd6;
  
    border: none;
}
.index_prod_box .slick-dots li {
    position: relative;
    display: inline-block;
    width: auto;
    margin: 0px 16px;
    margin-right: 23px;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}
.index_prod_bg img{
    max-width: 100%;
}
.index_prod_box .slick-active{
    opacity:1 !important;
}
.index_prod_box .prod-dot{
    position: absolute;
    top: 0;
    width: 100%;
}
.prod-dot .dot-item{
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    font-family: Arial;
    font-size: 2.4rem;
    color: #a2a2a2;
    margin: 0px 17px;
    margin-right: 18px;
}
.prod-dot .h-text{
    color: #009cd6;
}
/* ���鰵瘨��� */

.index_news{
  
}
.index_news_box{
    max-width: 1366px;
    margin: 150px auto;
    padding: 0 15px;
}

.index_news_box_title {
    color: #797979;
    font-size: 4.6rem;
    font-weight: bold;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    letter-spacing: 4px;
}
a:hover{
    text-decoration: none;
}

.index_news_info .info-list .title{
    color: #3e3e3e;
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 8px;
}
.index_news_info .info-list .date{
    color: #8e8e8e;
   margin-bottom: 20px;
}
.index_news_info .info-list .txt{
    font-size: 1.8rem;
    line-height: 1.8;
    color: #4c4c4c;

}
.index_news_info .info-list .more{
    background-color: #009cd6;
    color: #fff;
    padding: 7px 15px;
    font-weight: bold;
    font-size: 1.6rem;
    letter-spacing: 1px;
    margin-top: 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
    display: inline-block;
}
.index_news_info .info-list .more:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: .6;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19,1,0.22,1);
    width: 50px;
    z-index: 0;
}
.index_news_info .info-list .more:hover:after {
    left: 120%;
    transition: all 550ms cubic-bezier(0.19,1,0.22,1);
}
/* 蝎暸�訾�𨅯� */
.index_works{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 15px;
}
.index_works_title{
   text-align: center;
   font-size: 4rem;
   letter-spacing: 1px;
   color: #383838;
   margin-bottom: 45px;
   margin-top: 50px;
}
.index_works_wrap_inner{
    display: block;
}
.index_works_wrap_inner .title{
font-size: 1.5rem;
padding: 10px;
text-align: center;
font-weight: bold;
color: #000;
margin-bottom: 20px;
}
.index_works_wrap_inner figure img{
    width: 100%;
}
.index_works_wrap_inner figure {
    position: relative;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
}
.index_works_wrap_inner figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.index_works_wrap_inner figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}



/* footer */
footer{
  background-color: #313131;
}
.foot {
    max-width: 1400px;
    margin: auto;
    position: relative;
    padding: 0 20px;
}
.foot_box {
    padding: 50px 0px 50px 0;
    display: flex;
}
.foot_l-box {
    width: 70%;
    display: flex;
    vertical-align: middle;

}
.foot_l-box > div:first-child{
    margin-right:60px;
}
.company-box .title{
color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 18px;
}
.foot_l-box .add{
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin-left: 50px;
    margin-top: 10px;
}
.company-box ul{
color: #fff;
padding-left: 0;
line-height: 1.6;
font-size: 1.5rem;
list-style: none;
}
.company-box ul li{
    color: #fff;
   
    }
.foot_R-box ul li{
    color: #bbb;
    margin-bottom: 15px;
}
.foot_R-box {
    width: 30%;
    display: inline-block;
 
    position: relative;
}

.foot_R-box ul{
list-style: none;
text-align: right;
padding-left: 0;
}


.foot_R-box_item{
    padding: 6px 0;
    display:block;
}
.foot_R-box ul li a{
    color: #bbb;

}


/* ����璅��� */
.pagination > li > a{
    color: #4f7329;
}
.pagination > li > a:hover{
    color: #fff;
    background-color: #1f296f;
    border-color: #1f296f;
}
.pagination .current {
    color: #fff;
    background-color: #1f296f;
    border-color: #1f296f;
}
.pagination > li > a:focus{
    color: #fff;
    background-color: #1f296f;
    border-color: #1f296f;
}


/* search */

input[type=search] {
    background-image: url(../images/ico-search.png);
    border: solid 1px #000;
    /* padding: 9px 10px 9px 32px; */
    background-position-x: 7px;
    width: auto;
    background-position-y: 11px;
    width: 44px;
    /* background-size: auto; */
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    background-repeat: no-repeat;
}

#search input[type=search] {
    width: 44px;
    height: 44px;
    color: transparent;
    cursor: pointer;
}
#search input[type=search]:hover {
	background-color: #fff;
}
#search input[type=search]:focus {
	width: 200px;
	padding-left: 32px;
	color: #000;
	background-color: #fff;
	cursor: auto;
}
#search input:-moz-placeholder {
	color: transparent;
}
#search input::-webkit-input-placeholder {
	color: transparent;
}


input[type=search] {
    background-image: url(../images/ico_m-search.png);
    border: solid 1px #000;
    /* padding: 9px 10px 9px 32px; */
    background-position-x: 7px;
    width: auto;
    background-position-y: 11px;
    width: 44px;
    /* background-size: auto; */
    -webkit-border-radius: 10em;
    -moz-border-radius: 10em;
    border-radius: 10em;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    background-repeat: no-repeat;
}

#m-search input[type=search] {
    width: 200px;
    height: 44px;
    padding-left: 38px;
    background-color: #ffffff;
    cursor: auto;
    opacity: 1;
    top: 129px;
    left: calc( 50% - 100px );
}

#m-search input:-moz-placeholder {
    color: transparent;
}
#m-search input::-webkit-input-placeholder {
	color: transparent;
}

.lau-box{
    position: absolute;
    right: 22px;
    top: -30px;
    width: 100px;
    color: #fff;  
}
.lau-box a{
    font-weight: bold;
    color: #fff;
    font-size: 1.8rem;
    display: inline-block;
    margin: 0 10px;
    vertical-align: top;
}
.lau-box .current{
    color: #163784;
    text-shadow: 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff, 0px 0px 2px #fff;
}
/* top */
.top-pic{
    position: absolute;
    left: 20px;
    top: 11px;
}
#top{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-size: 1.6rem;
    color: #fff;
    padding: 13px;
    padding-top: 17px;
    z-index: 10;
}
#top i{
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#top:hover{
    background: rgba(0, 0, 0, 0.8);
}
#top:hover i{
    color: #fff;
    top: 5px;
}



/* �湧�詨鱓璅��� */

.hamburger-btn{
     /* float: right; */
     right: 0;
     position: absolute;
     top: 27%;
}
.menu-btn {
    display: inline-block;
      margin-left: 20px;
    position: relative;
    }
    .menu-btn .search{
        background-image: url(../images/ico-search.png);
       
       
    }
    
    #menu .menu-btn .item{
        display: inline-block;
        width: 44px;
        font-size: 1.6rem;
        color: #1f296f;
        height: 44px;
        border-radius: 50px;
        padding-top: 9px;
        margin-right: 10px;
        border: 1px solid #333;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
    }
    .menu-btn .item:hover{
    border: 1px solid #fff;
    background-color: #fff;
    }
    
 


 
 #menuToggle
 {
  
   display: block;
   position: relative;
   top: 0;
   right: 0;
   z-index: 1;
   -webkit-user-select: none;
   user-select: none;
 }
 
 #menuToggle input
 {
   display: block;
   width: 40px;
   height: 32px;
   position: absolute;
   top: -7px;
   left: -5px;
   
   cursor: pointer;
   
   opacity: 0; /* hide this */
   z-index: 2; /* and place it over the hamburger */
   
   -webkit-touch-callout: none;
 }
 
 /*
  * Just a quick hamburger
  */
 #menuToggle span
 {
   display: block;
   width: 33px;
   height: 4px;
   margin-bottom: 5px;
   position: relative;
   
   background: #1f296f;
   border-radius: 3px;
   
   z-index: 1;
   
   transform-origin: 4px 0px;
   
   transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
               opacity 0.55s ease;
 }
 
 #menuToggle span:first-child
 {
   transform-origin: 0% 0%;
 }
 
 #menuToggle span:nth-last-child(2)
 {
   transform-origin: 0% 100%;
 }
 
 /* 
  * Transform all the slices of hamburger
  * into a crossmark.
  */
 #menuToggle input:checked ~ span
 {
   opacity: 1;
   transform: rotate(45deg) translate(-2px, -1px);
   background: #ffffff;
 }
 
 /*
  * But let's hide the middle one.
  */
 #menuToggle input:checked ~ span:nth-last-child(3)
 {
   opacity: 0;
   transform: rotate(0deg) scale(0.2, 0.2);
 }
 
 /*
  * Ohyeah and the last one should go the other direction
  */
 #menuToggle input:checked ~ span:nth-last-child(2)
 {
   transform: rotate(-45deg) translate(0, -1px);
 }
 
 /*
  * Make this absolute positioned
  * at the top left of the screen
  */
 #menu
 {
    box-shadow: 1.364px 1.463px 2.94px 0.06px rgba(3, 4, 4, 0.28);
    position: fixed;
    width:100%;
    right: 0;
    height: 157vh;
text-align: center;
margin: -132px 0 0 -50px;
    padding: 10px;
    padding-top: 125px;
    background: #1f296f;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 }
 #menu li:first-child{
margin-bottom: 23px;
height: 33px;
 }
 #menu li
 {
   padding: 8px 0;
  
 }
 #menu a{
    font-size: 2rem;
    color: #fff;
    font-weight: bold;
 }
 /*
  * And let's slide it in from the left
  */
 #menuToggle input:checked ~ ul
 {
   transform: none;
 }
 nav{
    text-align: center;
 }
 #menu .subs-box a{
    font-size: 1.6rem;
  
    color: rgba(255, 255, 255, 0.7);
    font-weight: normal;
}
#menu .subs-box li:first-child{
         margin-bottom:0;
         height: auto;
}
.subs-box{
    padding-left: 0;
}
#menu .subs-box li{
    padding: 5px 0;
}
 @media screen and (max-width: 1600px) {
 .index_about_box .right-info {
    width: 56%;
  
}
.banner-txt {
   
    bottom: 92px;
}
 }
 @media screen and (max-width: 1500px) {
    .navbar {
       
        width: 90%;
       
        left: 5%;
    }
    .right-info .title {
        font-size: 3rem;
    }
 }

 @media screen and (max-width: 1366px) {
 .index_about_box .right-info {
    width: 80%;
    margin-left: 33px;
}
.right-info .title {
    font-size: 2.6rem;
}
.right-info .more {
   
    margin-top: 20px;
}
.banner-txt {
   display: none;
}
.index_prod_box_title {
    writing-mode: inherit;
    -webkit-writing-mode: inherit;
    margin-top: -52px;
    margin-bottom: 50px;
}
.index_prod_box {
  
    left: 0;
}
.index_prod_box .col-md-2 ,.index_prod_box .col-md-10{
    max-width: 100%;
    width: 100%;
    flex: 100%;

 }
 .index_prod_box .col-md-10{
 max-width: 100%;
 width: 100%;
 flex: 100%;
 padding: 0 15px;
 margin: -16px;
 }
 .index_news_box .col-md-2 ,.index_news_box .col-md-10{
    max-width: 100%;
    width: 100%;
    flex: 100%;

 }
 .index_news_box_title {
    writing-mode: inherit;
    -webkit-writing-mode: inherit;
    margin-top: -52px;
    margin-bottom: 50px;
}
}
 @media screen and (max-width: 1180px) {
    .link_item {
      
        padding: 20px 12px;
    }
 #search {

    margin-right: 10px;
   
}
.menu-box_btn .item{
    margin-right: 10px;
}
.menu-box_btn{
    margin-right: 10px; 
}
.menu-box .link{
    display: none;
}
.menu-box_btn{
    display: none;
}
.bannerallbg .pc{
    display: none;
}
.banner_text{
    background-color: #ffffffc7;
}
.navbar {
box-shadow: none;
position: relative;
top: 0;
left: 0;
padding-bottom: 15px;
}
.menu-box{
    padding: 11px 0; 
}
.menu-box ul{
    text-align: left;
}
 }
 
@media screen and (min-width: 1180px) {
.hamburger-btn{
display: none;

}
.bannerallbg .mobile{
    display: none;
}
.menu-btn{
    display: none;
}
.drop-down{
    display: none;
    text-align: right;
}
}
@media screen and (max-width: 1023px) {

.foot_R-box ul{
    margin-left: 53px;
}
.index_news_box_item {
    padding: 40px 20px;
}
.index_news_box_item .left_wrap .info {
   
    margin-bottom: 20px;
}
.slick-dots {
bottom: 6px;
}

.index_about_box .pic{
    margin-top: -24px;
}
.index_prod_box_title {
 
    margin-top: 23px;

}
.index_about_box .right-info{
    padding: 33px 0;
}
.index_prod_box {
    position: relative;
    width: 100%;
    top: 0; 
  
}
.index_prod_bg{
    display: none;
}
.index_prod {
    position: relative;
    background-image: none;
    background-color: #eaeaea;
    padding-bottom: 50px;
}
.index_news_box_title {
    margin-bottom: 15px;
    font-size: 3.6rem;

}

}
@media screen and (max-width: 992px) {
.index_works_title{
    padding-left: 35px;
    text-align: left;
}

.foot_R-box_item{
    display: none;
}
.foot_l-box {
    width: 100%;
}

.foot_R-box {
    width: 100%;
}
.foot_box {
    padding: 36px 0px 20px 0;
         display:block;
}

 .index_news_box {
   
    margin: 80px auto 40px;
}
.foot_R-box ul {
  
    text-align: center;
   
}
.foot_R-box ul li {
   
    margin-bottom: 2px;
}
}
@media screen and (max-width: 768px) {
    .page-content{
        margin-top: 20px;
    }
    .banner_text {
      
        padding: 17px 15px;
       
    }
   
    .foot_l-box .logo-en{
        margin-top: 0; 
  
 margin-left: 0;
    }
    .foot_l-box .add{
        margin-left: 0;
    }
    .foot_R-box {
        width: 100%;
        text-align: center;
    }
    .foot_l-box .f-logo {
       float: none;
       
        margin-bottom: 6px;
    }
    .foot_R-box ul {
        margin-left: 0;
        display: block;
    }
    .foot_box {
        padding: 20px 0px 20px 0;
    }
    .col-xs-2{
width: 123px;
    }
    .col-xs-10{
    width: 72%;
    padding: 0;
    }
    .index_news_box_item {
        padding: 30px 20px;
     
    }
    .info_box_text{
        display: none;
    }
    .index_news_box_item .title {
        font-size: 3rem;
    }
    .index_works_title {
        font-size: 3rem;
    }
    .index_news_info .info-list .more {
      
        margin-top: 15px;
    }
    .index_news_info .info-list{
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px dashed #ccc;

    }
    .index_prod_box_title {
        margin-bottom: 31px;
        font-size: 3.6rem;
    }
    .prod-info_block_left .title {
       
        font-size: 2.6rem;
    }
    .prod-info_block_left .txt {
     
        margin-top: 12px;
        width: 100%;
    }
    .prod-info_block_left .more {
      
        margin-top: 12px;
        margin-bottom: 15px;
 
    }
    .index_news_info .info-list .title {
      
        font-size: 2rem;
      
        margin-bottom: 3px;
    }
    .index_news_info .info-list .txt {
        font-size: 1.6rem;
        line-height: 1.5;
       
    }
    .index_news_info .info-list .date {
        
        margin-bottom: 9px;
    }
    .index_about_box .right-info{
        padding: 21px 0;
    width: 100%;
    margin-left: 6px;
    }
}
@media screen and (max-width: 530px) {
.index_news_box_item .info_date {
    font-size: 2.2rem;
    padding: 4px 8px;
    width: 79px;
   
    padding-bottom: 10px;
}
.index_works_title{
  
    margin-bottom: 20px;
    margin-top: 30px;
 }
.col-xs-2{
    width: 100px;
}
.index_news_box_item .info_box_title {
    font-size: 2rem;
   
    line-height: 1.5;
}
.menu-box_logo{
    width: 67%
}
}

@media screen and (max-width: 500px) {
.foot_l-box {
    display: block;
}
.foot_l-box > div:first-child {
   
    width: 100%;
}
}