* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



html,

body {

    height: 100%;

}



body {

    font-family: "Helvetica", "Noto Sans TC", "sans-serif" !important;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    padding-top: 0px !important;

    color: #000;

}



#page {

    flex-grow: 1;

    transform: translateY(4vw);

    padding-bottom: 4vw;

}





#header_nav>ul>li {

    position: relative;

    line-height: 1;

}



#header_nav_m, #header_nav_m.hidden{

    transition: opacity .5s;

}



#header_nav_m .main_link, #header_nav_m .sub_link {

    color: #000;

}



#header_nav_m .sub_link_group{

    padding-left: calc(60px + .3vw);

    padding-top: 15px

}



#header_nav_m .sub_link {

    width: 100%;

    letter-spacing: 1.5px;

    padding: 7px 0vw;

    font-size: 16px;

}



#header_nav_m .main_link {

    border-bottom: 1px solid rgba(0, 0, 0, .3);

    padding: 0px 20px 15px;

    font-size: 20px;

    font-weight: 700;

    letter-spacing: .15vw;

}



#header_nav_m > ul{

    font-size: 16px;

}



#header_nav_m > ul > li{

    line-height: 1;

    /* padding: 0px 16px; */

    padding: 0px 20px;

}



#header_nav_m > ul > li:last-child{

    border-right: 0px;

    padding-right: 0px;

}



#footer {

    font-weight: 400;

}



#footer_nav li a:hover {

    color: #aa0505 !important;

}



#footer_nav li {

    border-bottom: 1px solid;

    padding: 3vw 0;

}



#footer_nav li:first-child {

    border-top: 1px solid;

}





.footer_light {

    color: black;

}



.footer_light #phone-dark,

.footer_light #us_icon-dark,

.footer_light #phone_icon-dark {

    display: none;

}



.footer_light #phone-light,

.footer_light #us_icon-light,

.footer_light #phone_icon-light {

    display: block;

}



.footer_dark .border {

    border-color: #fff;

}



.footer_dark .line {

    background-color: #fff;

}



.footer_dark a {

    color: #fff !important;

}





.footer_light::after {

    content: '';

    background-color: #e6e6e6;

}



.footer_light .footer_bg_second {

    background-color: #d7d7d7;

}



.footer_dark {

    color: white;

}





.footer_dark #phone-dark,

.footer_dark #us_icon-dark,

.footer_dark #phone_icon-dark {

    display: block;

}



.footer_dark #phone-light,

.footer_dark #us_icon-light,

.footer_dark #phone_icon-light {

    display: none;

}



.footer_dark::after {

    content: '';

    background-color: #333333;

}



.footer_dark .footer_bg_second {

    background-color: #2a2a2a;

}





.nav_shadow:after {

    z-index: -1;

    content: "";

    position: absolute;

    -webkit-box-shadow: 0 0 3vw rgba(0, 0, 0, 0.15);

    -moz-box-shadow: 0 0 3vw rgba(0, 0, 0, 0.15);

    box-shadow: 0 0 3vw rgba(0, 0, 0, 0.15);

    height: 80%;

    left: 5%;

    right: 5%;

    width: 90%;

    bottom: 0px;

    -webkit-border-radius: 0 0 100% 100%;

    -moz-border-radius: 0 0 100% 100%;

    border-radius: 0 0 100% 100%;

}











ul#about_nav .right_icon span {

    background-image: url('../src/chevron_right-grey.svg');

}



ul#about_nav li a:hover {

    font-weight: bold;

    color: #aa0505;

}



ul#about_nav li a:hover .right_icon {

    background-color: #aa0505;

    border-color: #aa0505;

}



ul#about_nav li a:hover .right_icon span {

    background-image: url('../src/chevron_right-white.svg');

}



[data-tabs-target] .icon {

    background-position: center;

    background-repeat: no-repeat;

    background-size: contain;

}



/**/

#header_nav>ul>li>.nav_link {

    transition: .3s transform;

}



#header_nav>ul>li>.nav_link[aria-expanded="true"] img {

    transform: rotate(180deg);

    transition: .5s transform;

}



#header_nav>ul>li>.nav_link[aria-expanded="true"] {

    transform: translateY(1vw);

    transition: .5s transform;

}



/**/

[data-tabs-target='#notice'] .icon {

    background-image: url('../src/index/bookmark_sm.svg');

}



[aria-selected="true"][data-tabs-target='#notice'] .icon {

    background-image: url('../src/index/bookmark_sm-active.svg');

}



[data-tabs-target='#case'] .icon {

    background-image: url('../src/index/shield_sm.svg');

}



[aria-selected="true"][data-tabs-target='#case'] .icon {

    background-image: url('../src/index/shield_sm-active.svg');

}



[data-tabs-target='#media'] .icon {

    background-image: url('../src/index/globe_sm.svg');

}



[aria-selected="true"][data-tabs-target='#media'] .icon {

    background-image: url('../src/index/globe_sm-active.svg');

}



/**/

