/* HEADER */

header{
    padding: 34px 0 30px 0;
    width: 100%;
}

header li,
nav li{
    display: inline-block;
}

.header-sub-block, .header-link{
    max-width: 490px;
}

.header-link{
    margin-bottom: .75em;
}

header .searchbar{
    width: 490px;
    border: #555555 1px solid;
    border-radius: .5em;
    padding-top: .2em;
    padding-bottom: .2em;
}

header .searchbar input,
header .searchbar button{
    border: none;
    border-radius: .5em;
}

header .searchbar input{
    width: 80%;
    padding: .25em 1em;
    font-size: .9em;
}

header .searchbar button{
    width: 20%;
    background: none;
}

header .searchbar img{
    padding-left: 1em;
    border-left: #A9A9A9 1px solid;
}

header .searchbar img:hover{
    opacity: .5;
}

/* offcanvas */
.offcanvas{
    /* border-top: 8px #00BE64 solid; */
    overflow: hidden;
}

.offcanvas-header{
    /* border-bottom: #d3d3d3 1px solid; */
    border-bottom: 8px #00BE64 solid;
}

.offcanvas .logo{
    width: 60%;
}

.offcanvas-body{
    overflow-x: hidden;
    padding-bottom: 160px;
}

.nav-group li,
.sub-link-group li{
    display: block;
    margin-bottom: 1em;
}

.nav-group{
    border-bottom: #ADADAD 1px solid;
    margin-bottom: 1em;
}
.sns-group{
    margin-top: 20px;
}

.sns-group li{
    width: 80px;
    margin-bottom: 10px;

    display: inline-block;
    text-align: center;
}


/* NAV */
nav{
    background-color: #00BE64;
    font-size: 1.25em;
    height: 80px;
    display: flex;
    align-items: center;
}

nav a,
nav .dropdown-toggle{
    color: white;
    cursor: pointer;
}

nav a:hover,
nav .dropdown-toggle:hover{
    color: #FFF990;
}

/* .dropdown { 
    position: static !important; 
}  */
  
.dropdown-menu { 
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)!important; 
    margin-top: 0px !important; 
    width: 100% !important; 
} 

.btn-hamburger{
    padding: 0;
    border: none;
    background: transparent;
    width: 40px;
    margin-top: 8px;
}

.btn-hamburger span{
    display: block;
    width: 100%;
    height: 2px;
    background-color: #00BE64;
    margin-bottom: .5em;
}

.btn-hamburger span:last-child{
    margin-bottom: 0;
}

.offcanvas{
    --bs-offcanvas-width: 100vw;
}

/* First-Viem */
.first-view{
    background-color: #F2F2F2;
    padding: 80px 0 120px 0;
}

/* First-Viem / carousel */
.carousel-inner{
    border-radius: 2em;
}

.carousel-control-next,
.carousel-control-prev{
    width: 10%;
}

.carousel-control-next:hover,
.carousel-control-prev:hover{
    background-color: rgba(138, 138, 138, .5);
    opacity: 1;
}

.carousel-control-prev:hover{
    border-radius: 2em 0 0 2em;
}

.carousel-control-next:hover{
    border-radius: 0 2em 2em 0;
}

.carousel-control-next-icon, 
.carousel-control-prev-icon{
    width: 2.5em;
    height: 2.5em;
}

.carousel-indicators{
    display: none;
}

.carousel-pause-btn{
    position: absolute;
    bottom: 0.625em;
    right: 0.625em;
    z-index: 2;
    border: 0.0625em solid rgba(255, 255, 255, 0.8);
    border-radius: 0.25em;
    background-color: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.75em;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    padding: 0.1875em 0.5em;
    white-space: nowrap;
}

.carousel-pause-btn-icon{
    position: absolute;
    bottom: 0.5em;
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: 0.0625em solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    width: 1.75em;
    height: 1.75em;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s, opacity 0.2s;
}

