/* media
----------------------------------------------------------------------------*/
/* 各解析度原始單位 */
@media screen and (max-width: 1500px) {
    .ATM{ right: calc(25% - 3.6rem);}
    .indexHuman01{ left: auto; right: -5%; bottom: 0.3rem;}
}
@media screen and (max-width: 1160px) {
    .bankHouse{ width: 11rem;}
    .indexHuman02{ width: 10rem;}
}
@media screen and (max-width: 1080px) {
    .kvHuman{ left: 48%;}
}
@media screen and (max-width: 1024px) {
    
}
@media screen and (max-width: 980px) {
    .ATM{ right: calc(25% - 3rem);}
}
@media screen and (max-width: 900px) {
    h2{ padding-top: 4.5rem;}
    .kvHuman{ height: 100%; left: 52%;}
}
@media screen and (max-width: 860px) {
    .ATM{ width: 4.4rem;}
    .indexHuman01{ width: 13.56666rem;}
}
@media screen and (max-width: 768px) {
    .pc{ display: none;}
    .mobile{ display: block;}
    
    /* main
    -------------------------------------------------------------*/
    main{ padding-top: 1px;}
    h2{ font-size: 0.68rem; font-weight: normal; color: #1e4a9e; padding-top: 0.7rem;}
    h3{ font-size: 0.56rem; color: #1e4a9e;}

        /* kv */
    .kv{ overflow: hidden; width: 100%; margin-top: 0;}
    .kv .container{}
    .kv .contentBox{ height: 7.6rem; position: relative;}
    .kvHuman{
        position: absolute; height: 120%; width: auto; max-height: none;
        top: 1rem; left: 45%;
    }
    .kvHuman img{ height: 100%; width: auto;}

        /* sec_01 */
    .sec_01{ overflow: hidden;}
    .sec_01 .container{ background-size: auto 1.2rem;}
    .sec_01 .contentBox{ height: 17.9rem;}
    .ATM{ width: 1.8rem; position: relative; bottom: 0; right: 0; margin: 0 auto; padding-left: 1rem; padding-top: 0.2rem;}
    .indexHuman01{ width: 6.2rem; position: absolute; left: calc(50% - 2.8rem); bottom: 0.5rem;}
    

    /** 左側資訊欄 txtBox ********************************************************************************/
    .txtBox{ padding-left: 0; padding-top: 1rem;}
    .chapter{ font-size: 0.6rem;}
    .chapter span.number{ font-size: 1.8rem; margin-top: -0.05rem}
    .chapter i{ bottom: -1em; left: 2.5rem;}
    .sBox{ height: auto; margin-bottom: 0.8rem; border-top-color: transparent; width: auto;}
    .sBox > span{ display: none;}
    .cube_long{ height: 1.1rem; width: 4.7rem; top: -0.35rem;}
    .cubeIcon{}
    .circleIcon{ display: none;}
    .circleIcon span{ display: none;}
    .cirIcon01{ display: none;}
    .cirIcon01 span{ display: none;}
    .cirIcon02{ display: none;}
    .cirIcon03{ display: none;}

    h4{ font-size: 0.72rem; margin-top: 2rem; max-width: 7em;}
    .sBox p{ font-size: 0.36rem; line-height: 2;}
    p.blueTxt{ letter-spacing: 0.5px;}


    /**********************************************************************************/

    .sec01BR{ display: inherit;}

         /* sec_02 */
    .sec_02{}
    .sec_02 .container{ background-size: auto 1.2rem;}
    .sec_02 .contentBox{ height: 17.1rem;}
    .bankHouse{ width: 5rem; position: absolute; bottom: 1.2rem; left: 47%;}
    .indexHuman02{ width: 5rem; position: absolute; left: calc(50% - 2.5rem); bottom: 1.2rem;}

    /** 左側資訊欄 txtBox ********************************************************************************/
    .sec_02 .txtBox{ padding-top: 1rem;}
    .sec_02 .cubeIcon{}
    .sec_02 .sBox{ height: auto;}

    /****************************************************************************************************/
    

        /* sec_03 */
    .sec_03{}
    .sec_03 .container { background-size: auto 1.2rem;}
    .sec_03 .contentBox{ height: 20rem;}
    .satellite{ width: 4rem; position: absolute; top: 25%; left: 60%;}
    .cars{ width: 8rem; position: absolute; bottom: 0.8rem; left: auto; right: 4%}
    .indexHuman03{ width: 2.3rem; position: absolute; left: auto; bottom: 0.2rem; right: 4.3rem;}

    /** 左側資訊欄 txtBox ********************************************************************************/
    .sec_03 .txtBox{ padding-top: 1rem;}
    .sec_03 .cubeIcon{}
    .sec_03 .sBox{ border-right: 1px solid transparent;}
    .sec_03 h4{ margin-top: 2rem; margin-bottom: 0.55rem;}
    .sec_03 ul{ font-size: 0.36rem; line-height: 2; color: #616379; margin-top: 1.7em;}
    .sec_03 ul li{}
    .sec_03 ul li:before{}

    /****************************************************************************************************/
    
        /* sec_04 */
    .sec_04{}
    .sec_04 .container{
        background-image: none;
        background-color: #1e4a9e;
    }
    .mask_blue{
        position: absolute; top: auto; bottom: 0; left: 0; height: 8.2rem; width: 100%!important; background-color: rgba(30,74,158,0.62);
        background-image: url(../images/index_img08.png);
        background-repeat: no-repeat;
        background-position: center right 20%;
        background-size: auto 120%;
    }
    .sec_04 .contentBox{ height: 16.4rem; position: relative;}

    /** 左側資訊欄 txtBox ********************************************************************************/
    .sec_04 .txtBox{ padding-top: 1rem;}
    .sec_04 .cubeIcon{ background-color: transparent; background-image: url(../images/index_icon01_4.png); bottom: -0.55rem;}
    .sec_04 h4{ color: #ffffff; margin-top: 1.8rem; max-width: 6em}

    /****************************************************************************************************/


    
}
@media screen and (max-width: 640px) {
   
}
@media screen and (max-width: 585px) {
    
}
@media screen and (max-width: 480px) {
    h3{ max-width: 4em;}
    .kvHuman{
        position: absolute; height: 110%; width: auto; max-height: none;
        top: auto; left: 35%; bottom: -20%;
    }
    .satellite{ width: 2rem; position: absolute; top: auto; left: 75%; bottom: 5.3rem;}
}
@media screen and (max-width: 400px) {
    .kvHuman{
        position: absolute; height: 100%; width: auto; max-height: none;
        top: auto; left: 30%; bottom: -20%;
    }
}
@media screen and (max-width: 320px) {
    
}