@charset "utf-8"; /* |-------------------------------------------------------------------------- | header |-------------------------------------------------------------------------- */ #TopNotice{ z-index:999; position:relative; width:100%; height:40px;line-height:40px;color:#fff; background-color:#242424; } #TopNotice #TopNoticeBG { margin:0 auto; height:40px;line-height:40px;color:#fff;} #TopBar{ z-index:999; position:relative; width:100%;border-bottom:1px solid #ccc; height:29px; line-height:28px;color:#6d6d6d; background-color:#e5e5e5; } #TopBar #TopBarBG { position:relative; margin:0 auto; height:28px;line-height:28px;color:#6d6d6d;} .TopUL { height:28px; list-style:none; } .TopUL li {padding-right:5px;padding-left:5px;position:relative; background:url(base/line.gif) no-repeat right center;cursor:pointer;line-height:28px;} .TopUL li span{ display:inline-block; } .TopUL li a{text-decoration:none; font-size:!important;text-transform:capitalize; display:inline-block;} .TopUL li a:hover { text-decoration:underline;} #TopUL_l {float:left;} #TopUL_l li {} #TopUL_r { float:right; text-align:right;} #TopUL_r li { display:inline-block; text-align:left; } #HeadTopic { float:left; color:#000; line-height:28px; /*margin-top:3px;*/} #HeadTopic li { padding:0 4px; /*border:1px solid #ddd; line-height:100%; background-color:#fff; border-radius:3px;*/} #HeadTopic li i { margin-top:-3px; } /*Currency*/ #Currency{ } #Currency a img { vertical-align:middle; margin-top:-2px; } #Currency > a { background:url(base/tabs_3.gif) no-repeat 60px 15px; padding:0 0 0 10px; margin:0 10px; display:block; color:#666; font-size:1.4rem; height:36px; text-decoration:none;} #Currency:hover { } #Currency:hover > a { background-color:#fff; /*background:#fff url(base/tabs_3_h.gif) no-repeat 82px 14px;*/ color:#666; cursor:default;} #Currency:hover > a span {color:#666 !important;} #Currency > a, #Currency .dropdown-menu { width:80px; } #Currency .dropdown-menu { background-color:#fff; /*set this for special*/ position:absolute; top:36px; left:0; padding:5px 0; min-width:100px; border:0; border-radius:0; font-size:1.4rem;} #Currency .dropdown-menu a { color:#666; display:block; line-height:100%; padding:5px 10px 5px 19px; margin:0 1px;} #Currency .dropdown-menu a:hover{ color:#333; background-color:#eaeaea; text-decoration:none;} #Currency em { display:inline-block; width:12px; margin-left:4px; } /*#Currency:hover { -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); box-shadow:0 0 3px rgba(0, 0, 0, 0.25); }*/ #Currency .dropdown-menu { border:1px solid #ddd; /* background-color:#f2f2f2\9; 兼容性*/ -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); } #Currency:hover > a { background-color:#f2f2f2\9; /*兼容性*/} #Currency .dropdown-menu a:hover{ } /*LiveChatWrap*/ #LiveChatWrap > a { padding:0 10px; /*paddingL0 10px 0 33px; background:url(base/bg_LiveChatIco.png) no-repeat 10px center;*/ text-decoration:none; display:block; color:#333; position:relative; z-index:1001; } #LiveChatWrap > a > div { display:inline-block; background:url(base/tabs_3.gif?v=0101) no-repeat right 17px; padding:0 20px 0 0; font-size:1.4rem; height:36px;} #LiveChatWrap:hover > a { /*background-color:#fff;*/ color:#333; cursor:default; } #LiveChatWrap:hover > a > div { /*background:url(base/tabs_3_h.gif) no-repeat right -1px;*/ } #LiveChatWrap .dropdown-menu { background-color:#fff; /*set this for special*/ position:absolute; top:36px; left:auto; right:-58px; padding:10px; margin:0; min-width:332px; border:0; border-radius:0; font-size:1.4rem; cursor:default; } #LiveChatWrap .dropdown-menu dl { } #LiveChatWrap .dropdown-menu dl dt { font-size:1.4rem; color:#333; } #LiveChatWrap .dropdown-menu dl dd {} #LiveChatWrap .dropdown-menu dl a { text-transform:none; } /*decoration for hover*/ /*#LiveChatWrap:hover { -webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); box-shadow:0 0 3px rgba(0, 0, 0, 0.25); }*/ #LiveChatWrap .dropdown-menu { border:1px solid #ddd; -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); } #LiveChatWrap:hover > a { background-color:#eee\9; } #LiveChatWrap .dropdown-menu { background-color:#eee\9; } #LiveChatWrap .dropdown-menu a:hover{ background-color:#ccc\9; } /* #AfterOrderDL { background:url(base/bg_widget.png) no-repeat -158px -170px; } #BeforeOrderDL { background:url(base/bg_widget.png) no-repeat -157px -333px; } */ #LiveChatWrap .dropdown-menu { } .SerivceWayDL dd { float:left; width:76px; } .SerivceWayDL dd + dd { margin-left:20px; /*margin-left:10px; */} .SerivceWayDL dd > a { display:block; text-align:center; text-decoration:none !important; } .SerivceWayDL dd > a > i { display:inline-block; width:30px; height:30px; } .SerivceWayDL dd > a > em { display:block; font-size:1.4rem; color:#333; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;} .SerivceWayDL dd > a:hover em { color:#000; } .SerivceWayDL .DD-LIVECHAT { width:60px; /*width:50px;*/} .SerivceWayDL .DD-TICKET { width:80px; } .SerivceWayDL .DD-BAR { width:0; height:43px; border-right:1px solid #eee; } .SerivceWayDL .DD-MESSENGER { width:66px; } .SerivceWayDL .DD-WHATSAPP { width:66px; } .SerivceWayDL .DD-SNAPCHAT { width:48px; } .SerivceWayDL-Line { } .SerivceWayDL-Line dd { } .SerivceWayDL-Line dd + dd { margin-top:8px; } .SerivceWayDL-Line dd > a { display:inline-block; text-decoration:none !important; } .SerivceWayDL-Line dd > a > i { display:inline-block; font-size:16px; line-height:1 !important; margin-right:10px; } .SerivceWayDL-Line dd > a > em { display:inline-block; font-size:1.4rem; color:#999; position:relative; top:-1px; } .SerivceWayDL-Line dd > a:hover em { color:#000; } @media (max-width:575px){ .ServiceBox .SerivceWayDL { flex-flow:row wrap; } .ServiceBox .SerivceWayDL dd { width:100% !important; } } /*new style*/ .HeaderCard > li.LiveChatBox .btn { color:#fff !important; } .HeaderCard > li.LiveChatBox .btn a { color:#fff !important; } .HeaderCard > li.LiveChatBox .btn .fa { min-height:0; line-height:1; color:#fff !important; } .HeaderCard > li.LiveChatBox #LiveChatWrap .dropdown-menu dl dt { font-size:1.4rem; } .HeaderCard > li.LiveChatBox #LiveChatWrap .dropdown-menu dl dd { line-height:1.4;} .btn-MainColor .livechat_button * { color:#fff !important; } /* |-------------------------------------------------------------------------- | 购物车 |-------------------------------------------------------------------------- */ #CartBox { height:100%; } #CartBox a.shopping_cart { position:relative; z-index:1001; display:block;cursor:pointer; color:#333;text-decoration:none;font-size:1.4rem; display:flex; align-items:center; justify-content:center; } #CartBox a.shopping_cart #cart_items { position:relative; width:25px; height:25px; display:inline-block; text-align:center; /*background:url(base/bag_header_light.png?=0101) no-repeat scroll center center / cover;*/ } #CartBox a.shopping_cart #cart_items i { font-size:22px; position:relative; top:0;} #CartBox a.shopping_cart #cart_items b { font-weight:normal; display:inline-block; width:17px; height:16px; line-height:16px; font-size:1.4rem; position:absolute; left:4px; top:5px; padding:0;letter-spacing:-1px; color:#f02165; background-color:transparent; border-radius:50%; text-align:center; } #CartBox a.shopping_cart em { color:#333; font-weight:normal; font-size:1.4rem; position:relative; top:3px; } #CartBox a.shopping_cart .icon-angle-down { position:relative; top:19px; } #CartBox div.dropdown-menu { display:none !important; position:absolute; left:auto; right:-30px; top:80px;width:280px; margin:0; padding:8px 0 0 0; background-color:#fff; border:1px solid #ddd; border-radius:0; padding-bottom:0;width:300px; /*margin-top:-1px !important;*/ } #CartBox div.dropdown-menu h6 { margin:0; text-align:center; padding-top:10px; font-weight:bold; } #CartBox.active a.shopping_cart, #CartBox:hover a.shopping_cart { /*background-color:#fff; border:1px solid #ddd; border-bottom:1px solid #fff; padding:0 9px 0 9px;*/ } #CartBox:hover div.dropdown-menu { /*display:block !important;*/ display:none !important; } #CartBox .btn-headerCart{ width:100%; padding:inherit 25px; /*height:25px; line-height:24px;padding:0 8px;*/} #CartBox dl .remove { display:none; text-decoration:none !important; } #CartBox dl:hover .remove { background-color:#f2f2f2; display:inline-block; width:22px; height:22px; line-height:19px; border:1px solid #ccc; border-radius:50%; color:#999; cursor:pointer; position:absolute; right:5px; top:84px; text-align:center; } #CartBox dl:hover .remove .fa { font-size:19px; display:inline-block; width:28px; height:28px; line-height:26px; color:#999; border:1px solid #ccc; border-radius:50%; font-style:normal; text-align:center; } #CartBox.CartPageCartBox:hover div.dropdown-menu { display:none !important; } #CartBox.CartPageCartBox:hover a.shopping_cart { background-color:transparent; border:none; padding:1px 10px; } #CartBox.CartPageCartBox a.shopping_cart .icon-angle-down { display:none; } /*position:relative; left:2px; height:14px; min-width:14px; margin-top:8px;*/ .ArrowWrap .arrow { border-width:13px; } .ArrowWrap .arrow:after { border-width:12px; } #CartBox div.dropdown-menu.ArrowWrap.bottom .arrow:after { top:1px; margin-left:-12px !important; border-bottom-color:#fff;} #CartBox div.dropdown-menu.ArrowWrap.bottom .arrow { top:-13px; left:auto; right:40px; } #CartBox div.dropdown-menu .CartEmptyICON { margin:10px auto 5px auto; width:50px; height:50px; background:url(base/bag_header_light.svg?v=0101) no-repeat scroll center center / cover;} /* |-------------------------------------------------------------------------- | 购物车内容 |-------------------------------------------------------------------------- */ #CartBox #cartEmptyInfo { } #CartBox #cartEmptyInfo p, #scQuickEntry{border-top:none;padding:10px 5px;line-height:1.5;text-align:center; -moz-border-radius-topleft:3px;-moz-border-radius-topright:0;-moz-border-radius-bottomleft:3px;-moz-border-radius-bottomright:3px; -webkit-border-top-left-radius:3px;-webkit-border-top-right-radius:0;-webkit-border-bottom-left-radius:3px;-webkit-border-bottom-right-radius:3px; border-top-left-radius:3px;border-top-right-radius:0;border-bottom-right-radius:3px;border-bottom-left-radius:3px;} #CartBox #scQuickEntry{ text-align:left;display:none;padding:0;line-height:1.5;z-index:10; border:1px solid #e4e4e4; } #CartBox #scQuickEntry dl{ position:relative; padding:10px; height:142px; width:auto; } #CartBox #scQuickEntry dl dt { width:92px; max-height:122px; border:1px solid #ccc; position:relative;} #CartBox #scQuickEntry dl dt a { display:table-cell; width:90px; max-height:120px; vertical-align:middle; text-align:center; background-color:#fff;} #CartBox #scQuickEntry dl dt a img { max-width:90px; max-height:120px; width:auto; height:auto; } #CartBox #scQuickEntry dl dd { margin-left:100px; } #CartBox #scQuickEntry dl.first, #CartBox #scQuickEntry dl.attachment{border:none;} #CartBox #scQuickEntry dl.attachment dt {text-align:right;margin-left:65px;width:35px;border-top:1px dotted #DDDDDD;padding-top:10px;} #CartBox #scQuickEntry dl.attachment dd {margin-left:100px;border-top:1px dotted #DDDDDD;padding-top:10px;} #CartBox #scQuickEntry dl.attachment dt a img{width:30px;height:30px;} #CartBox #scQuickEntry div.scQEbot { padding:0 10px 18px 10px; border-top:1px solid #ddd; } #CartBox #scQuickEntry div.scQEbot div .tip{padding-bottom:15px;} #CartBox #scQuickEntry .moreItems{padding:0 0 10px 16px ;font:11px Arial;} #scQuickEntry h4{padding-top:0px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} #scQuickEntry h4 a{font-size:1.4rem;line-height:14px;font-weight:normal;} #scQuickEntry .prAttr { font:normal 11px/150% Arial;} #scQuickEntry .prAttr i { font-style:normal; } #scQuickEntry .cartTotal{ text-align:center; padding:15px 0; margin:0; } #scQuickEntry .cartTotal .red { font-size:1.4rem;} #scQuickEntry .cartTotal .paypal { margin-top:6px;display:inline-block;} #scQuickEntry .ProdQuant { position:relative; top:-5px; } #scQuickEntry .ProdQuant > em { display:inline-block; width:26px; text-align:center; } #scQuickEntry .ProdQuant > span { display:inline-block; text-decoration:none; text-align:center; } #scQuickEntry .ProdQuant > span > i { display:block; width:28px; height:28px; font-size:1.4rem; line-height:26px; color:#999; border:1px solid transparent; border-radius:50%; font-style:normal; text-align:center; } #scQuickEntry .ProdQuant > span:hover { text-decoration:none; cursor:pointer; } #scQuickEntry .ProdQuant > span:hover > i { border:1px solid #ccc; } /* |-------------------------------------------------------------------------- | Favorites |-------------------------------------------------------------------------- */ #FavoritesLi { } #FavoritesLi > a { position:relative;} #FavoritesLi > a > div { /*display:inline-block;*/display:none; width:16px; height:16px; line-height:16px; font-size:1.4rem; position:absolute; left:28px; top:7px; padding:0;letter-spacing:-1px; color:#fff; background-color:#f02165; border-radius:50%; text-align:center; } /*#FavoritesLi > a > div > em { position:absolute; left:-22px; top:5px; display:inline-block; padding:2px; border-radius:6px; text-align:center; background-color:#f35b6e; color:#fff; font-size:1.4rem; line-height:9px; }*/ #FavoritesLi > a > i { position:relative; font-size:24px; } /* #FavoritesLi { display:inline-block; padding:5px; margin-right:10px; } #FavoritesLi > a { position:relative; display:table-cell; text-align:center; vertical-align:middle; } #FavoritesLi > a >.fa { color:#333; padding:4px; color:#333;} #FavoritesLi > a > em { position:absolute; top:1px; left:19px; display:inline-block; width:14px; height:14px; line-height:14px; letter-spacing:-1px; text-align:center; color:#333; background-color:#5cb85c; border-radius:50%; font-size:10px; color:#fff; } #FavoritesLi > a > b { color:#333; font-weight:normal; font-size:1.4rem; position:relative; top:-3px;} #FavoritesLi:hover > a { } #FavoritesLi:hover > a > .fa { } #FavoritesLi:hover > a > em { } */ #SearchWrap{position:absolute; top:41px; left:280px; background-color:#fff; } #SearchWrap #SearchBox{ height:28px; border:1px solid #999; text-align:left;} #SearchWrap #SearchBox #SearchKeyword{box-shadow:0 0 0;border-radius:0;width:210px;_width:209px; height:26px; padding:4px 0; text-indent:10px;background:none; border:none; border-right:1px solid #eee; float:left; font-size:1.4rem; color:#000; } #SearchWrap #SearchBox #bn-search{width:15px !important;height:12px; margin:0; padding:13px; background:url(base/search.png) no-repeat 7px 7px; border:none; cursor:pointer;} #TheHeader {z-index:1001; width:100%; background-color:#fff; /*border-bottom:1px solid #000;*/ } #TheHeaderWrap { position:relative; z-index:1011; background-color:#fff; /*background-color:#f8f8f8;*/} #TheHeaderBG { position:static; height:80px; margin:0 auto; width:100%; z-index:1001; display:flex; align-items:center; justify-content:space-between;} #TheHeaderBG .LogoBox { /*position:absolute; top:12px; left:calc(40px + (100vw - 100%));*/ } #TheHeaderBG .logo { margin-bottom:0; display:block; line-height:1; position:absolute; } #TheHeaderBG .logo a { display:block; } #TheHeaderBG .logo a img { /*height:60px;*/ } #TheHeaderBG .LogoBox .LogoInfo { font-size:1.4rem; line-height:1; color:#74736d; margin-left:-1px; display:none; } /* @media (min-width:1200px) and (max-width:1449px) { #TheHeaderBG { padding:0 195px 0 255px; } } */ @media (min-width:992px) and (max-width:1199px) { /* #TheHeaderBG { } #TheHeaderBG .LogoBox { left:20px; } .HeaderCard-r { right:42px !important; } #MenuBox .FirstLi-Home { display:none !important; } */ } #TheHeader-Pay { border-bottom:1px solid #ccc; background-color:#fff; } /*.body-responsive #TheHeader-Pay{ min-width:320px; }*/ #TheHeader-PayBG { max-width:1000px; height:61px; position:relative; } #TheHeader-PayBG .LogoBox { } #TheHeader-PayBG .LogoBox a { height:100%; *display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center;} #TheHeader-PayBG .LogoBox a img { display:block; width:100%; margin-top:0; height:32px; position:relative; top:-3px;} #TheHeader-PayBG .SecureBoxBG { padding:8px 0 0 10px; white-space:nowrap; /*position:absolute;top:8px; left:50%; margin-left:-52px; width:104px;*/ } #TheHeader-PayBG .SecureBoxBG i { float:left; background-color:#333; color:#fff; width:20px; height:20px; line-height:20px; font-size:1.4rem; margin:14px 10px 0 0; border-radius:50%; text-align:center; /*width:24px; height:24px; line-height:24px; font-size:17px; margin:12px 10px 0 0;*/} #TheHeader-PayBG .SecureBoxBG em { float:left; color:#333; line-height:48px; white-space:nowrap; font-size:1.4rem; } #TheHeader-PayBG .SecureBoxBG em.SECURE { margin-right:7px;} #TheHeader-PayBG .BackCartBox { float:right; height:66px; line-height:66px; } #TheHeader-PayBG .BackCartBox a { cursor:pointer; } #TheHeader-PayBG .HeaderLine { float:left; margin:0 10px; float:left; height:61px; padding:13px 0; width:20px; } #TheHeader-PayBG .HeaderLine::after { content: ''; display: inline-block; width:1px; height:35px; margin-left:10px; background-color:#ccc; vertical-align:middle; transform: rotate(30deg); -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); } .body-PC #TheHeader-Pay { min-width:768px; width:100%; } .body-Mobile #TheHeader-Pay { min-width:calc(320px + (100vw - 100%)); } .body-PC #TheHeader-PayBG .LogoBox { float:left; height:100%; width:100%; max-width:174px; /* width:194px; */} .body-PC #TheHeader-PayBG .SecureBox { float:left; height:61px; } .body-PC #TheHeader-PayBG .SecureBox br { display:none; } .body-PC #TheHeader-PayBG .BackMobile { display:none; } .body-Mobile #TheHeader-PayBG .LogoBox { float:left; max-width:174px; height:100%; width:calc(100% - 150px);} .body-Mobile #TheHeader-PayBG .LogoBox a img { display:block; width:100%; margin-top:7px; } .body-Mobile #TheHeader-PayBG .SecureBox { float:left; position:relative; height:61px; z-index:0; } .body-Mobile #TheHeader-PayBG .SecureBox .SECURE { display:none; } .body-Mobile #TheHeader-PayBG .HeaderLine { margin:0 6px 0 2px; } .body-Mobile #TheHeader-PayBG .SecureBoxBG { padding:0 0 0 10px; } .body-Mobile #TheHeader-PayBG .SecureBoxBG i { width:30px; height:30px; line-height:30px; font-size:1.8rem; margin-top:17px;} .body-Mobile #TheHeader-PayBG .SecureBoxBG .CHECKOUT { font-size:15px; line-height:64px; padding-top:0; } @media (max-width:767px) { .body-Mobile #TheHeader-PayBG .LogoBox { margin-left:-5px; } .body-Mobile #TheHeader-PayBG .SecureBox { float:left; } .body-Mobile #TheHeader-PayBG .SecureBoxBG { padding-left:0;} .body-Mobile #TheHeader-PayBG .SecureBoxBG em { line-height:1.2; padding-top:10px;} .body-Mobile #TheHeader-PayBG .SecureBoxBG em br { display:inline-block; } } /* @media (max-width:470px) { .body-Mobile #TheHeader-PayBG .SecureBox { width:100%; } .body-Mobile #TheHeader-PayBG .SecureBoxBG { right:0; left:auto; } } @media (max-width:470px) { #TheHeader-PayBG .LogoBox { width:calc(100% - 150px);} #TheHeader-PayBG .LogoBox a img { display:block; width:100%; margin-top:7px; } .body-Mobile #TheHeader-PayBG .LogoBox { width:calc(100% - 190px);} } */ /* |-------------------------------------------------------------------------- | TheHeader-Mobile |-------------------------------------------------------------------------- */ .TheHeader-Mobile li#my-back i { font-size:26px; } .TheHeader-Mobile li#main-nav i { margin-top:-1px; } .TheHeader-Mobile li#my-message i { margin-top:1.5px; font-size:26px; } .TheHeader-Mobile li#my-favorites i { margin-top:-0.5px; margin-left:-1px; font-size:27px; } .TheHeader-Mobile li#shopping-cart i { margin-top:-3.5px; position:relative; font-size:25px; } .TheHeader-Mobile li#shopping-cart b { font-size:1.3rem; position:absolute; top:7px; left:0; width:100%; /* text-indent:-1px; */font-weight:normal; color:#f02165; letter-spacing:-1.7px; text-align:center; } .TheHeader-Mobile { min-width:calc(320px + (100vw - 100%)); width:100%; background-color:#fff;} /*.body-responsive .TheHeader-Mobile{ min-width:320px; }*/ .TheHeader-Mobile ul#main-option-list { height:50px; position:relative; display:flex; justify-content:center; /*padding-left:48px; padding-right:calc(100% - 235px);*/} .TheHeader-Mobile ul#main-option-list li, .TheHeader-Mobile ul#main-option-list li > a, .TheHeader-Mobile ul#main-option-list li > em { display:block; width:34px; height:50px; position:relative; display:flex; align-items:center; justify-content:center; text-decoration:none;} /*Now, do this only by one way*/ .TheHeader-Mobile ul#main-option-list #my-logo { width:100%; } .TheHeader-Mobile ul#main-option-list #my-logo a { width:100%; border:none; *display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; } .TheHeader-Mobile ul#main-option-list #my-logo a img { width:100%; margin-top:0; } .TheHeader-Mobile ul#main-option-list #my-favorites a {} .TheHeader-Mobile ul#main-option-list #my-favorites a #FavsNumBox { display:none; } .TheHeader-Mobile #TheHeaderBg { border-bottom:1px solid #ddd; } /*continue visit reset.min.css*/ /* .TheHeader-Mobile ul#main-option-list #my-logo { margin-left:-10px;} .TheHeader-Mobile-index ul#main-option-list #my-logo { margin-left:0;} */ .TheHeader-Mobile ul#main-option-list li#my-back { position:absolute; top:0; } .TheHeader-Mobile ul#main-option-list li#main-nav { position:absolute; top:0; } .TheHeader-Mobile ul#main-option-list li#my-favorites { position:absolute; top:0; } .TheHeader-Mobile ul#main-option-list li#shopping-cart { position:absolute; top:0; } .TheHeader-Mobile ul#main-option-list li#my-support { position:absolute; top:0; } .TheHeader-Mobile ul#main-option-list li#my-logo { position:absolute; top:0; } /*.TheHeader-Mobile ul#main-option-list li#my-account { position:absolute; top:0; }*/ .TheHeader-Mobile-index ul#main-option-list li#main-nav { position:absolute; top:0; } .TheHeader-Mobile-index ul#main-option-list li#my-message { position:absolute; top:0; } .TheHeader-Mobile-index ul#main-option-list li#my-favorites { position:absolute; top:0; } .TheHeader-Mobile-index ul#main-option-list li#shopping-cart { position:absolute; top:0; } .TheHeader-Mobile-index ul#main-option-list li#my-support { position:absolute; top:0; } .TheHeader-Mobile-index ul#main-option-list li#my-logo { position:absolute; top:0; } /*.TheHeader-Mobile ul#main-option-list li i.sign-header { position:absolute; left:50%; top:50%; margin-left:-13px; margin-top:-16px; }*/ .modal-MobileMenuBox-open .sign-nav { background-position:-280px 0;} #HeadList {} #HeadList #HeadListGuide { background-color:#000; border-color:1px solid #000; color:#fff; border-radius:3px; padding:5px 15px; } /* |-------------------------------------------------------------------------- | TheHeader-Mobile-White |-------------------------------------------------------------------------- */ .TheHeader-Mobile-White { background-color:#fff; } .TheHeader-Mobile-White ul#main-option-list #my-logo a { background-image:url(../logo-white.svg); } .TheHeader-Mobile-White .sign-header { background-image:url(base/bg_header_1_white.png);} .TheHeader-Mobile ul#main-option-list #my-account { } .TheHeader-Mobile ul#main-option-list #my-favorites { } .DropdownBox-DesktopMenu { position:absolute; top:19px; left:0; } .btn-desktop-menu { display:inline-block; width:32px; height:32px; border:1px solid #ddd; background:url(base/bg_header_3.png) no-repeat 0 0; background-size: auto 100%;} /*Menu*/ .MenuTab {} .MenuTab li.TabConent { display:none; } .MenuTab li.TabConent.active { display:block; } .MenuTab li.TabConent dl { } .MenuTab li.TabConent dd {} .MenuTab li.TabConent dd h2 { margin:0; } .MenuTab li.TabConent dd h2 a, .MenuTab li.TabConent dd h2 span { display:block; padding:0 10px 0 20px; border-bottom:10px solid #fff; border-left:10px solid #fff; } .MenuTab li.TabConent dd h2 a { display:flex; align-items:center; background-color:#f1e7de; background-image: -webkit-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background-image: -moz-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background-image: -o-linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background-image: linear-gradient(left,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); } .MenuTab li.TabConent dd h2 a > div { width:120px; height:96px; margin-right:20px; background-repeat:no-repeat; background-position:center center; background-size:cover; /*border-radius:50%;*/} .MenuTab li.TabConent dd h2 a > em { flex:1; font-weight:bold; font-size:1.5rem; } .MenuTab li.TabConent dd h2 a > i { float:right; margin-right:10px; font-size:1.8rem; color:#999;} .MenuTab li.TabConent dd h2 a[data-bg-id=nav-home] > div { height:50px; } .MobileMenuSlideBox { height:100%; overflow:hidden; } .MenuTab { background-color:#fff; margin:0; /*border-top:1px solid #ddd;*/} .MenuTab > li { display:table; width:100%; float:none; /*margin:0 0 16px 0;*/} .MenuTab > li > a { display:table-cell; vertical-align:middle; margin:0; padding-left:10px; /*height:86px;*/ background-color:#fff; font-size:1.4rem; line-height:1; color:#333; font-weight:bold; border:none; border-radius:0; text-decoration:none !important; } .MenuTab > li > a:hover { opacity:0.7; } .MenuTab > li > em { }c .MenuTab > li { margin-bottom:0; } .MenuTab > li > a { padding:16px 15px 16px 10px; height:auto; } .MenuTab > li.MobileCateList-Title { /*margin-top:16px;*/ margin-bottom:10px; } .MenuTab > li.MobileCateList-Title em { display:table-cell; vertical-align:middle; margin:0; padding-left:10px; height:48px; background-color:#e0f1fd; font-size:1.4rem; line-height:1; color:#333; font-weight:bold; border:none; border-radius:0; text-decoration:none !important; } /* |-------------------------------------------------------------------------- | pageMenu |-------------------------------------------------------------------------- */ #MenuWrapper { width:100%; background-color:#fff; } /*same height or line-height start*/ #MenuBox { height:80px; padding:0; margin:auto; /*text-align:center; border-top:1px solid #cce0e2; border-bottom:1px solid #cce0e2;*/ } /* #MenuBox:before { height:80px; position:absolute; left:0; top:0; content: ""; z-index:-1; border-top:1px solid #c1c1c1; border-bottom:1px solid #c1c1c1; } */ #MenuBox .HomeLi a, #MenuBox .HomeLi a:hover, #MenuBox .FirstLi, #MenuBox .FirstLi .FirstA a, #MenuBox .FirstLi .FirstA > span, #MenuBox .FirstLi:hover .FirstA > a, #MenuBox .FirstLi:hover .FirstA > span { line-height:80px; height:80px;} /*same height or line-height end*/ #MenuBox { position:static; z-index:100; } /* 0 Level */ #MenuBox .FirstLi { /*border-right:1px solid #fff;*/ position:relative; display:inline-block; margin:0; } #MenuBox .FirstLi .FirstA { margin:0; font-weight:normal; padding:0 15px; } #MenuBox .FirstLi .FirstA a, #MenuBox .FirstLi .FirstA > span { color:#333; font-size:12px; display:block; text-transform:uppercase; text-decoration:none; } #MenuBox .FirstLi .FirstA em { display:block; font-size:1.4rem; font-family:ProximaNova-Medium; letter-spacing:0.96px; /*font-family:ProximaNova-Bold;*/ /*font-weight:bold; font-family:Open Sans,Verdana,Helvetica,Arial,Droid Sans,sans-serif;*/ } #MenuBox .FirstLi:first-child .FirstA { padding-left:25px;} #MenuBox .FirstLi:hover .FirstA { } #MenuBox .FirstLi:hover .FirstA a, #MenuBox .FirstLi:hover .FirstA > span { color:#ff6699; line-height:80px; } #MenuBox .FirstLi:hover .FirstA em { } #MenuBox .ArrowMenuDown:hover .FirstA a em { position:relative; } #MenuBox .ArrowMenuDown:hover .FirstA a em::before, #MenuBox .ArrowMenuDown:hover .FirstA > span em::before { content:''; position:absolute; bottom:0; left:-10px; /*left:50%; margin-left:-1.5rem;*/ width:calc(100% + 20px); border-bottom:0.3rem solid #333;} /*#MenuBox .FirstLi .FirstA .caret { border-bottom-color:#FBFBFB; border-top-color:#FBFBFB; margin-top:14px; }*/ #MenuBox .HomeLi { margin:0 10px 0 0; } #MenuBox .HomeLi a{ padding:0 10px 0 10px; display:block; overflow:hidden;} #MenuBox .HomeLi a:hover{ } #MenuBox .HomeLi a img { margin:8px 0 0 0;} #MenuBox .ArrowMenuDown { position:static; } #MenuBox .ArrowMenuDown .FirstA { } #MenuBox .ArrowMenuDown .FirstA a, #MenuBox .ArrowMenuDown .FirstA > span{ } #MenuBox .ArrowMenuDown:hover .FirstA { } #MenuBox .ArrowMenuDown:hover .FirstA a, #MenuBox .ArrowMenuDown:hover .FirstA > span{ } #MenuBox .ArrowMenuDown:hover .FirstA em { } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #MenuBox .FirstLi .FirstA.ArrowWrap.bottom .arrow { top:68px; margin-left:-13px; display:none; } #MenuBox .FirstLi .FirstA.ArrowWrap.bottom .arrow:after { margin-left:-12px; } #MenuBox .FirstLi.ArrowMenuDown:hover .FirstA.ArrowWrap.bottom .arrow { /*display:inline-block;*/display:none; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #MenuBox .FirstLi .KidsBoxOuter { background-color:#fff; border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; position:absolute; top:80px; left:0; z-index:999; line-height:150%; width:100% !important;} #MenuBox .FirstLi .KidsBoxInner { background-color:#fff; width:1000px; margin:0 auto; text-align:center; } #MenuBox .FirstLi .KidsBox { background-color:#fff; display:inline-block; text-align:left; padding:20px 0; min-height:330px; position:relative; } #MenuBox .FirstLi .KidsBoxOuter { display:none; } #MenuBox .FirstLi:hover .KidsBoxOuter { display:block; } #MenuBox .FirstLi .KidsBox > table tr td { padding:0;/*padding:0 20px;*/ } #MenuBox .FirstLi .KidsBox > table tr td + td { /*border-left:1px solid #eee;*/ } /* #MenuBox .FirstLi .KidsBox .ShowMenu { position:relative; } #MenuBox .FirstLi .KidsBox .ShowMenuing { border:1px solid #000;box-shadow:0 3px 3px rgba(0, 0, 0, 0.26); } #MenuBox .FirstLi .KidsBox .ShowMenuing h2 { padding:2px 15px;} #MenuBox .FirstLi .KidsBox .ShowMenuing a { color:#ff6699;} #MenuBox .FirstLi .KidsBox .ShowMenu em { display:none; width:20px; height:26px; background:url(base/arrow_menu.gif) no-repeat top center;} #MenuBox .FirstLi .KidsBox .ShowMenuing em { display:inline-block; position:absolute; top:0; right:-3px; z-index:10000; } #MenuBox .FirstLi .KidsBox .CateBox { position:absolute; top:-1px; background-color:#fff; white-space:nowrap; padding:10px 16px 10px 0; border:1px solid #666; box-shadow:0 3px 3px rgba(0, 0, 0, 0.26);} #MenuBox .FirstLi .KidsBox .CateBox dd h2 { padding:2px 0 2px 16px;} #MenuBox .FirstLi .KidsBox .CateBox dd h2 a:hover { text-decoration:underline; color:#ff6699; } */ #MenuBox .FirstLi .KidsBox dl { padding-right:40px; width:260px;} #MenuBox .FirstLi .KidsBox dl h2 { } /*font-family:'Domaine Display','Bodoni 72','Times New Roman',Times,'Droid Serif',serif; font-style:italic; line-height:36px;*/ #MenuBox .FirstLi .KidsBox dt { } #MenuBox .FirstLi .KidsBox dt h2 { white-space:nowrap; /*font-family:ProximaNova-SemiBold;*/ line-height:100%; margin:0 0 8px 0; padding:1px 0; border-bottom:1px solid #e4e4e4; } #MenuBox .FirstLi .KidsBox dt h2 a { white-space:nowrap; display:inline-block; /*font-family:ProximaNova-SemiBold;*/ color:#333; padding:7px 0; margin-bottom:4px;text-decoration:none; /*@above@ font-style:italic; */ } #MenuBox .FirstLi .KidsBox dt span { white-space:nowrap; display:inline-block; /*font-family:ProximaNova-SemiBold;*/ color:#333; padding:7px 0; margin-bottom:4px; /*@above@ font-style:italic; */ margin-left:-2px; } #MenuBox .FirstLi .KidsBox dt h2, #MenuBox .FirstLi .KidsBox dt h2 a, #MenuBox .FirstLi .KidsBox dt span { font-family:ProximaNova-Medium; font-size:1.5rem; text-transform:uppercase; } #MenuBox .FirstLi .KidsBox dt h2 a:hover { text-decoration:underline; color:#ff6699; } /*font-family:Open Sans,Verdana,Helvetica,Arial,Droid Sans,sans-serif;*/ #MenuBox .FirstLi .KidsBox dd {} #MenuBox .FirstLi .KidsBox dd h2 { white-space:nowrap; display:inline-block; font-size:1.4rem; line-height:100%; color:#333; margin:0; font-weight:normal; padding:1px 0; /*@above@*/ } #MenuBox .FirstLi .KidsBox dd h2 a { white-space:nowrap; display:inline-block; font-size:1.4rem; padding:7px 0; color:#333; text-decoration:none;} #MenuBox .FirstLi .KidsBox dd h2 a:hover { text-decoration:underline; color:#ff6699; } #MenuBox .FirstLi .KidsBox dd a { font-size:1.4rem; } #MenuBox .FirstLi .KidsBox dl .MenuHot, #MenuBox .FirstLi .KidsBox dl .MenuHot h2, #MenuBox .FirstLi .KidsBox dl .MenuHot a { color:red; } #MenuBox .FirstLi .KidsBox dd { } #MenuBox .FirstLi .KidsBox dd h2 { } #MenuBox .FirstLi .KidsBox a { color:#333;} #MenuBox .FirstLi .KidsBox a:hover {} #MenuBox .FirstLi .KidsBox div h2 { font-size:12px; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /* #MenuBox .FirstLi-Bridesmaids .KidsBoxOuter { display:block !important;} */ .KidsBox .ShopColorBox {} .KidsBox .ShopColorBox > a { white-space:nowrap; display:flex; align-items:center; padding:7px 0 6px 0;} .KidsBox .ShopColorBox > a > i { display:inline-block; width:20px; height:20px; border-radius:50%; margin-right:8px; background-color:#FFD1E1; border:2px solid #fff; box-shadow:1px 1px 2px rgba(0, 0, 0, 0.3);} .KidsBox .ShopColorBox > a > em { position:relative; top:1px; } .KidsBox .ShopColorBox > a:hover > em { text-decoration:underline; color:#ff6699;} .KidsBox .ShopColorBox .option-purple i{ background-color:#5b2642;} .KidsBox .ShopColorBox .option-grey i{ background-color:#6f7478;} .KidsBox .ShopColorBox .option-red i {background-color:#c00017;} .KidsBox .ShopColorBox .option-pink i {background-color:#FFD1E1;} .KidsBox .ShopColorBox .option-blue i {background-color:#2378ec;} .KidsBox .ShopColorBox .option-coral i {background-color:#f9c4b6;} .KidsBox .ShopColorBox .option-lilac i {background-color:#e6cbf8;} .KidsBox .ShopColorBox .option-gold i {background-color:#ddb766;} .KidsBox .ShopColorBox .option-silver i {background-color:#cfd1cc;} .KidsBox .ShopColorBox .option-green i {background-color:#00a885;} .KidsBox .ShopColorBox .option-champagne i {background-color:#e2d0a8;} .KidsBox .ShopColorBox .option-yellow i {background-color:#ffffcd;} .KidsBox .ShopColorBox .option-black i {background-color:#000;} .KidsBox .ShopColorBox .option-teal i {background-color:#008080;} .KidsBox .ShopColorBox .option-white i {background-color:#fff;} .KidsBox .ShopColorBox .option-turquoise i {background-color:#90f5da;} .KidsBox .ShopColorBox .option-orange i {background-color:#fd9850;} .KidsBox .ShopColorBox .option-maroon i {background-color:#800000;} .KidsBox .ShopColorBox .option-burgundy i {background-color:#8b1427;} .KidsBox .ShopColorBox .option-ivory i {background-color:#f7f7ef;} .KidsBox .ShopColorDL-1PerRow dd > a { width:100%; } .KidsBox .ShopColorDL-2PerRow dd > a { float:left; } .KidsBox .ShopColorDL-2PerRow dd > a:nth-of-type(2n+1) { margin-right:4px; width:calc(55% - 4px); } .KidsBox .ShopColorDL-2PerRow dd > a:nth-of-type(2n) { margin-right:0; width:calc(45% - 4px); } .KidsBox .ShopColorDL { } #MenuBox .FirstLi .KidsBox .ShopColorDL-Bridesmaid { width:470px; } #MenuBox .FirstLi .KidsBox .ShopColorDL-Prom { /*width:160px;*/} /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ /*单张AD图*/ div.ShopThumb, div.ShopThumb a { max-width:158px; } div.ShopThumb a > img { max-width:100%; max-height:210px; } div.ShopThumb { position:relative; } div.ShopThumb a { display:inline-block; /*background-color:#f8f8f8;*/ } div.ShopThumb a > em { display:block; color:#000; position:absolute; width:100%; top:50%; margin-top:-10px; z-index:1; text-align:center; font-size:1.6rem; line-height:1.2;} div.ShopThumb a > em > b { font-size:2.4rem; } div.ShopThumb-White a > em { color:#fff; } /*font-size:1.8rem; font-weight:bold; text-shadow:0 0 3px rgba(255,255,255,1);*/ /*多张AD图*/ dl.ShopThumbs {} dl.ShopThumbs dt {} dl.ShopThumbs dt h2 {} dl.ShopThumbs dt h2 span { text-indent:4px; } dl.ShopThumbs dd { display:flex; flex-wrap: wrap; /* width:164px;*/ } dl.ShopThumbs dd > a[data-thumb-id] { display:block; flex: 1 0 50%; text-align:center; /* background-color:red;*/} dl.ShopThumbs dd > a[data-thumb-id] > div.ShowThumbBG { margin:0 auto; background-repeat:no-repeat; background-position:center center; background-size:contain;} dl.ShopThumbs dd > a[data-thumb-id] > em { } /*多张AD图-4组*/ dl.ShopThumbs-4 dd { width:190px; padding-top:8px; } dl.ShopThumbs-4 dd > a[data-thumb-id] { width:50%; } dl.ShopThumbs-4 dd > a[data-thumb-id] > div.ShowThumbBG { width:90px; height:120px; } dl.ShopThumbs-4 dd > a[data-thumb-id] > em { } dl.ShopThumbs-4 dd > a[data-thumb-id]:nth-of-type(1) { padding:0 5px 5px 0;} dl.ShopThumbs-4 dd > a[data-thumb-id]:nth-of-type(2) { padding:0 0 5px 5px;} dl.ShopThumbs-4 dd > a[data-thumb-id]:nth-of-type(3) { padding:5px 5px 0 0;} dl.ShopThumbs-4 dd > a[data-thumb-id]:nth-of-type(4) { padding:5px 0 0 5px;} div.ShopThumb-Prom { padding-top:34px; } div.ShopThumb, div.ShopThumb a { max-width:186px; } div.ShopThumb-Prom a > img { max-width:100%; max-height:275px; } div.ShopThumb-Evening { padding-top:34px; } div.ShopThumb-Evening, div.ShopThumb-Evening a { max-width:158px; } div.ShopThumb-Evening a > img { max-width:100%; max-height:210px; } /*spec*/ div.ShopThumb.ShopThumb-TextShadow { text-shadow: 0 1px 1px #fff; } div.ShopThumb-White.ShopThumb-TextShadow { text-shadow:0 0 3px rgba(0,0,0,1); } #MenuBox .FirstLi-Evening .KidsBoxOuter div.ShopThumb-White.ShopThumb-TextShadow { padding-top:11px; } #MenuBox .FirstLi-Brides .KidsBoxOuter dl.ShopThumbs-4 dd { width:170px; } #MenuBox .FirstLi-Brides .KidsBoxOuter dl.ShopThumbs-4 dd > a[data-thumb-id] > div.ShowThumbBG { width:66px; height:88px; } /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ .BorderC1C1C1R { border-right:1px solid #c1c1c1; } .ArrowWrap { position:relative; z-index:1010; } /* .ArrowWrap.top { margin-top:-10px; } .ArrowWrap.right { margin-left:10px; } .ArrowWrap.bottom { margin-top:10px; } .ArrowWrap.left { margin-left:-10px; } */ .ArrowWrap-title { padding:8px 14px; margin:0; font-size:14px; font-weight:normal; line-height:18px; background-color:#f7f7f7; border-bottom:1px solid #ebebeb; border-radius:5px 5px 0 0; } .ArrowWrap-content { padding:9px 14px; } .ArrowWrap .arrow,.ArrowWrap .arrow:after { position:absolute; display:block; width:0; height:0; border-color:transparent; border-style:solid; } .ArrowWrap .arrow { border-width:7px; } .ArrowWrap .arrow:after { border-width:6px; content:""; } .ArrowWrap.top .arrow { bottom:-7px; left:50%; margin-left:-7px; border-top-color:#999999; border-top-color:rgba(0, 0, 0, 0.25); border-bottom-width:0; } .ArrowWrap.top .arrow:after { bottom:1px; margin-left:-6px; border-top-color:#ffffff; border-bottom-width:0; content:" "; } .ArrowWrap.right .arrow { top:50%; left:-7px; margin-top:-7px; border-right-color:#999999; border-right-color:rgba(0, 0, 0, 0.25); border-left-width:0; } .ArrowWrap.right .arrow:after { bottom:-6px; left:1px; border-right-color:#ffffff; border-left-width:0; content:" "; } .ArrowWrap.bottom .arrow { top:-7px; left:50%; margin-left:-7px; border-bottom-color:#999999; border-bottom-color:rgba(0, 0, 0, 0.25); border-top-width:0; } .ArrowWrap.bottom .arrow:after { top:1px; margin-left:-6px; border-bottom-color:#ffffff; border-top-width:0; content:" "; } .ArrowWrap.left .arrow { top:50%; right:-7px; margin-top:-7px; border-left-color:#999999; border-left-color:rgba(0, 0, 0, 0.25); border-right-width:0; } .ArrowWrap.left .arrow:after { right:1px; bottom:-6px; border-left-color:#ffffff; border-right-width:0; content:" "; } /* .ArrowBox { max-width:276px; padding:1px; text-align:left; white-space:normal; background-color:#ffffff; background-clip:padding-box; border:1px solid #ccc; border:1px solid rgba(0, 0, 0, 0.2); border-radius:6px; -webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2); box-shadow:0 5px 10px rgba(0, 0, 0, 0.2); } */ /*NewNew*/ .MobileTilteBoard { background-color:#eee; padding:1.5rem 3rem; font-size:1.5rem; font-weight:bold; text-transform:uppercase; } .MobileTilteBoard-White { background-color:#fff; } .AccordionGroup-MobileHelp { padding:0; /*border-top:10px solid #fff;*/ border-top:none; background-color:#fff; } .AccordionGroup-MobileHelp .panel { border-top:none; position:relative; border-bottom:2px solid #f2f2f2; } /* .AccordionGroup-MobileHelp .panel::before { content:''; position:absolute; left:1rem; right:1rem; top:0; z-index:1; width:calc(100% - 2rem); height:100%; border-bottom:2px solid #f2f2f2;} .AccordionGroup-MobileHelp .panel:first-child::before { } */ .AccordionGroup-MobileHelp .panel:last-child { border-bottom:2px solid #f2f2f2;} .AccordionGroup-MobileHelp .panel > .panel-heading { background-color:#fff; } .AccordionGroup-MobileHelp .panel > .panel-heading > a { padding-top:1.4rem; padding-bottom:1.4rem;} .AccordionGroup-MobileHelp .panel > .panel-heading > a.accordion-toggle.collapsed + .panel-heading-a { padding-left:3rem; padding-top:1.5rem; padding-bottom:1.5rem;} .AccordionGroup-MobileHelp .panel > .panel-heading > a.accordion-toggle + .panel-heading-a { padding-left:3rem; padding-top:1.5rem; padding-bottom:1.5rem; text-transform:uppercase; } .AccordionGroup-MobileHelp .panel-collapse.collapsing, .AccordionGroup-MobileHelp .panel-collapse.show { border-top:2px solid #f2f2f2; } .AccordionGroup-MobileHelp .panel .panel-body { padding:0; background-color:#fff; margin:0 1rem; /*border:10px solid #fff; */} .AccordionGroup-MobileHelp .panel .panel-body dl dd h2 { margin:0; } .AccordionGroup-MobileHelp .panel .panel-body dl dd a, .AccordionGroup-MobileHelp .panel .panel-body dl dd span { padding:1.4rem 0 1.4rem 3.5rem; border-bottom:1px solid #f2f2f2;} .AccordionGroup-MobileHelp .panel .panel-body dl dd:last-child a, .AccordionGroup-MobileHelp .panel .panel-body dl dd:last-child span { border-bottom:1px solid #fff; } .AccordionGroup-MobileHelp .panel .panel-body { position:relative; z-index:1;} .AccordionGroup-MobileHelp .panel .panel-body dl dd:first-child a { } #panel-mMenu-MobilleMenuCollapse { border-top:none; /*border-top:1px solid #f2f2f2;*/} #panel-mMenu-MobilleMenuCollapse .panel-heading { position:relative; border-bottom:2px solid #f2f2f2;} /* #panel-mMenu-MobilleMenuCollapse .panel-heading::before { content:''; position:absolute; left:1rem; right:1rem; top:0; z-index:1; width:calc(100% - 2rem); height:100%; border-bottom:2px solid #f2f2f2;} */ #panel-mMenu-MobilleMenuCollapse .panel-heading .panel-heading-a { padding:1.5rem 0.5rem 1.5rem 2.5rem; } #panel-mMenu-MobilleMenuCollapse .panel-heading:last-child { border-bottom:none; } #panel-mMenu-MobilleMenuCollapse .panel-heading:last-child::before { } #panel-mMenu-MobilleMenuCollapse .panel-heading .panel-heading-a > i.fa { margin:0 0 0 1.5rem; color:#999; font-size:2rem; } #panel-mMenu-MobilleMenuCollapse .panel-heading.ChangeStore .panel-heading-a > span { margin-right:15px; display:inline-block; width:24px; height:18px; background-repeat:no-repeat; background-position:0 0; background-size:cover; } #panel-mMenu-MobilleMenuCollapse .panel-heading.ChangeStore .panel-heading-a > b { color:#999; font-size:1.4rem; font-weight:normal; } .RegisterBoard { background-color:#eee; padding:0.5rem 1rem 0.5rem 3rem; border-top:1px solid #f2f2f2; /*background-color:#fce5eb;position:absolute; width:100%; bottom:50px; z-index:1; */} .RegisterBoard dl { display:flex; align-items:center; } .RegisterBoard dt { flex:1; padding-right:1rem; } .RegisterBoard dd { } .RegisterBoard dd a { position:relative; height:auto; padding:1rem; line-height:1; min-width: auto; } /*.RegisterBoard dd a::before { content:''; position:absolute; bottom:-5px; right:2.3rem; width:7px; height:4px; background:url(base/sign_arrow_down_black.gif) no-repeat center center; }*/ .MobileTilteBoard-FollowUs { border-top:1px solid #f2f2f2; border-bottom:1px solid #f2f2f2;} .Mobile-ShareBox { background-color:#fff; padding:1rem 0 2rem 3rem; } .Mobile-ShareBox .ShareBoxBG .ShareIco { margin-right:2rem; } .Mobile-ShareBox .ShareBoxBG .ShareIco:last-child { margin-right:0; } .MobileTilteBoard-Account { border-bottom:1px solid #f2f2f2; background-color:#eee; } .MobileMenu-AccountBox { display:flex; flex-wrap:wrap; padding:1.5rem 0 0 0; background-color:#fff; } .MobileMenu-AccountBox > a { width:25%; text-align:center; height:60px; } .MobileMenu-AccountBox > a > i { height:2.8rem; display:inline-block; display:flex; align-items:center; justify-content:center; position:relative; } .MobileMenu-AccountBox > a > em { display:block; font-size:1.3rem; } /* .MobileMenu-AccountBox > a.MobileMenu-ICON-ORDERS { width:24%;} .MobileMenu-AccountBox > a.MobileMenu-ICON-ORDERS i { font-size:2.2rem; } .MobileMenu-AccountBox > a.MobileMenu-ICON-COUPONS { width:25%;} .MobileMenu-AccountBox > a.MobileMenu-ICON-COUPONS i { font-size:2rem; top:0px;} .MobileMenu-AccountBox > a.MobileMenu-ICON-REWARDS { width:28%;} .MobileMenu-AccountBox > a.MobileMenu-ICON-REWARDS i { font-size:2.4rem; top:-4px; } .MobileMenu-AccountBox > a.MobileMenu-ICON-POSITION { width:24%;} .MobileMenu-AccountBox > a.MobileMenu-ICON-POSITION i { font-size:2.3rem; top:-1px;} */ .MenuTab { border-bottom:10px solid #fff; } /* |-------------------------------------------------------------------------- | footer |-------------------------------------------------------------------------- */ #TheFooter { width:100%; min-width:calc(320px + (100vw - 100%)); margin:0 auto; } .TheFooterWrapOuter { background:#FAF4EF; padding:48px 0; } .TheFooterWrapInner { } .TheFooterWrapInner .ShakeClear { padding:0 20px; } .ThePartnersWrap { border-bottom:1px solid #e0e0e7; } .TheFooterBG {} .TheFooterWrapOuter + .ShakeClear { background-color:#fff; } #SubscribeBox { display:table; width:100%; margin:0; padding:0; position:relative; vertical-align:middle; /* text-align:center;*/} #SubscribeBoxBG { width:100%; /* height:94px; display:flex; align-items:center; justify-content:center;*/ } #SubscribeBox #SubscribeText { font-size:1.55rem; line-height:1; margin-bottom:1.2rem; display:block; } #SubscribeBox #SubscribeForm { /*display:inline-block; width:260px;*/} #SubscribeBox #SubscribeForm input[type="text"], #SubscribeBox #SubscribeForm input[type="email"] { width:100%; height:44px; display:block; background-color:#fff;border:1px solid #000; color:#666; font-size:1.3rem; padding:0 6px; } #SubscribeBox #SubscribeForm #SubscribeButton { position:absolute; right:1px; top:1px; width:40px; padding:14px 12px; background-color:transparent;color:#000; border:none; text-align:center; line-height:0; } #SubscribeBox #SubscribeForm .help-block { top:43px !important; white-space:nowrap; } #SubscribeBox #SubscribeForm ul>li{width:auto;} @media (max-width: 767px) { #SubscribeBox { height:auto; } #SubscribeBoxBG { display:block; padding:15px 0; height:auto; } #SubscribeBox #SubscribeText { display:block; margin:0; } #SubscribeBox #SubscribeForm { display:block; width:93%; margin: 0 auto;} } @media (max-width: 414px) { #SubscribeBox #SubscribeText { font-size:13px; } } #FooterIconBox { text-align:center; color:#666; } #FooterIconBox a { color:#666; } .HelpInfoBox { position:relative; padding:0; font-size:14px; } /*HelpInfo-l*/ .HelpInfo-l { width:50%;} .HelpInfo-Mod { float:left; } .HelpInfo-Mod h3 { margin:0 0 16px 0; color:#000; font-size:1.5rem; font-weight:bold; text-transform:uppercase; } .HelpInfo-Mod h3 a { color:#000; } .HelpInfo-Mod div { margin-bottom:13px; white-space:nowrap; } .HelpInfo-Mod div a { padding:1px 0px; font-size:1.4rem; display:inline-block; text-decoration:none; white-space:nowrap;} .HelpInfo-Mod div a:hover { text-decoration:underline; } .HelpInfo-Mod div a img { vertical-align:middle;} .HelpInfo-Mod div a + em { font-size:12px; } .HelpInfo-Mod div:last-child { margin-bottom:0;} .HelpInfo-QuickLinks { width:33.333333%; } .HelpInfo-Help { width:33.333333%; } .HelpInfo-AboutMore { width:33.333333%; } /*HelpInfo-r*/ .HelpInfo-r { width:50%; } .CompanyIntro { padding-bottom:20px; } .CompanyIntro .CompayIntro-Title { margin-bottom:8px; } .CompanyIntro p { font-size:14px; line-height:1.5; } .CompanyIntro p .Link-AboutUs { font-weight:bold; } #ShareBox { /*float:left; width:53%;*/ text-align:center; padding-top:4px; } .ShareBoxBG { text-align:center; } .ShareBoxBG .ShareIco { display:inline-block; margin:0; } .ShareBoxBG .ShareIco + .ShareIco { } .ShareBoxBG .ShareIco i { /*height:25px;*/ font-size:23px;text-align:center; color:#000; } .ShareBoxBG .ShareIco-google i { } .ShareBoxBG .ShareIco-google i::before { /*position:relative; top:3px;*/ /*left:-2px;*/ } .ShareBoxBG .ShareIco-facebook i::before { position:relative; /*left:-4px;*/ } .ShareBoxBG .ShareIco-pinterest i::before { position:relative; top:1px; } .ShareBoxBG .ShareIco-blog { position:relative; top:4px;} .ShareBoxBG .ShareIco-blog i.fa-blog { display:inline-block; width:86px; height:37px; background:url(../img/share/blog.png) no-repeat center 8px / contain; } .ShareBoxBG .ShareIco:first-child i { margin-left:0; } .ShareBoxBG .ShareIco-facebook { background-color:#0770cf; } .ShareBoxBG .ShareIco-instagram { background-color:#8433b7; } .ShareBoxBG .ShareIco-pinterest { background-color:#e70b2c; } .ShareBoxBG .ShareIco-youtube { background-color:#ff0202; } .ShareBoxBG .ShareIco-tiktok { background-color:#000000; } .ShareBoxBG .ShareIco-facebook i { } .ShareBoxBG .ShareIco-instagram i { } .ShareBoxBG .ShareIco-pinterest i { } .ShareBoxBG .ShareIco-youtube i { } .ShareBoxBG .ShareIco-tiktok i { width:1.8rem; height:1.8rem; } .PaymentIconsBox { /* float:left; width:47%; padding-right:20px;text-align:right;*/ } .PaymentIconsBox li { display:inline-block; } .PaymentIconsBox li + li { margin-left:25px; } @media (min-width:1200px) { .HelpInfo-r { padding-left:7%; } } @media (min-width:1020px) and (max-width:1199px) { .HelpInfo-r { padding-left:5%; } } @media (min-width:992px) and (max-width:1019px) { .HelpInfo-r { padding-left:5%; } } @media (max-width:919px) { .HelpInfo-r { padding-left:5%; } } @media (min-width:768px) { .HelpInfoBoxBG { display:flex; } .HelpInfo-l { display:table-cell; border-right:1px solid #000; } .HelpInfo-r { display:table-cell; vertical-align:top; /*vertical-align:middle;*/} } @media (max-width:767px) { .HelpInfo-l { float:none; width:90%; margin:0 auto 20px auto; } .HelpInfo-Help { width:50%; } .HelpInfo-QuickLinks { width:50%; border-right:none; } .HelpInfo-r { float:none; width:90%; margin:0 auto; padding:0; } } @media (max-width:429px) { .HelpInfo-l { width:100%; } .HelpInfo-r { width:100%; } } #TheFooterBottom { width:100%; font-size:1.4rem; background-color:#fffbf8; margin:0; padding:0 0 20px 0; overflow:hidden;} .TheFooterBottom-l { float:left; width:53%; height:56px; display:flex; align-items:center; } .TheFooterBottom-r { float:left; width:47%; height:56px; display:flex; align-items:center; justify-content:flex-end;} .TheFooterBottom-c { width:100%; height:56px; display:flex; align-items:center; justify-content:center;} .TheFooterBottom-t { text-align:center; } .TheFooterBottom-m { text-align:center; } .TheFooterBottom-b { text-align:center; } .TheFooterBottom-b > em { margin-right:2rem; } .TheFooterBottom-b a { display:inline-block; color:#b3b3b3; text-decoration:underline; position:relative; padding:4px 9px 4px 8px;} .TheFooterBottom-b a:hover { /*color:#222;*/ text-decoration:none;} #TheFooterBottom .TheFooterBottom-t { margin-top:20px; } #TheFooterBottom .TheFooterBottom-m { margin-top:15px; } #TheFooterBottom .TheFooterBottom-b { margin-top:10px; } #TheFooterBottom .TheFooterBottom-b a::before { content:"|"; position:absolute; top:2px; right:0; color:#f3f3f3; } /*----------------------------------------------------------------------------------------------------------------------------------*/ .ShareBoxBG { display:flex; align-items:center; /*justify-content:flex-end;*/ } .ShareBoxBG .ShareIco { display:flex; align-items:center; justify-content:center; width:3rem; height:3rem; line-height:3rem; border-radius:50%; } .ShareBoxBG .ShareIco i { font-size:1.7rem; color:#fff; position:relative; top:-1px;} @media (min-width:992px){ .body-PC #TheFooter { padding-top:40px; } .body-PC #TheFooterBottom { } .body-PC #TheFooter-Mobile {display:none; } .TheFooterTop { background-color:#fff; border-top:1px solid #f2f2f2; height:60px; display:flex; align-items:center; } .TheFooterTop .TheFooterBG { display:flex; align-items:center; justify-content:center;} #ShareBox { padding:0; /*width:50%; padding-right:7.5rem;*/ } #ShareBox .ShareBoxBG .ShareIco + .ShareIco { margin-left:50px; } .TheFooterTop .PaymentIconsBox { width:50%; padding-left:7.5rem; } } @media (max-width: 991px) { .body-UnderEdge #TheFooter {display:none; } .body-UnderEdge #TheFooterBottom {display:none; } .body-UnderEdge #TheFooter-Mobile { } } .body-UnderEdge #TheFooter {display:none; } .body-UnderEdge #TheFooterBottom {display:none; } .body-AcrossEdge #TheFooter-Mobile {display:none; } #TheFooter-Mobile { background-color:#f2f2f2; padding:0; margin-top:15px; font-size:1.5rem; } #TheFooter-Mobile .FooterInfo-Title { padding:12px 0; font-weight:bold; } #TheFooter-Mobile .FooterInfo-List {} #TheFooter-Mobile .FooterInfo-List a { display:block; padding:12px 0; text-decoration:none !important;} #TheFooter-Mobile .FooterInfo-List a .fa { float:right; font-size:1.8rem; color:#999; position:relative; top:2px;} .body-index #TheFooter-Mobile { padding:0; } .body-prod #TheFooter-Mobile { margin-top:0; } .TheFooter-Pay { width:100%; max-width:1000px; min-width:calc(320px + (100vw - 100%)); margin:40px auto 0 auto; } .TheFooter-Pay .ThePartnersTitle { margin:0 auto 12px auto; padding:0; font-size:16px; text-align:center; text-transform:uppercase; } .TheFooter-Pay .ThePartnersContent { padding-top:0; text-align:center;} @media (min-width: 768px) { #TheFooter-Mobile > .container { max-width:748px; } } @media (min-width: 992px) { #TheFooter-Mobile > .container { max-width:972px; } } @media (min-width: 1020px) { #TheFooter .TheFooterWrapOuter .TheFooterBG.container { max-width:1000px; }} @media (min-width: 1200px) { #TheFooter .TheFooterWrapOuter .TheFooterBG.container { max-width:1808px; padding:0 70px 0 60px; }} /*----------------------------------------------------------------------------------------------------------------------------------*/ @media (max-width:413px) { .CopyrightIMG { margin:0 7px 6px 6px; } } .ThePartnersTitle { max-width:720px; border-bottom: 1px solid #e0e0e7; margin:0 auto 10px auto; text-transform:uppercase; font-family:Times New Roman,serif; font-weight:400; font-size:16px; padding:30px 0 10px 0; text-align:center; } .ThePartnersContent { text-align:center; margin-bottom:8px; } .CopyrightIMG { display:inline-block; background-image:url('base/CopyrightIMG.png?v=0101b'); background-repeat:no-repeat; height:25px; overflow:hidden; margin:0 10px 6px 10px; } .CopyrightIMG i { position:relative; top:25px; } .CopyrightIMG.i-visa { width:37px; background-position:0 0;} .CopyrightIMG.i-mastercard { width:39px; background-position:0 -25px;} .CopyrightIMG.i-westunion { width:77px; background-position:0 -50px;} .CopyrightIMG.i-banks { width:40px; background-position:0 -75px;} .CopyrightIMG.i-mcafee { width:56px; background-position:0 -100px;} .CopyrightIMG.i-verlsign { width:47px; background-position:0 -125px;} .CopyrightIMG.i-hsbc { width:76px; background-position:0 -300px;} .CopyrightIMG.i-paypal { width:40px; background-position:0 -325px;} .CopyrightIMG.i-royal-mail { width:36px; background-position:0 -150px;} .CopyrightIMG.i-dpd { width:47px; background-position:0 -175px;} .CopyrightIMG.i-dhl { width:80px; background-position:0 -200px;} .CopyrightIMG.i-ups { width:22px; background-position:0 -225px;} .CopyrightIMG.i-tnt { width:68px; background-position:0 -250px;} .CopyrightIMG.i-fedex { width:67px; background-position:0 -275px;} @media (max-width:385px) { .CopyrightIMG { margin:0 4px 6px 4px; } } /* |----------------------------------------- | ../back_top/back_top.css |----------------------------------------- */ /*.IcoSvg-TriggerT { background:url(../img/svg/trigger-t.svg) no-repeat center center / contain; }*/ .IcoSvg-TriggerT { background:url(base/btn-circle-white-top.png) no-repeat center center / contain; } .IcoSvg-Ticket { background:url(base/btn-circle-ticket.png) no-repeat center center / contain; } .IcoSvg-Messenger { background:url(base/btn-circle-messenger.png) no-repeat center center / contain; } .IcoSvg-Whatsapp { background:url(base/btn-circle-whatsapp.png) no-repeat center center / contain; } .IcoSvg-Snapchat { background:url(base/btn-circle-snapchat.png) no-repeat center center / contain; } .IcoSvg-Phone { background:url(base/btn-circle-phone.png) no-repeat center center / contain; } .IcoSvg-LiveChat-Online { background:url(base/btn-circle-chat-online.png) no-repeat center center / contain; } .IcoSvg-LiveChat-Offline{ background:url(base/btn-circle-chat-offline.png) no-repeat center center / contain; } .IcoSvg-PresaleEmail { background:url(base/btn-circle-email-mobile.png) no-repeat center center / contain; } .IcoSvg-Email { background:url(base/btn-circle-email.png) no-repeat center center / contain; } .IcoSvg-Email-Presale { background:url(base/btn-circle-email-presale.png) no-repeat center center / contain; } #back-top-wrap { width:50px; line-height: 1; position:fixed; z-index:2; right:10px; bottom:126px; text-align:center; cursor:pointer; /*background-color:rgba(255,165,0,1);*/} .btn-BackTop {} .btn-BackTop .IcoSvg-TriggerT { display:inline-block; width:40px; height:40px; background-color:rgba(255,255,255,0.5); border-radius:50%; } .btn-BackTop div { display:none; font-weight:700; font-size:11px; margin-top:5px; line-height:1; } /* @media (max-width: 1019px) { #back-top-wrap { bottom:70px; } } */ #live-chat-wrap { width:50px; line-height: 1; position:fixed; z-index:2; right:5px; bottom:53px; text-align:center; /*background-color:rgba(255,165,0,1);*/} #live-chat-wrap .btn-LiveChat-Online { cursor:pointer; } .btn-LiveChat { overflow:hidden; padding:0; width:40px; height:60px; text-align:center; } .btn-LiveChat .IcoSvg-LiveChat-Online, .btn-LiveChat .IcoSvg-LiveChat-Offline { position:relative; display:inline-block; width:40px; height:40px; /*filter:drop-shadow(rgb(255, 102, 153) 40px 0);*/ } .btn-LiveChat > a, .btn-LiveChat > span { display:block; } .btn-LiveChat > a > em, .btn-LiveChat > span > em { display:block; padding-top:4px; font-size:11px; } .btn-LiveChat > a:hover, .btn-LiveChat > a:hover * { text-decoration:none; } @media (min-width:1020px){ } @media (max-width:1019px){ } #livechat-compact-container { display:none; } /*default is hide*/ @media (min-width:992px) { #live-chat-wrap { display:none;} } @media (max-width:991px) { #live-chat-wrap { display:none; /*display:inline-block;*/} #content-container { display:none !important;} /*narrow device hide*/ #mobile_invitation_container{ display:block!important; } /*narrow device show*/ /*for new look*/ #chat-widget-container.minimized { transform:translateY(100%); -ms-transform:translateY(100%);/*IE9*/ -moz-transform:translateY(100%);/*FF*/ -webkit-transform:translateY(100%);/*Safari&Chrome*/ -o-transform:translateY(100%); } #chat-widget-container.opened { transform:translateY(0); -ms-transform:translateY(0);/*IE9*/ -moz-transform:translateY(0);/*FF*/ -webkit-transform:translateY(0);/*Safari&Chrome*/ -o-transform:translateY(0); } .body-account #live-chat-wrap { display:none; } } /* |-------------------------------------------------------------------------- | HeaderCard |-------------------------------------------------------------------------- */ .HeaderCard { } .HeaderCard > li { color:#333; display:inline-block; float:left; position:relative; z-index:3; } .HeaderCard > li + li { margin-left:6px; } .HeaderCard > li > a, .HeaderCard > li > em { color:#333; display:inline-block; text-decoration:none; } .HeaderCard > li > a > span, .HeaderCard > li > em > span { display:inline-block; } .HeaderCard > li > a.HasUnderline {} .HeaderCard > li > a.HasUnderline:hover { text-decoration:underline; } .HeaderCard > li > a >.fa { font-size:2.4rem; color:#333; /*here*/min-width:15px; min-height:18px; text-align:right; line-height:80px; } .HeaderCard > li > #CartBox > a.shopping_cart > #cart_items { } .HeaderCard > li .fa-comments-o { position:relative; top:2px; font-size:1.8rem; } .HeaderCard-l { left:0; top:8px; text-transform:uppercase; font-size:1.4rem; color:#74736d; } .HeaderCard-l > li > a { color:#74736d; padding:0 12px;} .HeaderCard-l > li > em {} .HeaderCard-r { } .HeaderCard-l > li > a { color:#74736d; padding:0 12px; } .HeaderCard-l > li > a > i { line-height:70px; } .HeaderCard-c { right:100px; top:56px; } #AccountCard > a { } #AccountCard:hover > a > span { text-decoration:underline; color:#333; cursor:pointer; } #AccountCard.AccountCardBefore { } #AccountCard.AccountCardAfter > a { cursor:pointer; height:100%; } #AccountCard.AccountCardAfter > a > i { } #AccountCard.AccountCardAfter > a > span { /*padding:0 20px 0 0; background:url(base/tabs_3.gif) no-repeat right 17px;*/ } #AccountCard.AccountCardAfter:hover > a { color:#333; cursor:default; /*background-color:#f8f8f8;*/} #AccountCard.AccountCardAfter:hover > a > span { color:#333; /*background-image:url(base/tabs_3_h.gif);*/ } #AccountCard.AccountCardAfter:hover > a > .fa { color:#333; } #AccountCard.AccountCardAfter .popup { display:none; cursor:default; position:absolute; top:53px; right:-130px; z-index:1001; padding:20px 0 0 0; margin:0; width:304px; } #AccountCard.AccountCardAfter .popupBG { font-size:1.4rem; border:1px solid #ddd; background:#fff; border-radius:0; -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); } #AccountCard.AccountCardAfter .popup dl { /*border-top:1px solid #C9C9C9;*/ font-size:1.5rem; } #AccountCard.AccountCardAfter .popup dl dt { padding:16px 25px; background-color:#f7f7f7;} #AccountCard.AccountCardAfter .popup dl dt > b { margin-right:16px; font-weight:normal; font-family:ProximaNova-SemiBold; font-size:1.5rem !important; font-weight:normal !important; letter-spacing:0.1rem; } #AccountCard.AccountCardAfter .popup dl dt > b > em { text-transform:capitalize; } #AccountCard.AccountCardAfter .popup dl dt > a { font-weight:normal; text-decoration:underline; color:#777; } #AccountCard.AccountCardAfter .popup dl dd { word-wrap:break-word; padding:0 18px; } #AccountCard.AccountCardAfter .popup dl dd a { display:block; padding:2px 19px 2px 24px; font-size:1.5rem; white-space:nowrap; } #AccountCard.AccountCardAfter .popup dl dd a:hover { text-decoration:underline; } #AccountCard.AccountCardAfter .popup dl dd:last-child a { } #AccountCard.AccountCardAfter:hover { /*-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); box-shadow:0 0 3px rgba(0, 0, 0, 0.25);*/ } #AccountCard.AccountCardAfter:hover .popup { display:block; } .ArrowWrap .arrow { border-width:13px; } .ArrowWrap .arrow:after { border-width:12px; } #AccountCard.AccountCardAfter .ArrowWrap.bottom .arrow:after { top:1px; margin-left:-12px; border-bottom-color:#f7f7f7; } #AccountCard.AccountCardAfter .ArrowWrap.bottom .arrow { top:-13px; left:-9px; margin-left:148px; } #AccountCard.AccountCardAfter .popup p {} #AccountCard.AccountCardAfter .popup .btn { width:100%; margin-bottom:15px; } #AccountCard.AccountCardAfter .popup dl dd a { padding:0 0 0 40px; position:relative; display:block; height:50px; line-height:50px; } #AccountCard.AccountCardAfter .popup dl dd a i { position:absolute; top:12px; left:4px; margin-right:15px; font-size:2.4rem; } #AccountCard.AccountCardAfter .popup dl dd a .fa-heart-o { left:2px;} #AccountCard.AccountCardAfter .popup dl dd a .fa-bookmark-o { left:5px;} #AccountCard.AccountCardAfter .popup dl dd.DD-ACCOUNT a i { left:1.5px; } #AccountCard.AccountCardAfter .popup dl dd.DD-ORDERS a i { left:4px; } #AccountCard.AccountCardAfter .popup dl dd.DD-COUPONS a i { left:4px; top:14px; font-size:2.4rem; } #AccountCard.AccountCardAfter .popup dl dd.DD-MESSAGE a i { left:3px; font-size:28px;} #AccountCard.AccountCardAfter .popup dl dd.DD-SIGNOUT a i { left:4px; } .SupportBox > a { cursor:pointer; height:100%; } .SupportBox > a > i { } .CurrencyLanguageBox .popup { display:none; cursor:default; position:absolute; top:53px; right:-4px; z-index:1001; padding:20px 0 0 0; margin:0; width:304px; } .CurrencyLanguageBox .popupBG { font-size:1.4rem; padding:2rem 1.8rem 1.6rem 1.8rem; border:1px solid #ddd; background:#fff; border-radius:0; -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); box-shadow:0 3px 3px rgba(0, 0, 0, 0.25); } .CurrencyLanguageBox:hover { /*-webkit-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); -moz-box-shadow:0 0 3px rgba(0, 0, 0, 0.25); box-shadow:0 0 3px rgba(0, 0, 0, 0.25);*/ } .CurrencyLanguageBox:hover .popup { display:block; } .CurrencyLanguageBox .ArrowWrap.bottom .arrow:after { top:1px; margin-left:-12px; border-bottom-color:#fff; } .CurrencyLanguageBox .ArrowWrap.bottom .arrow { top:-13px; right:1.2rem; left:auto; margin:0; } .CurrencyLanguageBox .popup .DropdownPage { margin:0; width:100%; } .CurrencyLanguageBox .popup .DropdownPageBG .dropdown-menu { width:calc(100% + 2px); top:-31px !important; margin-left:-1px; border:1px solid #eee; } .CurrencyLanguageBox .popup .DropdownPageBG button.btn-ShowOptions { text-align:left; padding-left:11px; color:#666; } .CurrencyLanguageBox .popup .DropdownPageBG .dropdown-menu>li>span { padding:5px 10px 6px 11px !important; } .CurrencyLanguageBox .popup .DropdownPageBG .dropdown-menu>li>a { padding:5px 10px 6px 11px !important; } .CurrencyLanguageBox .popup .DropdownPageBG .dropdown-menu>li.active {} .CurrencyLanguageBox .popup .DropdownPageBG .dropdown-menu>li.active>span { background:url(../img/svg/svg-yes.svg) no-repeat 95% 10px; background-size:4%;} .CurrencyLanguageBox .popup .DropdownPageBG .dropdown-menu>li>span:hover, .DropdownPageBG .dropdown-menu>li>a:hover, .CurrencyLanguageBox .popup .DropdownPageBG .dropdown-menu>li>span:focus, .DropdownPageBG .dropdown-menu>li>a:focus { background-color:#f5f5f5; } .DropdownPageCurrency .DropdownPageBG button.btn-ShowOptions > div, .DropdownPageCurrency .dropdown-menu > li > a > div { margin-right:14px; display:inline-block; width:16px; height:12px; background-repeat:no-repeat; background-position:0 0; background-size:cover; } .DropdownPageCurrency .DropdownPageBG button.btn-ShowOptions > div { position:relative; top:2px; } .DropdownPageCurrency .dropdown-menu > li > a { display: flex !important;align-items: center; justify-content: space-between; padding:5px 10px 6px 11px !important; } .DropdownPageCurrency .dropdown-menu > li > a > em { flex:1; font-size:1.4rem; } .DropdownPageCurrency .dropdown-menu > li > a > i.icon-svg-yes { font-size:1.3rem;} .CurrencyLanguageBox { } .CurrencyLanguageBox .DropdownPage { margin-bottom:2.8rem !important; float:none !important; } .CurrencyLanguageBox .DropdownPageBG button.btn-ShowOptions > i { margin-top:8px; } .CurrencyLanguageBox .DropdownPageBG .dropdown-menu>li>span, .CurrencyLanguageBox .DropdownPageBG .dropdown-menu>li>a { color:#666; } .CurrencyLanguageBox .Title-CL { line-height:1; margin-bottom:2rem; font-size:1.5rem; font-weight:bold; color:#666; } .CurrencyLanguageBox .Title-CL-Language { border-bottom:1px solid #eee; padding-bottom:1rem; margin-bottom:1rem;} .CurrencyLanguageBox .LanguageSwitchBox {} .CurrencyLanguageBox .LanguageSwitchBox a { display:inline-block; color:#666; } .CurrencyLanguageBox .LanguageSwitchBox a.active { color:#666; font-weight:bold; } .CurrencyLanguageBox .LanguageSwitchBox a + a { margin-left:2.5rem; } .CurrencyLanguageBox .StoreSwitchBox {} .CurrencyLanguageBox .StoreSwitchBox a { display:inline-block; color:#666; margin-right:1.2rem; margin-bottom:0.4rem; } .CurrencyLanguageBox .StoreSwitchBox a + a { } .CurrencyLanguageBox .StoreSwitchBox a.active { color:#666; font-weight:bold; margin-right:1.4rem; } .CurrencyLanguageBox .StoreSwitchBox a:nth-of-type(3n) { margin-right:0;} .CurrencyLanguageBox .StoreSwitchBox a.active .icon-svg-yes { position:relative; top:2px; left:4px; font-size:1.5rem; } /*header icon line-height 图标设定行高确定基本高度，父级a下沉为了更好的hover下拉，祖级上提还原应有的垂直位置*/ #FavoritesLi > a > i { position:relative; } #AccountCard.AccountCardAfter > a > i { } .HeaderCard > li > #CartBox > a.shopping_cart > #cart_items { /*line-height:1; */margin:0;} #AccountCard > a > i { font-size:21px; } .SupportBox > a > i { font-size:2rem; } .CurrencyLanguageBox > a > i { position:relative; top:1px; } #FavoritesLi > a > i, #AccountCard.AccountCardAfter > a > i, .SupportBox > a > i, .CurrencyLanguageBox > a > i { line-height:54px; } /* #FavoritesLi > a > i { position:relative; line-height:77px; } #AccountCard.AccountCardAfter > a > i { line-height:77px; } .HeaderCard > li > #CartBox > a.shopping_cart > #cart_items { line-height:80px; } .SupportBox > a > i { line-height:77px; } */ /* |-------------------------------------------------------------------------- | Mobile Menu |-------------------------------------------------------------------------- */ #modal-MobileMenuBox { top:0;} #modal-MobileMenuBox.modal-left .modal-dialog { max-width:380px !important; } /*.modal-MobileMenuBox-open .modal-backdrop*/ /*in modal-header*/ .MenuAccountBox { position:relative; min-height:48px; border-bottom:1px solid #000; /*background-color:#f9f9f9;*/} .MenuAccountBox .MenuAccountTopTitle { position:absolute; top:0; left:0; width:100%; height:47px; line-height:47px; /*border-bottom:1px solid #000;*/} .MenuAccountBox .MenuAccountTopTitle .MenuAccountArrow { position:absolute; top:0; right:10px; border:none; background:none; outline:none;} .MenuAccountBox .MenuAccountTopTitle .MenuAccountArrow a { display:block; } .MenuAccountBox .MenuAccountTopTitle .MenuAccountArrow i { float:left; font-size:16px; margin:15px 5px 0 0; } .MenuAccountBox .MenuAccountTopTitle .MenuAccountArrow em { float:left; } .MenuAccountBox .MenuAccountTopTitle .MenuAccountArrow b { float:left; width:16px; height:16px; margin:16px 0 0 5px; background:url({{request.scheme}}://{{ request.META.HTTP_HOST }}/{{STATIC_URL}}/css/sign/sign_m1.png) no-repeat -64px -64px; } .MenuAccountBox .MenuAccountTitle-ThisMenu { display:inline-block; font-weight:bold; height:39px; line-height:34px; /*height:43px; line-height:35px;*/ padding:0 10px; color:#52535a; background-color:#fff; position:absolute; left:10px; bottom:-1px; border-width:3px 1px 1px 1px; border-style:solid; border-color:#f35b6e #000 #fff #000; } .MobileMenuAccountHead .AccountHead-Title h1 { padding-left:20px; } #MobileMenuTab { padding:0 10px; margin:0 0 10px 0;} #MobileMenuTab .nav-tabs { border:none; } /* #MobileMenuTab .nav-tabs > li { margin:0; float:none; border-bottom:1px solid #eee; } #MobileMenuTab .nav-tabs > li > a { margin:0; padding:18px 0 18px 11px; line-height:1; color:#333; font-weight:bold; border:none; border-radius:0; text-transform:uppercase; text-decoration:none !important; } #MobileMenuTab .nav-tabs > li > a:hover { background-color:transparent; } */ #MobileMenuTab .nav-tabs > li { display:table; width:100%; margin:0 0 16px 0; float:none; } #MobileMenuTab .nav-tabs > li > a { display:table-cell; vertical-align:middle; margin:0; padding-left:10px; height:86px; background-color:#fff; font-size:1.4rem; line-height:1; color:#333; font-weight:bold; border:none; border-radius:0; text-decoration:none !important; } #MobileMenuTab .nav-tabs > li > a:hover { opacity:0.7; } #MobileMenuTab .nav-tabs > li > em { display:table-cell; vertical-align:middle; margin:0; padding-left:10px; height:48px; background-color:#e0f1fd; font-size:1.4rem; line-height:1; color:#333; font-weight:bold; border:none; border-radius:0; text-decoration:none !important; } #MobileMenuTab .nav-tabs > li:last-child { border-bottom:none; } #MobileMenuTab .nav-tabs > li.active { } #MobileMenuTab .nav-tabs > li.active > a, #MobileMenuTab .nav-tabs > li.active > a:hover, #MobileMenuTab .nav-tabs > li.active > a:focus { margin:0; color:#333; background-color:transparent; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } /*max-width:767px*/ #MobileMenuTab .tab-content { } #MobileMenuTab .tab-content>.tab-pane { margin-bottom:10px; } #MobileMenuTab .tab-content .tab-pane-bg { } #MobileMenuTab .tab-content .tab-pane-bg dl { } #MobileMenuTab .tab-content .BackMainMenu { display:block; text-transform:uppercase; color:#999; font-weight:bold; font-size:1.4rem; line-height:46px; text-decoration:none; } #MobileMenuTab .tab-content .BackMainMenu > em { margin-right:5px; } #MobileMenuTab .tab-content .tab-pane-menubox {} #MobileMenuTab .tab-content dl { margin:15px 0 0 0; } #MobileMenuTab .tab-content dl.DL-SameBox { margin:0; } #MobileMenuTab .tab-content dl dt { margin-bottom:1px; } #MobileMenuTab .tab-content dl dt h2 { white-space:nowrap; display:block; background-color:#f8f5f0; height:40px; line-height:40px; font-size:15px; line-height:100%; margin:0; font-weight:normal; } #MobileMenuTab .tab-content dl dt span { white-space:nowrap; display:block; background-color:#f8f5f0; height:40px; line-height:40px; font-size:15px; color:#74736d; padding:0 10px; font-family:'Domaine Display','Bodoni 72','Times New Roman',Times,'Droid Serif',serif; font-style:italic; } #MobileMenuTab .tab-content dl dd h2 { white-space:nowrap; display:block; font-size:1.4rem; line-height:1; color:#333; margin:0 0 1px 0; font-weight:normal; padding:0; } #MobileMenuTab .tab-content dl dd h2 a { white-space:nowrap; display:block; background-color:#f7f7f7; height:40px; line-height:40px; font-size:1.4rem; padding:0 10px 0 22px; color:#333; text-decoration:none;} .panel-mMenu-Collapse { position:relative; border-radius:0; box-shadow:none; border:none; border-top:1px solid #bbb; border-bottom:1px solid #bbb; margin:20px 10px; } .panel-mMenu-Collapse .panel-heading { padding:0; border:none; } .panel-mMenu-Collapse .panel-heading .panel-heading-a { display:block; padding:15px 10px; /*background-color:#FAF9F5;text-transform:uppercase;*/ line-height:1; margin:0; text-decoration:none; font-size:1.4rem; /*font-weight:bold;font-family:'Domaine Display','Bodoni 72','Times New Roman',Times,'Droid Serif',serif;*/ } .panel-mMenu-Collapse .panel-heading .panel-heading-a .fa { font-size:1.8rem; width:17px; } .panel-mMenu-Collapse .panel-body { padding:15px 20px; border-top:1px solid #bbb;} .panel-mMenu-Collapse .panel-heading > a.panel-heading-a .sign-toggle { float:right; margin-top:3px; display:inline-block; width:11px; height:11px; background:url({{request.scheme}}://{{ request.META.HTTP_HOST }}/{{STATIC_URL}}/css/base/sign_minus.gif) no-repeat center center; } .panel-mMenu-Collapse .panel-heading > a.panel-heading-a.collapsed .sign-toggle { background:url({{request.scheme}}://{{ request.META.HTTP_HOST }}/{{STATIC_URL}}/css/base/sign_plus.gif) no-repeat center center;} .panel-mMenu-Collapse .panel-heading > a.panel-heading-a .sign-this { /* float:right; */ margin-top:3px; display:inline-block; width:11px; height:11px; background:url({{request.scheme}}://{{ request.META.HTTP_HOST }}/{{STATIC_URL}}/css/base/sign_this.gif) no-repeat center center; } /*panel-mMenu-Account*/ .panel-mMenu-Account { border-left:1px solid #bbb; border-right:1px solid #bbb; } .panel-mMenu-Account .Title-Welcome { font-size:16px; font-style:italic; } .panel-mMenu-Account .panel-heading { background-color:#FAF9F5; } .panel-mMenu-Account .panel-heading .panel-heading-a .fa-user-o::before { position:relative; left:-1px; } .panel-mMenu-Account .panel-body { padding:0; } .panel-mMenu-Account .panel-body { margin:0; } .panel-mMenu-Account .panel-body.collapsing { -webkit-transition:none; transition:none; display:none;} .panel-mMenu-Account .panel-body dl { background-color:#fff; } .panel-mMenu-Account .panel-body dl dd { float:left; width:calc(50% - 10px); line-height:1; padding:0; border-bottom:1px solid #eee; margin-left:10px;} .panel-mMenu-Account .panel-body dl dd > a, .panel-mMenu-Account .panel-body dl dd > em { display:block; color:#333; padding:16px 0 16px 0; white-space:nowrap; text-overflow: ellipsis; overflow:hidden; text-decoration:none; } .panel-mMenu-Account .panel-body dl dd > a > .fa { font-size:1.8rem; margin-right:10px; position:relative; top:1px; text-align:center; width:14px; display:inline; } .panel-mMenu-Account .panel-body dl dd > a > div { white-space:nowrap; display:inline; text-overflow:ellipsis; } .panel-mMenu-Account .panel-body dl dd:nth-child(2n+1) > a { padding-left:0; margin-left:0; } .panel-mMenu-Account .panel-body dl dd:nth-child(2n) > a { padding-left:0; margin-left:0; /*margin-right:20px;*/ } .panel-mMenu-Account .panel-body dl dd.DD-SIGNOUT { border-bottom:none; } .DIV-SIGNOUT { padding:16px 10px; } .DIV-SIGNOUT .fa { font-size:1.8rem; margin-right:10px; } .DIV-SIGNOUT > em { font-size:16px; } @media (max-width: 357px) { .panel-mMenu-Account .panel-body dl dd:nth-child(2n) > a { } .panel-mMenu-Account .panel-body dl dd > a > .fa { font-size:16px; margin-right:8px; } .panel-mMenu-Account .panel-body dl dd > a > div { font-size:1.4rem; } } /*panel-mMenu-Support*/ .panel-mMenu-Support { margin-top:-1px; border-top:none; } .panel-mMenu-Support .panel-heading .panel-heading-a .fa-question-circle-o::before { position:relative; left:-1px; } .panel-mMenu-Support .panel-body { margin:0; padding:0; } .panel-mMenu-Support .panel-body.collapsing { -webkit-transition:none; transition:none; display:none;} .panel-mMenu-Support .panel-body dl { background-color:#fff; float:left; width:calc(50% - 5px);} .panel-mMenu-Support .panel-body dl.DL-HELPINFO { padding-right:5px; } .panel-mMenu-Support .panel-body dl.DL-QUICKLINKS { padding-left:5px; } .panel-mMenu-Support .panel-body dl dt { line-height:1; padding:0; border-bottom:1px solid #eee; } .panel-mMenu-Support .panel-body dl dt > em { display:block; color:#333; padding:16px 0 16px 10px; } .panel-mMenu-Support .panel-body dl dd { line-height:1; padding:0; border-bottom:1px solid #eee; white-space:nowrap; text-overflow: ellipsis; overflow:hidden; } .panel-mMenu-Support .panel-body dl dd > a { display:block; color:#333; padding:16px 0 16px 10px; white-space:nowrap; text-overflow: ellipsis; overflow:hidden;} /*.panel-mMenu-Support .panel-body dl dd > a > .fa { font-size:1.8rem; margin-right:10px; position:relative; top:1px; text-align:center; width:14px; }*/ .panel-mMenu-Support .panel-body dl dd > a > div { white-space:nowrap; display:inline; text-overflow:ellipsis; } .panel-mMenu-Support .panel-body dl dd > em { white-space:nowrap; display:inline; text-overflow:ellipsis; padding:16px 0 16px 5px; } /* .panel-mMenu-Support .panel-body dl dd:nth-child(2n+1) > a { padding-left:0; margin-left:20px; } .panel-mMenu-Support .panel-body dl dd:nth-child(2n) > a { padding-left:0; margin-left:10px; margin-right:20px; } .panel-mMenu-Support .panel-body dl dd:nth-child(5) > a { border-bottom:none; } .panel-mMenu-Support .panel-body dl dd:nth-child(6) > a { border-bottom:none; } */ @media (max-width: 357px) { .panel-mMenu-Support .panel-body dl dd:nth-child(2n)> a { margin-right:7px; } .panel-mMenu-Support .panel-body dl dd > a > .fa { font-size:16px; margin-right:6px; } .panel-mMenu-Support .panel-body dl dd > a > div { font-size:1.4rem; } } /*panel-mMenu-Currency*/ .panel-mMenu-Change { background-color:#fff; border-top:10px solid #f7f7f7; margin:0; border-bottom:none !important; } .panel-mMenu-Change .panel-heading .panel-heading-a { height:50px; display:flex; align-items:center; justify-content:space-between; padding:0 20px; /*border-bottom:1px solid #f2f2f2;*/ } .panel-mMenu-Change .panel-heading .panel-heading-a > i { margin-right:15px; } .panel-mMenu-Change .panel-heading .panel-heading-a > em { flex:1; font-size:1.4rem;} .panel-mMenu-Change .panel-heading .panel-heading-a > span { color:#999; font-size:1.4rem; } .panel-mMenu-Change .panel-heading.ChangeCurrency .panel-heading-a { } .panel-mMenu-Change .panel-heading.ChangeCurrency .panel-heading-a i { } .panel-mMenu-Change .panel-heading.ChangeLanguage .panel-heading-a { } .panel-mMenu-Change .panel-heading.ChangeLanguage .panel-heading-a i { font-size:25px; position:relative; left:-1px; } /* .mMenuCurrencyBox { } .mMenuCurrencyBox select { font-size:1.4rem; display:inline-block; width:calc(100% - 187px); padding-left:10px; min-width:60px; } .mMenuCurrencyBox select option {} .mMenuCurrencyBox select.USD { background:url('../img/base/USD.jpg') no-repeat 10px center; } .mMenuCurrencyBox select.GBP { background:url('../img/base/GBP.jpg') no-repeat 10px center; } .mMenuCurrencyBox select.EUR { background:url('../img/base/EUR.jpg') no-repeat 10px center; } .mMenuCurrencyBox select.CAD { background:url('../img/base/CAD.jpg') no-repeat 10px center; } .mMenuCurrencyBox select.AUD { background:url('../img/base/AUD.jpg') no-repeat 10px center; } .mMenuCurrencyBox select.NZD { background:url('../img/base/NZD.jpg') no-repeat 10px center; } .mMenuCurrencyBox .YourCurrencyIs { display:inline-block; } .mMenuCurrencyBox .YourCurrencyIs span { } .mMenuCurrencyBox .YourCurrencyIs em { } .mMenuCurrencyBox .YourCurrencyIs b { font-weight:normal; margin-right:5px;} .mMenuCurrencyBox i { display:inline-block; width:16px; height:11px; position:relative; top:1px; margin:0 1px 0 4px;} .mMenuCurrencyBox i.USD { background:url('../img/base/USD.jpg') no-repeat center center; } .mMenuCurrencyBox i.GBP { background:url('../img/base/GBP.jpg') no-repeat center center; } .mMenuCurrencyBox i.EUR { background:url('../img/base/EUR.jpg') no-repeat center center; } .mMenuCurrencyBox i.CAD { background:url('../img/base/CAD.jpg') no-repeat center center; } .mMenuCurrencyBox i.AUD { background:url('../img/base/AUD.jpg') no-repeat center center; } .mMenuCurrencyBox i.NZD { background:url('../img/base/NZD.jpg') no-repeat center center; } */ /*mMenu-Links*/ .mMenu-Links { padding:0 20px; } .mMenu-Links li { color: #333; float:left; text-align:center; } .mMenu-Links li a, .mMenu-Links li em { color:#333; display:block; height:48px; line-height:48px; text-decoration:none;} .mMenu-Links li:nth-child(1) { width:calc(50% - 5px);} .mMenu-Links li:nth-child(2) { width:10px; } .mMenu-Links li:nth-child(3) { width:calc(50% - 5px);} /*panel-mMenu-OnlineHelp*/ .panel-mMenu-OnlineHelp { border:none; } .panel-mMenu-OnlineHelp .panel-heading { text-align:center; } .panel-mMenu-OnlineHelp .panel-heading .panel-heading-a { display:inline-block; border:1px solid #ccc; border-radius:15px; padding:5px 20px; } .panel-mMenu-OnlineHelp .panel-body { border-top:none; } .modal-MobileMenuBox .modal-dialog { margin:0 80px 0 0; padding:0; height:100%;/*important*/ width:auto;} .modal-MobileMenuBox .modal-dialog .modal-content { margin:0; padding:0; height:100%;/*important*/ border-radius:0; box-shadow:none !important; border:none !important;} .modal-MobileMenuBox .modal-header { padding:10px 20px 0 20px; border-bottom:none; } .modal-MobileMenuBox .modal-body { /*height:100%;*/ padding:0 0 60px 0; background-color:#fff; /*use right style to solute strange about height*/ } .modal-MobileMenuBox-open .modal-backdrop { top:0; } @media (min-width:992px) { #modal-MobileMenuBox { top:0; } .modal-MobileMenuBox-open .modal-backdrop { top:0; } } /*new menu*/ #modal-MobileMenuBox { overflow-y:hidden;} #modal-MobileMenuBox .modal-dialog .modal-content { overflow:hidden; } #modal-MobileMenuBox .modal-dialog .modal-content .modal-body { background-color:#f7f7f7; overflow-y:auto; position:static; padding:0; /*padding:61px 0 51px 0; */} #modal-MobileMenuBox .modal-dialog .modal-content .modal-body::before { /*content:''; border-top:10px solid #fff; position:absolute; top:0; width:100%;*/ } #TheFooter-MenuMobile { background-color:#f7f7f7; padding:10px 20px; font-size:1.4rem; } #TheFooter-MenuMobile .FooterInfo-Title { padding:12px 0; font-weight:bold; text-transform:uppercase; } #TheFooter-MenuMobile .FooterInfo-List {} #TheFooter-MenuMobile .FooterInfo-List a { display:block; padding:12px 0; text-decoration:none !important;} #TheFooter-MenuMobile .FooterInfo-List a .fa { float:right; font-size:1.8rem; color:#999; position:relative; top:2px;} /* |-------------------------------------------------------------------------- | Mobile Menu |-------------------------------------------------------------------------- */ #MobileMenuTab .nav-tabs > li { margin-bottom:0; border-bottom:1px solid #e6e6e6; } #MobileMenuTab .nav-tabs > li > a { padding:16px 15px 16px 10px; height:auto; } #MobileMenuTab .tab-content dl dd { float:left; width:50%; } #MobileMenuTab .tab-content dl dd h2 { } #MobileMenuTab .tab-content dl dd h2 a { padding-left:10px; } #MobileMenuTab .tab-content dl dd:nth-of-type(2n+1) h2 { margin-right:1px;} #MobileMenuTab .tab-content .tab-pane#m-Portrait dl dd:nth-child(2n){ width:53%; } #MobileMenuTab .tab-content .tab-pane#m-Portrait dl dd:nth-child(2n+1){ width:47%; } #MobileMenuTab .tab-content .tab-pane#m-Religion dl dd:nth-child(2n){ width:67%; } #MobileMenuTab .tab-content .tab-pane#m-Religion dl dd:nth-child(2n+1){ width:33%; } #MobileMenuTab .tab-content .tab-pane#m-PopularTheme dl dd:nth-child(12) { width:100%; } #MobileMenuTab .nav-tabs > li.nav-category { margin-top:16px; margin-bottom:10px; } /* |---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | TopHeadBar /display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; justify-content:center;/ |---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .TopHeadBar, .TopHeadBarBG, .TopHeadBarBG a { /*height:50px;*/ } .TopHeadBarBG .TopHeadBar-Title { /*line-height:50px;*/ } .TopHeadBar { min-width:320px; position:absolute; top:1px; left:0; z-index:1000; width:100%; background-color:#222; font-family:'gibson-light','Verdana','Helvetica','Arial','Droid Sans','sans-serif'; } .TopHeadBarBG a { display:block; text-decoration:none; } .TopHeadBarBG { width:100%; max-width:1680px; margin:0 auto; padding:0 48px; text-align:center; color:#333; } .TopHeadBarBG .TopHeadBar-Title { font-size:1.3rem; display:inline-block; margin:0; padding:0; white-space:nowrap; width:33.333333%; color:#fff; } .TopHeadBarBG .TopHeadBar-Title i { } .TopHeadBar-Title-l { text-align:left; } .TopHeadBar-Title-c { text-align:center; position:relative; left:52px; } .TopHeadBar-Title-r { text-align:right; } @media (min-width:768px) and (max-width:991px){ .TopHeadBarBG { padding:0 36px; } } @media (min-width:768px) { .TopHeadBar, .TopHeadBarBG, .TopHeadBarBG a { height:40px; } .TopHeadBarBG .TopHeadBar-Title { height:40px; line-height:40px; } } @media (max-width:767px) { .TopHeadBar, .TopHeadBarBG, .TopHeadBarBG a { height:40px; } .TopHeadBarBG .TopHeadBar-Title { height:40px; line-height:40px; } .TopHeadBar-Title-l { width:100% !important; text-align:center; } .TopHeadBar-Title-c { display:none !important; } .TopHeadBar-Title-r { display:none !important; } } /*special*/ .TopHeadBarBG .TopHeadBar-Title-c { display:block; width:100%; } .TopHeadBarBG .TopHeadBar-Title-c a { display:inline-block; } /* |---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | SubHeadBar /display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align:center; -ms-flex-align:center; align-items:center; justify-content:center;/ |---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .SubHeadBar, .SubHeadBarBG, .SubHeadBarBG a { /*height:50px;*/ } .SubHeadBarBG .SubHeadBar-Title { /*line-height:50px;*/ } .SubHeadBar { min-width:320px; position:absolute; left:0; z-index:1000; width:100%; background-color:#fce5eb; font-family:'gibson-light','Verdana','Helvetica','Arial','Droid Sans','sans-serif'; } .SubHeadBarBG a { display:block; text-decoration:none; } .SubHeadBarBG { width:100%; margin:0 auto; text-align:center; color:#333; display:flex; align-items:center; justify-content:center; } .SubHeadBarBG .SubHeadBar-Title { position:relative; z-index:1; font-size:1.55rem; display:inline-block; margin:0; padding:0; white-space:nowrap; text-align:center; text-transform:uppercase; width:50%; color:#333; } .SubHeadBarBG .SubHeadBar-Title i { font-weight:bold; } /* .SubHeadBar::before { content:''; position:absolute; top:0; left:0; width:100%; height:47px; background:url(bg/bg_SubHeadBar.jpg) no-repeat 0 0; } .SubHeadBar::after { content:''; position:absolute; bottom:0; right:0; width:100%; height:47px; background:url(bg/bg_SubHeadBar.jpg) no-repeat bottom right; } */ .SubHeadBar { border-top:1px solid #979797; border-bottom:1px solid #979797;} @media (min-width:1269px) { .SubHeadBar { height:50px; } .SubHeadBarBG, .SubHeadBarBG a { height:48px; } .SubHeadBarBG .SubHeadBar-Title { /*height:48px; display:flex; align-items:center; justify-content:center; */ } } @media (min-width:768px) and (max-width:1268px) { .SubHeadBar, .SubHeadBarBG, .SubHeadBarBG a { } .SubHeadBarBG { height:48px; } .SubHeadBarBG .SubHeadBar-Title { line-height:1.2; /*height:56px; padding-top:14px;*/} .SubHeadBarBG .SubHeadBar-Title i { display:block; } } @media (min-width:768px) and (max-width:991px) { } @media (min-width:992px){ .SubHeadBar { top:121px; } } @media (max-width:991px) { .SubHeadBar { top:91px; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} .SubHeadBar, .SubHeadBarBG, .SubHeadBarBG a { } .SubHeadBarBG { height:48px; } .SubHeadBarBG .SubHeadBar-Title { line-height:1.2; font-size:1.4rem; /*height:50px; padding-top:9px;*/ } .SubHeadBarBG .SubHeadBar-Title i { display:block; } } @media (min-width:600px){ .SubHeadBarBG .SubHeadBar-Title:first-child { width:50%; /*border-right:1px solid #979797;*/ position:relative; } .SubHeadBarBG .SubHeadBar-Title:first-child::before { content:""; position:absolute; top:25%; left:0; width:100%; height:50%; border-right:1px solid #979797; } .SubHeadBarBG .SubHeadBar-Title:last-child { width:50%; } } @media (max-width:599px) { .SubHeadBarBG .SubHeadBar-Title:first-child { width:100%; } .SubHeadBarBG .SubHeadBar-Title:last-child { display:none; } } /* |---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | MediaQuery For Requirements |---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width:1200px) { #TheHeaderBG { max-width:1808px; width:100%;} #MenuWrapBG { max-width:1200px; width:100%;} } @media (min-width:1020px) and (max-width:1199px){ #TheHeaderBG { max-width:100%; width:100%;} #MenuWrapBG { max-width:1000px; width:100%;} } @media (min-width:992px) and (max-width:1019px) { #TheHeaderBG { max-width:100%; width:100%;} #MenuWrapBG { max-width:972px; width:100%;} } @media (min-width: 992px) { #TheHeader { } #TheHeader .ShakeClear { padding:0; } #TheHeaderBG { /*padding:0 4px 0 0;*/} #MenuWrapper { /*width:100%; position:fixed; z-index:1001; left:0; top:50px; */} #MenuWrapBG { margin:0; /*margin:0 auto; */} #MenuBox { } .FirstLi-NewIn { margin-left:0 !important; } #TheHeader { position:absolute; width:100%; top:41px; /*position:relative; z-index:1002; left:0; top:44px;*/ } .HeaderCard-r { margin-top:-12px; } } @media (max-width: 991px) { #TheHeader-Mobile { position:absolute; top:41px; left:0; z-index:1003; width:100%; } #StickyTopKit { padding-top:144px; min-width:320px; } /*49 + 38 = 87 notice bar height is 38*/ #modal-MobileMenuBox { /*top:88px;*/ } #modal-MobileMenuBox.modal-MobileMenuBox-open .modal-backdrop { /*top:88px;*/ } } @media (min-width:1269px) { #StickyTopKit { padding-top:171px; } } @media (min-width:992px) and (max-width:1268px) { #StickyTopKit { padding-top:177px; } } @media (min-width:768px) {} @media (max-width: 767px) {} .MenuSubPage {} .MenuSubPage > li { background-color:#f8f8f8; } .MenuSubPage > li > header { padding:0 26px; } .MenuSubPage > li .MenuSubPage-Content { padding:50px 0 0 0; } .MenuSubPage dl.MobileMenuDL { padding:10px 8px 0 8px; margin-bottom:13px; background-color:#fff; } .MenuSubPage dl.MobileMenuDL dt { clear:both; background-color:#f8f8f8; padding:5px 10px 15px 20px; margin:0 -10px; text-transform:uppercase; } .MenuSubPage dl.MobileMenuDL dt h2 { margin:0; font-weight:bold; padding-left:6.3rem; } .MenuSubPage dl.MobileMenuDL dd { margin:0 -10px; } .MenuSubPage dl.MobileMenuDL dd h2 a { display:flex; padding:10px; margin-left:1rem; text-decoration:none;} .MenuSubPage dl.MobileMenuDL dd h2 a > div { padding-bottom:0; background-color:transparent; width:40px; height:40px; margin-right:20px; border-radius:50%; background-repeat:no-repeat; background-position:top center; background-size:cover; } .MenuSubPage dl.MobileMenuDL dd h2 a > em { display:block; line-height:1.1; height:40px; padding:4px 0; font-size:1.4rem; display:flex; align-items:center; letter-spacing:-0.1px; } .MenuSubPage dl.MobileMenuDL dd i { display:none; } .MenuSubPage dl.MobileMenuDL + dl.MobileMenuDL { padding-top:0; } @media (max-width:399px){ .MenuSubPage dl.MobileMenuDL dd { } } /*New add*/ #TheFooter-Mobile .container { padding:0; } #TheFooter-Mobile .MobileTilteBoard { padding-left:1rem; } #TheFooter-Mobile .AccordionGroup-MobileHelp .panel > .panel-heading > a.accordion-toggle.collapsed + .panel-heading-a { padding-left:1rem; } #TheFooter-Mobile .AccordionGroup-MobileHelp .panel > .panel-heading > a.accordion-toggle + .panel-heading-a { padding-left:1rem; } #TheFooter-Mobile .AccordionGroup-MobileHelp .panel .panel-body dl dd a, #TheFooter-Mobile .AccordionGroup-MobileHelp .panel .panel-body dl dd span { padding:1.4rem 0 1.4rem 1.5rem; } #TheFooter-Mobile #SubscribeBox {} #TheFooter-Mobile #SubscribeBoxBG { padding:4rem 0 3rem 0; } #TheFooter-Mobile #SubscribeBoxBG #SubscribeText { text-align:center; padding:0 0 1.5rem 0; font-family:ProximaNova-Medium; } #TheFooter-Mobile #MobileBottom-ShareBox { padding:1rem 0 3rem 1rem; background-color:#f2f2f2; } #TheFooter-Mobile #MobileBottom-ShareBoxBG { justify-content:center; } #TheFooter-Mobile #MobileBottom-ShareBoxBG .ShareIco { margin-right:3.5rem; } #TheFooter-Mobile #MobileBottom-ShareBoxBG .ShareIco:last-child { margin-right:0; } #TheFooter-Mobile .CopyrightBox { color:#999; font-size:1.4rem; text-align:center; padding-bottom:3rem; } #RegisterBoard-MobileBottom.RegisterBoard { position:relative; padding:1rem 1rem 1rem 4.5rem;} #RegisterBoard-MobileBottom.RegisterBoard .Close { position:absolute; left:10px; top:20px; display:flex; align-items:center; justify-content:center; width:16px; height:16px; font-size:2.6rem; } #RegisterBoard-MobileBottom.RegisterBoard dd a::before { background:none; } @media (min-width:992px) { #RegisterBoard-MobileBottom { display:none; } } @media (max-width:991px) { #RegisterBoard-MobileBottom.RegisterBoard { position:fixed; bottom:0; left:0; z-index:1;width:100%;} .body-index #RegisterBoard-MobileBottom.RegisterBoard { bottom:5rem;} .body-index #live-chat-wrap { bottom:50px; } } /* |-------------------------------------------------------------------------- | reset.css |-------------------------------------------------------------------------- */ /*#5 #26*/ #TheHeaderBG .LogoBox { width:190px !important; } #TheHeaderBG .logo { /*left:50%; margin-left:-49px; top:18px;*/ } #TheHeaderBG .logo a { height:80px; width:100%; display:flex !important; align-items:center; } #TheHeaderBG .logo a img { /*height:1.9rem;*/ margin-top:-7px; } #TheHeaderBG .LogoBox .LogoInfo { } /*Now, do this only by one way*/ .TheHeader-Mobile ul#main-option-list #my-logo { max-width:140px;} .TheHeader-Mobile ul#main-option-list #my-logo a { } .TheHeader-Mobile ul#main-option-list #my-logo a img { height:2.8rem; } /*以上是 PC+Mobile logo 的设置*/ /*以下是Mobile 页眉图标通用设置*/ @media (min-width:420px) { .TheHeader-Mobile ul#main-option-list li, .TheHeader-Mobile ul#main-option-list li > a, .TheHeader-Mobile ul#main-option-list li > em{ width:50px; } .TheHeader-Mobile ul#main-option-list { padding-left:0; } } @media (max-width:419px) { .TheHeader-Mobile #TheHeaderBg { padding:0; } .TheHeader-Mobile ul#main-option-list { padding-left:0; padding-right:0;} .TheHeader-Mobile ul#main-option-list #my-logo { width:calc(100% - 190px); /*width:calc(100% - 150px);*/} } @media (min-width:330px) and (max-width:414px) { .TheHeader-Mobile ul#main-option-list { } .TheHeader-Mobile ul#main-option-list { } } @media (max-width:329px) { .TheHeader-Mobile ul#main-option-list { } } .TheHeader-Mobile ul#main-option-list li#my-back { left:calc(2% + 4px); margin-left:-6px; } .TheHeader-Mobile ul#main-option-list li#main-nav { left:calc(5% + 30px); margin-left:-6px; } .TheHeader-Mobile ul#main-option-list li#shopping-cart { right:calc(2% + 4px); margin-right:-1px;} .TheHeader-Mobile ul#main-option-list li#my-favorites { right:calc(5% + 30px); margin-right:3px; } .TheHeader-Mobile ul#main-option-list li#my-logo { left:calc(5% + 65px); margin-left:25px; } /*.TheHeader-Mobile ul#main-option-list li#my-account { right:105px }*/ .TheHeader-Mobile-index ul#main-option-list li#main-nav { left:calc(2% + 4px); margin-left:0;} .TheHeader-Mobile-index ul#main-option-list li#my-message { left:calc(5% + 30px); margin-left:0; display:none; } .TheHeader-Mobile-index ul#main-option-list li#my-favorites { right:calc(5% + 30px); margin-right:3px;} .TheHeader-Mobile-index ul#main-option-list li#shopping-cart { right:calc(2% + 4px); margin-right:-1px;} .TheHeader-Mobile-index ul#main-option-list li#my-logo { left:calc(5% + 20px); margin-left:25px; } @media (max-width:419px) { .TheHeader-Mobile ul#main-option-list li#my-logo { margin-left:10px; } .TheHeader-Mobile-index ul#main-option-list li#my-logo { margin-left:15px; } } /*菜单spec*/ /*菜单内容多，间距调小(新版)*/ @media (min-width:992px) and (max-width:1099px){ #TheHeaderBG .LogoBox { width:180px !important; } #MenuBox .FirstLi .FirstA { padding:0 10px; } #MenuBox .FirstLi:first-child .FirstA { padding-left:15px;} #MenuBox .FirstLi-ThisYear { display:none; } .HeaderCard-r { width:204px; } .HeaderCard-r > li > a, .HeaderCard-r > li > #CartBox > a.shopping_cart { width:36px; } } .TheHeader-Mobile ul#main-option-list li#my-message { display:none; } .body-UnderEdge.body-account-addresses .modal-content.ModalHeadFixed .modal-body { padding-top:75px; } /* |---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | PCNoTopHeadBar + MobieNoTopHeadBar |---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ @media (min-width:992px){ .PCNoTopHeadBar {} .PCNoTopHeadBar .TopHeadBar { display:none; } .PCNoTopHeadBar #TheHeader { top:0; } .PCNoTopHeadBar .SubHeadBar { top:80px; } .PCNoTopHeadBar #StickyTopKit { padding-top:130px; } } @media (max-width:991px){ .MobieNoTopHeadBar {} .MobieNoTopHeadBar .TopHeadBar { display:none; } .MobieNoTopHeadBar #TheHeader-Mobile { top:0; } .MobieNoTopHeadBar .SubHeadBar { top:50px; } .MobieNoTopHeadBar #StickyTopKit { padding-top:105px; } .body-HelpCenter #SubHeadBar, .body-account #SubHeadBar { display:none; } /*.body-HelpCenter has AddStickyTopKit*/ .body-account #StickyTopKit { padding-top:51px; } } @media (max-width:991px){ /*TopHeadBar SubHeadBar*/ .MobieNo2Bar {} .MobieNo2Bar .TopHeadBar { display:none; } .MobieNo2Bar #TheHeader-Mobile { top:0; } .MobieNo2Bar .SubHeadBar { display:none; } .MobieNo2Bar #StickyTopKit { padding-top:50px; } .body-HelpCenter #SubHeadBar, .body-account #SubHeadBar { display:none; } /*.body-HelpCenter has AddStickyTopKit*/ .body-account #StickyTopKit { padding-top:51px; } }