/*
 * You can say something about your file if you need it!
 */
/*-------------------------*/
/* $Catalog 
---------------------------*/
/** 
 * Catalog
 * Text
 * Background-color
 * Typesetting
**/
/* All */
/*-------------------------*/
/* $Text
---------------------------*/
@media (max-width: 1199px) {}
@media (max-width: 991px) {
    .header__title-text h1{
        font-size: 18px;
        line-height: 20px;
    }
    .hero-2__graphic-button h5,
    .hero-2__animation-button h5,
    .hero-2__introduction-button h5{
        font-size: 20px;
        line-height: 23px;
    }
    [data-lang="en"] .hero-2__introduction-smalltext p{
        font-size: 18px;
        line-height: 25px;
    }
    [data-lang="zh"] .hero-2__introduction-smalltext p{
        font-size: 18px;
        line-height: 40px;
    }
    .hero-footer__information-row h4,
    .hero-footer__information-row p,
    .hero2-footer__information-row h4,
    .hero2-footer__information-row p{
        font-size: 18px;
        line-height: 20px;
    }
}
@media (max-width: 767px) {
    .hero-home__footer-row p,
    .hero2-home__footer-row p{
        font-size: 12px;
        line-height: 14px;
    }
}
@media (max-width: 571px) {
    .hero-footer__text-toptitle h2,
    .hero2-footer__text-toptitle h2{
        font-size: 28px;
        line-height: 30px;
    }
    .hero-home__footer-row p,
    .hero2-home__footer-row p{
        font-size: 10px;
        line-height: 12px;
    }
    [data-lang="en"] .hero-2__areas-text h4,
    [data-lang="en"] .hero-2__graphic-text h4,
    [data-lang="en"] .hero-2__animation-text h4,
    [data-lang="en"] .hero-2__introduction-text h4{
        font-size: 20px;
        line-height: 23px;
    }
    [data-lang="zh"] .hero-2__areas-text h4,
    [data-lang="zh"] .hero-2__graphic-text h4,
    [data-lang="zh"] .hero-2__animation-text h4,
    [data-lang="zh"] .hero-2__introduction-text h4{
        font-size: 18px;
        line-height: 23px;
    }
    .hero-2__graphic-button h5,
    .hero-2__animation-button h5,
    .hero-2__introduction-button h5{
        font-size: 18px;
        line-height: 20px;
    }
    [data-lang="en"] .hero-2__introduction-smalltext p{
        font-size: 14px;
        line-height: 23px;
    }
    [data-lang="zh"] .hero-2__introduction-smalltext p{
        font-size: 14px;
        line-height: 18px;
    }
}
@media (max-width: 500px) {
    .hero-footer__text-toptitle h2,
    .hero2-footer__text-toptitle h2{
        font-size: 24px;
        line-height: 26px;
    }
}
/*-------------------------*/
/* $Background-color 
---------------------------*/
@media (max-width: 571px) {
    .logo__img{
        background-size: contain;
    }
}
/*-------------------------*/
/* $Typesetting 
---------------------------*/
@media (max-width: 991px) {
    .header__title-textrow{
        margin-left: 0;
        margin-right: 0;
        padding: 3px 8px;
    }
    .hero-footer__information-icons,
    .hero2-footer__information-icons{
        float: left;
        width: 50%;
    }
    .hero-footer__information-row,
    .hero2-footer__information-row{
        margin-top: 0;
    }
    .hero-footer__information-intab,
    .hero-footer__information-connect,
    .hero-footer__information-icons,
    .hero2-footer__information-intab,
    .hero2-footer__information-connect,
    .hero2-footer__information-icons{
        margin-top: 15px;
    }
    .hero-2__areas-icons{
        margin-top: 30px;
        height: 50px;
    }
}
@media (max-width: 767px) {
    .header__title-top{
        visibility: hidden;
        opacity: 0;
    }
    .hero-footer__skill-row{
        height: 60px;
    }
    .hero-footer__information-icons,
    .hero2-footer__information-icons{
        width: 50%;
    }
    .hero-2__areas-icons{
        margin-top: 30px;
        justify-content: flex-start;
        flex-wrap: wrap;
        height: auto;
        row-gap: 20px;
        column-gap: 30px;
    }
    .hero-2__areas-icon{
        height: 60px;
    }
}
@media (max-width: 571px) {
    /* heome-1 */
    .logo__row{
        height: 650px;
    }
    .logo__img{
        width: 341px;
        height: 362px;
    }
    .hero__footerbox{
        padding-top: 65px;
        padding-bottom: 30px;
        top: 0;
        left: 0;
        width: 100vw;
    }
    .hero__arrow-row{
        transform: translate( -50%, -90px);
    }
    .hero-footer__skill-row{
        height: 50px;
    }
    .hero-footer__information-icons,
    .hero2-footer__information-icons{
        width: 60%;
        height: 40px;
    }
    /* home-2 */
    .logo-2__row{
        height: 250px;
    }
    .logo-2__img{
        width: 374px;
        height: 110px;
    }
    .hero-2__areas-icons{
        margin-top: 30px;
        height: auto;
        row-gap: 20px;
        column-gap: 10px;
    }.hero-2__areas-icon{
        height: 40px;
    }
    .hero-2__areasbox,
    .hero-2__graphicbox,
    .hero-2__animationbox,
    .hero-2__introductionbox{
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .hero-2__graphic-button,
    .hero-2__animation-button,
    .hero-2__introduction-button{
        padding: 4px 15px;
    }
    .hero-2__graphic-buttonrow,
    .hero-2__animation-buttonrow,
    .hero-2__introduction-buttonrow .hero-2__introduction-buttons{
        margin-top: 20px;
    }
    .hero-2__introduction-smalltext{
        margin-top: 20px;
    }
    .hero2__footerbox{
        padding-top: 20px;
        padding-bottom: 30px;
        top: 0;
        left: 0;
        width: 100vw;
    }
}
@media (max-width: 500px) {
    .hero-footer__skill-row{
        justify-content: flex-start;
        flex-wrap: wrap;
        height: auto;
        row-gap: 15px;
        column-gap: 10px;
    }
    .hero-footer__skill{
        height: 50px;
    }
    .hero-footer__information-icons,
    .hero2-footer__information-icons{
        width: 60%;
    }
}
@media (max-width: 385px) {
    .hero-footer__information-icons,
    .hero2-footer__information-icons{
        width: 80%;
    }
}