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

/* 圖片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%; }
.BaseImgS { padding-top:46.85%; }
.Base11 { padding-top:100%; }
.BaseArea { position: absolute; top:0px; left:0px; bottom:0px; right:0px; overflow: hidden; }

/* 正方形區塊 */
.SquareBase { position: relative; width:100%; padding-top:100%; }
.SquareBase .SquareArea { position: absolute; top:0px; left:0px; bottom:0px; right:0px; overflow: hidden; } 

.RowItems .ColItem { margin-bottom:40px; }
.RowItems .ColBg { height:100%; background-color:#fff; }
.RowItems .ColItem .ColCont { padding:20px; font-size:1.125rem; color:#005083; }

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

input.send,
button.send { width:100%; border:none; border-radius: 5px; background-color:#3e6679; color:#fff; padding:10px 0px; }
button.send:hover { background-color:#8026a6; }
button.back { float:right; padding:10px 20px; background-color:#3e6679; color:#fff; border-radius:5px; width:160px; border:none; }
button.back:hover { background-color:#8026a6; 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.active { position: fixed; }
.topnb .toplink { height:80px; }
.topnb .tla { display: flex; justify-content: flex-end; padding:28px 0px; }
.topnb .tla > span.lp { padding-left:30px; border-left:1px dotted #9e9e9e; position:relative; }
.topnb .tla > span.rp { padding-right:30px; }
.topnb .tla .lp:hover .lan { display: block; }
.topnb .tla .lp .lan { display: none; position: absolute; top:25px; right:0px; left:-35px; z-index:5; }
.topnb .tla .lp .lan > div:not(:first-child) { margin-top:20px; }
.topnb .tla span i , .topnb .toplink a { color:#474747; }
.topnb .tla span:hover > i , .topnb .tla span:hover > a { color:#5142b3; }

.topnb .dp_menu  { background-color:#262626; color:#fff; padding:30px; }
.topnb .dp_menu a { color:#fff; }
.topnb .dp_menu a:hover { color:#a899ff; }

.topnb .logo { position: absolute; left:0px; top:0px; padding:10px 0px; }
.topnb .logo img { height:60px; width:auto; }
.topnb .navbar { padding:0px; background-color:#5142b3; }
.topnb .nb { width:100%; }
.topnb .nb #navbarMenu { justify-content: space-between; }
.topnb .submenu .subt a { display: inline-block; position:relative; color:#fff; font-size:1.125rem; }
.topnb .submenu .dp_menu { display: none; }
.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 .subt .bd { display:none; background-color:#262626; position: absolute; height:4px; }

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

.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:#fff; }
.footer .info { padding-top:80px; padding-bottom:35px; }
.footer .info img { max-width:255px; }
.footer .info .tit { color:#9b98a5; font-size:1.25rem; padding-bottom:15px; }
.footer .info .link { display: inline-block; margin:40px 5px 30px; }
.footer .info .link a { color:#403486; }
.footer .info .link a:hover { color:#8e7cf5; }

.footer .icon { display: inline-flex; justify-content: flex-start; flex-wrap: wrap; }
.footer .icon a { height:24px; width:24px; background-color:#75c6d1; color:#fff; padding:4px 0px; margin:0px 5px; border-radius: 25px; }
.footer .icon a:hover { background-color:#8026a6; border-bottom:none; }
.footer .icon .lineImg { background:url("./images/icon_line-a.png") no-repeat center center; background-size:16px; background-color:#75c6d1; }
.footer .icon .lineImg:hover { background-color:#8026a6; }

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

.footer .design { padding:20px 0px; color:#9b98a5; font-size:0.875rem; border-top:1px solid #f5f1f9; }
.footer .design .copy { display: inline-block; padding-right:15px; }

.footer .design a { color:#9b98a5; }
.footer .design a:hover { color:#8e7cf5; }

/* sidebar */
.sidebar { position:fixed; right:0px; top:70%; z-index:2; transition: right 0.3s; }
.sidebar > div { width:80px; height:80px; }
.sidebar .icon { font-size:1.5rem; }
.sidebar .totop { padding:28px 0px; }
.sidebar .totop , .bottombar .totop { background-color:#5142b3; color:#fff; opacity: 0.8; }
.sidebar .totop:hover , .bottombar .totop:hover { background-color:#8026a6; color:#fff; }

/* bottombar */
.ctlbar { transition: bottom .3s; }
.bottombar { position:fixed; bottom:-30px; right:16px; z-index:10; }
.bottombar .icon { font-size:1rem; }
.bottombar .totop { width:30px; height:30px; border-radius: 25px; padding:8px 0px; }

/* 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:#504f58; width:30px; text-align: right; border:none; background-color:transparent; padding:0px; }
#searchModal .modal-body .fa-search:hover  { color:#9b98a5; }


::-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 .navbar-nav { width:100%; }
    .topnb .navbar-nav > li { flex:1; position: relative; padding:20px 0px; }

    .topnb li .subt { border-left:1px dotted #8074c7; }
    .topnb li:last-child .subt { border-right:1px dotted #8074c7; }
    /* .topnb .submenu .subt { border-right:1px dotted #8074c7; } */
    .topnb .submenu .subt .bd { bottom:0px; left:0; right:0; }
    
    .topnb .submenu .dp_menu { position: absolute; top:64px; left:0px; right:0px; }
    .topnb .submenu .dp_menu .items li { padding:0px 15px; }
    .topnb .submenu .dp_menu .items li a { display:block; padding:10px 0px; }
    
    /* topnb hover */
    .topnb .submenu:hover .dp_menu { display: block; }
    .topnb .submenu:hover { background-color:#32267d; }
}

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

    .sidebar { display: none; }
    .topnb #topbtn { background-color:#32267d; }
    .topnb #topbtn.active { color:#5142b3; background-color:#fff; }
    .toplogo { position: absolute; top:60px; left:0px; right:0px; padding:10px 0px; background-color:#fff; }
    .toplogo img { height:60px; width:auto; }
    
    .topnb .topbtn .tbtn { display: flex; background-color:#fff; }
    .topnb .topbtn .tbtn > button { flex:1; border:none; border-radius: 0px; background-color:#5142b3; padding:18px 0px; font-size:1.5rem; color:#fff; }
    

    .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 .dp_menu { padding:0px; }
    .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; border-bottom:1px solid #e2e2e2; position: relative; }
    .topnb .submenu .subt a { color:#262626; font-size:1.5rem; padding:0px; margin:0px; position:static; }
    .topnb .submenu .subt .arrow { position: absolute; 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){
    .footer .design { display: flex; justify-content: space-between; }
    .footer .design .copy .no1 { margin-left:30px; }
}

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

    .toplogo img { height:40px; }

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

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

    .footer .info { text-align:center; padding:40px 0px; }
    .footer .info img { margin-bottom:20px; }
    .footer .design .copy { display:block; padding-right:0px; padding-bottom:5px; }
    .footer .design .copy .no1 { display: block; margin-top:10px; }
    .footer .design .link { margin-top:20px; }

    .bottombar .icon { font-size:1rem; }
    .bottombar .name { font-size:0.7rem; }
    .bottombar .buycar .num { top:-8px; right:-8px; width:16px; height:16px; line-height:16px; font-size:0.6rem; }
}