.carousel-pause-btn-icon svg{
    width: 0.875em;
    height: 0.875em;
    fill: currentColor;
}

.carousel-pause-btn-icon:hover{
    background-color: rgba(0, 0, 0, 0.7);
    border-color: rgba(255, 255, 255, 0.9);
}

.carousel-pause-btn-icon:focus-visible{
    outline: 0.1875em solid #005fcc;
    outline-offset: 0.125em;
}

.carousel-pause-btn-text{
    position: static;
    transform: none;
    flex-shrink: 0;
    align-self: center;
    margin-right: 0.5em;
}

.carousel-text-wrap{
    display: flex;
    align-items: center;
}

/* 確保輪播動畫在 prefers-reduced-motion 下仍可運作 */
@media (prefers-reduced-motion: reduce) {
    .carousel-item {
        transition: transform 0.6s ease-in-out !important;
    }
}

/* First-Viem / taxation */
.taxation .cards{
    /*background-color: #29B5AF;*/
	background-color: #ffd15b;
    padding: .5em .25em;
    border-radius: .5em;
    height: 76px;
    overflow: hidden;
    margin-bottom: .65em;
    cursor: pointer;
}

.taxation .cards:hover{
    background-color: #FF9600;
}

.taxation a:focus-visible .cards{
    background-color: #FF9600;
    outline: 0.1875em solid #005fcc;
    outline-offset: 0.125em;
    box-shadow: 0 0 0 0.1875em rgba(0, 95, 204, 0.3);
}

.taxation .row>div:last-child{
    margin-bottom: 0;
}

.taxation .card-icon{
    width: 20%;
    text-align: center;
    margin-left: .5em;
    margin-right: .5em;
}

.taxation .card-icon img{
    width: 100%;
}

.taxation .card-name{
    width: 70%;
    font-size: 1.15em;
    /*color: white;*/
	color: #252525;
    text-align: justify;
    line-height: 1.15em;
}

.card-name span{
    display: block;
}

.card-name-agent span:nth-child(1),
.card-name-taxpayer span:nth-child(1){
    letter-spacing: .5em;
}

.card-name-myhome span:nth-child(1){
    letter-spacing: .225em;
}

.wait-card{
    background-color: #D45D56;
    padding: .5em .5em;
    border-radius: .5em;
    color: white;
}

.wait-card .card-icon{
    width: 10%;
    margin-left: .2em;
    margin-right: .2em;
}

.wait-people{
    padding: 0 .75em 0 .5em;
    border-right: #FFF 1px solid;
    margin-right: .75em;
}

.wait-people span:nth-child(1){
    display: block;
}

/* .wait-people span{
    display: inline-block;
} */

.wait-people span.num{
    color: #F2E421;
    /* margin: 0 .35em; */
}