[data-tabs-target='#life_insurance_tab'] .icon {

    background-image: url('../src/index/people.svg');

}



[aria-selected="true"][data-tabs-target='#life_insurance_tab'] .icon {

    background-image: url('../src/index/people-active.svg');

}



[data-tabs-target='#property_insurance_tab'] .icon {

    background-image: url('../src/index/piggy.svg');

}



[aria-selected="true"][data-tabs-target='#property_insurance_tab'] .icon {

    background-image: url('../src/index/piggy-active.svg');

}



.block_shadow {

    position: relative;

}



.block_shadow:after {

    content: '';

    z-index: -1;

    position: absolute;

    height: 80%;

    left: 5%;

    right: 5%;

    width: 90%;

    bottom: 0px;

}



/* breadcrumb */

.breadcrumb_item+.breadcrumb_item::before {

    float: left;

    padding-right: .5rem;

    content: "/";

}



.breadcrumb_item+.breadcrumb_item {

    padding-left: .5rem;

}



/* modal */

.modal_style {

    background-color: rgba(179, 179, 179, .95);

    overflow-y: auto;

    overflow-x: hidden;

    position: fixed;

    top: 0;

    left: 0;

    z-index: 102;

    justify-content: center;

    align-items: center;

    width: 100%;

    height: 100vh;

}



.modal_container {

    position: relative;

    width: 100%;

    max-width: 75.6vw;

    max-height: 100%;



}





@media(orientation: portrait) {

    #header_nav>ul>li {

        width: 100%;

    }



    #header_nav>ul>li>.nav_link {

        width: 100%;

        padding: 5vw 3.2vw;

    }

    



    #header_nav>ul {

        padding: 5vw 0vw;

    }



    .block_shadow:after {

        content: "";

        -webkit-box-shadow: 0 0 2vw 2vw rgba(0, 0, 0, 0.15);

        -moz-box-shadow: 0 0 2vw 2vw rgba(0, 0, 0, 0.15);

        box-shadow: 0 0 2vw 2vw rgba(0, 0, 0, .5);

        -webkit-border-radius: 0 0 2vw 2vw;

        -moz-border-radius: 0 0 2vw 2vw;

        border-radius: 0 0 2vw 2vw;

    }



    #header_nav_m .icon {

        display: block;

        position: relative;

        width: 16px;

        height: 16px;

    }



    #header_nav_m .icon::before {

        content: '';

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        width: 100%;

        height: 2px;

        background-color: #000;

        border-radius: 3px;

    }



    #header_nav_m .icon::after {

        content: '';

        opacity: 0;

        transition: .3s opacity;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        height: 100%;

        width: 2px;

        background-color: #000;

        border-radius: 3px;

    }



    #header_nav_m [aria-expanded="false"] .icon::after {

        content: '';

        opacity: 100%;

        transition: .3s opacity;

    }



    @media(min-width: 640px) {

        #header_nav ul>li>.nav_link {

            padding: 3vw 3.2vw;

        }



        #header_nav>ul {

            padding: 3vw 0vw;

        }



        .block_shadow:after {

            content: "";

            -webkit-box-shadow: 0 0 2vw 2vw rgba(0, 0, 0, 0.15);

            -moz-box-shadow: 0 0 2vw 2vw rgba(0, 0, 0, 0.15);

            box-shadow: 0 0 2vw 2vw rgba(0, 0, 0, .5);

            -webkit-border-radius: 0 0 2vw 2vw;

            -moz-border-radius: 0 0 2vw 2vw;

            border-radius: 0 0 2vw 2vw;

        }



        #header_nav_m .icon {

            display: block;

            position: relative;

            width: 16px;

            height: 16px;

        }



        #header_nav_m .icon::before {

            content: '';

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            width: 100%;

            height: 2px;

            background-color: #000;

            border-radius: 3px;

        }



        #header_nav_m .icon::after {

            content: '';

            opacity: 0;

            transition: .3s opacity;

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%, -50%);

            height: 100%;

            width: 2px;

            background-color: #000;

            border-radius: 3px;

        }



        #header_nav_m [aria-expanded="false"] .icon::after {

            content: '';

            opacity: 100%;

            transition: .3s opacity;

        }



        #header_nav_m > ul{

            margin-bottom: 25px;

        }



        #header_nav_m > ul > li{

            border-right: 1px solid rgb(0, 0, 0);

            line-height: 1;

            /* padding: 0px 13px; */

            padding: 0px 32px;

        }



        #footer_nav li {

            padding: 2vw 0;

        }



    }

}



