/* -- reset module8 -- */
.edit,
.show_content,
.main_part { width: 100% !important; max-width: 100% !important; margin: auto !important; padding: 0px !important;}
.pageIndex .main_part { border:none !important; }
.path{ display:none;}
.edit_part {max-width: 100%;margin: auto;padding: 0;}
/* -- reset module8 end -- */
.hs_box{background: transparent;}

.foct_a{
    padding: 0 var(--pdx) var(--pdy);
}
.foct_a01{
    max-width: 1600px;
    margin: auto;
    transform: translateY(-70px);
}
.foct_a01_a{
    max-width: 1270px;
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 20px;
    align-items: flex-end;
}
.foct_a01_a01 dl{
    background-color: #000;
    padding: calc(10vw + 50px) 5% calc(1vw + 40px);
}
.foct_a01_a01 dl dd{
    max-width: 330px;
    margin: auto;
}
.foct_a01_a01 dl dd p{
    color: var(--colorText-white);
    line-height: 1.9;
}
.foct_a01_a01 > aside{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    margin: calc(1vw + 20px) 0 0;
}
.foct_a01_a01 > aside a{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 500px;
    border: 1px solid #444;
    margin: 10px 0 0 15px;
    transition: all .4s ease-in-out;
}
.foct_a01_a01 > aside a img{
    transition: all .4s ease-in-out;
    width: 60%;
}
.foct_a01_a01 > aside a:is(:first-of-type){
    margin: 10px 0 0;
}
.foct_a01_a01 > aside a:hover{
    transform: translateY(-5px);
}
/* .foct_a01_a01 > aside a:hover img{
    filter: invert(1);
    -webkit-filter: invert(1);
} */
.foct_a02{
    max-width: 1100px;
    margin: auto;
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    transition: all .4s ease-in-out;
}
.foct_a02:hover{
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
}
.foct_a02 > iframe{
    height: clamp(250px,15vw,400px);
}

/* --- Media Queries --- */
@media (max-width: 1500px) {}
@media (max-width: 1440px) {}
@media (max-width: 1024px) {}
@media (max-width: 992px) {}
@media (max-width: 768px) {
    .foct_a01_a{grid-template-columns: 2fr 1fr;}
    .foct_a01_a01{grid-row: 1/3;}
}
@media (max-width: 576px) {
    .foct_a01{transform: unset;padding: 15px 0;}
    .foct_a01_a{grid-template-columns: 1fr 1fr;}
    .foct_a01_a01 dl{padding: 30px 5%;text-align: center;}
    .foct_a01_a01{grid-row: unset;grid-column: 1/3;}
    .foct_a01_a01 > aside{justify-content: center;}
    .foct_a01_a01 > aside a{margin: 10px 8px 0 !important;}
}
@media (max-width: 480px) {}
@media (max-width: 375px) {}