@charset "utf-8";
/* CSS Document */
/*----------
Application
----------*/
#application .grid{grid-template-columns:repeat(3,1fr); margin-top:6rem; grid-gap:6rem 4rem ;}
.applications-area-case img{border-radius:15px;  box-shadow: 0 0 10px rgba(80,80,80,0.4);}
.applications-area-product{ overflow: hidden;}
.applications-area-product img{transition: all .5s ease-in-out;}
.applications-area p{ padding-top: 1.6rem; font-weight: bold; color: var(--web-theme-color-black); text-align: center;}
/* Process Flow Chart  */
#flow-chart .grid{grid-template-columns:repeat(2,1fr); padding-bottom: 6rem; margin-top:6rem; grid-gap:0rem 2rem ;}
.flow-chart-info{ position: relative;}
.flow-chart-info img{ box-shadow: 30px -30px 0 rgba(237,237,237,1);}
.flow-chart-info-box{ position: absolute;  left: 4rem; bottom: -6rem; z-index: 2; width: 437px;  height: 40px; display: flex; align-items: center; border-bottom: var(--web-theme-color) solid 5px; 
background-color: var(--web-theme-color-white); padding:6rem  4rem 5rem 4rem; }
.flow-chart-info-time{ font-size: 6rem; font-weight: 600; color: var(--web-theme-color);}
.flow-chart-info-time strong{ font-size:3rem; vertical-align: text-bottom;}
.flow-chart-info-experience{  margin-left: 2rem;}
.info-experience{ font-weight: 700;} 
.info-experience b{ display: block; line-height: 1.2em; font-size: 3rem;}
.flow-chart-Process ul li{ display: flex; align-items: center; padding-top: 2rem;}
.flow-chart-Process-number{ font-size: 3.6rem; font-weight: bold; color: var(--web-theme-color);}
#flow-chart .flow-chart-Process-topone{ padding: 0;}
.flow-chart-Process-txt{ margin-left: 2rem;}
.flow-chart-Process-txt h3{ font-weight: 600;}
@media screen and (max-width: 1023px) {
/*Application*/	
#application .grid{grid-template-columns:repeat(2,1fr); margin-top:2rem; grid-gap:3rem 2rem ;}
.applications-area-product{  padding: 4rem 2rem;}
.applications-area p{ padding-top: 1.6rem;}
#application .page-title{ text-align: center;}
/* Process Flow Chart  */
#flow-chart{ padding-bottom:0;}
#flow-chart .grid{grid-template-columns:1fr; padding-bottom: 4rem; margin-top:6rem; grid-gap:4rem ;}
.flow-chart-info-box{ position: absolute;  left: 0; bottom: -9rem; z-index: 2; width: 100%;  height: 40px;  padding:6rem  4rem 5rem 4rem; }
.flow-chart-info-time{ font-size: 6rem}
.flow-chart-info-time strong{ font-size:3rem;}
.flow-chart-info-experience{  margin-left: 2rem;}
.info-experience b{ display: block;font-size: 3rem;}
.flow-chart-Process ul{ padding-top: 8rem;}
.flow-chart-Process ul li{ display: flex; align-items: center; padding-top: 2rem;}
.flow-chart-Process-number{ font-size: 3rem; font-weight: bold; color: var(--web-theme-color);}
.flow-chart-Process-txt{ margin-left: 2rem;}
}