@charset "utf-8";
/* CSS Document */
/*
company 
*/

#about-zs h4{ text-align:center; color:var(--web-theme-color);}
#about-zs h2{ padding-top:1.8rem;}
#about-zs p:first-child{ margin-top:2rem;}
#about-zs p{ width:min(80%,1200px); padding-top:4rem; margin:0 auto;}

/*design*/

.about-design-cont{background-color:var(--web-theme-color);color:#fff;}
.about-design-cont{flex:1;}
.about-design-cont:last-child{ position:relative; padding:6rem;}
.about-design-cont h2{ text-align:left; color:#fff;}
.about-design-cont p{ padding-top:4rem; width:min(80%,500px);color:rgba(255,255,255,.8);}
.about-design-cont ul{ display: -webkit-flex;  display: flex;}
.about-design-cont ul li img{border-radius:10px; overflow:hidden;}
.about-design-cont ul li:nth-child(2),.about-design-cont ul li:nth-child(3){ margin-left:1.2rem;}
.about-design-bottom{ position:absolute; left:6%; bottom:10%;}
.about-bottom-title{ padding-top:4rem; font-size:8rem; font-weight:bold; color:rgba(255,255,255,.2); letter-spacing:5px; text-transform:uppercase;}

/*service*/

#about-service h3{ text-align:center; color:var(--web-theme-color);}
#about-service h2{ padding-top:2rem;}
#about-service .grid{ margin-top:8rem;grid-template-columns:repeat(4,1fr); grid-column-gap:4rem;}
.about-service-item{ position:relative;}
.about-service-number{ position:absolute; left:5%; bottom:34%; width:90px; height:70px;border-radius:5px; padding:2rem 0; margin-bottom:2rem; background-color:#ff0000; font-size:4rem; text-align:center; font-weight:bold; color:#fff;}
.about-service-item img{border-radius:10px; overflow:hidden;}
#about-service .about-service-item h3{ padding-top:1.2rem; margin-top:3rem; text-align:left; text-indent:1em; color:#333;}
.about-service-item p{ width:min(100%,800px); padding-top:1.6rem; padding-left:1.4em;}


@media (max-width:1023px){
/*company*/
#about-zs p{ width:100%; padding-top:4rem; margin:0 auto;}
/*design*/
#about-design .wrap-flex{  flex-direction: column;}
.about-design-cont:last-child{ position:relative; padding: 0 4rem; padding-top:8rem; padding-bottom:22vh;}
.about-design-cont p{ width:100%;}
.about-design-bottom{ position:absolute; left:0; bottom:10%; margin:0 2rem;}
.about-bottom-title{ display:none;}
/*service*/
#about-service .grid{ margin-top:8rem;grid-template-columns:repeat(2,auto); grid-column-gap:4rem; grid-row-gap:4rem;}
.about-service-number{ position:absolute; left:8%; bottom:45%; width:50px; height:40px;border-radius:5px; padding:2rem 0; margin-bottom:2rem; background-color:#ff0000; font-size:4rem; text-align:center; font-weight:bold; color:#fff;}
.about-service-item img{border-radius:8px; overflow:hidden;}
#about-service .about-service-item h3{ padding-top:2rem; margin-top:3rem; text-align:left; text-indent:1em; color:#333;}
}
@media (max-width:490px){
/*company*/
#about-zs p{ width:100%; padding-top:4rem; margin:0 auto;}
/*design*/
#about-design .wrap-flex{  flex-direction: column;}
.about-design-cont:last-child{ position:relative; padding: 0 4rem; padding-top:8rem; padding-bottom:22vh;}
.about-design-cont p{ width:100%;}
.about-design-bottom{ position:absolute; left:0; bottom:10%; margin:0 2rem;}
.about-bottom-title{ display:none;}
/*service*/
#about-service .grid{ margin-top:8rem;grid-template-columns:repeat(2,auto); grid-column-gap:4rem; grid-row-gap:4rem;}
.about-service-number{ position:absolute; left:6%; bottom:58%; width:50px; height:40px;border-radius:5px; padding:2rem 0; margin-bottom:2rem; background-color:#ff0000; font-size:4rem; text-align:center; font-weight:bold; color:#fff;}
.about-service-number-last{position:absolute; left:6%; bottom:52%;} 
.about-service-item img{border-radius:8px; overflow:hidden;}
#about-service .about-service-item h3{ padding-top:2rem; margin-top:3rem; text-align:left; text-indent:1em; color:#333;}
}