.border {
        border: 3px solid #333;
    }

    .BG-dbd5c2 {
        background: #dbd5c2;
    }

    .BG-6a5e72 {
        background: #6a5e72;
    }

    .BG-94c7b6 {
        background: #94c7b6;
    }

    .BG-d3643b {
        background: #d3643b;
    }

    .height_1 {
        height: 70px;
    }

    .height_2 {
           height: 158px;
    width: 819px;
    }

    
    .height_4 {
        height: 280px;
    }

    .height_5 {
        height: 350px;
    }

    .height_6 {
        height: 420px;
    }
    .height_231{
        height:231px;
    }
    .height_30{
        height:30px;
    }
    .index {
        font-size: 24px;
        position: absolute;
        top: 5%;
        left: 0;
        right: 0;
        margin: auto;
    }

    .index-our:hover, .index-pro:hover, .index-blog:hover {
        opacity: 0.85;
        filter: alpha(opacity=85);
        transform: scale(1.1);
        transition: all 1s ease 0s;
        -webkit-transform: scale(1.1);
        -webkit-transform: all 1s ease 0s;
        z-index: 99;
    }

    .index a:hover {
        text-decoration: none;
    }

    .index .index-our {
        padding-top: 4%;
        text-align: center;
        cursor: pointer;
      width: 209px;
    height: 144px;
}
        .index .index-ora {
      width:309px;
}

        .index .index-last2{
                width: 112px;
    height: 112px;
        }
         .index .index-last{
                 width: 112px;
    height: 46px;
        }

    .index .index-lan {
        text-align: right;
        line-height:18px;    width: 622px;
    }
     .index .index-lan2 {
         text-align:center;
         padding-top:12px;
    }
      .index .index-lan2 a{
        margin:2%;display:inline-block;
    }
     .index .index-log {
         height: 386px;
    width: 931px;
    }
     .index .index-pur{
             height: 158px;
    width: 209px;
     }

        .index .index-lan a {
            font-size: 16px;
            margin: 1%;
            padding-top: 0;
        }

    .index .index-pro {
        text-align: right;
        padding-top: 17%;
        padding-right: 6px;
        cursor: pointer;    width: 90px;
    height: 272px;
    }

    .index .index-blog {
        text-align: left;
        padding-top: 0%;
        padding-left: 6px;
        cursor: pointer;
        height:272px;width:119px;
    }
    /*-----------------menu------------------------*/
  /* Menu */
.nav {
	width: 180px;
	height: 300px;
    left:0;
    position: absolute;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top: 0;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto; }

.nav > li a {
	color: #fff;
	font-size: 40px;
	padding: 17px 25px;
	text-align: center;  }

.nav > li a:hover {
	color: #fff;
	text-decoration: none;
	background: transparent;
	background: rgba(0,0,0,0); /* fallback */ }

.nav-section {
	height: 0;
	 width: 0;
	position: fixed;
	z-index: 89;
	overflow: hidden;
	background: rgba(0,0,0,0.75);
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top:0;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto;}
    
.show { height: 100%; width: 100%; }

/* Menu button */
.nav-bar, 
.menu {
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out; }
.nav-bar {
	width: 35px;
	background-color: #666;
	height: 5px;
	margin-bottom: 8px; }
	
.menu {
	width: 35px;
	height: 31px;
	z-index: 100;
	    right: 2%;
	top: 2%;
	position: absolute;
	cursor: pointer; }
	
.animate-1 { width: 0;}
.animate-2 {
	width: 35px;
	-webkit-transform: rotate(-45deg) translate(10px, -10px);
	-moz-transform: rotate(-45deg) translate(10px, -10px);
	-o-transform: rotate(-45deg) translate(10px, -10px);
	-ms-transform: rotate(-45deg) translate(10px, -10px);
	transform: rotate(-45deg) translate(10px, -10px);  
	background: #fff; }
.animate-0 {
	width: 35px;
	-webkit-transform: rotate(45deg) translate(8px, 8px);
	-moz-transform: rotate(45deg) translate(8px, 8px);
	-o-transform: rotate(45deg) translate(8px, 8px);
	-ms-transform: rotate(45deg) translate(8px, 8px);
	transform: rotate(45deg) translate(8px, 8px);   
	background: #fff; }
.pc{
    display:block;
}

 .tablet,.mobile,.re-pc{
        display:none;
    }
  
@media (max-width: 1200px) and (min-width: 767px) {
    .tablet,.re-pc{
        display:block;
    }
    .pc,.mobile{
        display:none;
    }
   .index .index-lan2 {
    padding-top: 26px;
}
}



@media (max-width: 766px) and (min-width: 320px) {
      .mobile,.re-pc{
        display:block;
    }
    .pc,.tablet{
        display:none;
    }
     .menu{
        top:1%;
    }
     .index{
    top: 8%;
}
     .index-lan2 .col-xs-6{
         text-align:left;
     }
     .index .index-lan2 a {
         font-size:16px;
}
}


    /*-webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;*/