#articleAbout * { line-height: 2; letter-spacing: 2px; font-size: 18px; color: #231815; font-weight: 300; }
#articleAbout h2 { font-size: 36px; line-height: 1.5; font-weight: 400; letter-spacing: 5px; }
#articleAbout .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden }
#articleAbout .video-container iframe,#articleAbout .video-container object,#articleAbout .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
#articleAbout >.titbox { padding: 11vw 0; display: flex; flex-direction: column; align-items: center; }
#articleAbout >.titbox p { text-align: center; margin-top: 60px; font-size: 22px; letter-spacing: 12px; }
#articleAbout .item { display: grid; align-items: center; justify-content: end; grid-template-columns: 33% 50%; margin-bottom: 11vw; gap: 90px; }
#articleAbout .item .photo { order: 2 }
#articleAbout .item.right { grid-template-columns: 50% 33%; justify-content: start; }
#articleAbout .item.right .photo { order: -1; }
#articleAbout .item .photo img { aspect-ratio: 257/171; object-fit: cover; }
#articleAbout .item h2:after { content: ''; display: block; width: 55px; height: 3px; background: var(--info); margin: 50px 0; }
#articleAbout .service { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 6vw 0; }
#articleAbout .service:after { content: ''; position: absolute; width: 100vw; height: 100%; background: var(--info); z-index: -1; }
#articleAbout .service * { color: white; }
#articleAbout .service .en { font-size: 22px; font-weight: 300; letter-spacing: 9px; }
#articleAbout .service h2 { letter-spacing: 15px; display: flex; flex-direction: column; align-items: center; }
#articleAbout .service h2:after { content: ''; display: block; width: 55px; height: 3px; background: white; margin: 50px auto; transform: translateX(-7px); }
#articleAbout .service .box { display: flex; gap: 170px; flex-wrap: wrap; margin-top: 80px; }
#articleAbout .service .info { display: flex; flex-direction: column; align-items: center; gap: 35px; }
#articleAbout .concept .titbox { padding: 11vw 0; width: min(100%,1280px); margin: 0 auto; display: grid; grid-template-columns: 32% 1fr; align-items: center; }
#articleAbout .concept .titbox p { border-left: 3px solid var(--info); padding: 10px 0 10px 22%; }
#articleAbout  .gallery { margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 0.9fr; grid-template-rows: 430px 620px; gap: 12px; }
#articleAbout .gallery img { height: 100%; object-fit: cover; width: 100%; }
#articleAbout .img-1 { grid-column: 1/2; grid-row: 1/2; background-position: 0% 0%; }
#articleAbout .img-2 { grid-column: 2/3; grid-row: 1/2; background-position: 50% 0%; }
#articleAbout .img-3 { grid-column: 3/4; grid-row: 1/3; background-position: 100% 0%; background-size: 300% 100%; }
#articleAbout .img-4 { grid-column: 1/3; grid-row: 2/3; background-position: 25% 100%; background-size: 150% 200%; }
#articleAbout .number {display: grid;align-items: center;justify-content: center;position: relative;padding: 6vw 0;margin: 11vw auto;justify-items: center;grid-template-columns: repeat(3, 1fr);width: min(100%, 1600px);}
#articleAbout .number .box:not(:last-child){border-right: 2px solid #E9E5DC;}
#articleAbout .number:after {content: '';position: absolute;width: 100vw;height: 100%;background: rgb(232 232 232 / 15%);z-index: -1;box-shadow: 0px 0px 35px 0px rgb(0 0 0 / 15%);}
#articleAbout .number .box{display:flex;flex-direction: column;align-items: center;width: 100%;}
#articleAbout .number .box .num{color:#958866;font-size: 64px;font-weight: 500;letter-spacing: 7px;font-style: italic;}
#articleAbout .number .box p{width: min(100%, 200px);text-align: center;font-weight: 400;}
#articleAbout .reviews{width: min(90%, 1300px);margin: 0 auto;display: grid;margin-bottom: 11vw;grid-template-columns: 1fr 1fr 1fr;gap: 30px;}
#articleAbout .reviews .box{box-shadow: 0px 0px 15px 0px #8C8C8C42;padding: 60px;display: grid;gap: 45px;align-items: start;align-content: start;}
#articleAbout .reviews .nam{display:flex;align-items: center;flex-wrap: wrap;gap: 10px;font-weight: 400;}
#articleAbout .reviews .nam svg{fill:var(--info)}

@media screen and (max-width:1280px) {
    #articleAbout .item, #articleAbout .item.right{grid-template-columns: 45% 50%;gap: 0px;justify-content: space-between;}
}
@media screen and (max-width:1024px) {
    #articleAbout .reviews{grid-template-columns:1fr}
    #articleAbout .gallery{grid-template-rows: 270px 360px;}
}
@media screen and (max-width:768px) {
    #articleAbout .item, #articleAbout .item.right{grid-template-columns:1fr;gap: 30px;}
    #articleAbout .item .photo{order:-1}
    #articleAbout .service .box{gap: 90px;margin-top: 40px;}
    #articleAbout .service{padding:10vw 0}
    #articleAbout .concept .titbox{grid-template-columns:1fr;gap: 40px;}
    #articleAbout .concept .titbox p{border:0;padding: 0;}
    #articleAbout .number .box .num{font-size:50px;}
    #articleAbout .number .box p{font-size:16px;}
}
@media screen and (max-width:640px) {
    #articleAbout .number .box:not(:last-child){border-bottom: 2px solid #E9E5DC;border-right: 0;padding-bottom: 20px;}
    #articleAbout .gallery{grid-template-rows: 170px 180px;}
    #articleAbout .service .box{display:flex;flex-direction: column;gap: 50px;}
    #articleAbout h2{font-size: 25px;}
    #articleAbout .number{grid-template-columns: 1fr;}
    #articleAbout *{font-size:16px;}
    #articleAbout .reviews .box{padding:30px;gap: 25px;}
}