body,html{ font-family: Arial, Helvetica, "Microsoft JhengHei" !important; }/*height:100%撐開高度footer置底(失敗)*/
/*消除藍框*/
a:focus, a:active,.modal-content button:focus, input.form-control:focus, input.form-control:active,
select.form-select:focus, select.form-select:active, textarea.form-control:focus ,textarea.form-control:active,
button.navbar-toggler:focus, button.navbar-toggler:active{ outline: none; border-color: #CCC; box-shadow: none; color: inherit;}
/*手機電腦圖片切換*/
img.mobile{ display: none;}

/*--浮動選單--*/
.nav_sidearea_m { display: none; position:fixed; bottom:15%; right:30px; z-index:9; }
.nav_sidearea_m .nav_sidecol li { margin: 0 auto 7px; list-style-type:none; text-align:center; opacity: 0.85; }
.nav_sidearea_m .nav_sidecol li a { display:block; width:100%; width: 60px; height: 60px; background-color:#06C755; border-radius: 999rem; display:flex; justify-content: center; align-items: center; }
.nav_sidearea_m .nav_sidecol li:nth-child(2) a{ background-color:#4e4e4e; }
.nav_sidearea_m .nav_sidecol li:hover{ opacity: 1;}
.nav_sidearea_m .nav_sidecol li img{ width: 60%; margin: 0 auto;}
.nav_sidearea_m .nav_sidecol li.top a::after {
    content: ""; width: 17px; height: 17px; margin: 0 auto;
	border-right: 2px solid #fff; border-top: 2px solid #fff; transform: rotate(-45deg);
	position: relative; top: 3px; left: 0; right: 0;     
}

/*廣告區塊*/
.head_BN_sky{ max-width: 1240px;}
#BN_bottom{ margin: 8% auto 5%;}

/*刊頭+navbar*/
header.index-header { 
    width: 100%; height: 115px; margin: 0 auto; padding: 0 3%;  
    border-bottom: 6px solid #54cac2; background-color: rgba(255, 255, 255, 0.95);
}
header.index-header .container{ max-width: 1240px;}
header img{ height: 70px;}
header .navbar-toggler-icon{ 
    font-size: 1.5em; 
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2816, 165, 155,0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar.index-nav{ max-width: 1240px; padding: 15px 0; margin: 0 auto; font-size: 23px; background-color: rgba(3, 160, 150, 0.95); z-index: 999; }
/*------ drop down改hover ------*/
@media all and (min-width: 992px) {
	.navbar .dropdown-menu.dropdown-menu-end{ right:-40%; left: -40%; margin-top: 15px;}/*置中*/
	.navbar .nav-item .dropdown-menu{ display:block; opacity: 0; visibility: hidden; transition:.3s; }
	.navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
	.navbar .dropdown-menu.fade-up{ top:180%;}
	.navbar .nav-item:hover .dropdown-menu{ 
        top:100%; font-size: 0.9em; background-color: rgba(43, 43, 43, 0.98); border-radius: 0 0 .6rem .6rem;
        transition: .3s; opacity:1; visibility:visible; transform: rotateX(0deg); 
    }
    .index-nav .navbar-nav { width: 100%; margin: 0 auto; text-align: center; display: flex; justify-content: space-around; align-items: center; } 
    .index-nav .navbar-nav .nav-item{ margin: 0 2%; padding: 0;}
    .index-nav a.dropdown-item{ padding: 8% 0; text-align: center; color: #fff; background-color: transparent;}
    .index-nav ul.dropdown-menu{ padding: 0.5% 0 1%; border-top: 4px solid #F7A605; }
    .navbar .has-Full{ position: static !important; }
    .navbar .fullWidth{ width: 100%; left: 0; right: 0; }
    .navbar .fullWidth .row li{ width: 20%; }
}
/*-----------drop down--------------*/
.index-nav a.dropdown-item:hover, 
.index-nav a.dropdown-item:focus,
.index-nav a.dropdown-item:active{ color: #F7A605;}
.index-nav .nav-item:hover a.nav-link, 
.index-nav .nav-item:active a.nav-link,
.index-nav .nav-item .nav-link.active{ color: #ffea06; font-weight: bold; cursor: pointer;}
.index-nav .nav-item a.nav-link::after{ 
    width: 11px; height: 11px; margin: 0 0 0 11px;
    border-right: 2px solid #fff; border-top: 2px solid #fff; border-left: none;
    transform: rotate(135deg);
}
.index-nav .nav-item:hover a.nav-link::after{ border-right: 2px solid #ffea06; border-top: 2px solid #ffea06;}
.index-nav .dropdown-menu{ border: none; background: transparent;}

.index-nav .rowList h4{ padding-top: 5%; font-size: 1em; font-weight: bold; color: #fff;}
.index-nav .rowList a.dropdown-item{ padding: 3% 0 5% 1%; text-align: left;}
.index-nav a.dropdown-item::before{ 
    content: ""; display: inline-block; margin-right: 5px; position: relative; top: -3px;  
    width: 0; height: 0; border-width: 5px 0 5px 10px; border-style: solid;
    border-color: transparent transparent transparent #F7A605; 
}
.index-nav a.dropdown-item i{ 
    display: inline-block; margin-left: 5px; width: 18px; height: 18px; background-color: #CCC; position: relative; top: 1px; 
    -webkit-mask-image: url(../images/icon_open.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 18px 18px;
    mask-image: url(../images/icon_open.svg); mask-repeat: no-repeat; mask-position: center; mask-size: 18px 18px;
}

.index-nav .offcanvas a{ color: #fff;}
/*----------------------------------*/


.main_frame{ max-width: 1240px; display: flex; margin: 0 auto; justify-content: center; overflow-x: hidden;}
/*左側廣告欄*/
.bnList_col{ width: 16.66%; height: auto/*填滿高度*/; padding: 2.5% 0; }
.bnList_col img{ width: 100%; max-width: 180px; margin: 0 auto 10px; }
.bnList_col #BN_sidebar{ overflow-x: hidden;}
/*右側主要內容*/
.main_col{ width: 83.33%; height: 100%; padding: 2.5% 0; }
.main_col .container{ padding-right: 0; margin-right: 0;}
.main_col main{ margin-top: 5%;}
.main_col main h1{ margin-bottom: 3%; font-weight: bold; color: #05A59A;}
.main_col main h1 > span{ font-weight: normal; font-size: 0.7em; color: #6b6b6b;}
/*modal*/
.main_col .container .modal-content{ border-radius: 1.5rem; border: none; box-shadow: 3px 5px 15px rgba(0,0,0,0.8); }
.main_col .container .modal-body button.btn-close { position:absolute; right:0; top:-35px; padding: 7px; background-color: #fff; border-radius: 999px;}
body .modal-backdrop.show { opacity: 0.8;} /*modal黑底*/
body.modal-open { overflow: hidden;}/*禁止modal背景滑動*/

/*輪播BN__右側上方廣告*/
.main_col .BNmain .swiper-pagination { bottom: 0;}
.main_col .BNmain .swiper-pagination-bullet-active{ background-color: #21c9be; opacity: 1;}
.main_col .BNmain .swiper-pagination span.swiper-pagination-bullet{ margin: 0 10px; }
.main_col .swiper-pagination-bullet:focus,
.main_col .swiper-button-next, .main_col .swiper-button-prev{ outline: none; box-shadow: none;}

/*footer*/
footer{ font-size: 16px; text-align: center;}
footer a{ text-decoration: none; }
.service{ padding: 2% 0 ; color: #cecece; background-color: #424242; }
.service .container-fluid{ max-width: 1240px;}
.service .footer_logo{ flex-wrap: wrap;}
.service .footer_logo > img{ max-width: 300px; }
.service .footer_logo ul li a > img{ width: 40px; margin: 0 5px 6%; }
.service .footer_logo ul li a > img:hover{ opacity: .9;}
.service ul{ margin: 0; padding: 0;}
.service ul li{ list-style-type: none; letter-spacing: 0.06rem;}
.service ul li a:hover{ color: #fff;}
.service ul.footer_info li{ padding: 1.5% 0; text-align: left; }
.service ul.footer_title li{ margin: 10px 0;}
.service ul.footer_title a{ font-size: 1.1em; font-weight: 500; color: #cecece;}
.service ul.footer_title li::before{
    content: "‧"; display: inline-block; margin-right: 10px; 
    /*width: 0; height: 0; border-width: 4px 0 4px 8px; border-style: solid;
    border-color: transparent transparent transparent #bababa; */
}
.nav-bottom { width: 100%; margin: 0 auto; padding: 10px 3px; font-size: .9em;}

/*------------contact.html聯絡我們--------------*/
main.formZONE{ font-size: 22px;}
.formZONE form{ max-width: 900px; margin: 0 auto;}
.formZONE form input, .formZONE form select,.formZONE form textarea{ font-size: 1em; background-color: #fff6e4; border: none;}
.formZONE form input:focus, .formZONE form select:focus,.formZONE form textarea:focus{ background-color: #fff0d2; }
.formZONE form span{ color: red;}
.formZONE button, button.backBN { padding: 2% 0; background: #ff7809; color: #fff; font-size: 1.2em;}
.formZONE button:hover, button.backBN:hover{ background: #ff9409; color: #fff;}
.formZONE img.line{ width: 40px;}
/*---notfound.html 404---*/
button.backBN { width: 60%; max-width: 300px; font-size: 1.4em;}
img.notfound{ width: 70%; max-width: 450px; margin: 8% auto 0; display: block;}


/*-----------------------------------------------------------------------*/
@media (max-width:1240px) {

    /*刊頭+navbar*/
    .navbar.index-nav{ padding: 10px 0 7px;}  
    /*左側廣告欄*/
    .bnList_col{ padding: 0;}  
    /*右側主要內容*/
    .main_col .container{ padding-right: calc(var(--bs-gutter-x) * .5); margin-right: auto;}
    header.index-header { border-bottom: none; }


}  


/*--------------------------------------------------------------------*/
    @media (max-width: 991.98px) {

        /*手機電腦圖片切換*/
        img.pc{ display: none;}
        img.mobile{ display: block;}

        /*--浮動選單--*/
        .nav_sidearea_m { right:3%;}
        .nav_sidearea_m .nav_sidecol li a { width: 50px; height: 50px; }

        /*刊頭+navbar*/
        header.index-header { position: fixed; top:0; z-index: 90; box-shadow: 0 9px 7px rgba(0, 0, 0,0.3); }
        header.index-header .container{ max-width: none;}
        .navbar.index-nav{ padding: 0; z-index: 98;}/*TOP廣告底下分隔線*/
        .index-nav .nav-item .nav-link{ padding: 3.5% 5%;}
        .index-nav .nav-item .nav-link.active{ background-color: rgba(0, 127, 118, 0.95); }
        .index-nav .dropdown-menu{ padding: 0;}
        .index-nav a.dropdown-item{ font-size: 1.1em; background-color: transparent;}
        .index-nav a.dropdown-item::before{ 
            margin-right: 3px; top: -2px; border-color: transparent transparent transparent #ffd071; 
        }
        .index-nav a.dropdown-item i{ top:2px;}        
        .index-nav .offcanvas{ 
            max-width: 78%; overflow-y: scroll; box-shadow: 4px 0 8px rgba(0, 0, 0, .2);
            background-color: rgba(3, 160, 150, 0.95);
        }
        .index-nav .offcanvas.offcanvas-start{ border: none;}
        .index-nav .row{ padding-left: 6%;}
        .navbar .fullWidth .row li{ width: 50%; padding: 2% 0 3% 6%;}
        .index-nav li.nav-item{ border-bottom: 1px solid rgba(255, 255, 255,.3);}
        .index-nav .rowList h4{ font-size: 1.1em; text-align: left; }


        /*廣告區塊*/
        .head_BN_sky{ padding-top: 110px; border-bottom: 4px solid #10A59B;}

        /*footer*/
        .service ul.footer_title{ display: none;}
        .service .footer_logo > img{ max-width: 250px;}


        /*------------contact.html聯絡我們--------------*/
        main.formZONE{ font-size: 18px;}
        .formZONE form label{ padding-bottom: 2px;}      

    }


/*--------ipad------------------------------------------------------------*/

    @media (max-width: 768px) {

        /*--浮動選單--*/
        .nav_sidearea_m { bottom: 6%; }
        .nav_sidearea_m .nav_sidecol li { margin: 0 auto 4px; }
        .nav_sidearea_m .nav_sidecol li a { width: 40px; height: 40px;}
        .nav_sidearea_m .nav_sidecol li.top a::after { width: 12px; height: 12px; top:2px; border-right: 2px solid #fff; border-top: 2px solid #fff; }

        /*刊頭+navbar*/
        header.index-header { padding: 0 3%; height: 60px; }
        header img{ height: 40px;}
        /*-----------drop down--------------*/
        .navbar .fullWidth .row li{ padding: 3% 0 4.5% 6%;}        
        /*廣告區塊*/
        .head_BN_sky{ padding-top: 60px; }
        /*右側主要內容*/
        /*輪播BN__右側上方廣告*/
        .main_col .BNmain .swiper-pagination span.swiper-pagination-bullet{ margin: 0 4px;}
        .main_col .BNmain .swiper-pagination-bullet{ width: 6px; height: 6px;}
   



    }



/*--------grid-breakpoints-SM---------------------------------------------------*/

    @media (max-width: 576px) {

        /*--浮動選單--*/
        .nav_sidearea_m { bottom:5%; }

        /*刊頭+navbar*/
        .navbar.index-nav{ font-size: 20px; }
        header .navbar-toggler-icon{ font-size: 1.2em;}


        /*右側主要內容*/
        .col-10.main_col .container{ padding-right: 0 ; padding-left: 0; overflow-x: hidden;}
        .main_col main h1{ margin-bottom: 5%;}

        /*footer*/
        .service .container-fluid{ width: 300px; }
        .service .footer_logo > img{ display: none;}
        .service ul.footer_info{ margin: 3% auto;}

    }


/*--------iPhone XR------------------------------------------------------------*/

    @media (max-width: 414px) {



    }