.cms-main-content{overflow: hidden;  background: url("/images/theme-c67/index/bg-new.png")  repeat-x left top; background-size:auto ;   }
.cms-main-content h4 { font-size: 1.75rem; display: block;margin:6% auto; font-weight: 700;  }
.cms-main-content p { font-size: 1.125rem; line-height: 2.25rem;   font-weight:600;  }
.cms-main-content figure img{ width: 100%; max-width: 100%;}
/*about us----*/
.cms-main-wrap{ width: 100%; padding-right: 10px; padding-left: 10px; max-width: calc((100% - 40px)/12*12 + 40px); margin: auto; height: auto;  display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; background-color: transparent;}
@media (min-width:1200px) {
.cms-main-wrap{  padding-right:20px; padding-left: 20px;max-width: 1280px; }
}
@media (min-width:1400px) {
.cms-main-wrap { padding-right: 40px; padding-left: 40px; max-width: 1440px; }
}
 .cms-main-facility { width: 100%; padding:0px;position: relative;  margin: 5% auto 0 auto;background-color: transparent;}
.cms-main-facility-item { width:55%; height:auto; display: flex; flex-wrap: wrap;  padding:30px 0px 0px 5%; position: relative;   }
.cms-main-facility-item .cms-title-v{width: 20%; align-self: flex-start; order: 1;}
.cms-main-facility .cms-title-v p{padding:0px; margin: 0px;}
.cms-main-txt{width:80%;  margin:0px auto; padding: 5px 20px;   display: flex; flex-wrap: wrap; flex-direction: column; justify-content:flex-start; align-items: flex-start;  align-self: flex-start;  -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.cms-main-facility p{  padding:0px; margin: 0px;    }
.cms-main-facility h3{ width: auto;  margin:0px;  font-size: 2rem; color: #be892f;  font-weight: 500; text-shadow: 0px 0px rgba(255,255,255,1);}
.cms-main-card{ width:45%;  margin:0px; padding:30px 0px 0px 30px;  display: flex; flex-wrap: wrap;position: relative;    }
.cms-main-card figure img {  width: 100%; max-width: 100%; transition: all 0.3s; }
.cms-item-1{ width: 100%; position: relative; z-index: 1;}
.cms-item-2{width: 30%; position: absolute; z-index:99; top: 60%; left:-20%;  }
.cms-item-2 figure img {opacity: .5; }
@media (max-width:1024px) {
.cms-main-facility { padding:0px 30px;}
.cms-main-card figure:after{ width:60px; height:60px;bottom:80px; left:80%; right: auto; position:absolute;z-index:0; background: #e0e0e0; }
}
@media (max-width: 767.98px) {
.cms-main-facility { padding:0px;}
.cms-main-facility-item { width: 100%; order: 2;  padding:30px 0px 0px 0px;}
.cms-main-card { width:100%; padding:0px 20px; order: 1; }
.cms-main-card figure{ max-width: 100%;} 
.cms-main-facility-item .cms-title-v{width: 20%;height: 400px;  align-self: flex-start; order: 1;}
.cms-item-2{width: 30%;  top: 70%; right:0;  }
.cms-main-txt{width:80%;  margin:0px auto; padding: 5px 20px;  flex-direction: row;    -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; }
.cms-main-facility-item {height: 500px;  }
}
/*-------------------*/
/***** bg *****/
/*------------------*/
.cms-about-box .cms-about-box-style{  background: #fff;  box-shadow: 0 55px 30px -30px rgba(125, 125, 125, 0.7);}
.cms-box-wrap{ width: 100%;  margin: 100px auto auto auto;padding:0px 30px 100px 30px;position: relative; background: url("/images/theme-c67/about/bg-2.png") no-repeat left bottom; background-size: 100% auto;  }
.cms-box-wrap h3{ margin:0px 0px 20px 0px; font-size: 2.25rem; position: relative; z-index: 2;}
.cms-box-wrap p{ margin: 0px 5px!important; position: relative; z-index: 2;}
.cms-box-left{ width: 45%; margin-top: 5%; position: relative; z-index: 1}
.cms-box-right{width: 55%;   margin: 0px 0px 0px -10%; padding: 80px 140px 80px 0px; display: flex; flex-wrap: wrap; flex-direction: column; justify-content:flex-start;z-index: 0; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;  }
.tea-pot{width:40%; height: 300px; position: absolute; right:10%; top:50%;background: url("/images/theme-c67/about/tea-cup.png") no-repeat right top; background-size: contain; }

@media (max-width:1200px) {
.cms-box-right{padding: 80px 50px 80px 80px;}
}

@media (max-width:1024px) {
.tea-pot{  top:70%;  }
}

@media (max-width:979px) {
.cms-box-left{ width: 45%; margin-top: 5%; margin-left: 0;  }
.cms-box-right{width: 55%;   margin: 0px 0px 0px -5%; padding: 80px  0px 80px 0px;    }
.tea-pot{top:80%;}   
}


@media (max-width:767.98px) {
.cms-box-wrap{ padding:0px 0px 100px 0px;}   
.cms-box-left{ width: 100%; margin-top: 5%; margin-left: 0;  }
.cms-box-right{width: 100%; height: 460px; margin: 0px; padding: 80px 0px;    }
.tea-pot{top:90%;}   
}

@media (max-width:430px) {
.cms-main-facility-item h1{line-height: 0.8;}
.cms-main-facility p{line-height: 1.5;}
.cms-box-right{flex-direction: row;}
.cms-box-right p{line-height: 1;}
}



 .bg-right{ background: url("/images/theme-c67/about/bg-paper.jpg") repeat-y left bottom; position: relative; background-size: cover;}
 
.graphy1{width: 10%; height: 100vh; position: absolute; z-index: 9; left:10%; top:16%; bottom: auto; opacity: .5; animation: bounceInUp 4s ;}
.graphy2{width: 100%; height: 100vh; position: absolute; z-index: 9; right: 0px; top:0px; bottom: auto; opacity: .5; background-size:15%; animation: bounceInUp 4s ;}
.graphy3{width: 30%; height: 100vh; position: absolute; z-index: 9; left: 70px; right: auto; top:0px; bottom: auto; opacity: 1; animation: bounceInUp 6s ;}
  .abs-graphy { position: absolute;  width: 60%;}