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; }

/* ====== �梁鍂璅��� ====== */
/* ���� */
.pdname { color:#474747; }
.price1 { color:#ff9f1c; }
.price2 { color:#ababab; }

/* ��𣇉�𣽡over */
.gbox { overflow: hidden; }
.gbox .wh { height:100% !important; width:auto !important; }
.gbox .ww { width:100% !important; height:auto !important; }

/* 甇�䲮敶Ｗ�憛� */
.SquareBase { position: relative; width:100%; padding-top:100%; }
.SquareBase .SquareArea { 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:140px; }

.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; font-size:0.875rem; }
.topnb .tla > span { padding-left:40px; }
.topnb .tla span i , .topnb .toplink .tla span a { color:#398b9f; }
.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:#000; }
.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; }

/* 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 { background-color:#003966; }
.footer .info { padding-top:80px; padding-bottom:35px; border-bottom:1px solid #398b9f; text-align:left; }
.footer .info img { max-width:185px; }
.footer .info .tit { color:#398b9f; font-size:1.25rem; padding-bottom:15px; }
.footer .info .link { padding-bottom:5px; }
.footer .info .link a { color:#fff; }
.footer .info .link a:hover { border-bottom:1px solid #fff; }

.footer .icon { display: inline-flex; justify-content: flex-start; flex-wrap: wrap; }
.footer .icon a { height:32px; width:18px; color:#fff; font-size:1.125rem; padding:7px 0px; margin-right:20px; }
.footer .icon a:hover { color:#fe963e; border-bottom:none; }
.footer .icon .lineImg { background:url("./images/icon_line-a.png") no-repeat center center; background-size:18px; }
.footer .icon .lineImg:hover { background:url("./images/icon_line-b.png") no-repeat center center; background-size:18px; }

.footer .spc { margin-top:40px; }

.footer .design { padding:20px 0px; color:#398b9f; font-size:0.875rem; }
.footer .design .copy { display: inline-block; padding-right:15px; }
.footer .design a { color:#398b9f; }
.footer .design a:hover { color:#fff; 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 > div:hover .num { background-color: #ff9f1c; color:#2d3a3a; } */
.sidebar .buycar,.sidebar .totop { padding:28px 0px; }
/* .sidebar .totop {  } */
/* .sidebar .totop:hover { background-color: #ff9f1c; opacity: 0.8; color:#fff; } */
.sidebar .member .bd { width:20px; border-bottom:1px solid #d1d1d1; position: absolute; top:80px; left:30px; }

.sidebar , .bottombar > button { color:#17607d; background-color: #fff; opacity: 0.8; }
.sidebar > div:hover , .bottombar > button:hover { background-color: #003966; cursor: pointer; color:#fff; }
/* .sidebar .buycar .num , .bottombar .buycar .num { border-radius: 50%; color:#fff; background-color:#ff4500; } */
/* .sidebar .buycar:hover , .bottombar .buycar:hover {  } */
/* .sidebar > div:hover .num , .bottombar > button:hover .num { background-color: #ff4500; color:#fff; } */
.sidebar .totop , .bottombar .totop { background-color:#17607d; color:#fff; opacity: 0.8; }
.sidebar .totop:hover , .bottombar .totop:hover { background-color:#003966; 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; }

/* product */
.product .pd > a { display: block; overflow: hidden; }
.product .pd > a img { transition: all .2s ease-out; }
.product .pd > a:hover img { transform: scale(1.1);  }



@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; }
    .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; }
}

@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 (min-width:992px) and (max-width:1199.98px){
    /* .topnb .logo img {  max-height:54px; margin:3px 0px; } */
}

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

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

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

    .topnb .topbtn .logo { padding-left:10px; }
    .topnb .topbtn .logo img { height:60px; 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 .info { text-align:center; padding:20px 0px; }
    .footer .info img { max-width:120px; margin-bottom:20px; }
    .footer .spc { margin-top:20px; }
    .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:370px){
    .topnb .topbtn .tbtn button { width:60px; }

    
}