@media(orientation: landscape) {



    #header_nav>ul>li>.nav_link {

        padding: 3vw 3.2vw;

    }



    #header_nav>ul {

        padding: 3vw 0vw;

    }



    #header_nav>ul>li {

        width: 100%;

    }





    #header_nav_m > ul > li{

        border-right: 1px solid rgb(0, 0, 0);

        line-height: 1;

        padding: 0px 32px;

        /* padding: 0px 16px; */

    }



    #footer_nav li {

        border-bottom: 0px;

    }



    #footer_nav li a {

        border-right: 1px solid rgb(0, 0, 0);

    }



    .footer_dark #footer_nav li a {

        border-right: 1px solid #fff;

    }

    #footer_nav li:first-child {

        border-top: 0px solid;

    }







    #footer_nav li a {

        padding: 0vw 1.4vw 0vw 1.8vw;

    }



    #footer_nav li:last-child a {

        border-right: 0px;

    }



    .footer_light .footer_bg_second, .footer_dark .footer_bg_second{

        background-color: transparent;

    }



    .block_shadow:after {

        content: "";

        -webkit-box-shadow: 0 0 2.5vw 2.5vw rgba(0, 0, 0, 0.15);

        -moz-box-shadow: 0 0 2.5vw 2.5vw rgba(0, 0, 0, 0.15);

        box-shadow: 0 0 2.5vw 2.5vw rgba(0, 0, 0, .5);

        -webkit-border-radius: 0 0 2.5vw 2.5vw;

        -moz-border-radius: 0 0 2.5vw 2.5vw;

        border-radius: 0 0 2.5vw 2.5vw;

    }



    #header_nav_m .icon {

        display: block;

        position: relative;

        width: 16px;

        height: 16px;

    }



    #header_nav_m .icon::before {

        content: '';

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        width: 100%;

        height: 2px;

        background-color: #000;

        border-radius: 3px;

    }



    #header_nav_m .icon::after {

        content: '';

        opacity: 0;

        transition: .3s opacity;

        position: absolute;

        top: 50%;

        left: 50%;

        transform: translate(-50%, -50%);

        height: 100%;

        width: 2px;

        background-color: #000;

        border-radius: 3px;

    }



    #header_nav_m [aria-expanded="false"] .icon::after {

        content: '';

        opacity: 100%;

        transition: .3s opacity;

    }

    #header_nav_m > ul{

        margin-bottom: 25px;

    }







    @media(min-width: 768px) {

        #header_nav>ul>li:hover>a {

            color: #aa0505;

        }



        #header_nav>ul>li>.nav_link {

            padding: 0vw 3.2vw;

        }



        #header_nav>ul {

            padding: 0px;

        }



        #header_nav>ul>li {

            width: auto;

        }



        #header_nav>ul>li:not(:last-child) {

            /* padding: 0vw 3.4vw; */

            border-right: 1px solid rgb(0, 0, 0);

        }



        #header_nav>ul>li.link:hover:after {

            /* #header_nav>ul>li:hover:after */

            content: '';

            position: absolute;

            bottom: 0;

            left: 50%;

            transform: translate(-50%, 2.4vw);

            border-style: solid;

            border-width: 0 .6vw .97vw .6vw;

            border-color: transparent transparent #aa0505 transparent;

        }



        #navbar_2nd>ul>li>a {

            display: block;

            padding: 1vw 2.1vw;

        }



        #navbar_2nd>ul>li>a>span {

            position: relative;

            display: block;

        }



        #navbar_2nd>ul>li>a:hover>span:after {

            content: '';

            position: absolute;

            left: 0;

            bottom: -.65vw;

            width: 100%;

            height: .25vw;

            border-radius: 1vw;

            background-color: #fff;



        }



        #footer_nav li {

            padding-top: 0px;

            padding-bottom: 0px;

        }



        #footer_nav li:last-child a {

            padding-right: 0vw;

        }



        #footer_nav li a {

            padding: 0vw 2.1vw 0vw 2.7vw;

        }



        .block_shadow:after {

            content: "";

            -webkit-box-shadow: 0 0 2.5vw 2.5vw rgba(0, 0, 0, 0.15);

            -moz-box-shadow: 0 0 2.5vw 2.5vw rgba(0, 0, 0, 0.15);

            box-shadow: 0 0 2.5vw 2.5vw rgba(0, 0, 0, .5);

            -webkit-border-radius: 0 0 2.5vw 2.5vw;

            -moz-border-radius: 0 0 2.5vw 2.5vw;

            border-radius: 0 0 2.5vw 2.5vw;

        }

    }



    @media(min-width: 1536px) {

        #header_nav>ul>li.link:hover:after {

            /* #header_nav>ul>li:hover:after */

            content: '';

            transform: translate(-50%, 1.6vw);

            border-width: 0 .4vw .65vw .4vw;

        }



        #footer_nav li a {

            padding: 0vw 1.4vw 0vw 1.8vw;

        }



        .block_shadow:after {

            content: "";

            -webkit-box-shadow: 0 0 2vw 2vw rgba(0, 0, 0, 0.15);

            -moz-box-shadow: 0 0 2vw 2vw rgba(0, 0, 0, 0.15);

            box-shadow: 0 0 2vw 2vw rgba(0, 0, 0, .5);

            -webkit-border-radius: 0 0 2vw 2vw;

            -moz-border-radius: 0 0 2vw 2vw;

            border-radius: 0 0 2vw 2vw;

        }



    }

}