@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 15px 0 0;  width: 100%;}
.applications-area-product{ overflow: hidden;}
.applications-area-product img{transition: all .5s ease-in-out;}
.applications-area a:hover .applications-area-case img{opacity:0.6;}
.applications-area a:hover .applications-area-product img{transform: scale3d(1.1, 1.1, 1);}
.applications-area-product{ border-radius:0 0 15px 15px; background-color: #f3f6f7; padding: 4rem 2rem;}
.applications-area p{ padding-top: 1.6rem; font-weight: bold; color: var(--web-theme-color-black); text-align: center;}
/* Process Flow Chart  */
#flow-chart{ padding-bottom:12rem;}
#flow-chart .grid{grid-template-columns:repeat(2,1fr); margin-top:8rem; 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: -8rem; 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: 4rem;}
.flow-chart-Process ul li{ display: flex; align-items: center; padding-top: 2rem;}
.flow-chart-Process-number{ font-size: 3.6rem; font-weight: 700; 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: 700;}
.flow-chart-Process-txt p{ word-break: break-all; word-wrap: break-word;}
@media screen and (max-width: 1023px) {
/*Application*/
#application{ padding-bottom: 0;} 
#application .grid{grid-template-columns:repeat(2,1fr); margin-top:2rem; grid-gap:3rem 2rem ;}
.applications-area-product{ border-radius:0 0 15px 15px;  padding: 4rem 2rem;}
.applications-area p{ padding-top: 1.6rem;}
#application .page-title{ text-align: center;}
/* Process Flow Chart  */
#flow-chart{ padding-bottom:4rem;}
#flow-chart .page-title{ text-align: center;}
#flow-chart .grid{grid-template-columns:1fr; 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; 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 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: 3rem; font-weight: bold; color: var(--web-theme-color);}
.flow-chart-Process-txt{ margin-left: 2rem;}
}