/* https://patorjk.com/software/taag/#p=display&f=Small&t=body __ / _|_ _ __ _ _ __ ___ | _| '_/ _` | ' \/ -_) |_| |_| \__,_|_|_|_\___| */ /*@font-face { font-family: 'philosopher'; src:url('../fonts/Philosopher-Regular.eot'); src:url('../fonts/Philosopher-Regular.eot?') format('☺'), url('../fonts/Philosopher-Regular.woff') format('woff'), url('../fonts/Philosopher-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; }*/ :root { --gold:#d0a876; --orange:#ec6d00; } .jf-active .creamfont, .jf-active * { xxxxxfont-family:'微軟正黑體',Arial,'Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif!important; } html {} html,body { display:block; box-sizing:border-box; padding:0; margin:0; } body * { box-sizing:border-box; padding:0; margin:0; font-family:'creamfont','微軟正黑體',Arial,'Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; /*line-height:200%; letter-spacing:.05em; font-size:.98em;*/ transition:none; position:relative; color:#505154; } body p { font-family:sans-serif; padding-bottom:1em; } body *xxxxxxx { xxfont-family:'Philosopher','Microsoft YaHei','SimSun','FangSong',serif; } /*http://blog.ja-anything.com/2016/11/25/css-%E5%B8%B8%E7%94%A8%E4%B8%AD%E6%96%87%E5%AD%97%E5%9E%8B-traditional-chinese-font-family/*/ body * { font-family:'微軟正黑體',Arial,'Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; } body p { font-family:sans-serif; padding-bottom:1em; } body.landscape {} .about p, .howtoblock .item p, .centercon p, .row.flex p, .productblock p, .faqblock .item strong, .detailblock p { font-familyxxxx:'creamfont','微軟正黑體',Arial,'Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; line-height:1.8; letter-spacing:.05em; font-size:.94em; font-family:'微軟正黑體',Arial,'Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; } body script { display:none; } a, a:visited { text-decoration:none; color:inherit; cursor:pointer; } h2,h3,h4,.serif,.btn { font-family:'Philosopher'!important; font-weight:normal; xxletter-spacing:-.01em; line-height:110%!important; } .noscroll { overflow:hidden; } .bgpattern { display:block; position:fixed; top:0; left:0; width:100%; height:100%; background-image:url(../images/bgpattern.jpg); xxbackground-image:url(../images/bgpattern4.jpg); background-size:50%; background-repeat:repeat; } .serif, .btnscroll p, .productblock-auto .item .img h3.enname, .faqblock .item strong:before, .xxxfloatselect .box .item strong, .btn-totop, .aboutcon .number, .aboutcon .col h3 span { font-family:'Philosopher','Microsoft YaHei','SimSun','FangSong',serif!important; } .detailblock .titleselect .item h3, .row h3, .xxxxxbtn .txt2, .xxxxxbtn .txt1, .privacyblock h5,.row h4,.productblock .headerrow h3, .howtoblock .item h3, .aboutcon .col h3, .productblock-auto .item b, .productblock-auto .item .img h3.twvertical { font-family:'creamfont'!important; } @media device-width, screen and (min-width:1641px) { body * { font-size:.8vw; } } p a, li a { display:inline-block; text-decoration:underline; padding:0 .5em; color:var(--gold); } hr { border:0; border-bottom:1px solid #ccc; margin:1em 0; } input { border:0; border-radius:0; padding:1em; font-size:1em; } input:focus { outline:none; } input:-internal-autofill-selected { background-color:white!important; color:#899dd6!important; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { background-color:white!important; -webkit-box-shadow: 0 0 0 30px white inset !important; } input:-webkit-autofill { -webkit-text-fill-color:#899dd6!important; } select { font-size:1em; } select:focus { outline:0; } ul li { list-style:disc; } ul, ol { margin:1.2em 0; padding-left:1.5em; } li { display:list-item; line-height:1.4; margin-bottom:.5em; font-size:1em; } ol li { list-style:decimal; list-style-position:outside; display:list-item; line-height:150%; margin-bottom:.8em; } ol.biggap li { margin-bottom:1.3em; } .flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px);}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.rightMost:after{left:auto;right:22px}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/* /*rtl:begin:ignore*/left:0;/* /*rtl:end:ignore*/}/* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/* /*rtl:begin:ignore*/right:0;/* /*rtl:end:ignore*/}/* /*rtl:begin:ignore*/ /* /*rtl:end:ignore*/ .flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9;}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px;}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto;}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%;}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box;}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0;}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%;}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto;}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05);}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0;}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block;}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto;}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px;}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px;}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center;}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9;}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left;}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left;}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}} .overlayloading { display:block; width:100vw; height:100vh; background:rgba(0,0,0,.2); position:fixed; top:0; left:0; z-index:19999; } .loading { display:block; position:relative; width:4em; height:4em; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .loading div { position:absolute; xxborder:2px solid white; background:var(--gold);background:white; opacity:1; border-radius:50%; animation:loading 2s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .loading div:nth-child(2) { animation-delay:-0.5s; } @keyframes loading { 0% { top:36px; left:36px; width:0; height:0; opacity:0; } 4.9% { top:36px; left:36px; width:0; height:0; opacity:0; } 5% { top:36px; left:36px; width:0; height:0; opacity:1; } 100% { top:0px; left:0px; width:72px; height:72px; opacity:0; } } .testversion { pointer-events:none; display:block; padding:.5em 18em; color:white; word-break:keep-all; background:red; position:fixed; bottom:2em; right:-8em; transform:rotate(-15deg); xxxxdisplay:none; z-index:1222; } .header { display:block; width:8.7vw;width:7.5vw; height:100%; padding:1vw; overflow:hidden; transition:all .3s; background:white; position:fixed; top:0; right:0; z-index:999; transition:none; box-shadow:-2px 0 2px rgba(0,0,0,.02); color:#c28d67; } .header .h1 { display:block; z-index:1994; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); width:30vw; height:3vw; overflow:hidden; } .header .h1 h1 { display:block; width:30vw; text-align:center; word-break:keep-all; position:fixed; top:50%; right:0; transform:translateY(-50%); font-size:2vw; color:white; } .header .h1 h1 span { display:inline-block; font-size:1.8vw; letter-spacing:.1em; margin:0 .5em; color:white; opacity:0; } .header .h1 h1 span { font-family:'新細明體',serif; } .header .decologo { display:block; margin:0 auto; width:0; height:30vw; z-index:1993; position:fixed; top:50%; left:0; transform:translateY(-50%); overflow:hidden; } .header .decologo img { display:block; width:12vw; position:fixed; top:50%; left:50vw; transform:translate(-50%,-50%); } .header .barcover { display:block; height:100vh; width:5px; z-index:1000; background:var(--orange); position:absolute; top:0; right:0; z-index:1992; } .header .logo { display:block; margin:0 auto; width:7vw; height:9vw; padding:1vw; transition:all .3s; z-index:72; position:absolute; top:2vw; left:50%; transform:translateX(-50%); } .header .logo img { display:block; width:auto; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .header .logo img.pc { display:block; } .header .logo img.mobile { display:none; } .header .menucover { display:block; width:8vw; height:7.5vw; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:500; background:rgb(232,194,149); background:linear-gradient(135deg, rgba(232,194,149,1) 0%, rgba(185,143,89,1) 100%); transition:all .2s; } .header .menuicon { display:block; width:104%; height:8vw; text-align:center; box-sizing:border-box; transition:all .3s; position:absolute; top:49.5%; left:50%; transform:translate(-50%,-50%); cursor:pointer; z-index:600; color:white; } .header .menuicon .baricon { display:block; width:2.4vw; height:2.4vw; transform-origin:center; position:absolute; top:65%; left:50%; transform:translate(-50%,-50%) rotate(90deg); text-align:right; transition:all .2s; } .header .menuicon .baricon span { display:block; height:2px; background:#333; background:white; margin:0; transform:translate(-50%,-50%); transition:all .2s; xxtransform-origin:center; position:absolute; top:50%; left:50%; } .header .menuicon .baricon span:nth-child(1) { width:100%; top:25%; left:50%; } .header .menuicon .baricon span:nth-child(2) { width:85%; top:50%; left:42%; } .header .menuicon .baricon span:nth-child(3) { width:70%; top:75%; left:34%; } .header .menuicon p { display:block; color:white; text-align:center; margin:0; transition:all .2s; position:absolute; top:25%; left:50%; transform:translateX(-50%); height:2vw; padding:0; overflow:hidden; } .header .menuicon p >span { display:inline-block; color:white; margin:0; padding:0; text-align:center; text-transform:uppercase; transition:all .2s; font-size:1.1vw; font-weight:500; text-transform:uppercase; font-family:inherit; } .header .menuicon p.close >span { top:-2vw; } .header .menuicon:hover .baricon {} .header .menuicon:hover .baricon span:nth-child(1) { width:95%; left:50%; } .header .menuicon:hover .baricon span:nth-child(2) { width:50%; left:50%; } .header .menuicon:hover .baricon span:nth-child(3) { width:100%; left:50%; } .header .menuicon:hover p { xxletter-spacing:3px; } .header .menuicon.open .baricon { transform:translate(-50%,-50%) rotate(45deg); } .header .menuicon.open .baricon span:nth-child(1) { width:100%!important; transform:translate(-50%,-50%) rotate(90deg); left:50%!important; top:50%; } .header .menuicon.open .baricon span:nth-child(2) { width:100%!important; transform:translate(-50%,-50%) rotate(90deg); opacity:0; left:50%!important; top:50%; } .header .menuicon.open .baricon span:nth-child(3) { width:100%!important; transform:translate(-50%,-50%) rotate(0deg); left:50%!important; top:50%; } .header .menucover.open { width:50vw; } .header .submenu { display:block; width:100%; text-align:center; position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:60; } .header .submenu .linkset { display:block; padding:0; margin:0; } .header .submenu .linkset a { display:inline-block; padding:0; margin:0; font-size:.8em; writing-mode:vertical-rl; text-orientation:upright; } .header .submenu .socialset { display:block; padding:1em; margin:0; } .header .submenu .socialset a { display:inline-block; padding:0; margin:.5em; width:1.5em; height:1.5em; } .header.fixed, .header.fixed * { transition:none; } .header.white .menuicon .baricon spanxxxxx { background:white; } .menuobj { display:block; width:33vw; height:100%; background:var(--gold); position:fixed; top:0; right:-50vw; z-index:592; xxxtransform:translateX(100%); transition:all cubic-bezier(.28,0,.15,1) .6s!important; } .menuobj.open { xxxtransform:translateX(0); xxbox-shadow:0 1px 3px rgba(0,0,0,.3); } .menuobj .conbox { display:block; width:40%; position:absolute; top:50%; left:7vw; transform:translateY(-50%); } .menuobj .conbox a { display:block; margin:.8em 0; color:white; font-size:1.8vw; line-height:1; transition:all .12s; letter-spacing:.05em; } .menuobj .conbox a span { display:block; margin:0; color:white; font-size:1.1vw; letter-spacing:.2em; } .menuobj .conbox .mobile { display:none; } .menuobj .conbox.disabled { pointer-events:none; } .menuobj .img { display:block; height:100%; width:55%; object-fit:cover; position:absolute; top:50%; right:0; transform:translateY(-50%); } .menuobj .langset { display:block; width:100%; position:absolute; top:2vw; right:2.5vw; text-align:right; } .menuobj .langset a { display:inline-block; margin:0 -.3em; padding:.5vw .7vw; color:white; opacity:.4; transition:all .2s; cursor:pointer; } .menuobj .langset a:hover { opacity:1; } .menuobj .langset a.selected { opacity:1; } .menuobj .socialset { display:none; } .menuobj .socialset a { display:inline-block; padding:0; margin:.5em; width:1.5em; height:1.5em; } .menuobj.fix .conbox a { transition:none; } .footer { display:block; text-align:center; width:calc(100% - 7.5vw); padding:1em; background:var(--gold); color:white; margin-bottom:-2em; } .footer * { color:inherit; text-align:left; vertical-align:middle; line-height:1.6; } .footer a { display:inline-block; margin:0 .3em; text-decoration:underline; font-size:.9em; } .footer path { fill:white; } .footer .row { margin:2em 4.5vw; } .footer .col { display:inline-block!important; vertical-align:bottom; width:49.5%!important; margin:0; } .footer .col:nth-child(1) { } .footer .col.right { text-align:right; transform:translateX(1%); } .footer .centercon { padding:2vw 4vw; max-width:100%; padding:0; } .footer .centercon p { padding-bottom:0; } .footer .linkset { display:block; /*position:absolute; bottom:2em; right:0;*/ text-align:right; } .footer .copyright { font-size:.8em; opacity:.5; /*position:absolute; bottom:0; right:0;*/ text-align:right!important; line-height:1.3; } .footer .btn-totop { display:block; width:60px; height:80px; transition:all .3s; position:absolute; top:6.3vw; left:50%; transform:translate(-50%,-50%); text-align:center; color:white; text-transform:uppercase; } .footer .btn-totop:before { content:''; transition:all .3s; display:block; position:absolute; top:-6vw; left:50%; height:2vw; width:0; border-right:1px solid #888; /*var(--gold);*/ } .footer .btn-totop:after { content:''; transition:all .3s; display:block; position:absolute; top:-4vw; left:50%; height:3vw; width:0; border-right:1px solid white; } .footer .btn-totop:hover { top:5.5vw; xxxletter-spacing:.1em; } .footer .btn-totop:hover:before { height:4vw; top:-7vw; } .footer .btn-totop:hover:after { height:2vw; top:-3.4vw; } #footerLang p { line-height:1.4; font-size:.9em; } #footerLang p.copyright { margin-top:.3em; font-size:.8em; } .footer.white { background:white; color:#858585; } .footer.white path { fill:#858585; } .footer.white .logocol { border-color:#ccc; } .footer.white .btn-totop { color:#858585; } .footer.white .btn-totop:after { border-color:#858585; } .shoppingset { display:block; padding:1vw; padding-left:1.5vw; position:fixed; top:0; left:0; z-index:996; mix-blend-mode:invert; } .shoppingset * { display:inline-block; vertical-align:middle; } .shoppingset a { display:inline-block; position:relative; width:4vw; height:4vw; margin:0; margin-right:-1vw; padding:.8vw; color:white; } .shoppingset a .iconlogined { display:none; } .shoppingset a.logined:beforexxxxx { content:''; display:block; width:1vw; height:1vw; z-index:11; border-radius:50%; background:url(../images/icon-all.svg); background-color:var(--gold); background-color:white; background-size:500%; background-position:-25% 75%; position:absolute; bottom:.8vw; right:.8vw; } .shoppingset a.logined:beforexxxx { content:''; display:block; width:40%; height:40%; z-index:11; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:2px solid var(--gold); } .shoppingset a.logined .iconlogin { display:none; } .shoppingset a.logined .iconlogined { display:block; } .shoppingset .line { display:inline-block; width:4vw; height:0; margin:0 1vw; padding:0; border-bottom:1px solid var(--gold); } .shoppingset .textlink { display:inline-block; color:var(--gold); width:10vw; height:auto; transition:all .2s; font-size:1vw; } .shoppingset .textlink:hover { color:#333; } .shoppingset .btn-circle { display:inline-block; padding-top:1.1em; padding:.5em; min-width:12vw; width:auto; letter-spacing:.1em; border-radius:.2em; height:2.1vw; text-align:center; line-height:1.2; background:var(--gold); color:white; margin-left:1.6em; xxwidth:4.5vw; xxheight:4.5vw; xxborder-radius:5vw; transition:all .2s; font-size:1vw; } .shoppingset .btn-circle span { display:block; color:white; font-size:.6em; display:none; } .shoppingset .btn-circle:hover { background:#333; } .shoppingset .btn-circle.orange { background:var(--orange); margin-left:1vw; } .shoppingset polyline, .shoppingset path, .shoppingset line, .shoppingset circle { fill:none; stroke:var(--gold); stroke-width:26; stroke-miterlimit:10; transition:all .2s; } .shoppingset a:hover polyline, .shoppingset a:hover path, .shoppingset a:hover line, .shoppingset a:hover circle { xxxxxstroke:#333; } .shoppingset.white .line { border-color:white; } .shoppingset.white .textlink { color:white; } .shoppingset.white polyline,.shoppingset.white circle, .shoppingset.white path,.shoppingset.white line { stroke:white; } .shoppingset.white .textlink:hover { color:white; } .shoppingset.white a:hover polyline,.shoppingset.white a:hover circle, .shoppingset.white a:hover path,.shoppingset.white a:hover line { stroke:white; } .item-cart { position:relative; } .item-cart.addin * { animation:1.3s _runaddin forwards; } .item-cart .count { display:block; width:1.2em; height:1.2em; margin:.5em; background:#333; color:white; border-radius:1em; position:absolute; top:0; right:0; } .item-cart .count span { color:white; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:.8em; } @keyframes _runaddin { 0%{stroke:#333;} 100%{stroke:var(--gold);} } .item-quickcart { display:block; width:22vw; position:absolute; top:3em; left:7vw; z-index:88; background:white; box-shadow:0 1px 2px rgba(0,0,0,.2); display:none; } .item-quickcart .mask { display:block; padding:0; height:auto; max-height:320px; overflow-y:auto; border-bottom:1px solid #ccc; } .item-quickcart .item { display:flex; padding:1em; xxxxpadding-left:5em; border-bottom:1px solid #ccc; align-items:center; } .item-quickcart .item:last-child { border-bottom:0; } .item-quickcart .item img { display:block; width:3em; height:3em; /*position:absolute; top:1em; left:1em;*/ object-fit:cover; margin-right:1em; } .item-quickcart .item strong { display:block; font-size:1em; width:80%; vertical-align:middle; } .item-quickcart .item p { display:block; font-size:1em; text-align:right; padding:0!important; margin:0; color:var(--gold); vertical-align:middle; } .item-quickcart .item .btn-remove { display:block; width:5vw; padding:1.5em 0; background:var(--orange); color:white; text-align:center; height:100%; position:absolute; top:0; right:1em; display:none; } .item-quickcart .item .btn-remove:hover { background:#ff8014; } .item-quickcart .item:hover .btn-remove { display:block; } .item-quickcart .final { display:block; } .item-quickcart .final p { display:block; padding:.5em; text-align:center; } .item-quickcart .final .btn-checkout { display:block; width:100%; padding:.5em; background:#333; color:white; text-align:center; height:auto; } .item-quickcart .final .btn-checkout:hover { background:var(--gold); } .item-member { display:inline-block; position:relative; height:2em; transition:none; /*position:absolute; top:3em; left:3vw; z-index:88; background:white; box-shadow:0 1px 2px rgba(0,0,0,.2); display:none;*/ overflow:hidden; } .item-member .final { display:block; width:13vw!important; } .item-member.set .final { position:absolute; top:50%; left:1.5vw; transform:translateY(-50%); } .item-member .final * { margin:0; padding:0; line-height:1; width:auto; height:auto; } .item-member .final .btn-logout { display:inline; margin-left:1em; color:var(--gold); } .item-member .final .btn-logout:hover { text-decoration:underline; } .mobile-jumpcount { display:block; background:#333; padding:1em; color:white; border-radius:.4em; box-shadow:0 1px 2px rgba(0,0,0,.2); position:fixed; top:0; left:50%; transform:translateX(-50%); z-index:999; animation:2s _jumpcount forwards; } .mobile-jumpcount span { display:block; color:white; word-break:keep-all; } @keyframes _jumpcount { 0%{opacity:0;top:0;} 20%,80%{opacity:1;top:1em;} 100%{opacity:0;display:none;top:2em;} } .tag { display:block; position:fixed; top:0; left:0; text-align:center; background:green; color:#f44336; } .overlay { display:block; width:100vw; height:100vh; opacity:1; position:fixed; top:0; left:0; background:rgba(0,0,0,.6); z-index:997; display:none; transition:all .3s; } .overlay.open { display:block; } .popupblock { display:block; width:auto; height:auto; position:fixed; top:50%; left:calc(50% - 4vw); transform:translate(-50%,-50%); background:white; z-index:998; display:none; transition:all .3s; padding:4em; opacity:0; box-shadow:0 2em 10em rgba(0,0,0,.1); } .popupblock.open { display:block; opacity:1; } .star { font-size:1.5em!important; transform:translate(-2px, 5px); display:inline-block; } .ui-loader { display:none; } @media device-width, screen and (min-width:1641px) { html,body { xxxfont-size:1.1em; } .header .logo { width:8vw; } } @media device-width, screen and (max-width:1640px) and (min-width:1221px) { } @media device-width, screen and (max-width:1220px) and (min-width:641px) { body { font-size:.9em; } .header { width:100px; } .header .menuicon p { width:100%; height:1.5em; top:18%; } .header .menuicon p >span { font-size:1.1em; } .header .menuicon p.close >span { top:-1.5em; } .header .submenu .socialset { padding:.5em; } .header .submenu .socialset a { margin:.2em; } .header .menucover { width:100px; height:90px; } .menuobj { width:50vw; right:-70vw; } .menuobj .conbox a { font-size:2.5vw; } .menuobj .conbox a span { font-size:1.5vw; } .footer { width:calc(100% - 100px); } .footer .col { padding:1.3vw; } .footer .centercon { padding:1vw; margin:0; } .footer .logocol { border-right:1px solid white; } .footer .btn-totop { top:5.2em; } } @media device-width, screen and (max-width:900px) and (min-width:641px) { .header .logo { width:100px; height:100px; } .header .menuicon p { height:1.5em; top:12%; } .header .menuicon p >span { font-size:.97em; height:.97em; } .header .menuicon p.close >span { top:-1.5em; } .shoppingset a { width:44px; height:44px; } .shoppingset .btn-circle { font-size:.9em; width:150px; height:30px; } } /* @media device-width, screen and (max-width:900px) and (min-width:641px) { .header { width:100px; } .header .logo {} .header .menuicon { width:80px; height:80px; top:0; left:0; transform:none; } .header .menuicon:before { display:none; } .header .menuicon .baricon { width:40px; margin:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .header .menuicon .baricon span { height:30px; height:2px; margin:.5em 0; background:var(--gold); } .header .menuicon.open .baricon span { background:white; } .header .menuicon p { display:none; } .header .submenu .linkset { display:none; } .header .submenu .socialset { display:none; } .footer .row.flex { display:block; } .footer .row.flex .col { display:block; width:100%!important; padding:1em 0; } .footer .row.flex .col:nth-child(2) { padding-top:3em; } .footer .linkset { position:relative; bottom:auto; right:auto; text-align:left; margin-bottom:1em; } .footer .linkset a { padding:1em; padding-left:0; } .footer .copyright { position:relative; bottom:aut; right:auto; text-align:left; } } @media device-width, screen and (max-width:640px) { */ @media device-width, screen and (max-width:640px) { .testversion { padding:.5em 8em; bottom:0em; } .header { width:100vw!important; height:90px; xxxxbackground:transparent; padding:0; right:auto; left:0; xxxxtransition:none; } .header .barcover { height:5px; width:100%; } .header .decologo { display:none; } .header .logo { width:120px; height:120px; top:50%; left:50%; right:auto; transform:translate(-50%,-50%); transition:all .3s; } .header .logo.hide { opacity:0; } .header .logo img.pc { display:none; } .header .logo img.mobile { display:block; } .header .menucover { display:none; } .header .menuicon { width:80px; height:80px; top:0; left:0; transform:none; } .header .menuicon:before { display:none; } .header .menuicon .baricon { width:40px; height:30px; margin:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .header .menuicon .baricon span { height:30px; height:2px; margin:.5em 0; background:var(--gold); } .header .menuicon .baricon span:nth-child(1) { width:100%; top:20%; left:50%; } .header .menuicon .baricon span:nth-child(2) { width:85%!important; top:50%; left:42%!important; } .header .menuicon .baricon span:nth-child(3) { width:70%!important; top:80%; left:34%!important; } .header .menuicon.open .baricon span { background:white; } .header .menuicon p { display:none; } .header .submenu .linkset { display:none; } .header .submenu .socialset { display:none; } /*.header.shorten { xxxxbackground:white; xxxxheight:100px; } .header.shorten .logo { width:3em; height:4em; xxleft:80vw; } .header.white .logo { width:3em; height:4em; xxleft:80vw; }*/ .menuobj { width:100vw; height:100%; overflow-y:scroll; right:auto; left:0; display:none; } .menuobj.open { display:block; } .menuobj .conbox .mobile { display:block; border-top:1px solid rgba(255,255,255,.2); } .menuobj .conbox { width:100%; position:relative; top:0; left:0; transform:none; padding:7em 4em; } .menuobj .conbox a { margin:1em 0; font-size:1.8em; opacity:1!important; } .menuobj .conbox a span { font-size:.5em; } .menuobj .img { height:50%; width:100%; position:relative; top:auto; right:auto; transform:none; } .menuobj .langset { top:2em; right:2.5em; } .menuobj .langset a { padding:.5em; } .menuobj .conbox.disabled { pointer-events:all; } .menuobj .socialset { display:block; position:relative; padding:4em; margin-top:-7em; } .footer { width:100%; margin-top:6em; } .footer .row { display:block; margin:2em 0; } .footer .row .col { display:block; width:100%!important; padding:1em 0; transform:none; } .footer .logocol { border-right:none; border-bottom:1px solid white; display:none!important; } .footer .logocol img { width:5em; } .footer .linkset { position:relative; bottom:auto; right:auto; text-align:left; margin-bottom:1em; } .footer .linkset a { padding:1em; padding-left:0; margin:0; } .footer .copyright { position:relative; bottom:aut; right:auto; text-align:left!important; } .footer .btn-totop { top:70px; } .footer .btn-totop:before { top:-40px; height:10px; } .footer .btn-totop:after { top:-30px; height:30px; } .shoppingset { xxxxdisplay:none; z-index:9999; left:auto; right:1.25em; top:1.25em; } .shoppingset #memberto, .shoppingset .item-member, .shoppingset .item-quickcart, .shoppingset #quickcart { display:none; } .shoppingset #itemCart { width:3em; height:3em; } .pconly { display:none; } .popupblock { top:57%; left:50%; padding:1em; max-height:84vh; overflow-y:scroll; } .item-quickcart { width:90vw; position:fixed; top:3em; left:50%; transform:translateX(-50%); display:none!important; } } /* _ _ _ ___| |__ (_)___ __| |_ / _ \ '_ \| / -_) _| _| \___/_.__// \___\__|\__| |__/ */ /* https://dribbble.com/tags/button_animation */ .btn, button { display:inline-block; width:auto; margin:1em 0; padding:1em 5em .8em 5em; text-align:center; background:transparent; color:var(--gold); cursor:pointer; transition:all cubic-bezier(0.25, 1, 0.5, 1) .2s; position:relative; overflow:hidden; height:3.5em; width:16em; border:1px solid var(--gold); transform-origin:center center; } .btn .txt1, .btn .txt2, button .txt1, button .txt2 { display:inline-block; transition:all .2s; position:absolute; top:50%; left:50%; line-height:1; transform:translate(-50%,-50%); transition:all cubic-bezier(0.25, 1, 0.5, 1) .75s; width:100%; color:inherit; font-size:1.1em; z-index:10; letter-spacing:.08em; } .btn .txt2, button .txt2 { left:45%; opacity:0; } .btn:after, button:after { content:''; display:block; width:0; height:100%; position:absolute; top:0; left:0; background:#d5974a; transition:all ease-in-out .2s; z-index:2; } .btn:hover, button:hover { background:var(--gold); color:white; xxxwidth:18em; xxxheight:3.3em; xxmargin:1.1em 0; } .btn:hover, button:hover { background:var(--gold);background:#d5974a; } .btn:hover .txt1, .btn:hover .txt2 button:hover .txt1, button:hover .txt2 { letter-spacing:.08em; } button span { color:inherit; z-index:122; word-break:keep-all; } /* .btn.solid { background:#333; color:white; border-width:0; } .btn.solid.gray { background:#333; } .btn.solid.gray:hover { background:#414548; } .btn.solid.gold { background:var(--gold); } .btn.solid.gold:hover { background:#d5974a; } */ .btn.solid, button.solid { background:#333; color:white!important; border-width:0; } .btn.solid.gray:after { background:#555; } .btn.solid.gray:hover:after { width:100%; } .btn.solid.lightgray { background:#bbb; } .btn.solid.lightgray:after { background:#aaa; } .btn.solid.lightgray:hover:after { width:100%; } .btn.solid.gold, button.solid.gold { background:var(--gold); } .btn.solid.gold:hover:after, button.solid.gold:hover:after { width:100%; } .btn.full, button.full { width:100%; margin-left:0!important; } .btn.btn-small { padding:.5em 2em; xxxwidth:10em; word-break:keep-all; } .btn.btn-smaller { padding:.3em .8em; word-break:keep-all; display:inline-block; min-width:10vw; margin:1em 0; width:auto; height:auto!important; } .btn.btn-smaller .txt1, .btn.btn-smaller .txt2 { display:inline-block; word-break:keep-all; letter-spacing:0; } /* .cartblock.orderhistory .item .btn-more { padding:.3em .8em .3em 2em; border:1px solid #333; display:inline-block; width:auto; margin:1em auto; }*/ .btn.disabled { pointer-events:none; opacity:.3; background:gray!important; } .textlink { margin:.8em auto; } .icon { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1.2); width:1.5em; height:1.5em; background-image:url(../images/icon-all.svg); background-size:500%; } .icon.icon-cart { background-position:0 0; } .icon.icon-member { background-position:-1.5em 0; } .icon.icon-fb { background-position:-3em 0; } .icon.icon-ig { background-position:-4.5em 0; } .icon.icon-fb-white { background-position:-3em 9em; } .icon.icon-ig-white { background-position:-4.5em 9em; } .icon.icon-yt { background-position:-6em 0; } .icon.icon-arrowdown { background-position:-1.5em -1.5em; } @keyframes _openload { 0%{height:100%;} 100%{height:0;} } @keyframes _openloadobj { 0%{opacity:0;transform:translateY(13px);} 100%{opacity:1;transform:translateY(0);} } .lazyload { display:block; position:relative; opacity:0; } .lazyload:beforexx { content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:white; z-index:10; } .lazyload:afterxx { content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; background:#333; z-index:9; } .lazyload.open { xxopacity:1; animation:_openloadobj .25s ease-in-out forwards; } .lazyload.open:before { animation:_openload .35s ease-in-out forwards; } .lazyload.open:after { animation:_openload .35s ease-in-out forwards .3s; } @media device-width, screen and (max-width:640px) { .btn { width:100%; } .btn.btn-smaller { width:100%; word-break:keep-all; min-height:3em; } } /* _ _ | |__ ___ __| |_ _ | '_ \/ _ \/ _` | || | |_.__/\___/\__,_|\_, | |__/ */ .container { display:block; xxwidth:calc(100% - 8.7vw);width:calc(100% - 7.5vw); } .row { display:block; position:relative; } .row.flex { display:flex; } .row.flex p { margin:.3em 0; text-align:justify; } .row.flex .pnote { padding:.3em .5em; text-align:left; line-height:1.4; } .row.extandx { width:calc(100% + .6em); margin-left:-.3em; align-items:center; } .row .col { display:block; width:50%; overflow:hidden; } .row .half { display:block; width:50%; } .row .auto { display:block; width:auto!important; } .row h2 { text-transform:capitalize; letter-spacing:-.01em; margin:.8vw 0 0 0; /*font-size:4.05vw; color:var(--gold);*/ } .row h2.smaller { font-size:3.3vw; } .row h2.welcomeline { font-size:3.3vw; text-align:center; margin-top:3em; } .row h3 { margin:1.4vw 0; /*font-size:1.5vw; color:var(--gold);*/ letter-spacing:.05em; } .row h3.alert { color:red; } .row h3 >span { font-size:inherit; color:inherit; letter-spacing:inherit; } .row h3.gray { color:#333; } .row h4 { /*letter-spacing:.2em; margin:1.5em 0 2em 0;*/ /*font-size:.9vw; font-size:1.5em;*/margin:.8em 0; /*opacity:.6;*/ } .row h4 a.btn-logout { text-decoration:underline; } /*global規則*/ /*.about p, .howtoblock .item p, .centercon h2, .row.flex p, .productblock p, .faqblock .item strong, .detailblock p { font-family:'creamfont','微軟正黑體',Arial,'Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; line-height:200%; letter-spacing:.05em; font-size:.98em; }*/ .productauto h2, .home-sec-about h2, h2.titletext { font-size:4em; color:var(--gold); } .detailblock h3, .qualityset h3, .productblock h3 { font-size:1.5em; color:var(--gold); } .row.formbtn { padding-bottom:4vw; } .row.formbtn .btn { min-width:5vw; margin:1em .3em; } .row.formbtn.formbtnset { padding-bottom:0; width:80%; display:flex; flex-wrap:nowrap; } .row.formbtn.formbtnset .btn { width:calc(33.33% - .8em); margin:0 .8em 0 0; } .row.formbtn.formbtnset .btn span { font-size:1em; } .row.formbtn.formbtnset .btn:last-child { margin-right:0; } .row.formbtn.formbtnset .btn.selected { background:var(--gold); } .row.formbtn.formbtnset .btn.selected:after { background:var(--gold); width:100%; } .row.formbtn.formbtn2, .row.formbtn.formbtn3 { display:flex; display:block; } .row.formbtn.formbtn2 .btn { width:calc(50% - .8em); margin:0 .8em 0 0; } .row.formbtn.formbtn3 .btn { width:calc(33.33% - .8em); margin:0 .8em 0 0; } .row.bgwhite { background:white; background:rgba(255,255,255,.5); } .row.narrow { margin:0 auto; xxxmax-width:950px; width:100%; } .row.flex37 .col:nth-child(1) { width:30%; } .row.flex37 .col:nth-child(2) { width:70%; } .row.flex28 .col:nth-child(1) { width:20%; } .row.flex28 .col:nth-child(2) { width:80%; } .row.flex55 .col:nth-child(1) { width:40%; } .row.flex55 .col:nth-child(2) { width:60%; padding-right:20%; } .row.flex64 .col:nth-child(1) { width:60%; } .row.flex64 .col:nth-child(2) { width:40%; } .row.aligncenter { align-items:center; } .row.btnflex { display:flex; width:calc(100% + 1em); flex-wrap:wrap; } .row.btnflex .btn { display:block; margin:.2em; width:calc(50% - .4em); } .row.btnflex p { display:block; width:100%; } .shipblock { xxpadding-left:20%; margin:0 0 8em 0; margin:0; } .payblock { xxxpadding-left:20%; margin:0 0 8em 0; } .formblock .inputrow.creditcard-number .row { width:80%; } .formblock .inputrow.creditcard-number input { display:inline-block; width:calc(25% - .79em); margin:0 .7em 0 0; } .formblock .inputrow.creditcard-number input:last-child { margin:0; } .formblock .inputrow.creditcard-date .row {} .formblock .inputrow.creditcard-date input { display:inline-block; width:8em; margin:0 .7em 0 0; } .formblock .inputrow.verificationcode input { display:inline-block; width:30%!important; margin:0 .7em 0 0; } .formblock .inputrow.verificationcode.full input { width:50%!important; } .formblock .inputrow.verificationcode .code { display:inline-block; height:40px; } .formblock .subtitle { display:inline-block; font-size:1.2em; xxxborder:1px solid var(--gold); xxxpadding:.5em 1em; } .formblock .subtitle:after { content:''; display:inline-block; width:10vw; height:0; border-top:1px solid var(--gold); margin-left:.8em; margin-bottom:.5em; vertical-align:middle; } .msgblock { position:relative; z-index:122; } .msgblock .error { display:inline-block; width:auto; border-radius:.3em; background:#f44336; color:white; padding:.3em 1.5em; transform:translateY(-1.5em); } .msgblock .error:before { content:'!'; display:inline-block; border:1px solid white; color:white; border-radius:50%; height:1.8em; width:1.8em; text-align:center; margin-right:.5em; padding:0; font-weight:bold; vertical-align:middle; margin-top:-.1em; } .center { text-align:center; } .centercon { padding:8vw; max-width:80vw; margin:0 auto; } /*.centercon.narrow { padding:8vw; max-width:60vw; margin:0 auto; }*/ .productauto { padding:6vw; padding-bottom:0; max-width:82vw; margin:0 auto; height:36vw; } .narrowtitle { padding:8vw 0; } .narrowcon { max-width:900px; margin:0 auto; padding:8vw 0; } .vertical { transform:rotate(90deg); position:absolute; top:10vw; left:12vw; transform-origin:0 0; } .row.narrow .vertical { top:3vw; left:-2vw; } .centercon .vertical { left:14vw;left:10vw; margin-bottom:.5em; } .centercon .vertical.centervertical { left:14vw; } .centercon.about .vertical { left:24vw; } .vertical.pdpage { left:8vw; } .floattop10vw { transform:translateY(-10vw); } .floattop6vw { transform:translateY(-6vw); } .topgap { padding-top:2vw; } .alignleft { text-align:left; } .lessgap-b { padding-bottom:2vw; } .lessgap-b0 { padding-bottom:0; } .lessgap-t { padding-top:2vw; } .lessgap-t0 { padding-top:0!important; } .lessgap-tb { padding-bottom:2vw; padding-top:2vw; } .vh40 { min-height:40vh; } .vh50 { min-height:50vh; } .vw20 { min-height:20vw; } .vw30 { min-height:30vw; } .vw40 { min-height:40vw; } .roundcorner { border-radius:5px; } .goldblock { padding:.8em 1.5em; margin:1.8em 0; background:var(--gold); color:white; line-height:1.4em; } .goldblock span { color:white; } .gold { color:var(--gold); } .navset { display:block; text-align:center; margin:1em auto; } .navset a { display:inline-block; width:auto; margin:1em; } .navset a.selected { color:var(--gold); } .verticalline { display:block; height:10vw; width:1px; border:0; border-right:1px solid var(--gold); margin:3vw auto; height:3vw; } .textor { margin-bottom:-3em; } @media device-width, screen and (min-width:1600px) { .row.narrowxxx { max-width:1000px; } } @media device-width, screen and (max-width:1640px) and (min-width:1221px) { .centercon {} .row.flex55 .col:nth-child(1) { width:50%; } .row.flex55 .col:nth-child(2) { width:50%; padding-right:4vw; } } @media device-width, screen and (max-width:1220px) and (min-width:641px) { .container { width:calc(100% - 100px); margin-top:5em; } .row h2 { font-size:6vw; } .row h3 { xxxxfont-size:2.2vw!important; } .centercon { padding:2.5vw; } .row.flex55 .col:nth-child(1) { width:50%; } .row.flex55 .col:nth-child(2) { width:50%; padding-right:4vw; } .row.narrow .verticalxxxx, .verticalxxxx { transform:rotate(0); position:relative; top:auto; left:auto; transform-origin:0 0; margin-top:4vw; } .row.narrow { max-width:90%; margin-left:5%; } .vh40 { min-height:26vh; } } @media device-width, screen and (max-width:960px) and (min-width:641px) { } @media device-width, screen and (max-width:640px) { .container { width:100vw; margin:0; padding:0; margin-top:100px; } .container .row.flex { xxdisplay:block; } .container .row .col { width:100%; height:auto; xxxxmin-height:100vw; overflow:visible; } .centercon { padding:2em!important; max-width:100%; width:100%!important; } .centercon .vertical { left:0; } .row { padding:1em 0; } .row h2, .row h2.smaller { font-size:3.3em; } .row h3 { font-size:1.5em; margin:1.2em 0 .5em 0; } .row h4 { font-size:1.1em; margin-bottom:1em; } .row.flex { display:block; width:100%; } .row.extandx { display:flex; } .row .half { display:block; width:100%; } .row.formbtn.formbtnset { width:100%; } .row.formbtn.formbtn3 { width:100%; } .row.formbtn.formbtn3 .btn { width:calc(33.33% - .1em); min-width:3em; padding:1em; } .row.formbtn.formbtn2, .row.formbtn.formbtn3 { display:flex; } .row.flex28 { display:block; } .row.flex28 .col:nth-child(1), .row.flex28 .col:nth-child(2) { width:100%; } .row.flex64 { display:block; } .row.flex64 .col:nth-child(1), .row.flex64 .col:nth-child(2) { width:100%; } .row.flex55 .col:nth-child(1), .row.flex55 .col:nth-child(2) { width:100%; padding:0; } .row.btnflex { display:flex; width:calc(100% + 1em);width:100%; flex-wrap:wrap; } .row.btnflex .btn { display:block; margin:.2em; width:calc(50% - .4em); } .row.btnflex p { display:block; width:100%; } .formblock .inputrow.creditcard-number input { width:22%; } .formblock .inputrow.verificationcode input { margin:0; } .formblock .inputrow.verificationcode #verifyCode { display:inline-block; width:auto!important; } .formblock .inputrow.verificationcode #verifyCode canvas { width:100%!important; height:40px; } .formblock .inputrow.verificationcode .reload { left:auto; right:0; } .shipblock, .payblock { margin:2em 0 4em 0; } .vertical { transform:none; position:relative; top:auto; left:auto; margin-bottom:.8em; } .floattop6vw { transform:none; } .vh40 { height:auto; } .productauto { height:282vw; } .navset { display:flex; width:calc(100% + 1em); margin-left:-.5em; align-items:center; justify-content:center; } .navset a { margin:.8em; font-size:.8em; } } .imgheader { display:block; position:relative; width:100%; height:25vw; } .imgheader img { display:block; width:100%; height:100%; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:all .3s; } .imgobj { display:block; position:relative; width:100%; height:100%; overflow: hidden; background:#333; } .imgobj img { display:block; width:102%; height:102%; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:all .3s; transition:none; } .imgobj.darken img { opacity:.8; } .imgobj h2 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:2.5vw; } .imgobj h2.white { color:white; } .imgobj h2.twvertical { writing-mode:vertical-rl; text-align:left; } .decoobj { display:block; position:absolute; bottom:2vw; left:50%; width:30vw; transform:translate(-50%,-50%); } .decoobj img { display:block; position:absolute; top:50%; left:50%; width:100%; height:auto; transform:translate(-50%,-50%); } @media device-width, screen and (max-width:640px) { .imgobj h2 { font-size:2.5em; } .decoobj { width:100%; left:0; transform:translateY(.5em); overflow:visible; } } /* _ | |_ ___ _ __ ___ _ __ __ _ __ _ ___ | ' \/ _ \ ' \/ -_) '_ \/ _` / _` / -_) |_||_\___/_|_|_\___| .__/\__,_\__, \___| |_| |___/ */ .bannerblock { display:block; width:calc(100% + 5vw)!important; background:#333; margin-left:-5vw; margin-top:0; height:95vw; } .bannerblock .item { display:block; width:100%; height:100vh; } .homepage-mobilelogo { display:block; width:40vw; height:40vw; z-index:87; position:absolute; top:40vh; left:52%; transform:translate(-50%,-50%); display:none; } .homepage-mobilelogo img { display:block; width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .btnscroll { display:block; width:10vw; height:5vw; position:absolute; left:50%; transform:translate(-50%,-50%); cursor:pointer; z-index:888; } .btnscroll p { display:block; font-size:1vw; letter-spacing:.2em; font-weight:bold; position:absolute; top:-2.5em; left:50%; transform:translateX(-50%); color:white; } .btnscroll .bar { display:block; width:1px; height:100%; position:absolute; top:50%; left:50%; background:var(--gold); transform:translate(-50%,-50%); } .btnscroll .bar span { display:block; width:1px; height:0; position:absolute; top:0; left:0; background:white; animation:2s _animatebar ease-in-out infinite; } @keyframes _animatebar { 0%{height:0;top:0;background:#fff;} 50%{height:100%;top:0;background:#e1e2e5;} 100%{height:0;top:100%;background:#e1e2e5;} }\ .btnscroll:hover p { letter-spacing:.4em; } .mp3 { padding-bottom:2em; } .mp4 { padding-bottom:.4em; } .newsset { display:block; padding:1.2vw; padding-left:6vw; padding-right:6vw; position:absolute; top:60vw; left:0; overflow:hidden; transform:translateY(-50%); z-index:987; background:white; width:30vw; height:auto; display:none; } .newsset .bar { display:block; padding:1.5em 1.2em; text-align:center; width:10vw; position:absolute; top:50%; left:2em; z-index:987; background:var(--gold); color:white; text-transform:uppercase; transform:translate(-50%,-50%) rotate(-90deg); } .newsset .btn-newslink { xxxfont-size:.9em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; height:100%; } .newsset .btn-newslink span { display:inline-block; white-space:normal; line-height:1.4; } .newsset .btn-newslink:hover { text-decoration:underline; } .newsset .btn-more { display:block; font-size:.9em; padding:.5em 0 0 0; opacity:.5; } .newsset .btn-more:hover { text-decoration:underline; } .newsset .circle { display:inline-block; position:absolute; top:50%; right:.5em; transform:translateY(-50%); width:60px; height:60px; visibility:hidden; } .newsset .circle .counter { text-align:center; position:absolute; width:60px; font-size:1em; font-weight:bold; top:30px; transform:translateY(-50%); } .newsset .circle canvas { display:inline-block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:60px; height:60px; } .newsset .circle .progress-percentage { text-align:center; position:absolute; width:60px; font-size:1em; font-weight:bold; top:50%; transform:translateY(-50%); } .noticeset { display:block; width:calc(100% - 7.5vw); height:100vh; position:fixed; top:0; left:0; padding:2vw; z-index:997; background:rgba(0,0,0,.18); display:none; } .noticeset .area { display:block; width:100%; height:100%; position:fixed; top:0; left:0; z-index:1; opacity:0; background:black; } .noticeset .con { display:block; color:white; text-align:center; width:calc(100% - 4em); max-width:50%; margin:0 auto; z-index:77; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .noticeset .con p { color:white; text-align:center; font-size:2em; } .noticeset .con img { /*position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);*/ width:100%; max-height:80vh; object-fit:contain; } .noticeset .btn-close { border:1px solid white; position:absolute; top:1.5vw; right:1.5vw; transform:translate(50%,-50%); display:block; width:1.5vw; height:1.5vw; border-radius:50%; cursor:pointer; opacity:.5; transition:all .2s; } .noticeset .btn-close:before, .noticeset .btn-close:after { content:''; width:.8vw; height:2px; background:white; position:absolute; top:50%; left:50%; } .noticeset .btn-close:before { transform:translate(-50%,-50%) rotate(45deg); } .noticeset .btn-close:after { transform:translate(-50%,-50%) rotate(-45deg); } .noticeset .btn-close:hover { opacity:1; width:1.7vw; height:1.7vw; } .noticeset .btn-close:hover:before, .noticeset .btn-close:hover:after { width:.7vw; } .noticeset.both {} .noticeset.both .con p { color:white; text-align:center; font-size:1em; margin:.5em 0; padding:0; } .noticeset.both .con img { max-height:60vh; margin:1em 0; width:auto!important; } .home-sec-about { padding:8vw 8vw 2vw 8vw; } .writingblock { display:block; overflow:hidden; height:22vw; margin-bottom:-12vw; margin-left:-2vw; opacity:1; background-repeat:repeat-x; background-size:auto 22vw; background-position:0 0; position:relative; } /* .howtoblock { display:block; padding-top:10vw; text-align:center; } .howtoblock .item { display:inline-block; width:28%; margin:1.5vw; vertical-align:top; text-align:left; position:relative; } .howtoblock .item h2 { font-size:3vw; margin:1vw 0 -3vw -2vw; font-size:10vw; color:white; } .howtoblock .item h3 { margin-top:2vw; } .howtoblock .item p { letter-spacing:.03em; } .howtoblock .item .imgobj { height:20vw; } .howtoblock .item:nth-child(1) { width:100%; margin:2vw; padding-left:55%; margin-bottom:10vw; } .howtoblock .item:nth-child(1) .imgobj { position:absolute; width:50%; height:30vw; top:0; left:-2vw; } .howtoblock .item:nth-child(2) { margin-top:0vw; } .howtoblock .item:nth-child(3) { margin-top:4vw; } .howtoblock .item:nth-child(4) { margin-top:8vw; } */ .howtoblockframe { pointer-events:none; } .howtosection { height:100vh; pointer-events:none; } .storebanner { display:block; width:100%; height:35vw; position:relative; overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .storebanner .mask { display:block; overflow:hidden; width:100vw; height:100vw; border-radius:50%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .storebanner .bg { display:block; width:100vw; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .storebanner .text { display:block; height:25vw; margin-top:.5vw; position:absolute; top:50%; left:calc(50% + 10em); transform:translate(-50%,-50%); opacity:.78; } .howtoblock { display:block; padding:5vw 0 15vw 8vw; position:relative; pointer-events:none; margin-top:-13em; } .howtoblock .item { display:block; width:42%;width:100%; margin:1.5vw 0; padding-top:8vw; padding-left:16vw; vertical-align:top; text-align:left; position:relative; } .howtoblock .item h2 { font-size:3vw; margin:1vw 0 -3vw -2vw; font-size:5vw; color:white; z-index:10; position:absolute; top:8vw; left:11vw; display:none; } .howtoblock .item h3 { margin-top:2vw; margin-bottom:.4em; font-size:1.3em; } .howtoblock .item p { letter-spacing:.03em; } .howtoblock .item .imgobj { height:15vw; width:15vw; border-radius:10vw; position:absolute; top:0; left:0; min-height:5vw; } .howtoblock .col { display:inline-block; width:42%; vertical-align:top; margin:0 1.5vw; } .howtoblock .col2 { /*position:absolute; top:22vw; left:50%;*/ padding-top:10vw; } .howtobuyblock { display:flex; padding:4vw 0 1vw 0; flex-wrap:wrap; width:calc(100% + 1vw); margin-left:-.5vw; } .howtobuyblock .item { display:block; width:calc(50% - 1.3em); margin:.5vw; vertical-align:top; text-align:left; position:relative; background:var(--gold); padding:1.5em 2em; } .howtobuyblock .item a { display:inline-block; transition:all .2s; margin:0 .4em; padding:0; color:white; xxxborder-radius:2em; text-decoration:none; line-height:1.5; xxxbackground:rgba(0,0,0,.1); text-decoration:underline; } .howtobuyblock .item a:hover { background:rgba(0,0,0,.6); } .howtobuyblock .item p { color:white; line-height:1.5; } .howtobuyblock .item h3 { color:white; } .list { display:block; margin:1em 0; } .list strong { font-size:1.2em; } .list p { font-size:.9em; line-height:150%; } /*.qablock, .container .row.qablock { xxxpadding-top:3em; xxxxpadding-bottom:8vw; } .qablock .item { display:block; box-sizing:border-box; padding:.5em 0; position:relative; border-top:1px solid #ddd; cursor:pointer; } .qablock .item .icon { position:absolute; top:2.5em; left:auto; right:1em; transition:all .3s; border:1px solid red; } .qablock .item b { display:block; padding:1em 0; font-size:1.2em; } .qablock .item p { display:none; padding-bottom:2em; } .qablock .item.open .icon { transform:translate(-50%,-50%) rotate(180deg); }*/ .faqblock { text-align:left; border-top:.02em solid var(--gold); margin-bottom:5vw; margin-top:5em; } .faqblock .item { text-align:left; border-bottom:.02em solid var(--gold); position:relative; padding:1em; padding-left:2em; cursor:pointer; } .faqblock .item:hover { xxxbackground:#f1f2f5; } .faqblock .item strong { font-size:1.1em; color:var(--gold); position:relative; font-weight:normal; display:block; margin-right:3em; } .faqblock .item strong:before { content:'Q'; display:block; font-weight:bold; color:inherit; position:absolute; top:0; left:-1.5em; } .faqblock .item strong:after { content:''; display:block; width:1.3em; height:1.3em; background:url(../images/icon-all.svg); background-size:500%; background-position:50% 50%; color:inherit; position:absolute; top:50%; right:-2em; transform:translateY(-50%); overflow:hidden; } .faqblock .item p { font-size:.9em; padding-right:5em; margin:.8em 0; } .faqblock .item.open strong:after { xxxtransform:translateY(-50%) rotate(0); background-position:75% 50%; } .faqrow { xxxxmargin-top:-10vw; } .map { margin:2em 0 5em 0; max-width:70%; } .holidaypurchaseblock { display:flex; flex-wrap:wrap; width:calc(100% + 2em); margin-left:-1em; } .holidaypurchaseblock .list { display:block; margin:1em; border:2px solid #333; width:calc(33.33% - 2em); border-radius:5px; } .holidaypurchaseblock .list strong { display:block; padding:1em .5em; text-align:center; border-bottom:2px solid #333; font-size:1.4em; line-height:1.5; } .holidaypurchaseblock .list strong span { display:block; text-align:center; font-size:.6em; } .holidaypurchaseblock .list p { display:block; padding:1em; text-align:left; } @media device-width, screen and (max-width:1220px) and (min-width:641px) { .bannerblock { max-height:70vw; height:70vw; margin-top:-5em; } /* .howtoblock { display:flex; flex-wrap:wrap; padding-top:0; align-items:top; } .howtoblock .item { display:block; width:calc(50% - 4vw); margin:2vw!important; padding:3vw; vertical-align:top; } .howtoblock .item .imgobj { min-height:24vh; height:24vh; } .howtoblock .item:nth-child(1) { width:calc(50% - 4vw); padding:3vw; } .howtoblock .item:nth-child(1) .imgobj { position:relative; top:0; left:auto; transform:none; width:100%; min-height:24vh; height:24vh; } */ .faqblock .item strong { font-size:1em; } } @media device-width, screen and (max-width:1220px) and (min-width:961px) { .btnscroll { display:block; } .newsset { top:75vw; width:36vw; padding:1em 5.5em; xxxxtransform:translateY(-100%); } .newsset .bar { width:18vw; } } @media device-width, screen and (max-width:960px) and (min-width:641px) { .btnscroll { display:none; } .newsset { width:47vw; padding-left:6em; top:60vw!important; } } @media device-width, screen and (max-width:1220px) and (min-width:769px) { .home-sec-about { padding:8vw 2vw 2vw 2vw; } .faqrow { opacity:1!important; padding:4em 0; } } @media device-width, screen and (max-width:1024px) and (min-width:641px) { .noticeset { width:calc(100% - 100px); } .noticeset .con { max-width:80%; } .noticeset .btn-close { width:1.5em; height:1.5em; top:1.5em; right:1.5em; } .noticeset.both .con img { width:100%!important; height:auto!important; } .holidaypurchaseblock .list { width:calc(50% - 2em); } } @media device-width, screen and (max-width:768px) and (min-width:641px) { .home-sec-about { padding:8vw 4vw 2vw 4vw; } .home-sec-about .flex { display:block; } .home-sec-about .flex .col { width:100%; } .home-sec-about .flex .col:first-child { padding:1em!important; } .home-sec-about .flex .col h2.smaller { font-size:2.2em!important; } .home-sec-about .flex .col:last-child { padding-bottom:3em!important; } .decoobj { width:50vw; bottom:3em; } .howtoblock .item { margin:0; padding:0 0 6em 0; text-align:center; width:100%; } .howtoblock .item h2 { margin:0; font-size:3em; top:22vw; left:50%; transform:translate(-50%,-100%); } .howtoblock .item h3 { margin-top:2em; } .howtoblock .item p { text-align:left; } .howtoblock .item .imgobj { height:20vw; width:20vw; border-radius:50%; position:relative; top:auto; left:auto; margin:0 auto; } .faqrow { opacity:1!important; padding:2em; } } @media device-width, screen and (max-width:640px) { .btnscroll { display:none; } .bannerblock { margin-top:-100px; max-height:90vh; } .slide_object { max-height:95vh; height:90vh!important; } .homepage-mobilelogo { xxxxxdisplay:block; } .newsset { top:90vh!important; width:100vw; padding:1.5em 1.5em 1.5em 5em; } .newsset a { line-height:1.3; white-space:pre-wrap; word-break:break-all; } .newsset .bar { width:18em; } .home-sec-about .flex { display:block!important; } .home-sec-about .centercon { padding:2em .5em!important; } .storebanner .text { height:60vw; left:calc(50% + 5em); } .noticeset { width:100%; top:auto; bottom:0; padding:0; } .noticeset .con { max-width:100%; width:calc(100% - 1em); margin:0; } .noticeset .con p { font-size:1em; } .noticeset .con img { max-width:100%; max-height:80vh; } .noticeset .btn-close { top:1.5em; right:1.5em; width:1.5em; height:1.5em; } .noticeset .btn-close:before,.noticeset .btn-close:after { width:.8em; } .noticeset .btn-close:hover { width:1.7em; height:1.7em; } .noticeset .btn-close:hover:before,.noticeset .btn-close:hover:after { width:.7em; } /* .howtoblock { padding-top:30vw; } .howtoblock .item { width:90%!important; margin:1.5em!important; padding:0!important; } .howtoblock .item .imgobj { min-height:24vh; height:24vh!important; width:100%!important; } .howtoblock .item:nth-child(1) .imgobj { position:relative; top:auto; left:auto; transform:none; } .howtoblock .item h2 { font-size:3em; margin:1em 0; } .howtoblock .item h3 { margin-top:2em; } .howtoblock .item:nth-child(1) .info { position:relative; top:auto; left:auto; transform:none; } */ .howtosection { margin-top:-80vw; } .storebanner { height:100vw; } .storebanner .mask { width:180vw; height:180vw; } .storebanner img { height:100vw; width:auto; } .writingblock { display:block; overflow:hidden; height:60vw; margin-bottom:-12vw; margin-top:70vw; margin-left:-2vw; opacity:.5; xxxborder:2px solid red; background-repeat:repeat-x; background-size:auto 60vw; background-position:0 0; } .howtoblock { padding:1em; padding-top:-10vw; } .howtoblock .item { margin:0; padding:0 3em 6em 3em; text-align:center; } .howtoblock .item h2 { margin:0; font-size:3em; top:50vw; left:50%; transform:translate(-50%,-100%); } .howtoblock .item h3 { margin-top:2em; } .howtoblock .item .imgobj { height:45vw; width:45vw; border-radius:35vw; position:relative; top:auto; left:auto; margin:0 auto; } .howtoblock .col { width:100%; } .howtoblock .col2 { position:relative; top:auto; left:auto; padding-top:0; } .howtobuyblock { width:100%; margin-left:0; } .howtobuyblock .item { width:100%; marign:.3em 0; height:auto; } .faqblock { margin-bottom:3em; } .faqblock .item strong { font-size:1.1em; } .faqblock .item p { font-size:1em; } .faqrow { margin-bottom:-6em; padding-bottom:8em; } .holidaypurchaseblock .list { width:calc(100% - 2em); } .map { max-width:100%; } } /* _ _ _ __ _ _ ___ __| |_ _ __| |_ | '_ \ '_/ _ \/ _` | || / _| _| | .__/_| \___/\__,_|\_,_\__|\__| |_| */ .product-title1 { position:absolute; bottom:5vw; left:16vw; } .productblock, .container .row.productblock { display:flex; flex-wrap:wrap; padding:4vw 0; } .productblock { xxxborder-bottom:1px solid var(--gold); margin-bottom:.5vw; width:calc(100% + 2vw); margin-left:-1vw; } .productblock:after { content:''; display:block; width:calc(100% - 2vw); border-bottom:1px solid #ccc; margin-left:1vw; position:absolute; bottom:0; left:0; opacity:.7; } .productblock:last-child { border-bottom:0; } .productblock:last-child:after { display:none; } .productblock .headerrow { display:block; width:100%; padding:1em; margin-bottom:-1.5em; } .productblock .headerrow h3 { display:inline-block; width:auto; margin:0; margin-right:1em; } .productblock .headerrow p { display:inline-block; } .productblock .item { display:block; box-sizing:border-box; width:25%; padding:1vw; text-align:center; position:relative; cursor:pointer; } .productblock .item.new:before { content:''; background-image:url(../images/icon-all.svg); display:block; width:4vw; height:4vw!important; position:absolute; top:1.5vw; left:.9vw; z-index:10; overflow:hidden; background-size:500%; background-position:100% 50%; } .productblock .item .img { display:block; width:100%; height:13vw; object-fit:cover; background:white; position:relative; overflow:hidden; border-radius:.3vw; cursor: pointer; } .productblock .item .img img { display:block; width:102%; height:102%; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:all .3s; } .productblock .item .img .btnset { display:none; width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:all .3s; opacity:0; } .productblock .item .img .btnset .btn { margin:.2em; border-color:white; color:white; background:transparent; padding:.5em 3em; cursor:pointer; opacity:1; } .productblock .item .img .btnset .btn:hover { opacity:1; color:#333; background:white; } .productblock .item p { display:block; padding:.5em 0; text-align:left; color:#666; xxxfont-size:1.2em; xxxmargin-top:1em; } .productblock .item p:after { content:''; display:inline-block; width:0; height:0; border-bottom:1px solid var(--gold); border-bottom:1px solid #666; transition:all .6s; vertical-align:middle; margin-left:.5em; /*position:absolute; top:2em; left:0; margin-left:0;*/ } .productblock .item span { display:block; padding:0; margin-top:-.5em; text-align:left; color:#666; font-size:.9em; line-height:1.5; opacity:.8; } .productblock .item:hover .img { background:#333; } .productblock .item:hover .img img { transform:translate(-50%,-50%) scale(1.05); opacity:.5; } .productblock .item:hover .img .btnset { opacity:1; } .productblock .item:hover p { xxxcolor:var(--gold); } .productblock .item:hover p:after { width:5em; margin-right:.6em; width:1.5em; } .productblock-auto { display:flex; text-align:right; transform:translateX(7.2vw); position:relative; z-index:182; } .productblock-auto .item { display:inline-block; box-sizing:border-box; width:33%; padding:1vw; text-align:center; position:relative; cursor:pointer; } .productblock-auto .item { display:block; position:absolute; top:0; left:0; } .productblock-auto .item .corner { display:block; width:3.7vw; height:3.7vw; position:absolute; top:1.01vw; left:1.01vw; background:var(--gold); } .productblock-auto .item .img { display:block; width:100%; height:19.8vw; object-fit:cover; background:#e6dfd7; position:relative; overflow:hidden; border-radius:4vw .5vw .5vw .5vw; cursor: pointer; } .productblock-auto .item .img img { display:block; width:102%; height:102%; object-fit:cover; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:all .3s; mix-blend-mode:multiply; } .productblock-auto .item .img img.thumb {} .productblock-auto .item .img img.cover { opacity:0; transform:translate(-50%,-50%) scale(1.2); } .productblock-auto .item .img h3.twvertical { writing-mode:vertical-rl; text-align:left!important; position:absolute; top:1vw!important; right:1.5vw!important; font-size:2.3em; pointer-events:none; transform:none!important; } .productblock-auto .item .img h3.enname { font-size:1.4vw; position:absolute; bottom:.5vw; left:1.5vw; text-align:left; transition:all .3s; pointer-events:none; } .productblock-auto .item .img h3.viewmore { font-size:1.4vw; position:absolute; bottom:.5vw; left:3vw; text-align:left; opacity:0; transition:all .3s; pointer-events:none; } .productblock-auto .item .img * { color:white; } .productblock-auto .item b { display:block; padding:0; text-align:left; color:var(--gold); font-size:1.2vw; margin:1vw 0 .3vw 0; line-height:140%; } .productblock-auto .item p { display:block; padding:0; text-align:left; color:#666; font-size:.9vw; margin:0; line-height:140%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; height:5em; } .productblock-auto .item p span { display:inline; } /*.productblock-auto .item:hover .img img.thumb { opacity:0; } .productblock-auto .item:hover .img img.cover { opacity:1; transform:translate(-50%,-50%) scale(1); } .productblock-auto .item:hover .img .btnset { opacity:1; } .productblock-auto .item:hover p { xxxcolor:var(--gold); } .productblock-auto .item:hover .img h3.enname { left:.2vw; opacity:0; } .productblock-auto .item:hover .img h3.viewmore { left:1.5vw; opacity:1; }*/ .productblock-auto .item:hover .img img.thumb { transform:translate(-50%,-50%) scale(1.05); } .productblock.slider { display:block!important; position:relative; height:20vw; overflow:visible; margin-bottom:8vw; } .productblock.slider:after { display:none; } .productblock.slider .nav { text-align:center; width:20em; border-top:1px solid var(--gold); transform:translateX(-50%); position:relative; } .productblock.slider .nav a { text-align:center; width:3em; height:0; border-top:2px solid var(--gold); position:absolute; top:0; left:0; transition:all .3s; } .productblock.slider .row { overflow:hidden; display:block; width:100%; height:100%; position:absolute; top:0; left:0; } .productblock.slider .mask { display:flex; width:300vw; padding:0; position:absolute; top:0; left:0; width:100%; flex-wrap:wrap; } .productblock.slider .item { display:inline-block; width:16.5vw; display:block; width:25%; } .productblock.slider .item .img {} .productblock.slider .btn-prev, .productblock.slider .btn-next { cursor:pointer; margin:0; overflow:hidden; border-radius:50%; position:absolute; top:40%; transform:translateY(-50%)!important; width:70px; height:70px; } .productblock.slider .btn-prev .arrow, .productblock.slider .btn-next .arrow { display:block; width:70%; height:70%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:.3; background-image:url(../images/icon-all.svg); background-size:500%; background-position:-200% -100%; } .productblock.slider .btn-prev .arrow { background-position:-175% -100%; } .productblock.slider .btn-prev { left:-6vw; } .productblock.slider .btn-next { right:-6vw; } .productblock.slider .btn-prev:hover .arrow, .productblock.slider .btn-next:hover .arrow { opacity:.5; } .productblock.slider .circle {} .productblock.slider .circle .counter { text-align:center; position:absolute; width:60px; font-size:1em; font-weight:bold; top:30px; transform:translateY(-50%); } .productblock.slider .circle svg { display:block; position:relative; /*position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);*/ } .productblock.slider .circle svg xxxcircle { r:48%; cx:50%; cy:50%; } .productblock.slider .circle svg.timer_circle { z-index:2; position:relative; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); } .productblock.slider .circle svg.dummy_circle { position:absolute; left:0; top:0; z-index:1; } .productblock.slider .nav { position:absolute; left:50%; top:100%; z-index:11; } .productauto { position:relative; } .productauto .vertical { left:8.4vw; top:5vw; } .productauto .navpage { width:60px; color:#888; } .autocounter { position:absolute; left:4vw; top:20vw; text-align:center; } .autocounter .counter { display:none; } .autocounter .btn-prev, .autocounter .btn-next { cursor:pointer; margin:.8em 0; overflow:hidden; border-radius:50%; } .autocounter .btn-prev .arrow, .autocounter .btn-next .arrow { display:block; width:70%; height:70%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); opacity:.3; background-image:url(../images/icon-all.svg); background-size:500%; background-position:-200% -100%; } .autocounter .btn-prev .arrow { background-position:-175% -100%; } .autocounter .btn-prev:hover .arrow, .autocounter .btn-next:hover .arrow { opacity:.5; } .autocounter .circle { display:block; position:relative; width:60px; height:60px; } .autocounter .circle .counter { text-align:center; position:absolute; width:60px; font-size:1em; font-weight:bold; top:30px; transform:translateY(-50%); } .autocounter .circle svg { display:block; position:relative; /*position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);*/ } .autocounter .circle svg xxxcircle { r:48%; cx:50%; cy:50%; } .autocounter .circle svg.timer_circle { z-index:2; position:relative; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); } .autocounter .circle svg.dummy_circle { position:absolute; left:0; top:0; z-index:1 } .circle_animation { stroke-dasharray:164; /* this value is the pixel circumference of the circle */ stroke-dashoffset:164; transition:all 8s linear; stroke:var(--gold); } .detailblock { display:block; padding:1vw; } .detailblock:nth-child(1) { padding-left:0; } .detailblock:nth-child(2) { padding:1vw 0 1vw 2vw; } .detailblock >span { font-size:.9em; } .detailblock >h3 { font-size:2em; color:var(--gold); } .detailblock .titleselect { display:block; margin:1.5vw 0; width:calc(100% + 2em); margin-left:-1em; cursor:pointer; transition:all .3s; height:5vw; z-index:50; } .detailblock .titleselect:after { content:''; display:block; width:2vw; height:3vw; position:absolute; top:1vw; right:.5vw; transform:translate(-50%,-50%); background:url(../images/icon-all.svg); background-size:500%; background-position:25% 50%; transition:all .2s; } .detailblock .titleselect:hover:after { top:1.5vw; } .detailblock .titleselect .mask { display:block; position:absolute; top:0; left:0; } .detailblock .titleselect .item { display:none; padding:1em; transition:all .2s; } .detailblock .titleselect .item:last-child { border-bottom:0; } .detailblock .titleselect .item.selected { display:block; border-bottom:0; } .detailblock .titleselect .item h3 { margin:0; margin-bottom:.3em; } .detailblock .titleselect .item b { font-size:1.2em; margin:0; } .detailblock .titleselect.open {} .detailblock .titleselect.open .mask { width:100%; padding:0 1em; } .detailblock .titleselect.open .item { display:block; margin:.5em; background:white; box-shadow:0 10px 20px rgba(0,0,0,.2); } .detailblock .titleselect.open .item:hover { background:#fdfdfd; } .detailblock .titleselect.open .item.selected { background:var(--gold)!important; color:white; } .detailblock .titleselect.open .item.selected h3, .detailblock .titleselect.open .item.selected b { color:white; } .detailblock .titleselect.open:after { display:none; } .detailblock hr { display:block; margin:1.5vw 0; } .detailblock .ordercontrol { display:flex; margin-bottom:1.5vw; } .detailblock .ordercontrol .rednote { color:red; } .detailblock .ordercontrol .countset { display:block; text-align:center; width:35%; xxxpadding:1.2em; background:white; position:relative; } .detailblock .ordercontrol .countset p { display:block; text-align:center; line-height:1; padding:0 0 .5em 0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .detailblock .ordercontrol .countset p span { display:inline-block; } .detailblock .ordercontrol .countset p.editmode { border:1px solid blue; } .detailblock .ordercontrol .countset .btn-min, .detailblock .ordercontrol .countset .btn-add { display:block; transition:all .2s; width:2em; height:2em; position:absolute; top:50%; transform:translateY(-50%); } .detailblock .ordercontrol .countset .btn-min { left:1vw; } .detailblock .ordercontrol .countset .btn-add { right:1vw; } .detailblock .ordercontrol .countset .btn-min:after, .detailblock .ordercontrol .countset .btn-add:before, .detailblock .ordercontrol .countset .btn-add:after { display:block; width:13px; height:3px; xxfont-size:2em; color:#aaa;background:#aaa; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .detailblock .ordercontrol .countset .btn-min:after { content:'-';content:''; } .detailblock .ordercontrol .countset .btn-add:before { content:'-';content:''; transform:translate(-50%,-50%) rotate(90deg); } .detailblock .ordercontrol .countset .btn-add:after { content:'+';content:''; } .detailblock .ordercontrol .countset .btn-min:hover, .detailblock .ordercontrol .countset .btn-add:hover {} .detailblock .ordercontrol .countset .btn-min:hover:after, .detailblock .ordercontrol .countset .btn-add:hover:before, .detailblock .ordercontrol .countset .btn-add:hover:after { color:var(--gold); background:var(--gold); } .detailblock .ordercontrol .btn-addcart { display:block; width:65%; background:var(--gold); padding:1.2em; text-align:center; color:white; margin:0; } .detailblock .ordercontrol .btn-addcart.full { width:100%; } .detailblock .ordercontrol .btn-addcart.disabled { background:#aaa; pointer-events:none; opacity:.5; border:0; } .detailblock .thumblarge { height:30vw; background:white; border-radius:.5vw; position:relative; } .detailblock .thumblarge:before { content:''; display:block;display:none; height:10vw; width:100%; z-index:21; background:linear-gradient(0deg, #32290e7d 0%, rgb(108 86 66 / 45%) 38%, rgba(255,255,255,0) 100%);; position:absolute; bottom:0; left:0; opacity:.5; } .detailblock .thumblarge h3 { color:var(--gold); color:white; font-size:2.4vw; font-size:2.4vw; width:80%; position:absolute; bottom:1.2vw; left:2vw; letter-spacing:0; z-index:25; display:none; } .detailblock .thumblarge .stamp { display:block; width:6em; height:6em; background-image:url(../images/stamp.svg); background-size:contain; background-repeat:no-repeat; position:absolute; bottom:0; left:.8em; z-index:25; } .detailblock .thumbrow { width:calc(100% + 2em); margin-left:-1em; padding:.5em; display:flex; flex-wrap:wrap; } .detailblock .thumbrow a { display:inline-block; border:2px solid transparent; transition:all .2s; width:calc(33.33% - 1em); width:calc(16.66% - 1em); margin:.5em; } .detailblock .thumbrow a.selected { border:2px solid var(--gold); } .detailblock .thumbrow a img { display:block; width:100%; height:8vw; height:4vw; object-fit:cover; } .note { font-size:.88em; line-height:1.6; color:#888; } .note .title { font-size:1.3em; color:#333; padding:.1em .3em; margin:1.2em 0 .5em 0; display:block; background:var(--gold); color:white; } .note .gold { color:var(--gold); display:inline-block; } .detailcon .inline-block { display:inline-block; } .detailcon .ingredientobj { display:inline-block; text-align:left; padding-bottom:0; } .detailcon .ingredient { display:inline-block; line-height:1; font-size:.9em; padding:.3em .9em; color:white; margin-right:0; text-align:center; } .detailcon .ingredient .icon { display:inline-block; width:1em; height:1em; width:1.5em; height:1.5em; transform:translate(-.2em,-.1em); background-image:url(../icon/icon-ingredient.svg); background-size:500%; background-position:center; position:relative; top:auto; left:auto; vertical-align:middle; xxxdisplay:none; } .detailcon .ingredient .icon.icon-mundbean { background-position:25% 25%; } .detailcon .ingredient .icon.icon-pork { background-position:25% 0; } .detailcon .ingredient .icon.icon-saseme { background-position:0 0; } .detailcon .ingredient .icon.icon-peanut { background-position:100% 0; } .detailcon .ingredient .icon.icon-gluten { background-position:50% 25%; } .detailcon .ingredient .icon.icon-nut { background-position:0 25%; } .detailcon .ingredient .icon.icon-dairy { background-position:75% 0; } .detailcon .ingredient .icon.icon-egg { background-position:50% 0; } /* 芝麻 芋頭 蔓越莓 白豆 綠豆餡 松子 蜜橙皮 黑豆 滷肉(豬肉) 棗泥餡 麥芽糖 鳳梨醬 咖哩 紅豆餡 椰子粉 花生 香菇 蛋 蔓越莓 杏仁果 奶油 蛋黃 牛奶 麻糬 */ .detailcon .ingredient.gold { background:var(--gold); background:rgba(0,0,0,.6); } .detailcon .ingredient.black { background:#4e4d4b; } .detailcon .ingredient.red { background:#ea6056; } .detailcon .imgobj { margin:1em 0; } .detailcon .imgobj img { display:block; width:100%!important; height:auto!important; position:relative!important; top:auto!important; left:auto!important; transform:none!important; } .topmenu { display:block; transform:translateY(-100%); position:fixed; top:0; left:0; z-index:100; width:100%; height:6vw; padding:1vw; text-align:center; background:white; transition:all .2s; overflow:hidden; } .topmenu .mask { display:block; position:absolute; top:50%; left:22vw; transform:translateY(-50%); z-index:100; width:auto; padding:1vw; text-align:left; background:white; transition:all .2s; } .topmenu .mask a { display:inline-block; color:#333; opacity:.5; padding:.8vw; transition:all .2s; font-size:1em; } .topmenu .mask a.selected { color:var(--gold); opacity:1; } .topmenu.open { transform:translateY(0); } .lang-en .topmenu .mask, .lang-ja .topmenu .mask { width:100%; } .scheduletable { display:table; width:auto; border-collapse:collapse; } .scheduletable tr { width:100%; } .scheduletable th { display:table-cell; width:9vw; vertical-align:top; font-weight:800!important; text-align:left; } .scheduletable td { display:table-cell; vertical-align:top; width:29vw; } .scheduletable tr th, .scheduletable tr td { border-bottom:1px solid #ccc; padding:.5em 0; } .scheduletable tr:last-child th, .scheduletable tr:last-child td { border-bottom:0; } .termsblock { display:block; margin:1em 0; background:white; padding:2em; xxxborder:1px solid #ccc; overflow-y:scroll; min-height:26vw; height:50vh; } .termsblock * {} .qualityset { padding:.5em 0; border:1px solid #ccc; border-left:0; border-right:0; margin-bottom:1em; } .qualityset .item { display:block; min-height:80px; height:auto; padding-left:85px; position:relative; vertical-align:middle; font-size:.9em; } .qualityset .item img { width:70px; height:70px; position:absolute; top:5px; left:0; } .qualityset .item h3 { font-size:1.1em; margin:0; margin-bottom:.3em; vertical-align:middle; padding-top:1.2em; max-width:calc(100% - 7.5em); color:#333!important; } .qualityset .item p { margin:0; vertical-align:middle; line-height:1; max-width:calc(100% - 150px); color:#888; } .qualityset .item p span.red { color:var(--orange); } .qualityset .item.disabled span.red { display:block; margin-top:-.7em; color:#c29868!important; } .qualityset .item.giftbox h3 { padding-top:1em; } .qualityset .item.giftbox p { padding-top:.5em; padding-bottom:.5em; } .qualityset .item.giftbox.noimg { padding-left:0; } .qualityset .item .control { display:block; height:80%; position:absolute; top:50%; right:0; background:white; width:120px; transform:translateY(-50%); } .qualityset .item .control .countset { display:flex; align-items:center; justify-content:center; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; } .qualityset .item .control .countset p { display:block; text-align:center; max-width:calc(100% - 4em); line-height:1; padding:0; /*position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);*/ } .qualityset .item .control .countset p span { display:inline-block; vertical-align:middle; } .qualityset .item .control .countset p input[type="text"] { vertical-align:middle; display:inline-block; width:4em; min-width:4em; background:transparent; text-align:center; } .qualityset .item .control .countset p input[type="text"].editmode { width:3em; background:white; border:1px solid orange; } .qualityset .item .control .countset .btn-min, .qualityset .item .control .countset .btn-add { display:block; transition:all .2s; width:2em; position:relative; height:2em; /*position:absolute; top:50%; transform:translateY(-50%);*/ cursor:pointer; z-index:14; } .qualityset .item .control .countset .btn-min { xxxleft:.3vw; } .qualityset .item .control .countset .btn-add { xxxright:.3vw; } .qualityset .item .control .countset .btn-min:after, .qualityset .item .control .countset .btn-add:before, .qualityset .item .control .countset .btn-add:after { display:block; width:13px; height:3px; font-size:2em; color:#aaa;background:#aaa; line-height:1; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; } .qualityset .item .control .countset .btn-min:after { content:'–';content:''; xxtransform:translateX(-.2em); } .qualityset .item .control .countset .btn-add:after { content:'+';content:''; xxxtransform:translateY(-.18em); } .qualityset .item .control .countset .btn-add:before { content:'-';content:''; transform:translate(-50%,-50%) rotate(90deg); } .qualityset .item .control .countset .btn-min:hover, .qualityset .item .control .countset .btn-add:hover {} .qualityset .item .control .countset .btn-min:hover:after, .qualityset .item .control .countset .btn-add:hover:before, .qualityset .item .control .countset .btn-add:hover:after { color:var(--gold);background:var(--gold); } .qualityset .containlist { padding-top:1.5em; } .qualityset .containlist .list { display:flex; width:calc(100% + 1em); margin-top:-1em; margin-left:-.5em; } .qualityset .containlist .list .item { display:block; width:calc(16.66% - 1em); margin:.5em; background:white; height:4.2vw; position:relative; padding:0; cursor:pointer; opacity:.5; transition:all .3s; overflow:hidden; } .qualityset .containlist .list .item span { display:block; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .qualityset .containlist .list .item img { display:block; width:100%; position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); transition:all .3s; } .qualityset .containlist .list .item:hover { opacity:1; } .qualityset .containlist .list .item.selected { opacity:1!important; } .qualityset .containlist .list .item.selected span { display:none; } .qualityset .containlist .selectlist { display:block; width:100%; margin-top:-1em; } .qualityset .containlist .selectlist .item { display:block; padding:0; height:auto; } .qualityset .containlist .selectlist .item select { display:block; width:100%; height:4em; margin:.2em 0; background:white; position:relative; padding:0 1em; cursor:pointer; transition:all .3s; overflow:hidden; border:0; -webkit-appearance:none; -moz-appearance:none; appearance:none; } .qualityset .containlist .selectlist .item select:focus { outline:none; } .qualityset .containlist .selectlist .item:after { content:''; display:block; width:1.3em; height:1.3em; position:absolute; top:50%; right:1.3em; opacity:.4; transform:translateY(-50%); background-image:url(../images/icon-all.svg); background-size:500%; background-position:25% 25%; pointer-events:none; } .giftboxlist { width:80vw; } .giftboxlist h2 { text-align:center; font-size:1.2em; margin-bottom:2em; } .giftboxlist h2 span { display:inline-block; } .giftboxlist .list { display:flex; flex-wrap:wrap; margin:0 2em; } .giftboxlist .list .item { display:block; margin:1em; padding-top:8vw; width:calc(16.666% - 2em); text-align:center; color:var(--gold); cursor:pointer; transition:all .2s; } .giftboxlist .list .item img { display:block; width:100%; position:absolute; top:45%; left:50%; transform:translate(-50%,-50%); transition:all .3s; } .giftboxlist .list .item h3 { text-align:left; color:var(--gold); } .giftboxlist .list .item h3:after { content:''; display:inline-block; width:0; height:0; vertical-align:middle; border-top:1px solid var(--gold); transition:all .3s; margin-left:.5em; } .giftboxlist .list .item:hover img { transform:translate(-50%,-50%) scale(1.1); } .giftboxlist .list .item:hover h3:after { width:3em; } @media device-width, screen and (max-width:1420px) and (min-width:1221px) { /*.productauto .navpage { width:100%; } .autocounter { left:0; bottom:4vw; } .autocounter .circle { display:inline-block; position:relative; width:60px; height:60px; margin:.5em; }*/ } @media device-width, screen and (max-width:1220px) and (min-width:641px) { .productblock.slider .btn-prev, .productblock.slider .btn-next { top:50%; width:40px; height:40px; } .productblock.slider .btn-prev { display:none; } .productblock.slider .btn-next { right:-4.5vw; } .productblock .item .img { height:18vw; } .productauto .navpage { width:100px; text-align:left!important; display:inline-block; vertical-align:middle; padding:.5em; } .autocounter { left:2vw; top:27vw; width:100%; text-align:left; vertical-align:middle; } .autocounter .circle { xxxdisplay:inline-block; position:relative; width:40px; height:40px; margin:.3em; vertical-align:middle; } } @media device-width, screen and (max-width:640px) { .productauto .navpage { display:inline-block; vertical-align:middle; width:auto; text-align:left; display:inline-block; vertical-align:middle; padding:.5em; } .autocounter { position:relative; left:auto; bottom:auto; text-align:left; vertical-align:middle; margin:1em 0; } .autocounter .circle { display:inline-block; position:relative; width:40px; height:40px; margin:.3em; vertical-align:middle; } .termsblock { height:80vh; } } @media device-width, screen and (max-width:1220px) and (min-width:641px) { .topmenu { height:60px; } .topmenu .mask a { padding:1em; } .productblock-auto .item b { font-size:1.2em; } .productblock-auto .item p { font-size:.9em; } .qualityset .item { padding-left:80px; } .qualityset .item .control { width:100px; } } @media device-width, screen and (max-width:960px) and (min-width:641px) { .productdetail .flex { display:block; } .detailblock { width:100%!important; } .detailblock:nth-child(2) { padding:1em 0; } .detailblock hr { margin:1.5em 0; } .detailblock .thumblarge { height:65vw; } .detailblock .thumbrow a img { height:10vw; } .detailblock .ordercontrol { margin-bottom:1.5vw; } .productblock.slider .item { height:22vw; } .productblock.slider .item .img { height:80%; } } @media device-width, screen and (max-width:1024px) and (min-width:641px) { .product-title1 { position:relative; bottom:auto; left:auto; } .productauto { padding:0; } .productauto .vertical { position:relative; left:1.1em; top:auto; transform:none!important; } .productblock { width:calc(100% + 2em); margin-left:-1em; } .productblock:after { width:calc(100% - 2em); margin-left:1em; } .productblock.slider { height:auto; } .productblock.slider .row { position:relative; } .productblock.slider .mask { width:auto; position:relative; } .productblock.slider .item { display:inline-block; width:50%; margin-bottom:1em; } .productblock.slider .btn-prev, .productblock.slider .btn-next { display:none!important; } .productblock-auto { transform:none; margin:3em; height:120vw!important; padding:3em; flex-wrap:wrap; } .productblock-auto .item { display:inline-block; width:50%; margin:.5em auto; } .productblock-auto .item .corner { width:4em; height:4em; } .productblock-auto .item .img { display:block; width:100%; height:30vw; border-radius:3em .3em .3em .3em; } .productblock-auto .item .img .twvertical { font-size:1.7em; } .productblock-auto .item .img h3.twvertical { top:1em; right:1em; font-size:2.3em; } .productblock-auto .item .img h3.enname, .productblock-auto .item .img h3.viewmore { font-size:1.4em; bottom:.5em; left:1.5em; } .productblock-auto .item b { font-size:1.2em; margin:1em 0 .3em 0; } .productblock-auto .item p { font-size:.9em; } .productauto .autocounter { top:7.5em; left:0; width:30em; transform:none; z-index:66; text-align:center; } .productauto .autocounter p { display:block; text-align:center; } } @media device-width, screen and (max-width:640px) { .product-title1 { position:relative; bottom:auto; left:auto; } .productauto { padding:0; z-index:18; } .productauto .vertical { position:relative; left:0; top:auto; } .productblock { width:calc(100% + 2em); margin-left:-1em; } .productblock:after { width:calc(100% - 2em); margin-left:1em; } .productblock .item.new:before { width:3em; height:3em!important; top:1em; left:.5em; } .productblock.slider { height:auto; } .productblock.slider .row { position:relative; } .productblock.slider .mask { width:auto; position:relative; } .productblock.slider .item { display:inline-block; width:50%; margin-bottom:1em; } .productblock.slider .btn-prev, .productblock.slider .btn-next { display:none!important; } .productblock-auto { transform:none; padding:0; display:block; height:340vw; } .productblock-auto .item { display:inline-block; width:100%; margin-bottom:1em; } .productblock-auto .item .corner { width:4em; height:4em; } .productblock-auto .item .img { display:block; width:100%; height:70vw; border-radius:3em .3em .3em .3em; } .productblock-auto .item .img .twvertical { font-size:1.7em; } .productblock-auto .item .img h3.twvertical { top:.7em; right:.7em; font-size:2.3em; } .productblock-auto .item .img h3.enname, .productblock-auto .item .img h3.viewmore { font-size:1.7em; bottom:.7em; left:1.2em; } .productblock-auto .item b { font-size:1.2em; margin:1em 0 .3em 0; } .productblock-auto .item p { font-size:1em; } .qualityset .item { padding-left:80px; } .qualityset .item .control { width:100px; } .qualityset .item .control .countset .btn-min { width:1.5em; } .qualityset .containlist .list { flex-wrap:wrap; } .qualityset .containlist .list .item { width:calc(33.33% - 1em); height:27vw; } .giftboxlist { width:90vw; } .giftboxlist h2 { font-size:1em; margin-bottom:1em; } .giftboxlist .list { margin:0; } .giftboxlist .list .item { margin:.5em; padding-top:22vw; width:calc(33.33% - 1em); } .giftboxlist .list .item img { top:11vw; } .productdetail { padding-top:100vw!important; } .detailblock:nth-child(2) { padding:1em 0; } .detailblock hr { margin:1.5em 0; } .detailblock .thumblarge { width:100vw; height:50vw; position:absolute; top:-107vw; left:-2em; border-radius:0; } .detailblock .thumblarge:before { height:10em; } .detailblock .thumblarge h3 { font-size:2em; bottom:1em; left:1.1em; } .detailblock .thumbrow {} .detailblock .thumbrow a img { height:8vw; } .detailblock .ordercontrol { margin-bottom:1.5vw; } .detailblock .titleselect { margin:1.5em 0; width:calc(100% + 2em); margin-left:-1em; height:5em; } .detailblock .titleselect:after { width:2em; height:2em; top:50%; right:.5em; } .detailcon .ingredientobj { width:100%; } .detailcon .ingredientobj .inline-block { display:flex; flex-wrap:wrap; width:100%; } .detailcon .ingredient { xxxxwidth:calc(33.33% - .4em); } .detailcon .ingredient .icon { xxxmargin-right:.3em; } .detailcon p { text-align:justify; } .productdetail .flex { display:block; } .topmenu { width:100%; display:none; } .mobile-totop { margin-top:5em!important; } .scheduletable { display:block; width:100%; } .scheduletable tr { display:block; width:100%; } .scheduletable th { width:25vw; } .scheduletable td { width:auto; } } /* _ _ ___| |_| |_ ___ _ _ ___ / _ \ _| ' \/ -_) '_(_-< \___/\__|_||_\___|_| /__/ */ .newsblock, .container .row.newsblock { display:block; flex-wrap:wrap; margin-top:4em; } .newsblock .item { display:block; box-sizing:border-box; width:100%; padding:2em 0; text-align:left; position:relative; padding-left:20%; border-top:1px solid rgba(50,50,50,.2); } .newsblock .item .date { display:block; position:absolute; top:2em; left:0; opacity:.8; font-size:1.1em; } .newsblock .item strong.title { font-size:1.5em!important; color:var(--gold)!important; font-weight:bold!important; } .newsblock .item p { display:block; xxxxxpadding:1em 0; padding:0!important; } .newsblock .item img { display:block; max-width:100%; margin:.5em 0; } .newsblock .item h5 { line-height:150%; } .privacyblock, .container .row.privacyblock { padding-top:3em; padding-bottom:8vw; } .privacyblock h5 { display:block; margin:1em 0; padding-top:1.5em; font-size:1.4em; xxxcolor:var(--gold); border-top:1px solid #ccc; } .privacyblock h5:first-of-type { border-top:0; } .privacyblock p { text-align:justify; } .privacyblock ul { display:block; margin:1em 0; } .privacyblock li {} .aboutimg {} .aboutimg .imgobj { transform:translateX(-8vw); border-radius:.4em; width:100%; height:18vw; } .aboutcon { padding:8vw; margin:0 2vw; } .aboutcon .number { position:absolute; line-height:1em; top:0; left:4vw; color:white; font-size:10vw; } .aboutcon .number img { display:block; width:14em; height:auto; } .aboutcon .col { padding:4vw; xxxpadding-left:14vw; padding-right:0; font-size:1.1em; overflow:visible; } .aboutcon .col h3 { position:relative; } .aboutcon .col h3 span { color:inherit; font-size:.9em; } .aboutcon .col h3:before { content:''; display:block; width:5vw; height:0; border-bottom:1px solid var(--gold); position:absolute; top:1vw; left:-6vw; } .shutitle { display:inline-block; width:8vw; height:auto; transform:translateY(1em); margin-right:.5em; } .informationblock { padding:4vw; xxxbackground:var(--gold); color:white; } .informationblock * { xxcolor:white; } .mapblock { overflow:hidden; position:relative; } .mapblock .map { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:block; xxxwidth:100%; } .Explain, #BlockStore { padding-top:3em; } @media device-width, screen and (max-width:1640px) and (min-width:1221px) { .aboutimg .imgobj { transform:none; xxxheight:21vw; } .aboutcon { padding:4vw 8vw; } .aboutcon .number { left:4vw; } .aboutcon .col { padding:4vw; } } @media device-width, screen and (max-width:1220px) and (min-width:641px) { .aboutimg .imgobj { transform:none; width:100%; height:36vw; } .aboutcon { padding:4vw; } .aboutcon .number { left:4vw; } .aboutcon .number img { width:8em; } .aboutcon .col { padding:2vw; padding-left:4vw; padding-bottom:4vw; } } @media device-width, screen and (max-width:640px) { .imgheader { height:50vh; } .imgobj { min-height:50vh; } .detailcon .imgobj { min-height:auto!important; } .productblock .item { width:50%; padding:.5em; } .productblock .item .img { height:36vw; } .newsblock .item { width:100%; padding-left:0; } .newsblock .item .date { position:relative; top:auto; } .newsblock .item .img { height:32vw; } .aboutimg .imgobj { transform:none; width:100%; height:50vw; min-height:30vw; margin:1em 0; } .aboutcon .row { position:relative; padding-top:64vw; padding-bottom:2em; } .aboutcon .row .col { padding-top:2em!important; position:relative; } .aboutcon .row .aboutimg { position:absolute; top:0; left:0; } .aboutcon .number { left:0; top:.5em; font-size:5em; } .aboutcon .number img { width:2em; } .aboutcon .col { padding:2em 0; } .shutitle { width:4em; margin-right:.2em; } .mapblock { padding:0; height:80vw!important; padding-bottom:2em; } .informationblock { padding:2em; } } /* _ __ __ _ _ _| |_ / _/ _` | '_| _| \__\__,_|_| \__| */ select { padding:1em; border:1px solid #ccc; } .quickorderset, .container .row.quickorderset { display:flex; flex-wrap:wrap; /*max-width:calc(100% - 16vw); margin:0 auto;*/ margin:2em 0; width:calc(100% + 5em); margin-left:-2.5em; } .quickorderset .item { display:block; box-sizing:border-box; width:33.33%; position:relative; margin-left:-1px; margin-top:-1px; padding:2.5em; } .quickorderset .item .thumb { display:inline-block; vertical-align:middle; width:60px; height:60px; margin-right:.5em; object-fit:cover; background:#333; position:relative; overflow:hidden; } .quickorderset .item .cattitle { font-size:1.1em; xxxborder-bottom:1px solid #ccc; margin-bottom:.5em; padding:.5em 0; font-weight:bold; display:block; cursor:pointer; background:var(--orange);background:#999; color:white; padding:.6em .8em; } .quickorderset .item .cattitle:hover { background:#666; } .quickorderset .item .cattitle:after { content:''; display:block; border-bottom:1px solid #ccc; margin:0; padding:0; height:0; display:none; } .quickorderset .item .info { display:flex; flex-wrap:wrap; text-align:left; vertical-align:middle; margin:1.5em 0; align-items:center; xxxxpadding-right:80px; } .quickorderset .item .info p { font-size:.9em; width:calc(100% - 80px); position:relative; margin:0!important; padding:.2em 0; cursor:pointer; display:block; line-height:1.3em; } .quickorderset .item .info p:hover { text-decoration:underline; } .quickorderset .item .info p .star { xxxposition:absolute; xxxtop:0; } .quickorderset .item .info input { border:0; border-radius:0; xxxfont-size:1.3em; font-weight:bold; padding:.1em .4em; width:80px; color:var(--gold); text-align:center; } .quickorderset .item .info .price { display:inline-block; width:80px; padding:.2em 0; text-align:right; font-weight:bold; vertical-align:middle; } .quickorderset.full .item { width:100%; } .quickorderset .item.selected .cattitle:after { content:''; display:inline-block; display:none; margin-left:.5em; width:1.8em; height:1.8em; overflow:hidden; background-image:url(../images/icon-all.svg); background-size:500%; background-position:25% 50%; vertical-align:middle; /*position:absolute; top:0; right:0;*/ } .quickorderset .item.selected .cattitle { font-weight:bold; color:var(--gold); } .quickorderset .item .control---BAK { display:block; position:absolute; top:50%; right:0; background:white; width:80px; height:100%; transform:translateY(-50%); } .quickorderset .item .control { display:block; background:white; width:100%; height:2em; } .quickorderset .item .control .countset { display:block; height:100%; text-align:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; } .quickorderset .item .control .countset p { display:block; text-align:center; width:100%; line-height:1; padding:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .quickorderset .item .control .countset p span { display:inline-block; vertical-align:middle; } .quickorderset .item .control .countset p input[type="text"] { vertical-align:middle; display:inline-block; width:3em; min-width:2em; background:transparent; text-align:center; } .quickorderset .item .control .countset p input[type="text"].editmode { width:3em; background:white; border:1px solid orange; } .quickorderset .item .control .countset .btn-min, .quickorderset .item .control .countset .btn-add { display:block; transition:all .2s; width:2em; height:2em; position:absolute; top:50%; transform:translateY(-50%); z-index:12; } .quickorderset .item .control .countset .btn-min { left:0; } .quickorderset .item .control .countset .btn-add { right:0; } .quickorderset .item .control .countset .btn-min:after, .quickorderset .item .control .countset .btn-add:before, .quickorderset .item .control .countset .btn-add:after { display:block; width:13px; height:3px; xxfont-size:2em; color:#aaa;background:#aaa; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .quickorderset .item .control .countset .btn-min:after { content:'-';content:''; } .quickorderset .item .control .countset .btn-add:before { content:'-';content:''; transform:translate(-50%,-50%) rotate(90deg); } .quickorderset .item .control .countset .btn-add:after { content:'+';content:''; } .quickorderset .item .control .countset .btn-min:hover, .quickorderset .item .control .countset .btn-add:hover {} .quickorderset .item .control .countset .btn-min:hover:after, .quickorderset .item .control .countset .btn-add:hover:before, .quickorderset .item .control .countset .btn-add:hover:after { color:var(--gold);background:var(--gold); } .quickorderset .item .info p { display:block; width:100%; margin:.4em 0; padding-right:140px; } .quickorderset .item .info .price { display:block; width:100%; text-align:left; } .quickorderset .item .control { width:120px; position:absolute; top:0; right:0; } .savetime { font-size:2em; } .floatselect { display:block; position:fixed; bottom:0; right:7.5vw; padding:0; opacity:1; transition:all .3s; width:calc(100% - 7.5vw); background:#333; xxxz-index:2999; } .floatselect .box { display:flex; margin:1em auto; justify-content:center; } .floatselect .box .item { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:1em; text-align:center; border-radius:2px; padding:.8em 1.5em; border:1px solid #555; margin:0; overflow:hidden; margin:.1em; background:#333; } .floatselect .box .item span { color:white; display:block; margin-right:.5em; } .floatselect .box .item strong { display:block; font-size:1em; color:white; top:auto!important; } .floatselect .box .item.btn-addtocart, .floatselect .box .item.btn-checkout { cursor:pointer; background:var(--gold); } .floatselect .box .item.btn-addtocart:hover, .floatselect .box .item.btn-checkout:hover { background:var(--orange); } .floatselect .box .item.btn-addtocart span, .floatselect .box .item.btn-checkout span { display:none; } .floatselect .box .item.btn-addtocart strong, .floatselect .box .item.btn-checkout strong { font-weight:normal; } .floatselect.hide { opacity:0; } .cartblock, .container .row.cartblock { display:flex; flex-wrap:wrap; margin:2em 0; } .cartblock .item { display:block; width:100%; position:relative; background:white; margin:.5em 0; align-items:center; padding:1em; padding-left:140px; min-height:100px; } .cartblock .item .thumb { display:block; vertical-align:middle; width:90px; height:90px; margin:.3em 1.5em; position:absolute; top:10px; left:0; overflow:hidden; } .cartblock .item .price { display:block; width:200px; text-align:right; vertical-align:middle; position:absolute; bottom:1em; right:2em; } .cartblock .item .price span { display:inline-block; xxxxfont-size:1.3em; vertical-align:middle; margin-left:.5em; } .cartblock .item .price span.name { display:inline-block; font-size:1em; vertical-align:middle; } .cartblock .item .count { display:block; width:130px; text-align:left; vertical-align:middle; position:absolute; bottom:1em; right:150px; } .cartblock .item .count span { display:inline-block; xxxfont-size:1.3em; vertical-align:middle; margin-left:.5em; } .cartblock .item .count span.name { display:inline-block; font-size:1em; vertical-align:middle; } .cartblock .item .info { display:block; width:calc(100% - 140px); text-align:left; vertical-align:middle; padding:0; line-height:1; } .cartblock .item .info strong { display:block; font-size:1.1em; margin:.5em 0; } .cartblock .item .info p { line-height:1.8; } .cartblock .item .info p .orange { color:#ec6d01; } .cartblock .item .control { display:block; margin-bottom:0; } .cartblock .item .control .btn { display:inline-block!important; width:2em; height:2em; padding:1em; border:1px solid var(--gold); vertical-align:middle; margin:0; } .cartblock .item .control .btn:after { display:inline; color:var(--gold); font-weight:bold; font-size:1.5em; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:none; display:block; width:1em; height:1em; line-height:1; } .cartblock .item .control .btn.btn-min:after { content:'-'; } .cartblock .item .control .btn.btn-add:after { content:'+'; } .cartblock .item .control .btn:hover:after { color:white; } .cartblock .item .control p { display:inline-block; vertical-align:middle; text-align:center; width:4em; margin:0; padding:0 .5em; } .cartblock .item .control p span { display:inline-block; width:auto; } .cartblock .item .control.disabled p { display:block; padding:0; text-align:left; } .cartblock .item.disabled .price { display:none; } .cartblock .item.disabled .thumb, .cartblock .item.disabled .info, .cartblock .item.disabled .control { opacity:.3; pointer-events:none; } .cartblock .item.disabled .control .btn { border-color:#ccc; } .cartblock .item.disabled .control .btn:after { color:#ccc; } .cartblock .item.disabled .errornote { color:#f44336; position:absolute; bottom:1em; right:1em; } .cartblock .item.list .price { text-align:right; padding-right:1em; } .cartblock .item.list .price span { display:inline; line-height:1; margin:0; vertical-align:baseline; } .cartblock .rowtotal { width:100%; text-align:right; padding:1em 2em 4em 1em; } .cartblock .rowtotal * { display:inline-block; } .cartblock .rowtotal .charges { margin-left:1em; } .cartblock .rowtotal strong { font-size:1.5em; color:var(--gold); margin-left:3em; } .cartblock .btn-remove { display:block; position:absolute; top:50%; right:1em; transform:translateY(-50%); cursor:pointer; opacity:.5; } .cartblock .btn-remove:before { content:''; width:1.5em; height:1.5em; background-image:url(../images/icon-all.svg); background-size:500%; background-position:25% 75%; display:block; position:absolute; top:50%; right:1em; transform:translateY(-50%); } .cartblock .btn-remove:hover { opacity:1; } .cartblock.orderhistory .item { padding:1em 2em; text-align:center; } .cartblock.orderhistory .item p { line-height:1.4; } .cartblock.orderhistory .item .subtitle { opacity:.7; } .cartblock.orderhistory .item .price { bottom:auto; top:2em; } .cartblock.orderhistory .item .price span { display:block; text-align:left; padding:0; margin:0; text-align:right; } .cartblock.orderhistory .item .count { bottom:auto; top:2em; } .cartblock.orderhistory .item .count span { display:block; text-align:left; padding:0; margin:0; } .cartblock.orderhistory .item .btn-more { padding:.5em 1em .5em 2em; border:1px solid #333; display:inline-block; width:auto; margin:1em auto; } .cartblock.orderhistory .item .btn-more:before { content:''; background-image:url(../images/icon-all.svg); background-size:500%; background-position:25% 25%; width:1.2em; height:1.2em; display:block; position:absolute; top:50%; left:.5em; transform-origin:center; transform:translateY(-50%); opacity:.5; } .cartblock.orderhistory .item .btn-more:hover:before { /*border:1px solid var(--gold); color:var(--gold);*/ opacity:1; } .cartblock.orderhistory .item .btn-more.open:before { transform:rotate(180deg) translateY(.6em); } .cartblock.orderhistory .item .detailinfo { display:block; margin:1em 0; border-top:1px solid #ccc; padding-top:1em; } .cartblock.orderhistory .item .detailinfo table { border-collapse:collapse; width:100%; font-size:.98em; margin:1em 0; } .cartblock.orderhistory .item .detailinfo table tr { display:table-row; } .cartblock.orderhistory .item .detailinfo table th, .cartblock.orderhistory .item .detailinfo table td { display:table-cell; xxxborder-bottom:1px solid #ccc; text-align:left; } .cartblock.orderhistory .item .detailinfo table th { width:10vw; vertical-align:top; color:#888; } .cartblock.orderhistory .item .detailinfo table td { padding-bottom:1.5em; } .cartblock.orderhistory .item .detailinfo table.OrderDetail td { padding:.2em 0; } .cartblock.orderhistory .item .detailinfo table.OrderDetail tr:first-child { border-bottom:1px solid black; } .stepblock, .container .row.stepblock { display:flex; padding:4em 0; } .stepblock .item { display:block; width:33.33%; border-bottom:2px solid #333; margin:.2em; padding:.5em 0; } .formblock { display:block; xxxbackground:#f1f2f5; padding:1em 0; margin:0; font-size:.95em; } .formblock .inputrow { display:flex; flex-wrap:wrap; margin:.5em 0; position:relative; min-height:40px; justify-content:left; } .formblock .inputrow.error { color:red; } .formblock .inputrow.error input { border-bottom:2px solid #dc3545; background:#ffd7de; } .formblock .inputrow.error .invalid-tooltip { display:block!important; } .formblock .inputrow.error .floatnote, .formblock .inputrow.error.verificationcode .invalid-tooltip { display:none!important; } .formblock .inputrow.withnote { padding-top:.8em; } .formblock .inputrow.withcalender {} .formblock .inputrow.withcalender .icon { position:absolute; top:50%; left:auto; right:1em; transform:translateY(-50%); z-index:1; } .formblock .inputrow.withcalender .iconcalender { display:block; width:1.8em; height:1.8em; background-repeat:repeat; background-image:url(../images/icon-all.svg); background-size:500%; background-position:0% 75%; } .formblock .inputrow >.btn { margin:0; } .formblock .inputrow label { display:block; width:20%; margin-top:.6em; } .formblock .inputrow label.customer { width:100%; } .formblock .inputrow >div { xxxxtext-align:left; width:80%; border:0; } .formblock .inputrow >div.reload { width:auto!important; } .formblock .inputrow >div, .formblock .inputrow >span { display:block; xxxxborder:1px solid red; } .invalid-tooltip, .invalid-feedback { display:block; position:relative!improtant; top:auto!improtant; border-radius:0!important; } .formblock .inputrow >div.invalid-tooltip { position:absolute; width:auto; padding:0; font-size:.9em; line-height:1; color:#dc3545; top:calc(100% - 2em)!important; transform:translateY(-50%); right:1em; left:auto; display:none; background:none!important; } .was-validated .formblock .inputrow:invalid~.invalid-tooltip { display:block; } .formblock .inputrow.must label:before { content:'*'; display:inline-block; color:#eb6b17; font-size:1.5em; padding:.2em .2em 0 0; } .formblock .inputrow.must.nomustsign label:before { display:none!important; } .formblock .inputrow textarea, .formblock .inputrow select, .formblock .inputrow input { display:block; width:80%; border:0; xxwidth:100%; } .formblock .inputrow .ui-input-text { width:80%; } .formblock .inputrow.full label, .formblock .inputrow.full input[type="text"], .formblock .inputrow.full input[type="email"], .formblock .inputrow.full input[type="password"] { width:100%; } .formblock .inputrow .bottomnote { width:100%; padding-top:.8em; padding-left:20%; line-height:1.4; } .formblock .inputrow .floatnote { display:block; position:absolute; top:50%; right:1em; transform:translateY(-50%); z-index:11; padding:0; opacity:.5; pointer-events:none; } .formblock .inputrow.full .floatnote { top:1.8em; } .formblock .inputrow .note { display:block; width:80%; opacity:.5; pointer-events:none; margin:1em 0; margin-left:20%; } .formblock .inputrow .note.large { opacity:1; font-size:1em; } .formblock .inputrow .addressflex { display:flex; width:80%; flex-wrap:wrap; } .formblock .inputrow .addressflex select { display:inline-block; width:50%; border:0; margin-right:.8em; } .formblock .inputrow .addressflex select:nth-child(2) { width:calc(50% - .8em); margin-right:0; } .formblock .inputrow .addressflex input { width:100%; margin-top:.8em; } .formblock .inputrow .birthdayflex { display:flex; width:80%; flex-wrap:wrap; } .formblock .inputrow .birthdayflex select { display:inline-block; width:calc(50% - .8em);width:50%; border:0; margin-right:.8em; } .formblock .inputrow .birthdayflex select:nth-child(2) { width:calc(50% - .8em); margin-right:0; } .formblock .inputrow .birthdayflex input { xxxxwidth:33.33%; } .formblock .inputrow .areaflex { display:flex; width:100%; } .formblock .inputrow .areaflex select { display:inline-block; width:calc(50% - .4em); border:0; margin-right:.8em; } .formblock .inputrow .areaflex select:focus { outline:0; } .formblock .inputrow .areaflex select:nth-child(2) { margin-right:0; } .formblock .inputrow .checkboxrow { display:block; width:100%; min-width:80%; text-align:left; } .formblock .inputrow .checkboxrow input[type="checkbox"] { display:inline-block; width:auto; margin-right:1em; } .formblock .inputrow.disabled input { background:transparent; opacity:.75; pointer-events:none; } .formblock textarea { display:inline-block; width:80%; min-height:20vw; border:0; padding:1em; } .formblock textarea.border { display:block; width:100%; min-height:40vw; border:1px solid #ccc; padding:1em; } .formblock textarea.blanknote { background:transparent; border:0; min-height:4vw; border-bottom:1px solid var(--gold); margin-bottom:1.5em; } .formblock .inputrow.disabled { margin:0; pointer-events:none; } .formblock .inputrow.disabled span { background:transparent; padding:.4em 0; opacity:.7; } .formblock .inputrow.disabled input { background:transparent; padding:0; } .formblock .full textarea { width:100%; } .formblock.whiteblock { background:white; padding:1em 2em; } .linkrow { text-align:center; padding:2em; } .linkrow .icon { display:inline-block; position:relative; top:auto; left:auto; transform:none; margin:1em; width:2em; height:2em; } .linkrow .icon.icon-fb { background-position:-6em 0; } .linkrow .icon.icon-ig { background-position:-4em 0; } .linkrow .icon.icon-yt { background-position:-8em 0; } .recieveform { margin-bottom:2em; xxxdisplay:none; } .recievelist {} .recievelist .item { display:block; position:relative; background:white; padding:1em 7em; margin-bottom:.5em; cursor:pointer; } .recievelist .item label { font-size:1.1em; opacity:.7; } .recievelist .item p { margin:0; padding-bottom:0; opacity:.7; } .recievelist .item .floatright { display:block; position:absolute; right:1.5em; top:50%; transform:translateY(-50%); } .recievelist .item .floatright a { display:inline-block; padding:.5em; opacity:.5; } .recievelist .item .floatright a:hover { text-decoration:underline; opacity:1; } .recievelist .item.selected label { color:var(--gold); } .recievelist .item.selected * { opacity:1; } .recievelist .item.selected:before { content:''; background-image:url(../images/icon-all.svg); background-size:500%; background-position:100% 25%; width:2.5em; height:2.5em; display:block; position:absolute; top:50%; left:2.2em; transform:translateY(-55%); } .popupblock-recieve { width:800px; max-width:90%; } .popupblock-recieve select, input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, .popupblock-recieve input[type="checkbox"], .popupblock-recieve input { background-color:white!important; border:0!important; -xxxxxwebkit-box-shadow:inset 0 0 0 30px white!important; } .popupblock-recieve .row.formbtn { padding-bottom:0; } .popupblock input, .popupblock select { border:1px solid #ccc!important; } .totalcount { padding:0 .5em; } @media device-width, screen and (max-width:1024px) and (min-width:641px) { .quickorderset, .container .row.quickorderset { width:calc(100% + 1em); margin-left:-.5em; } .quickorderset .item { padding:.5em; } .quickorderset .item .cattitle {} .quickorderset .item .info p { padding-right:0; } .quickorderset .item .control { width:100%; position:relative; top:auto; right:auto; } .floatselect { right:100px; width:calc(100% - 100px); } .floatselect .box .item { padding:.5em 1em; } } @media device-width, screen and (max-width:640px) { .quickorderset, .container .row.quickorderset { margin:0; width:100%; padding:0; } .quickorderset .item { width:100%; padding:0; } .floatselect { right:0; width:100%; } .floatselect .box .item { padding:.5em; font-size:.9em; } .cartblock .item { padding:1em 3em; } .cartblock .item .thumb { position:relative; top:auto; left:auto; text-align:center; margin:0 auto; } .cartblock .item .price { width:100%; position:relative; bottom:auto; right:auto; text-align:center; } .cartblock .item .control { width:100%; text-align:center; } .cartblock .item .info { width:100%; text-align:center; } .cartblock .rowtotal { width:100%; text-align:right; padding:1em 2em 4em 1em; } .cartblock .rowtotal * { display:inline-block; } .cartblock .rowtotal strong { font-size:1.5em; color:var(--gold); margin-left:3em; } .container .row.cartblock { margin:0; padding:0; } .cartblock.orderhistory .item { text-align:left; padding:2em; } .cartblock.orderhistory .item .price, .cartblock.orderhistory .item .count { bottom:auto; top:auto; position:relative; right:auto; text-align:center; width:49%; display:inline-block; } .cartblock.orderhistory .item .price { border-left:1px dotted #ccc; } .cartblock.orderhistory .item .price span, .cartblock.orderhistory .item .count span { text-align:center; } .cartblock.orderhistory .item p { text-align:left; } .cartblock.orderhistory .item strong { text-align:left; } .cartblock.orderhistory .item .btn-more { padding:.5em 2.5em; width:100%; text-align:center; } .cartblock.orderhistory .item .btn-more:before { display:none; } .cartblock.orderhistory .item .detailinfo { display:block; font-size:1.1em; margin:1em 0; border-top:1px solid #ccc; padding-top:1em; overflow:hidden; overflow-x:auto; } .cartblock.orderhistory .item .detailinfo table tr { display:block; width:100%; } .cartblock.orderhistory .item .detailinfo table th, .cartblock.orderhistory .item .detailinfo table td { display:block; width:100%; line-height:1.4; } .cartblock.orderhistory .item .detailinfo table th { xxxxfont-size:.8em; margin:.5em 0; opacity:.5; } .cartblock.orderhistory .item .detailinfo table.OrderDetail { display:table; width:100%; border:1px solid #ccc; overflow-x:scroll; } .cartblock.orderhistory .item .detailinfo table.OrderDetail th, .cartblock.orderhistory .item .detailinfo table.OrderDetail td { display:table-cell; padding:.5em; border-right:1px solid #ccc; } .cartblock.orderhistory .item .detailinfo table.OrderDetail tr { display:table-row; } .formblock.whiteblock { margin-bottom:1.5em; } .formblock .inputrow { margin:.4em 0; } .formblock .inputrow label { width:100%; opacity:1; xxxxfont-size:.8em; } .formblock .inputrow input { width:100%; padding:1em .5em; font-size:1em; color:#333; margin:.3em 0; } .formblock .inputrow select { width:100%; padding:1em .5em; } .formblock .inputrow .addressflex { width:100%; } .formblock .inputrow .birthdayflex { width:100%; } .formblock .inputrow .bottomnote { padding-left:0; } .formblock .inputrow .floatnote { top:auto; right:auto; position:relative; transform:none; } .formblock .inputrow .note { width:100%; margin-left:0; } .formblock .inputrow span { display:inline-block; } .linkrow .icon { xxxwidth:2.5em; xxxheight:2.5em; transform:scale(1.5); } .btn-print { display:none; } .recievelist .item { padding:2em 2em 0 4em; } .recievelist .item .floatright { position:relative; right:auto; top:auto; transform:none; text-align:right; } .recievelist .item.selected:before { /*left:50%; transform:translateX(-50%);*/ width:3em; height:3em; top:2.5em; left:.7em; } } /* _ _ __ ___ _ __ | |__ ___ _ _ | ' \/ -_) ' \| '_ \/ -_) '_| |_|_|_\___|_|_|_|_.__/\___|_| */ .termbox { display:block; margin:2em 0; background:white; padding:2em; height:40vw; overflow-x:hidden; overflow-y:auto; } .memberinfoblock { display:flex; flex-wrap:wrap; width:calc(100% + 1em); margin-left:-.5vw; } .memberinfoblock .item { display:block; width:calc(33.33% - 1vw); margin:.5vw; background:white; padding:1em 1.5em; } .memberinfoblock .item span { display:block; color:.9em; color:#333; } .memberinfoblock .item strong { display:block; font-size:1.5em; } .memberinfoblock .item strong.gold { color:var(--gold); } /*.fb_iframe_widget { background:#3f5da5; padding:.5em 3em; margin-left:.3em; margin-right:.4em; }*/ ._4z_b { background:transparent!important; } .g-signin2 { background:white; padding:.5em 1em; } .abcRioButton { box-shadow:none!important; } #iframe_receive { display:block; width:100vw; height:100vh; position:fixed; top:0; left:0; background:rgba(50,50,50,.8); z-index:1000; } #iframe_receive iframe { display:block; width:50vw; height:80vh; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; border:0; } @media device-width, screen and (max-width:640px) { .memberinfoblock .item { width:100%; margin:0 0 .3em 0; } #iframe_receive iframe { width:calc(100% - 2em); height:calc(100% - 2em); } #iframe_receive iframe .container { margin-top:0!important; } } /* _ | |__ _ _ _ __ _ _ _ __ _ __ _ ___ | / _` | ' \/ _` | || / _` / _` / -_) |_\__,_|_||_\__, |\_,_\__,_\__, \___| |___/ |___/ */ .lang-US { font-size:.93em; } .lang-US * { line-height:1.7; letter-spacing:0; } .lang-US .row h4 { letter-spacing:.02em; } .lang-US .shoppingset .btn-circle { letter-spacing:-.01em; } .lang-US .productblock .headerrow { margin-bottom:-.5em; } .lang-US .menuobj .conbox a span { display:none!important; } .lang-US .menuobj .conbox a { margin:1.5em 0; } .lang-US .btn, .lang-US button, .lang-US .btn .txt1, .lang-US .btn .txt2, .lang-US button .txt1, .lang-US button .txt2 { letter-spacing:.05em; text-transform:uppercase; } .lang-US .quickorderset .item .cattitle { font-size:1.2em; margin-bottom:1em; } .lang-JP { letter-spacing:-.01em; font-size:.9em; } .lang-JP h3 { font-size:1.4vw; } .ui-loader { visibility:hidden!important; display:none!important; top:-999; } * { xxxborder:1px solid red; } .productblock-auto, .container .row .col, .newsset a, .row .col, .row { xxxborder:2px dotted rgba(200,200,200,.23); } .scrollmagic-pin-spacer { pointer-events:none; } /* extra */ @media screen and (orientation:landscape) { /*overflow-y:hidden; transform:rotate(90deg) translateY(-100%); transform-origin: top left;*/ } @media print { @page { size:A4 portrait; margin:.5cm; orphans:4; widows:2; } @page:right{ @bottom-right { content: counter(page); } } * { xxxxxbreak-inside:avoid; border:1px solid white; xxpage-break-after:avoid; } table { page-break-inside:avoid; font-size:1em; } html,body { background:transparent; } html,body * { line-height:1.1!important; font-size:8pt!important; color:black!important; } html,body h1, html,body h2 { font-size:18pt!important; color:black!important; } body p { padding-bottom:0!important; } .centercon { margin:0; max-width:100%!important; padding:0!important; margin:0!important; } .centercon:first-of-type {} .bgpattern, .shoppingset, hr, .btn-totop, .linkset { display:none!important; } .header { background:transparent; box-shadow:none; xxxwidth:3cm!important; display:none; } .header .logo { width:6cm; xxxheight:auto; } .header .menucover, .header .menuicon, .header .submenu { display:none!important; } .formblock .inputrow label, .formblock .inputrow { min-height:4px!important; margin:auto; padding:0; text-align:left; } .formblock .inputrow >div, .formblock .inputrow >span { text-align:left; } .formblock .inputrow label { xxxxborder:1px solid green; } .formblock .inputrow { xxxxborder:1px solid red; width:100%; } .formblock .inputrow input { xxxxborder:2px solid orange; } .quickorderset { margin:1em 0; font-size:.9em; xxxxborder:2px solid green; } .quickorderset .item { font-size:.9em; } .quickorderset .item .info { padding-right:4.5em; } .quickorderset .item .info p { width:100%; margin:.8em 0; } .quickorderset .item .info .price { width:auto!important; } .quickorderset .item .control { border:1px solid black; width:4em; position:absolute; top:0; right:0; } .quickorderset .item .control .countset p, .quickorderset .item .control .countset .btn-min, .quickorderset .item .control .countset .btn-add { display:none; } #ShelfLife >h3 { color:white; background:black; } .cartblock, .container .row.cartblock { margin:0!important; } .cartblock .item { min-height:90px!important; border-bottom:1px dotted gray; } .cartblock .item .thumb { top:0; width:70px!important; height:70px!important; } .btn-print, .btn { display:none!important; } .footer { margin:.5cm 1cm 0 1cm!important; padding:.5cm 0 0 0!important; border-top:1px dotted gray; display:block; } .footer .centercon { padding:0!important; margin:0!important; width:auto!important; display:block; } .footer .col { display:block; } .copyright { text-align:left!important; font-size:7pt!important; } .quickorderset .item .info input { border-bottom:1px solid gray!important; } }