@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./public/googlefont/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(./public/googlefont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    transform: translate(0px, 6px);
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

body {font-size:16px; text-align: center; font-family: "Arial","微軟正黑體","Microsoft JhengHei", serif; }
img { width:100%; }
html * { max-height: 9999999px; }
a { text-decoration: none !important; }

/* ====== 共用樣式 ====== */

/* 圖片cover */
.gbox { overflow: hidden; }
.gbox .wh { height:100% !important; width:auto !important; }
.gbox .ww { width:100% !important; height:auto !important; }

/* 正方形區塊 */
.BaseBD { position: relative; width:100%; }
.BaseLinkBnr { padding-top:31.37%; }
.Base169 { padding-top:56.25%; }
.Base11 { padding-top:100%; }
.BaseArea { position: absolute; top:0px; left:0px; bottom:0px; right:0px; overflow: hidden; }

/* 高度設定 */
.mh6,.mhpgn { height:60px; }
.mh2 { height:20px; }
.mh3 { height:30px; }
.bctop,.mh4 { height:40px; }
.mh5 { height:50px; }
.mtop { height:155px; }

.logo img { width:auto; }

input.send,
button.send { width:100%; border:none; border-radius: 5px; background-color:#003966; color:#fff; padding:10px 0px; }
button.send:hover { background-color:#398b9f; }
button.back { float:right; padding:10px 20px; background-color:#003966; color:#fff; border-radius:5px; width:160px; border:none; }
button.back:hover { background-color:#398b9f; color:#fff; }
button.back i { font-size:1.5rem; float:left; } 

/* topnb */
.topnb { position: absolute; top:0px; background-color:#fff; width:100%; z-index:10; }
.topnb .toplink { border-bottom:1px solid #f7f3f0; padding:10px 0px; }
.topnb .tla { display: flex; justify-content: flex-end; }
.topnb .tla > span { padding-left:40px; }
.topnb .tla span i { color:#41495f; }
.topnb .toplink .tla span a { color:#384158; }
.topnb .tla span a:hover { color:#fe963e; }

.topnb .nb .logo img { height:60px; width:auto; }
.topnb .navbar { padding:0px; }
.topnb .nb { width:100%; }
.topnb .nb #navbarMenu { justify-content: space-between; }
.topnb .submenu .subt a { display: inline-block; position:relative; padding:38px 0px; margin-left:30px; color:#003966; font-size:1.125rem; }
.topnb .submenu .dp_menu { display: none; background-color:#003966; }
.topnb .submenu .dp_menu ul { list-style-type: none; padding:0px; }
/* .topnb .submenu .dp_menu .items li { display: inline-block; padding:0px 15px; } */
.topnb .submenu .dp_menu .items li a { color:#fff; }
.topnb .submenu .subt .bd { display:none; background-color:#003966; position: absolute; height:4px; }
.topnb .submenu .subt .arrow { position: absolute; color:#919191; }

/* toplan */
.topnb .toplan { display:none; position: absolute; width:100%; top:80px; left:0px; background-color:#fff; transition:all .3s ease; }
.topnb .toplan a { display: block; padding:20px 0px; margin:0px 30px; border-bottom:1px solid #f7f3f0; color:#000; font-size:1.5rem; }

.mask { position: fixed; width:100%; height:100vh; top:0; left:0; z-index:5; background-color:rgba(0,0,0,0.5); display: none; }

/* footer */
.footer { padding:30px 0px; color:#fff; background-color:#006ebd; }
.footer .info { margin-bottom:15px; }
.footer .info .slash { margin-left:15px; margin-right:15px; }
.footer .design .copy { display: inline-block; padding-right:15px; }
.footer .design a { color:#fff; }
.footer .design a:hover { border-bottom:1px solid #fff; }

/* .fill { background-color: #66493d; } */

/* sidebar */
.sidebar { position:fixed; right:0px; top:50%;  z-index:2; transition: right 0.3s; }
.sidebar > div { width:80px; height:80px; }
.sidebar .member { padding:16px 0px; }
.sidebar .icon { font-size:1.5rem; }
.sidebar .member .name { font-size:0.8rem; font-weight: bold; }
.sidebar .buycar { position: relative; }
.sidebar .buycar .num { position: absolute; top:13px; right:15px; width:24px; height:24px; line-height:24px; border-radius: 50%; color:#fff; background-color:#2d3a3a; font-size:0.8rem; }
.sidebar .buycar,.sidebar .totop { padding:28px 0px; }
.sidebar .member .bd { width:20px; border-bottom:1px solid #d1d1d1; position: absolute; top:80px; left:30px; }

.sidebar , .bottombar > button { color:#003966; background-color: #fff; }
.sidebar > div:hover , .bottombar > button:hover { background-color: #006aa3; cursor: pointer; color:#fff; }
.sidebar .totop , .bottombar .totop { background-color:#003966; color:#fff; }
.sidebar .totop:hover , .bottombar .totop:hover { background-color:#006aa3; color:#fff; }

/* bottombar */
.ctlbar { transition: bottom .3s; }
.bottombar { position:fixed; bottom:0px; width:100%; display:flex; z-index:2; }
.bottombar > button { flex:1; padding:12px 0px 4px 0px; border:none; }
.bottombar .name { padding-top:2px; font-size:0.8rem; }
.bottombar .icon { font-size:1rem; }
.bottombar .buycar .icon span { position: relative; }
.bottombar .buycar .num { position: absolute; top:-10px; right:-10px; width:16px; height:16px; line-height:16px;  font-size:0.7rem; font-weight:normal; }
.bottombar .totop { padding:21px 0; }
/* .bottombar > button:hover .num { background-color:#ec4067; } */

/* modal */
.clickable { cursor: pointer; }
#searchModal .close , #loginModal .close { position: absolute; right:0px; top:-50px; color:#ffffff; text-shadow:none; opacity: 1; }
#searchModal .modal-dialog { margin:8rem auto; max-width:730px; }
#searchModal .modal-content { border-radius: 0; text-align: left; }
/* .modal .modal-body { padding:14px; } */
#searchModal .modal-body input { border:none; width:calc(100% - 40px); border-right:1px solid #c6c6c6; }
#searchModal .modal-body .fa-search { color:#003966; width:30px; text-align: right; border:none; background-color:transparent; padding:0px; }
#searchModal .modal-body .fa-search:hover  { color:#398b9f; }


::-webkit-input-placeholder{ color:#777777; }
/* scrollbar */
.topnb .menu *::-webkit-scrollbar{ display:none; }
.top .topmenu .subject::-webkit-scrollbar { display:none; }

@media (max-width:1199.98px){
    .mtop { height:80px; }

    .sidebar { display: none; }
    .topnb #topbtn.active { color:#919191; }
    .topnb .topbtn .logo { padding-left:30px; }
    .topnb .topbtn .logo img { height:80px; padding:10px 0px; }
    .topnb .topbtn .tbtn { display: flex; background-color:#fff; }
    .topnb .topbtn .tbtn button { display:inline-block; border:none; background-color:transparent; height:80px; width:80px; font-size:1.5rem; color:#303030; padding:0px; }

    .topnb .navbar { width:100%; }
    .topnb .nb #navbarMenu { position: absolute; width:100%; max-height:calc(100vh - 80px); overflow:auto; transition:all .3s ease; left:0px; right:0px; top:0px; background-color:#fff; }

    /* .topnb .submenu .dp_menu { display: block; } */
    .topnb .submenu .dp_menu .items li { padding:20px 0px; }
    .topnb .submenu .dp_menu .items li a { font-size:1.5rem; position: relative; }
    .topnb .submenu .subt { padding:20px 0px; margin:0px 60px; border-bottom:1px solid #f7f3f0; position: relative; }
    .topnb .submenu .subt a { font-size:1.5rem; padding:0px; margin:0px; position:static; }
    .topnb .submenu .subt .arrow { width:15px; height:24px; right:-30px; top:25px; }
    .topnb .submenu .subt .bd { position:relative; left:0px; right:0px; bottom:-20px; }
}

@media (max-width:991.98px){}

@media (max-width:767.98px){
    .mtop { height:60px; }

    .topnb .topbtn .logo { padding-left:10px; padding-top:5px; }
    .topnb .topbtn .logo img { height:50px; padding:14px 0px; }

    .topnb .nb #navbarMenu { max-height:calc(100vh - 60px); }
    .topnb .submenu .subt { margin:0px 20px; padding:15px 0px; }
    .topnb .submenu .subt a { font-size:1.25rem; }
    .topnb .submenu .subt .arrow { right:0px; width:10px; height:16px; top:20px; }
    .topnb .submenu .subt .bd { bottom:-15px; }
    
    .topnb .submenu .dp_menu .items li a { font-size:1rem; }

    .topnb .topbtn .tbtn button { width:60px; height:60px; }

    .footer .icon a { margin:0px 10px; }
    .footer .design .copy { display:block; padding-right:0px; padding-bottom:5px; }

    .bottombar > div { padding:15px 0px; }
    .bottombar .icon { font-size:1rem; }
    .bottombar .name { font-size:0.7rem; }
    .bottombar .totop { padding:12px 0px; }
    .bottombar .buycar .num { top:-8px; right:-8px; width:16px; height:16px; line-height:16px; font-size:0.6rem; }
}

@media ( max-width:575.98px ){}

@media ( min-width:576px ){}

@media ( min-width:768px ){}

@media ( min-width:992px ){
    .cournews .row > div { padding:0px 30px; }
}

@media ( min-width:1200px ){
    .bottombar { display: none; }

    .topnb .submenu .dp_menu { position: absolute; left:0px; right:0px; }
    .topnb .submenu .dp_menu .items li { display: inline-block; padding:0px 15px; }
    .topnb .submenu .dp_menu .items li a { display:block; padding:10px 0px; font-size:1.125rem; }
    .topnb .submenu .subt .arrow { width:10px; height:16px; left:50%; bottom:25px; transform: translate(-50%); font-size:0.875rem; }
    .topnb .submenu .subt .bd { bottom:0px; left:0; right:0; }
    /* topnb hover */
    .topnb .submenu .dp_menu .items li a:hover { color:#fe8f30; }
    .topnb .submenu:hover .dp_menu, .topnb .submenu:hover .bd { display: block; }
    .topnb .submenu:hover .subt a { color:#003966; }
}