.wait-card .more-btn{
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.wait-card .more-btn:hover{
    color: #F2E421;
}

.wait-card .more-btn:focus-visible{
    outline: 0.1875em solid #005fcc;
    outline-offset: 0.125em;
    box-shadow: 0 0 0 0.1875em rgba(0, 95, 204, 0.3);
}

/* Main Theme */
.main-theme{
    background-color: #D3E9EB;
    padding: 66px 0 12px 0;
}

.main-theme .cards{
    width: 256px;
    height: 256px;

    text-align: center;

    background-color: white;
    border-radius: 2em;
    
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 54px;
    margin-right: 20px;
    cursor: pointer;
}

.main-theme .hover{
    display: none;
    z-index: 2;
}

.main-theme .cards:hover{
    background-color: #29B5AF;
}

.main-theme .cards:hover .hover{
    display: block;
}

.main-theme .cards:hover .nohover{
    display: none;
}

.main-theme .cards:hover .text{
    color: white;
}

.main-theme .cards:nth-child(4n){
    margin-right: 0;
}

.main-theme .cards .card-block{
}

.main-theme .cards .cards-icon{
    margin-bottom: .5em;
    display: flex;
    justify-content: center;
    align-items: baseline;
}

/* .main-theme .cards .cards-icon{
    margin-bottom: .5em;
    background-image: url(../images/img-main-icon1-1.png);
    padding: 2em;
} */

.main-theme .cards .text{
    font-size: 1.5em;
    color: #356553;
}

/* NEWS */
.news{
    background-color: #F2F2F2;
    padding-top: 40px;
    padding-bottom: 54px;
}

.news .title{
    width: 240px;
    text-align: center;
    margin-bottom: 1em;
}

.news-menu{
    background-color: white;
    color: #00BE64;
    width: 240px;
    height: 60px;
    border-radius: 60px;
    border: none;
    padding: 0;
    font-size: 1.175em;
    letter-spacing: 0.05em;
    margin-bottom: 1em;
    text-decoration: none;

    display: flex;
    justify-content: center;
    align-items: center;

    cursor: pointer;
}

.news-menu:hover,
.news-menu.active{
    color: white;
    background-color: #00BE64;
}

.news-menu:focus-visible{
    color: white;
    background-color: #00BE64;
    outline: 0.1875em solid #005fcc;
    outline-offset: 0.125em;
    box-shadow: 0 0 0 0.1875em rgba(0, 95, 204, 0.2);
}

.news-board{
    border-radius: 32px;
    background-color: white;
    color: #555555;
    font-size: 1.05em;
}

.news-list{
    padding: 30px 36px;
    
}

.news-list li{
    display: flex;
    justify-content: space-between;
    border-bottom: #555555 1px solid;
    padding-bottom: 4px;
    margin-bottom: 1em;
    margin-left: 0;
    padding-left: 0;
}

.news-list li::before{
    content: url(../images/icon-news.svg);
}

.news-list li:hover::before{
    content: url(../images/icon-news-hover.svg);
}

.news-list li span:first-child{
    width: 80%;
    display: block;
    /* overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; */
}

.news-list .morebtnli{
    text-align: right;
    padding: 0;
    margin: 0;
}

.news-list li:hover,
.morebtn:hover{
    color: #00BE64;
    cursor: pointer;
}

/* OTHER THEME */
.other-theme{
    padding-top: 60px;
    padding-bottom: 80px;
}

.img-icon img{
    min-height: 60px;
}

.other-theme a:hover{
    color: #29B5AF;
    font-weight: bolder;
}

.other-theme .hover{
    display: none;
}

.other-theme .icon-btn-block:hover .hover{
    display: block;
}

.other-theme .icon-btn-block:hover .nohover{
    display: none;
}

.other-theme .icon-btn-block{
    text-align: center;

    display: flex;
    justify-content: center;
    align-items: center;
}

.other-theme .icon-btn-inner{
    min-width: 136px;
    min-height: 122px;
}

.other-theme .icon-btn-block:hover .img-icon{
    background-color: #29B5AF;
}

.other-theme .img-icon{
    background-color: #E8E8E8;
    padding: 1.5em;
    margin-bottom: .5em;

    display: flex;
    justify-content: center;
}

.other-theme .service{
    padding-bottom: 3em;
    margin-bottom: 3em;
    border-bottom: #ADADAD 1px solid;
}

.other-theme .service,
.other-theme .relation-links{
    padding-top: 1em;
}

.service .img-icon{
    border-radius: 1em;
}

.relation-links .img-icon{
    border-radius: 50%;
}

/* Website MAP */
.website-map-switch{
    border-bottom: #00BE64 8px solid;
    display: flex;
    justify-content: center;
}

.website-map .container{
    padding: 2em 0;
}

.website-map-switch .accordion-button{
    
}

.website-map h4{
    color: #666666;
    border-bottom: #00BE64 1px solid;
    margin-bottom: 1.25em;
    padding-bottom: .25em;
    font-weight: bolder;
}

.map-link-block{
    /* display: flex;
    justify-content: space-between; */
}

.map-link-block > div{
    width: 15%;
}

.map-link-block li{
    margin-bottom: 1em;
    line-height: 1.5em;
}

.map-link-block li .small{
    font-size: .75em;
    line-height: 1em;
}

.map-link-block li:hover{
    color: #00BE64;
    cursor: pointer;
    font-weight: bolder;
}

.accordion-button{
    display: flex;
    justify-content: center;
}

.accordion-button,
.accordion-button:not(.collapsed){
    /* width: 100px;
    background-color: #00BE64; */
    background: url(../images/btn-website-map-switch.png);
    width: 112px;
    height: 56px;
    box-shadow: none;
}

.accordion-button:focus{
    background: url(../images/btn-website-map-switch.png);
    width: 112px;
    height: 56px;
    box-shadow: none;
}

.website-map-switch .accordion-button:focus-visible{
    outline: 0.1875em solid #005fcc;
    outline-offset: 0.125em;
    box-shadow: 0 0 0 0.1875em rgba(0, 95, 204, 0.2);
}

.accordion-button:not(.collapsed)::after{
    background-image: url(../images/icon-website-map-switch.svg);
    margin-top: 50%;
    transform-origin: 50% 0%;
}

.accordion-button::after{
    margin-left: 50%;
    margin-right: 50%;
    margin-top: 30%;
    background-image: url(../images/icon-website-map-switch.svg);
    transform-origin: 50% 0%;
}

/* .accordion-button::after{
    fill: white;
}

.accordion-button:not(.collapsed)::after{
    fill: white;
} */

/* transform: rotate(-180deg);
transform 0.2s ease-in-out; */

/* FOOTER */
footer{
    padding-top: 2em;
    background-color: #F2F2F2;
}

.footer-group{
    font-size: .9em;
    margin-bottom: 1em;

    display: flex;
    justify-content: space-between;
}

.footer-group li{
    margin-bottom: .75em;
}

.footer-block:nth-child(1){

}

.footer-block:nth-child(2){
    border-left: #555555 1px solid;
    border-right: #555555 1px solid;
    padding-left: 2em;
    padding-right: 2em;
}

.footer-block:nth-child(3){
    min-width: 37.5%;
}

footer .time{
    line-height: 1.8em;
}

footer .linkgroup{
    margin-top: 2.3em;
}

footer .linkgroup{
    display: flex;
    justify-content: space-between;
}

.footer-bottom{
    font-size: .8em;
    padding: 2em 0 1em 0;

    display: flex;
    justify-content: space-between;
}

.footer-data,
.footer-copyright{
    padding: 0;
}

.footer-copyright{
    text-align: right;
}

.footer-copyright img{
    height: 24px;
    margin-right: .25em;
}

/* sidebar SNS Group */
.sidebar{
    z-index: 9;
    position: fixed;
    width: 70px;
    right: 18px;
    bottom: 100px;
    background-color: #DADADA;
    border-radius: 2em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1em .25em 1em .25em;
}

.sidebar a{
    margin-bottom: .5em;
    display: block;
}

.sidebar a:first-child img{
    transform: scale(1.5);
    margin-bottom: .75em;
}

.sidebar a:hover img{
    transform: scale(1.75);
    margin-top: 1em;
    margin-bottom: 1.5em;
}

.sidebar a:last-child{
    margin-bottom: 1em;
}

/* GoToTop */
.gototop{
    position: fixed;
    bottom: 18px;
    right: 23px;
    z-index: 9;
}

.gototop:hover{
    cursor: pointer;
    opacity: .5;
}

/* float-land */
.floatland{
    position: fixed;
    bottom: 42px;
    left: -70px;
    z-index: 99;
    width: 135%;
    height: 50px;
}

.floatland-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: scale(.75);
    background-color: #DADADA;
    border-radius: 2em;
    padding: 0 1em;
    margin: 0 1em;
}

.floatland-inner a{
    display: inline-block;
    /* padding: 0 .5em; */
}