/* http://patorjk.com/software/taag/#p=display&f=Small&t=detail%20page */ /* ============================================================================================================ _ _ _ _ _ | |_| |_ _ __ | | | |__ ___ __| |_ _ | ' \ _| ' \| | | '_ \/ _ \/ _` | || | |_||_\__|_|_|_|_| |_.__/\___/\__,_|\_, | |__/ ============================================================================================================ */ /* color code https://www.quackit.com/css/css_color_codes.cfm DodgerBlue, DeepSkyBlue DarkOrange, Orange */ :root { --bggray:#fafcfd; --btnbggray1:#464F5B; --btnbggray2:#464F5B; --btnbggray3:#464F5B; --btnbggray4:#464F5B; --bgblue:#E0EDF8; --black:#333; --black2:#444; --black3:#555; --gaptop:60px; --border:#ccc; --blue:#0096FF; --darkblue:#00358c; --darkorange:#8c3000; --orange:#FF9B00; --red:red; --gray:#c1c2c5; --gray2:#515255; --bordertop:1px solid #ccc; --lightgray:#f1f2f5; --mbtnbackground:linear-gradient(0deg, rgba(224,227,230,.6) 18%, rgba(240,240,240,.3) 100%); --gradient:linear-gradient(90deg, rgba(189,152,98,1) 18%, rgba(177,70,70,1) 82%, rgba(20,67,114,1) 100%); --gradient3:linear-gradient(90deg, rgba(189,152,98,0) 0%, rgba(255,188,77,.5) 30%, rgba(177,70,70,1) 62%, rgba(20,67,114,1) 100%); --gradient3:linear-gradient(90deg, rgba(189,152,98,0) 0%, rgba(177,70,70,1) 62%, rgba(20,67,114,1) 100%); --gradient-green:linear-gradient(270deg, rgba(0,204,118,1) 0%, rgba(0,118,118,1) 100%); --gradbottom:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%); --transborder:.4em solid transparent; /*https://cubic-bezier.com/#0,1.45,.63,.99*/ --bezier:cubic-bezier(.14,.1,.26,1); --bezierback:cubic-bezier(0,1.45,.63,.99); --boxshadow: 0 1px 2px rgba(0,0,0,.2); --fixheadh: 92px; --loading:url(../images/loader2.svg); } body { background-color:var(--bgblue); } body.ontest:before { content:'TEST VERSION'; display:block; padding:3em 6em 1em 6em; font-size:.8em; transform:translate(-50%,-50%) rotate(-30deg); position:fixed; top:1.5em; left:3em; background:#1ee526; color:#ff5722; font-weight:bold; z-index:99999; } body.admintest:before { content:'ADMINTEST'; display:block; padding:3em 6em 1em 6em; font-size:.8em; transform:translate(-50%,-50%) rotate(-30deg); position:fixed; top:1.5em; left:3em; background:#1ee526; color:#ff5722; font-weight:bold; z-index:99998; } body .floatbox { display:block; position:fixed; left:1em; bottom:1em; box-shadow:0 1px 5px rgba(0,0,0,.3); border-radius:.5em; padding:1em 1.5em; background:black; color:white; font-size:.6em; border:1px solid var(--border); overflow-y:scroll; max-width:35em; max-height:60em; opacity:.8; display:none; } .red { color:red; } .bold { font-weight:bold; } .italic { font-style:italic; } .marginside { display:inline-block; margin:0 .12em; } .pc { display:block; } .mobile { display:none!important; } .debugger { display:none; position:fixed; top:4em; left:0; background:lightgreen; z-index:144; font-size:1em!important; padding:1em; } .noscroll { overflow:hidden; } .noscroll .overlay { display:block; } ::-webkit-scrollbar { display:none; } /* Header */ .header { display:block; width:100%; position:fixed !important; background:white; box-shadow:0; top:0; left:0; height:60px; z-index:966; } .header .topbar { display:block; background-image:url(../img/bar-gradient.jpg); background-repeat:no-repeat; background-position:top; background-size:100%; padding:0; height:4px; width:100%; position:absolute; top:0; left:0; z-index:215; } .header .logo { display:inline-block; xx-background-image:url(../img/logo-kbro.svg); background-repeat:no-repeat; background-position:center; background-size:100%; margin:0 .5em 0 1.5em; padding:0; height:100%; vertical-align:middle; width:130px; transform:translateY(.05em); } .header .estoretitle { display:inline-block; vertical-align:middle; background:#333; color:white; font-size:.85em; border-radius:1em; padding:.2em 1em; cursor:pointer; transform:translateY(.5em); display:none; } .header .addbar { display:block; width:100%; background:white; position:relative; padding:.8em 1.5em; text-align:right; border-top:1px solid #e1e2e5; box-shadow:0 2px 2px rgba(0,0,0,.2); } .header .addbar strong { display:inline-block; margin-right:1em; } .header .addbar p { display:inline-block; margin-right:1em; } .header .addbar a { display:inline-block; cursor:pointer; /*position:absolute; top:50%; right:2em; transform:translateY(-50%);*/ color:dodgerblue; font-size:.9em; font-weight:bold; } .header .addbar.hide { display:none; } .header .addbar.center { text-align:center; } .header .addbar.center .redirectcounter { color:#ff6400; font-weight:bold; } .header .addbar.center p { width:100%; margin:0 auto; } .nav { display:flex; width:auto; height:100%; position:absolute; top:50%; right:1em; transform:translateY(-50%); align-items:center; } .nav a { display:block; cursor:pointer; text-align:center; padding:1em; text-transform:uppercase; font-size:.8em; font-weight:600; letter-spacing:.03em; color:#333; text-decoration:none; vertical-align:middle; } .nav a:after { content:''; display:block; width:0; height:4px; background:var(--black); position:absolute; bottom:0; left:0; transition:all .3s; } .nav a:hover:after { width:100%; } .nav a.selected { background:#f6f6f7; } .navicon { display:none; position:absolute; top:4px; right:0; height:56px; width:60px; background:#eaecef; cursor:pointer; z-index:202; } .navicon span { display:block; width:24px; height:2px; background:var(--black); margin:0; transition:all .3s; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .navicon span:nth-child(1) { top:calc(50% - .5em); } .navicon span:nth-child(3) { top:calc(50% + .5em); } .navicon.open { background:transparent; } .navicon.open span:nth-child(1) { top:50%; transform:translate(-50%,-50%) rotate(45deg); } .navicon.open span:nth-child(2) { top:50%; transform:translate(-50%,-50%) rotate(45deg); } .navicon.open span:nth-child(3) { top:50%; transform:translate(-50%,-50%) rotate(-45deg); } .breadcrumb { display:block; z-index:40; position:absolute; top:5em; left:2em; } .breadcrumb a { display:inline-block; color:white!important; font-size:.7em; padding:.5em; cursor:pointer; } .breadcrumb a:after { content:'|'; display:inline-block; padding:0 .5em; } .footer { display:flex; box-sizing:border-box; background:var(--black); text-align:center; position:relative; color:white; padding:1em 2em; font-size:.87em; display:none; } .footer .col { position:relative; padding:0; text-align:left; vertical-align:top; width:100%; } .footer .col a { display:inline-block; width:auto; text-align:left; color:white; margin:0 .8em .5em 0; text-decoration:none; } .footer .col a.btn-social { display:inline-block; width:40px; text-align:left; } .footer .col a.btn-social img { display:block; width:40px; height:auto; } .footer .col.logoset { text-align:left; position:relative; padding:.5em .8em; } .footer .col.logoset .logo { display:block; padding:0; height:30px; } .footer .col.logoset a.btn-social { display:inline-block; text-align:left; } .footer .col.logoset a.btn-social img { display:block; width:36px; height:36px; } .footer .col.logoset .colorbar { display:block; position:absolute; width:280%; height:3px; bottom:0; top:auto; left:50; transform:translateX(-50%); background-image:url(../img/bar-gradient.jpg); background-size:cover; background-position:center; background-repeat:no-repeat; } .footer .col.sub { text-align:left; padding-top:0; padding-left:5em; } .footer .col.sub p.note { display:block; opacity:.6; } .footer .col.sub a.btn-social { display:inline-block; text-align:left; position:absolute; top:.8em; left:.8em; } .footer .col.sub a.btn-social img { display:block; width:36px; height:36px; } @media -ms-viewport, screen and (max-width:860px) { .pc { display:none!important; } .mobile { display:block!important; } .nav { xxxdisplay:none; right:0; padding:.5em 0; } .nav a { padding:.5em; } } /**/ .version-tfm .header .topbar { background:#eb5a06; } .version-tfm .header .logo { transform:translateY(0); } .version-tfm .nav a[data-id="/store/hualian"] { display:table-cell; } @media -ms-viewport, screen and (max-width:860px) { .version-tfm .nav a.btnofficialxxxx { position:fixed; top:.4em; right:.2em; } } /* OVERLAYER */ .overlay { display:none; width:100%; height:100%; background:rgba(50,50,55,.8); position:fixed; top:0; left:0; z-index:970; } .popblock { display:block; width:900px; max-width:calc(100% - 2em); height:auto; border-radius:3px; max-height:80%; background:white; z-index:971; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:0; display:none; } .popblock .btn-close { display:block; width:60px; height:60px; padding:18px; position:absolute; top:0; right:0; opacity:.5; cursor:pointer; z-index:10; } .popblock .btn-close:before { content:url(../img/icon-close.svg); display:block; width:1em; cursor:pointer; } .popblock .btn-close:hover { opacity:1; } .popblock .mask { display:block; box-sizing:border-box; z-index:6; padding:0; margin:0; position:relative; max-height:70vh; height:auto; overflow-y:scroll; } .popblock .mask .imgobj { display:block; width:400px; height:100%; padding:40px; position:absolute; top:0; left:0; } .popblock .mask .imgobj img { display:block; width:100%; } .popblock .mask .con { display:block; text-align:left; } .overlaycon { display:block; width:102vw; height:102vh; background:rgba(0,0,0,.7); z-index:978; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); padding:0; display:none; } .overlaycon:beforexxx { content:''; display:block; width:102vw; height:102vh; background:rgba(0,0,0,.7); z-index:-1; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .overlaycon small.red { display:block; width:500px; color:white; background:#a21111; padding:.5em .8em; text-align:center; margin:.8em 0; font-size:.9em; border-radius:5px; } .overlaycon .btn-close { display:block; width:60px; height:60px; padding:18px; position:absolute; top:0; right:0; opacity:.5; cursor:pointer; z-index:10; } .overlaycon .btn-close { top:calc(10vh - .2em); right:auto; left:calc(75vw - 2em); background:#333; opacity:1; z-index:1255; } .overlaycon .btn-close.topright { top:0; right:0; left:auto; } .overlaycon .btn-close:before { content:url(../img/icon-close-white.svg); display:block; width:1em; cursor:pointer; } .overlaycon .btn-close:hover { opacity:1; } .overlaycon .mask { display:block; box-sizing:border-box; z-index:6; padding:0; margin:0; position:relative; max-height:70vh; height:auto; overflow-y:scroll; } .overlaycon .mask .imgobj { display:block; width:400px; height:100%; padding:40px; position:absolute; top:0; left:0; } .overlaycon .mask .imgobj img { display:block; width:100%; } .overlaycon .con { display:block; text-align:left; padding:3em 4em; position:relative; z-index:12; width:600px; max-width:calc(100% - 2em); border-radius:3px; max-height:80%; background:white; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); overflow-y:scroll; } .overlaycon .con.large { padding:2em 3em; width:50vw; height:80vh; } .overlaycon .con.large textarea { height:100%; } .overlaycon .con ul, .overlaycon .con ol { padding:1em; } .overlaycon .con ul li, .overlaycon .con ol li { margin-left:2em; } .overlaycon .con img { display:block; max-width:100%; margin:0 auto; } .overlaycon .con img.img { display:block; width:200px; margin:0 auto 1em auto; } .overlaycon .con img.icon { display:block; width:100px; margin:0 auto; } .overlaycon .con h2 { display:block; margin:1em 0; font-size:1.5em; } .overlaycon .con p { display:block; padding:0; text-align:left; margin:.5em 0; } .overlaycon .con p span { display:inline-block; margin-right:10px; } .overlaycon .con .btn { display:inline-block; margin:1em auto; padding:.5em 1em; margin-right:.2em; } .overlaycon .con .price { display:block; color:#f86200; font-size:1.4em; margin-top:10px; } .overlaycon .con .price2 { display:block; } .overlaycon .con .btnrow { display:block; text-align:right; } .overlaycon .con table { border-collapse:collapse; border:1px solid #ccc; } .overlaycon .con table th, .overlaycon .con table td { text-align:left; border:1px solid #ccc; padding:.5em; vertical-align:top; } .overlaycon .con table tr:nth-child(odd) { background:#f1f2f5; } .overlaycon .con table th { word-break:keep-all; } .overlaycon .con a.btn-choose { display:inline-block; margin:0; width:180px; padding:12px 50px; border-radius:25px; color:white; background:#d2d2d2; cursor:pointer; text-align:center; position:relative; left:50%; transform:translateX(-50%); } .overlaycon .con a.btn-choose.selected { background:#f86200; } .overlaycon .con a.btn-choose.selected:after { content:url(../img/icon-checked-white.svg); display:inline-block; margin:0 -12px 0 5px; transform:translate(3px,4px); width:20px; height:20px; } .overlaycon .mask .imgset img { display:block; width:auto; max-width:100%; margin:0; padding:0; } .overlaycon .errormsg {} .overlaycon .errormsg { background:crimson; background:#ff373e; color:white; font-size:1.1em; display:block; padding:1em 1.5em; clear:both; border-radius:2px; width:100%!important; position:relative; z-index:150; text-align:center; } .overlaycon .errormsg:before { content:url(../icon/icon-alert.svg); display:inline-block; width:1em; height:1em; margin-right:.5em; transform:translateY(.1em); } .overlaycon .errormsg a { text-decoration:underline; cursor:pointer; } .overlaycon.loading { display:block!important; } .overlaycon.loading { display:block!important; } .popblock-privacy .con p { margin:1em 0; } .popblock-privacy .con hr { margin:2em 0; border:0; border-top:1px solid #333; } .listtable { display:flex; flex-wrap:wrap; gap:0; padding:0!important; border:1px solid black; border-right:0; border-bottom:0; } .listtable li { display:block; width:33.33%; padding:.5em 1em; margin:0!important; border:1px solid black; border-left:0; border-top:0; } .lds-ellipsis { display:block; margin:0 auto; position:absolute; top:50%; left:50%; width:80px; height:20px; transform:translate(-50%,-50%); } .lds-ellipsis div { position:absolute; top:0; width:13px; height:13px; border-radius:50%; background:#fff; animation-timing-function:cubic-bezier(0, 1, 1, 0); } .lds-ellipsis div:nth-child(1) { left:8px; animation:lds-ellipsis1 0.6s infinite; } .lds-ellipsis div:nth-child(2) { left:8px; animation:lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(3) { left:32px; animation:lds-ellipsis2 0.6s infinite; } .lds-ellipsis div:nth-child(4) { left:56px; animation:lds-ellipsis3 0.6s infinite; } @keyframes lds-ellipsis1 { 0% { transform:scale(0); }100% { transform:scale(1);}} @keyframes lds-ellipsis3 { 0% { transform:scale(1); }100% { transform:scale(0);}} @keyframes lds-ellipsis2 { 0% { transform:translate(0, 0);}100% { transform:translate(24px, 0);}} @media -ms-viewport, screen and (max-width:860px) { .overlay { z-index:960; } .overlaycon .con { padding:1.5em 2em; overflow-y:scroll; } .overlaycon .con.large { padding:1em; width:calc(100% - 1.5em); height:calc(100% - 2.5em); } .overlaycon .btn-close { top:calc(10vh - 2em); left:calc(100% - 4em); } } /* ============================================================================================================ _ _ _ _ _ _ | (_)__| |_ | |__| |___ __| |__ | | (_-< _| | '_ \ / _ \/ _| / / |_|_/__/\__| |_.__/_\___/\__|_\_\ ============================================================================================================ */ .row { padding:1em 0; position:relative; } .row.narrow { width:74%; margin:0 0 0 auto; max-width:750px; } .row.narrow2 { max-width:600px; } .row.total { padding-left:1.8em; } .row.bordertop { border-top:var(--bordertop); } .row.group { margin:2.7em 0; } .row.group.single { margin:2.7em 0 0 0; } .row.alignright { text-align:right; padding:0; } .row.must { position:relative; } .row.must label:after { content:'*'; display:inline-block; font-size:2em; line-height:.8; position:relative; transform:translateY(.4em); color:var(--red); } .flex { display:flex; width:100%; align-items:flex-start; } .flex .col { display:block; } .flex.flex50>* { width:50%; } .flex.flex33.inputrow {} .flex.flex33>* { width:33.33%; } .flex.flex33>.selectcity, .flex.flex33>.selectarea { width:48.5%; } .flex.flex33>.selectroad { width:100%; } .orange { color:var(--orange); } .totalfinal { padding:.2em 0; position:relative!important; top:auto!important; transform:none!important; } .icon { display:inline-block; width:1em; } .larger { font-weight:bold; font-size:1.2em; } .sectitle { display:block; width:auto; font-size:2em; text-align:center; position:relative; margin:1em auto; } a.link { cursor:pointer; } .btntext { display:inline-block; cursor:pointer; transition:all .2s; text-decoration:underline; } .btn { display:block; padding:1.1em; cursor:pointer; text-align:center; transition:all .2s; background:#3B8AC1; color:white; font-weight:bold; } .btn:hover { background:#0096ff;background:orange; padding:1.2em; } .btn.disabled { background:var(--border); opacity:.5; pointer-events:none; } .btn-pricechange { display:block; padding:.7em; border-radius:1.5em; background:white; border:1px solid var(--border); position:absolute; top:50%; left:0; transform:translateY(-50%); } .btn-pricechange:before { content:url(../img/icon-arrowdown.svg); display:block; width:.6em; xxheight:.6em; margin:0; padding:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .btn-delete { display:inline-block; border-radius:2em; width:1.2em; height:1.2em; background:var(--black); cursor:pointer; position:relative; vertical-align:middle; opacity:.3; } .btn-delete:before { content:url(../img/icon-close-white.svg); display:block; width:.9em; height:.9em; line-height:1; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; padding:0; } .btn-delete:hover { opacity:.7; } .btn-buy { display:inline-block; border-radius:2em; padding:1em; color:white; background:var(--blue); cursor:pointer; position:fixed; bottom:2em; right:1em; padding-left:4em; } .btn-buy:before { content:''; background-image:url(../img/hand-register.png); background-repeat:no-repeat; background-size:contain; display:block; width:1.9em; height:1.9em; line-height:1; position:absolute; top:50%; left:1.1em; transform:translateY(-55%) rotate(135deg); margin:0; padding:0; } .btn-buy:hover { opacity:.7; } .btn-gray { background:var(--gray); } .btn-gray:hover { background:var(--gray2); } .btn-closebtn { background:var(--gray); } .btn-closebtn:hover { background:var(--gray2); } .btn-min { display:inline-block; border-radius:2em; width:1.2em; height:1.2em; background:var(--black); cursor:pointer; position:relative; vertical-align:middle; opacity:.3; } .btn-min:before { content:url(../img/icon-minus-white.svg); display:block; width:.9em; height:.9em; line-height:1; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; padding:0; } .btn-min:hover { opacity:.7; } .btn-add { display:inline-block; border-radius:2em; width:1.2em; height:1.2em; background:var(--black); cursor:pointer; position:relative; vertical-align:middle; opacity:.3; } .btn-add:before { content:url(../img/icon-add-white.svg); display:block; width:.9em; height:.9em; line-height:1; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); margin:0; padding:0; } .btn-add:hover { opacity:.7; } .searchinputblock { display:block; width:calc(100% - 2.5em)!important; position:absolute; top:0; left:0; border-radius:3px 0 0 3px; box-shadow:none; } .disabled { cursor:default; opacity:.5; pointer-events:none; } .searchinputblock.disabled { opacity:1; color:#aaa; border:1px solid #e6e6e6; } .lazy { opacity:0; transform:translateY(2em); } .lazy.open { opacity:0; transform:translateY(2em); animation:.7s _openlazy ease-in-out forwards; } @keyframes _openlazy { 0%{ opacity:0; transform:translateY(2em); } 100%{ opacity:1; transform:translateY(0); } } .narrowh {} .narrowh .row { padding:.5em 0; } .narrowh .row.group { margin:.5em 0; } .narrowh .listitemrow .item { padding:.25em 0; } .narrowh .blockcart .coverimg { width:70%!important; height:auto; margin:.3em 0; } @media -ms-viewport, screen and (max-width:860px) { .btn-buy { display:block; border-radius:0; bottom:0; right:0; width:100%; opacity:1; text-align:center; } .btn-buy:before { left:calc(50% - 4em); } .btn-buy.disabled { background:gray!important; color:lightgray; } .btn-buy.disabled:before { opacity:.3; mix-blend-mode:luminosity; } } .person1:before { content:url(../img/person1.png); display:block; object-fit:cover; width:4em; position:absolute; top:0; right:0; transform:translate(-100%,-100%) scale(.2); display:none; } .hand-pointed { padding-right:8em!important; } .hand-pointed:before { content:''; background-image:url(../img/hand-pointed.png); background-size:4em; display:block; object-fit:cover; width:4em; height:4em; position:absolute; bottom:0; right:0; transform:translateX(-100%); } .hand-thumb { padding-right:8em!important; } .hand-thumb:before { content:''; background-image:url(../img/hand-thumb.png); background-size:4em; display:block; object-fit:cover; width:4em; height:4em; position:absolute; bottom:0; right:0; transform:translateX(-100%); } .person-service1 {} .person-service1:before { content:''; background-image:url(../img/person-service1.png); background-size:cover; display:block; object-fit:cover; width:8em; height:8em; position:absolute; bottom:0; right:0; transform:translateX(-100%); } .person-service2 {} .person-service2:before { content:''; background-image:url(../img/person-service2.png); background-size:cover; display:block; object-fit:cover; width:8em; height:8em; position:absolute; top:100%; left:0; transform:translateX(100%); display:none; } .person-service2 >p { width:63%; } .person-service3 {} .person-service3:before { content:''; background-image:url(../img/person-service3.png); background-size:cover; display:block; object-fit:cover; width:8em; height:8em; position:absolute; bottom:0; left:0; transform:translateX(100%); } .person-service4 {} .person-service4:before { content:''; background-image:url(../img/person-service4.png); background-size:cover; display:block; object-fit:cover; width:8em; height:8em; position:absolute; bottom:0; left:0; transform:translateX(100%); } .person-service4.moveup:before { bottom:2.8em; left:12em; } .person-fix { padding-right:12em!important; } .person-fix:before { content:''; background-image:url(../img/person-fix.png); background-size:cover; display:block; object-fit:cover; width:8em; height:8em; position:absolute; bottom:0; right:0; transform:translateX(-50%); } @media -ms-viewport, screen and (max-width:860px) { .person-service1 { padding-bottom:8em!important; } .person-service2 >p { width:100%; } .person-service4 textareaxxx { margin-bottom:12em; } .person-service4:before { display:none; } .hand-pointed { padding-right:6em!important; } .hand-pointed:before { right:-3em; } .hand-thumb { padding-right:6em!important; } .hand-thumb:before { right:-3em; } .person-fix { padding-right:6em!important; } .person-fix:before { width:6em; height:6em; right:-3em; } } @keyframes _jump {0%{transform:translate(-50%,50%) scale(0);}100%{transform:translate(-50%,50%) scale(1); }} .blockform { display:block; width:100%;width:55%; padding:1em 1.5em 5em 1.5em; padding-top:var(--gaptop); position:relative; } .blockform.full { width:100%; } .blockform.full .narrow { margin:0 auto; } .blockform h1 { display:block; padding:2em 0 1.2em 0; font-size:2em; font-weight:700; } .blockform .desc { display:block; padding:.5em 1em; background:var(--blue); color:white; font-size:1.1em; position:relative; } .blockform .thetitle { font-weight:bold; font-size:1.1em; } .blockform .innerfull { display:block; position:relative; } .blockform .plangroup { display:flex; justify-content:flex-start; gap:.5em .5em; flex-wrap:wrap; } .blockform .plangroup .item { display:block; xxoverflow:hidden; border:1px solid var(--border); background:white; border-radius:.3em; cursor:pointer; width:calc(25% - .4em);height:10em; grid-template:60% auto; transition:all .2s; opacity:.6; position:relative; } .blockform .plangroup .item:hover { opacity:.8; } .blockform .plangroup .item p { display:block; font-size:1em; text-align:center; padding:1em; color:var(--btnbggray1); } .blockform .plangroup .item strong { display:block; font-size:1.1em; text-align:center; padding:.8em; background:var(--btnbggray1); color:white; } .blockform .plangroup .item:nth-child(1) strong { background:var(--btnbggray1); opacity:.5; } .blockform .plangroup .item:nth-child(2) strong { background:var(--btnbggray2); opacity:.45; } .blockform .plangroup .item:nth-child(3) strong { background:var(--btnbggray3); opacity:.4; } .blockform .plangroup .item:nth-child(4) strong { background:var(--btnbggray4); opacity:.35; } .blockform .plangroup .item.selected { opacity:1; } .blockform .plangroup .item.selected strong { background:var(--orange); opacity:1; } .blockform .plangroup .item.selected:after { content:url(../img/icon-checked-orange.svg); display:block; width:1.8em; position:absolute; bottom:0; left:50%; transform:translate(-50%,50%) scale(1); animation:.5s _jump var(--bezierback) forwards; } .blockform .row.flex { gap:.7em; } .blockform .row input { min-width:0; width:100%; xxxpadding:12px; } .blockform .row input[type="checkbox"] { min-width:0; width:1.5em; margin-right:.5em; } .blockform .ingroup { position:relative; display:flex; } .blockform .ingroup .input-street6, .blockform .ingroup .input-street8 { width:4em; margin-left:.2em; } .blockform .ingroup .input-street6 input:last-child, .blockform .ingroup .input-street8 input:last-child { position:absolute; right:0; } .blockform .addressinputset { xxxgap:2em!important; padding-top:0; flex-wrap:wrap; } .blockform .addressinputset p { position:relative; display:flex; width:9.94%; } .blockform .addressinputset p { position:relative; display:flex; } .blockform .addressinputset p span { position:absolute; z-index:11; top:50%; transform:translateY(-50%); right:0; padding:.5em; } .blockform .addressinputset p span.dash { position:absolute; z-index:10; top:50%; transform:translateY(-50%); left:58%; right:auto; } .blockform .addressinputset p span.floor { position:absolute; z-index:10; top:50%; transform:translateY(-50%); left:calc(50% - .5em); right:auto; width:auto; pointer-events:none; } .blockform .addressinputset p:nth-child(5), .blockform .addressinputset p:nth-child(6) { width:19.9%; } .blockform .addressinputset p:nth-child(5) .input-street6, .blockform .addressinputset p:nth-child(6) .input-street8 { position:absolute; right:1px; top:1px; background:none; width:40%; border:0; } .blockform .addressinputset p:nth-child(8) { width:100%!important; } .blockform .addressinputset .fade { opacity:.3; } .blockform .btn-addresscheck { display:inline-block; opacity:.5; padding:.3em 1em; border-radius:1.5em; background:rgba(0,0,0,.1); cursor:pointer; } .blockform .btn-addresscheck:hover { opacity:1; } .blockform .giftgroup { display:flex; justify-content:flex-start; gap:.5em; flex-wrap:wrap; } .blockform .giftgroup .item { display:block; border:1px solid var(--border); background:white; border-radius:.3em; cursor:pointer; width:calc(33.33% - .36em); grid-template:60% auto; transition:all .2s; opacity:.6; text-align:center; padding:1em; position:relative; } .blockform .giftgroup .item:hover { opacity:.8; } .blockform .giftgroup .item img { display:block; width:6em; margin:0 auto; } .blockform .giftgroup .item p { display:block; text-align:center; } .blockform .giftgroup .item:hover { opacity:.8; } .blockform .giftgroup .item.selected { opacity:1; border:2px solid var(--orange); } .blockform .giftgroup .item.selected:after { content:url(../img/icon-checked-orange.svg); display:block; width:1.8em; position:absolute; bottom:0; left:50%; transform:translate(-50%,50%) scale(1); animation:.5s _jump var(--bezierback) forwards; } .blockform .groupadditional { display:flex; justify-content:flex-start; gap:0; flex-direction:column; padding-top:0; } .blockform .groupadditional .msg { display:block; xxxborder:1px solid gray; background:white; text-align:center; padding:1.5em; xxxxcolor:var(--red); } .blockform .groupadditional .item { display:block; border-bottom:1px solid var(--border); padding:1em 0 1em 2.5em; cursor:pointer; transition:all .2s; position:relative; } .blockform .groupadditional .item:last-child { border-bottom:0; } .blockform .groupadditional .item .counter { font-size:1.6em; font-weight:bold; position:absolute; top:.7em; left:0; xxxcolor:var(--blue); } .blockform .groupadditional .item strong { font-size:1.3em; xxxxcolor:var(--blue); font-weight:700; margin-bottom:.5em; display:block; } .blockform .groupadditional .item strong, .blockform .groupadditional .item p { max-width:calc(100% - 12em); } .blockform .groupadditional .item .price { background:var(--border); color:white; position:absolute; top:50%; right:0; transform:translateY(-50%); padding:.5em 1.5em; padding-right:4em; border-radius:.2em; width:11em; text-align:center; font-size:.8em; } .blockform .groupadditional .item .price span { display:block; font-size:1.4em; font-weight:bold; } .blockform .groupadditional .item .price .checkblock { position:absolute; top:50%; right:1em; transform:translateY(-50%); display:block; width:1em; height:1em; background:rgba(255,255,255,.3); border-radius:.2em; } .blockform .groupadditional.onadditional {} .blockform .groupadditional.onadditional .item .price { background:var(--orange); background:#cacaca; opacity:.8; } .blockform .groupadditional.onselected .item .price { background:#cacaca; opacity:.8; } .blockform .groupadditional .item.selected .counter, .blockform .groupadditional .item.selected strong { color:var(--blue); } .blockform .groupadditional .item.selected .price { background:var(--orange)!important; color:white!important; opacity:1; } .blockform .groupadditional .item.selected .price .checkblock { background:white; } .blockform .groupadditional .item.selected .price .checkblock:before { content:url(../img/icon-check.svg); position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:block; width:1.3em; height:1.3em; } .blockform .groupadditional .item.lock { pointer-events:none; } .blockform .groupadditional .item.lock .price .checkblock { background:transparent; } .blockform .groupadditional .item.lock .price .checkblock:before { content:url(../img/icon-lock.svg); } .blockform .groupadditional .item .pointedhand { display:flex; align-items:center; background:var(--blue); color:white; padding:.5em 1.2em; width:13em; position:absolute; left:calc(100% + 1em); top:50%; transform:translateY(-50%); gap:.5em; border-radius:3em; xxxvisibility:hidden; opacity:0; transition:all .2s; } .blockform .groupadditional .item .pointedhand img { display:block; width:3em; } .blockform .groupadditional .item:hover .pointedhand { visibility:visible; opacity:1; } .blockform .groupadditional .item.selected .pointedhand { visibility:visible; opacity:1; } .blockform .group-btnextrabox { text-align:center; margin-top:0; } .blockform .group-btnextrabox.open { margin-top:-1em; } .blockform .group-btnextrabox .btn-openextrabox { display:inline-block; opacity:.7; padding:.5em 1em; width:auto; margin:0 auto; background:transparent; border-radius:2em; border:1px solid gray; color:black; } .blockform .group-btnextrabox .btn-openextrabox:hover { opacity:1; } .blockform .group-btnextrabox .btn-openextrabox.disabled { opacity:.2; pointer-events:none; } .blockform .group-btnextrabox.open .btn-openextrabox { background:white; opacity:1; } .blockform .group-extrabox { border-radius:1em; border:2px solid var(--darkblue); padding:0; margin:6em auto 0 auto; overflow:hidden; xxxwidth:80%; } .blockform .group-extrabox .desc { background:var(--darkblue); text-align:center; padding:2em 4em; } .blockform .groupextrabox { display:flex; justify-content:center; gap:0; background:white; flex-direction:column; } .blockform .groupextrabox .item { xxxdisplay:grid; xxxxgrid-template-rows:7em 4em 6em auto auto; display:flex; width:100%; padding:.5em 1.5em; cursor:pointer; transition:all .2s; position:relative; border-bottom:1px solid var(--darkblue); gap:2em; align-items:top; } .blockform .groupextrabox .item:last-child { border:0; } .blockform .groupextrabox .item .conbox { display:block; position:relative; } .blockform .groupextrabox .item .conbox.con { width:calc(100% - 15em); } .blockform .groupextrabox .item p { font-size:.9em; opacity:.8; display:block; } .blockform .groupextrabox .item img { width:5em; height:4em; margin:0; display:block; } .blockform .groupextrabox .item h3 { font-size:1.3em; font-weight:700; margin-bottom:.5em; } .blockform .groupextrabox .item .price { font-size:1.1em; padding:.3em 0; font-weight:bold; color:var(--darkblue); } .blockform .groupextrabox .item .btn { background:var(--darkblue); width:auto; z-index:12; display:inline-block; padding:.5em 1em; margin:.5em 0 0 0; border-radius:3em; transition:none; } .blockform .groupextrabox .item .countbox { display:flex; align-items:center; justify-content:center; width:6em; border-radius:1em; background:var(--lightgray); margin-top:.3em; padding:.2em; visibility:hidden; } .blockform .groupextrabox .item .countbox .btn-min, .blockform .groupextrabox .item .countbox .btn-add { display:block; } .blockform .groupextrabox .item .countbox .count { display:block; text-align:center; font-weight:bold; width:calc(100% - 3em); padding:.5em 0; color:white; } .blockform .groupextrabox .item.selected .btn { background:var(--blue); /*因為只有一台，取消顯示*/xxxpointer-events:none; /*因為只有一台，取消顯示*/xxxdisplay:none!important; /*因為只有一台，取消顯示*/padding:.4em 2.3em .4em .6em; } .blockform .groupextrabox .item.selected .btn:after { content:url(../img/icon-check.svg); border-radius:2em; background:white; padding:.15em .2em .25em .2em; width:1em; height:1em; position:absolute; top:50%; left:calc(100% - 1.2em); transform:translate(-50%,-50%); box-shadow:0 1px 2px rgba(0,0,0,.2); } .blockform .groupextrabox .item.selected:after { content:url(../img/icon-check.svg); border-radius:2em; background:white; padding:.3em; width:1.2em; height:1.2em; position:absolute; top:calc(50% - 2.5em);top:1.4em; left:calc(100% - 2em); transform:translate(-50%,-50%); box-shadow:0 1px 2px rgba(0,0,0,.2); /*因為只有一台，取消顯示*/display:none!important; } .blockform .groupextrabox .item.selected .countbox { /*因為只有一台，取消顯示*/xxxvisibility:visible; background:var(--blue); } .blockform .extraboxtitle { text-align:center; margin:0 1em 1em 1em; background:#dae6f8; padding:.8em; } .blockform .installblock { flex-wrap:wrap; gap:1em; } .blockform .installblock p { width:calc(50% - .4em); } .blockform .installblock .note { width:100%; } .blockform .noteblock { margin:1em 0; } .blockform .noteblock ol { padding-left:1.5em; } .blockform .noteblock ol li { list-style-position:outside; } .blockform .msgblock { margin:1em 0; background:var(--btnbggray4); padding:1em 7em; color:white; display:flex; } .blockform .msgblock .icon { width:3em; opacity:.5; margin-right:1em; } .blockform .msgblock strong { font-size:1.2em; } .blockform .msgblock a { color:white; } .blockform .mailaddress { display:flex; flex-direction:column; gap:.2em; display:none; } .blockform .mailaddress-bill { display:flex; flex-direction:row; flex-wrap:wrap; gap:.2em; padding:.2em 0; } .blockform .mailaddress-bill .select-city, .blockform .mailaddress-bill .select-area, .blockform .mailaddress-bill .input-mailaddress1 { display:block; width:calc(33.33% - .1334em); } .blockform .mailaddress-bill .input-mailaddress2 { display:block; width:calc(66.66% - .2em); } .blockform .mailaddress-bill .input-mailaddresszip { display:block; width:33.33%; } .blockform .usergroup {} .blockform .usergroup p { display:flex; } .blockform .usergroup p span { display:block; width:8em; } .blockform .usergroup hr { display:block; margin:1em 0; border:0; border-top:1px solid var(--border); } .inputrow.error {} .inputrow.error label { color:var(--red); } .inputrow.error input { border-color:var(--red); } .inputrow.error .errormsg { background:var(--red); color:white; padding:.2em .5em; border-radius:.2em; } .giftgroup .errormsg { background:var(--red); color:white; margin-top:.5em; width:100%; padding:.2em .5em; border-radius:.2em; } .inputrowgroup.error {} .inputrowgroup.error label { color:var(--red); } .inputrowgroup.error input.must { border-color:var(--red); } .inputrowgroup.error .errormsg { background:var(--red); color:white; padding:.2em .5em; border-radius:.2em; } @media -ms-viewport, screen and (min-width:1241px) and (max-width:1500px) { .row.narrow { width:80%; } } @media -ms-viewport, screen and (max-width:1470px) { .blockform .row.flex { gap:.66em; } .blockform .plangroup .item { width:calc(33.33% - .4em); } } @media -ms-viewport, screen and (min-width:961px) and (max-width:1240px) { .row.narrow { width:100%; } .blockform .plangroup .item { width:calc(25% - .1666em); } .blockform .giftgroup .item { width:calc(33.33% - .25em); } .blockform .plangroup .item strong { padding:.8em; } .blockform .row.flex { gap:.6em; } } @media -ms-viewport, screen and (min-width:861px) and (max-width:961px) { .row.narrow { width:100%; margin:0; padding:1em; } .blockform { width:calc(100% - 350px); padding:0; } } @media -ms-viewport, screen and (max-width:860px) { .row.narrow { width:100%; } .flex.flex33.inputrow { flex-wrap:wrap; } .blockform { padding-top:20em; width:100%; } .blockform.shorten { padding-top:5em; } .blockform .plangroup .item { width:calc(50% - .4em); height:10em; } .blockform .addressinputset { flex-wrap:wrap; } .blockform .addressinputset p { width:calc(33.33% - .49em)!important; } .blockform .addressinputset p:last-child { width:calc(66.66% - .33em); } .blockform .addressinputset p:last-child input { width:100%!important; } .blockform .addressinputset p span.dash { left:49%; } .blockform .addressinputset p span.floor { left:calc(49% - 1.5em); } .blockform .giftgroup { flex-wrap:wrap; } .blockform .giftgroup .item { width:calc(50% - .3em); } .blockform .groupadditional { display:flex; justify-content:flex-start; gap:0; flex-direction:column; } .blockform .groupadditional .item strong, .blockform .groupadditional .item p { max-width:100%; } .blockform .groupadditional .item .price { position:relative; top:auto; right:auto; transform:none; margin-top:1em; width:100%; } .blockform .groupadditional .item .pointedhand { position:relative; left:auto; top:auto; transform:none; margin-top:.5em; border-radius:.2em; width:100%; } .blockform .group-extrabox { margin:6em auto; width:100%; } .blockform .groupextrabox { display:flex; flex-direction:column; } .blockform .groupextrabox .item { width:100%; border-right:0; flex-direction:column; gap:.5em; border-bottom:1px solid var(--darkblue); grid-template-rows:6em auto auto auto auto; } .blockform .groupextrabox .item .conbox { text-align:center; padding:1em; } .blockform .groupextrabox .item .conbox.con { width:100%; } .blockform .groupextrabox .item .countbox { margin:1em auto; display:none; } .blockform .groupextrabox .item:last-child { border-bottom:0; } .blockform .groupextrabox .item h3 { font-size:1.2em; } .blockform .groupextrabox .item img { width:10em; margin:0 auto; } .blockform .msgblock { padding:1em 2em; } } @media -ms-viewport, screen and (max-width:540px) { .row { padding:.5em 0; } .row.group.single, .row.group { margin:0; } .blockform { padding:18em 1em 5em 1em; font-size:.91em; } } .blockcart { display:block; background:white; width:45%; min-width:25vw; min-width:440px; padding:1em 1.5em; padding-top:var(--gaptop); position:sticky; top:0; min-height:100vh; } .blockcart { position:fixed; top:0; right:0; overflow-y:scroll; height:100vh; } .blockcart >.listitemrow { display:block; width:100%; max-width:30em; } .blockcart h2 { display:block; } .blockcart .coverimg { display:block; margin:.8em 0; } .blockcart .btn-plandetail { cursor:pointer; position:relative; width:auto; padding-right:2em; } .blockcart .btn-plandetail .icon-open { display:inline-block; border:1px solid black; padding:.6em; position:relative; position:absolute; right:0; top:50%; transform:translateY(-50%) rotate(90deg); transition:all .2s; } .blockcart .btn-plandetail .icon-open:before { content:url(../img/icon-arrowdown.svg); display:inline-block; width:.8em; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .blockcart .btn-plandetail.open .icon-open { transform:translateY(-50%) rotate(0); } .blockcart .plandetail { display:none; padding:1.2em 1.5em; margin-top:.5em; background:var(--lightgray); } .blockcart .plandetail p { display:block; position:relative; padding-left:1.5em; } .blockcart .plandetail p:before { content:url(../img/icon-check.svg); display:block; width:1.2em; position:absolute; top:.2em; left:0; } .blockcart .col.tag { display:block; background:var(--orange); color:white; padding:.2em .5em; margin-right:.9em; display:inline-block; width:auto; } .blockcart .plangift { margin:.6em 0; } .blockcart .plangift p { display:block; position:relative; align-items:center; padding-left:1.5em; margin-bottom:.5em; } .blockcart .plangift p:before { content:url(../img/icon-checked-orange.svg); display:block; width:1.2em; position:absolute; top:0; left:0; } .blockcart .row.flex h2 { font-size:1em; padding-right:2em; word-break:keep-all; } .blockcart .total { display:block; width:auto; font-weight:700; font-size:1.2em; text-align:right; position:absolute; top:50%; right:0; transform:translateY(-50%); } .blockcart .total.priceblock { width:120px; } .blockcart .finalrow { padding:1em 0; text-align:right; } .blockcart .finalrow * { position:relative; right:auto; top:auto; transform:none; } .blockcart .finalrow .note { font-size:.9em; margin-top:.5em; } .blockcart .listitemrow .item { display:flex; } .blockcart .listitemrow .item.withdesc { display:block; height:auto; padding-right:5em; } .blockcart.close .listitemrow .item.withdesc p { max-height:5em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .blockcart .listitemrow .item.withdesc .right { position:absolute; top:50%; right:0; transform:translateY(-50%); } .blockcart .additionalblock .details { flex-direction:column; gap:0!important; width:100%; } .blockcart .additionalblock .item { display:block; padding:0; position:relative; } .blockcart .additionalblock .item:first-child { border:0; } .blockcart .additionalblock .item:before { content:''; } .blockcart .additionalblock .item p { width:calc(100% - 5em)!important; border:0; } .blockcart .additionalblock .item p .strong { font-weight:bold; } .blockcart .additionalblock .item .right { position:absolute; top:50%; right:0; transform:translateY(-50%); border:0; padding:0; width:auto; text-align:right; } .blockcart .additionalblock .item .right:before { content:''; } .blockcart .input-privacy { margin:.5em 0; } .blockcart .input-privacy input[type="checkbox"] { min-width:0; width:1.5em; margin-right:.5em; } .blockcart .input-privacy a { text-decoration:underline; color:var(--blue); display:inline-block; padding:0 .3em; } .blockcart .select-cartplan { position:absolute; top:0; right:calc(100% - 1.5em); z-index:11; opacity:0; } .blockcart .select-cartplan.show { opacity:1; } @media -ms-viewport, screen and (min-width:1241px) and (max-width:1500px) { .blockcart { min-width:400px; } } @media -ms-viewport, screen and (min-width:961px) and (max-width:1240px) { .blockcart { min-width:360px; } } @media -ms-viewport, screen and (min-width:861px) and (max-width:961px) { .blockcart { min-width:200px; width:350px; } } @media -ms-viewport, screen and (max-width:860px) { .blockcart { width:100%; min-width:0; position:fixed; top:0; min-height:0; height:auto;height:100vh; z-index:965; box-shadow:0 2px 10px rgba(0,0,0,.2); overflow-y:scroll; } .blockcart .listitemrow .row .plantitle { font-size:1.2em; line-height:1.1; } .blockcart .listitemrow .row .coverimg { height:auto!important; width:100%!important; margin-right:0; } .blockcart .listitemrow .row { padding:.2em 0; } .blockcart.close { height:auto; } .blockcart.close .listitemrow .row { padding:0; border:0; } .blockcart.close .listitemrow .row .coverimg { height:8em!important; width:16em!important; margin-right:.5em; } .blockcart.close .listitemrow .row.infoblock { display:flex; align-items:center; } .blockcart.close .listitemrow .row.infoblock .row { display:none; } .blockcart.close .listitemrow .row .priceblock { width:50%; } .blockcart.close .listitemrow .row.payrow, .blockcart.close .listitemrow .row .note, .blockcart.close .listitemrow .row .giftbox, .blockcart.close .listitemrow .row .btn-plandetail, .blockcart.close .listitemrow .row .details { display:none!important; } .blockcart.close .listitemrow .row.detailinstall, .blockcart.close .listitemrow .row.detailcontract, .blockcart.close .listitemrow .row.additionalblock { justify-content:right; gap:2em; } .blockcart.close .listitemrow .row.detailinstall h2, .blockcart.close .listitemrow .row.detailcontract h2 { padding-right:4em; } .blockcart.close .listitemrow .row.additionalblock h2 { padding-right:0; } .blockcart.close .listitemrow .row.additionalblock .details { display:block!important; width:auto!important; } .blockcart.close .listitemrow .row.additionalblock .details .item { width:auto!important; } .blockcart.close .listitemrow .row.additionalblock .details .item p { position:relative; top:auto; right:auto; transform:none; width:auto!important; } .blockcart.close .listitemrow .row.additionalblock .details .item p:first-child { display:none; } } @media -ms-viewport, screen and (max-width:540px) { .blockcart { font-size:.9em; padding-bottom:1em; margin-bottom:-1em; } .blockcart.close { font-size:.8em; } .blockcart.close .plandetail { display:none!important; } .blockcart .listitemrow .row .plantitle { font-size:1em; } .blockcart .listitemrow .row .coverimgxxx { height:2.5em; } .larger { font-size:1em; } } /**/ .version-tfm .productblock .item .corner, .version-tfm .productblock .item .cover { background:orange; } /* ============================================================================================================ _ _ _ _ __| |___| |_ __ _(_) | _ __ __ _ __ _ ___ / _` / -_) _/ _` | | | | '_ \/ _` / _` / -_) \__,_\___|\__\__,_|_|_| | .__/\__,_\__, \___| |_| |___/ ============================================================================================================ */ .overlaycon .inputrow { display:block; padding:.5em 0; } .overlaycon .inputrow label { display:block; margin-bottom:.2em; } .overlaycon .inputrow input { display:block; width:100%; } .overlaycon .inputrow .btn { display:block; width:auto; margin:.8em auto; } .overlaycon .inputrow.flex { display:flex; flex-wrap:wrap; } .overlaycon .inputrow.flex.flex50 > label { width:100%; } .overlaycon .inputrow.flex.flex50 >* { width:calc(50% - .25em); margin-right:.25em; } .overlaycon .inputrow.flex.flex50 >*:last-child { margin-right:0; } .addressrow { background:#515255; padding:1em 1.5em; color:white; margin-top:-.3em; } .listitemrow { display:block; padding:0; } .listitemrow .item { display:block; padding:.5em 0; border-top:1px solid var(--border); position:relative; } .listitemrow .item .right { display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); padding-right:0!important; } .listitemrow .item h3 { font-size:1.1em; font-weight:bold; } .listitemrow .item .priceblock .right { position:relative; top:auto; right:auto; transform:none; } .listitemrow .item.detailplan img { margin:.5em 0; width:20em; } .listitemrow .item.detailplan p { padding-right:7em; } .listitemrow .item.detail { display:flex; gap:1em; align-items:top; } .listitemrow .item.detail span { display:block; width:auto; } .listitemrow .item .details { display:flex; gap:1em; align-items:top; } .listitemrow .item .details p { display:block; width:auto; border-left:1px solid var(--border); padding:.2em .8em .2em 1em; position:relative; } .listitemrow .item .details p .btn-delete { margin-left:.2em; } .listitemrow .item .details .right { pointer-events:none; } .listitemrow .item .details p:before { content:url(../img/icon-addcircle.svg); display:block; width:1em; position:absolute; top:50%; left:0; transform:translate(-50%,-50%); } .listitemrow .item .details p:first-child { padding-left:0; border-left:0; } .listitemrow .item .details p:first-child:before { display:none; content:''; } .listitemrow .item .details span.price { xxxfont-weight:bold; xxxfont-size:1.2em; } .listitemrow .item.withimg { padding-left:5em; } .listitemrow .item.withimg img { display:block; width:4em; height:auto; position:absolute; top:50%; left:0; transform:translateY(-50%); } .listitemrow .item .item_additional { display:block; font-size:normal; padding-left:4.3em; } .listitemrow .item .item_additional strong { font-weight:normal!important; display:block; padding:.2em 0; } .blockcart .listitemrow .item .details span.price { display:block; } .blockcart .rowclose { text-align:right; padding:1em!important; position:fixed; top:5em; right:0; width:auto; background:black; color:white; opacity:1; } .blockcart .btn-close { xxxtext-decoration:underline; } .blockcart.close .rowclose { opacity:0; } .blockcart.close .btn-close { display:none; } .cart { display:block; width:100%; background:white; padding:2em; font-size:1.03em; } .cart.farway { position:fixed; top:-999999px; left:-99999px; } .cart h1 { padding:.5em 0; } .cart .sectitle { padding:0; text-align:left; font-size:1.2em; } .cart .row { border-top:10px solid var(--lightgray); padding:1em 0; } .cart .row:first-child { border-top:0; } .cart .row p span.bold { font-weight:bold; color:blue; display:inline-block; margin:0 .3em; } .cart .row .listitemrow .item { line-height:1.4; } .cart .row .listitemrow .item:first-child { border-top:0; } .cart .row .listitemrow .item.detailinstall, .cart .row .listitemrow .item.detailcontract { display:flex; gap:1em; } .cart .row .listitemrow .item .details { flex-direction:column; gap:.5em; } .cart .row .listitemrow .item .details p { border-left:0; padding:0; } .cart .row .listitemrow .item .details p:before { content:''; } .cart .row .listitemrow .item .details span.price { display:inline-block; font-size:1em; padding-left:1em; } .cart .row .listitemrow .item.total { display:flex; justify-content:right; align-items:center; font-size:1em; } .cart .row .listitemrow .item.total .right { font-weight:bold; margin-left:.5em; position:relative; top:auto; right:auto; transform:none; } .cart .row.finalrow { display:flex; justify-content:right; align-items:center; font-size:1em; color:var(--orange); } .cart .row.finalrow .right { font-size:1.5em; font-weight:bold; margin-left:.5em; } @media -ms-viewport, screen and (max-width:860px) { .listitemrow .item .item_additional strong { max-width:70%; } .cart { padding:1em; font-size:.9em; } } .group-resultblock { display:none; } .resultblock { display:block; font-size:.95em; } .resultblock .row { display:block; margin:0; width:100%; padding:1em 0; } .resultblock .row .item { display:block; position:relative; padding:0; border:1px solid #ccc;border:0; background:white; margin-bottom:1em; } .resultblock .row .item .content { padding:1em; } .resultblock .row .item h2.ordernum { display:block; color:dodgerblue; font-weight:bold; font-size:1.4em; padding:1em; cursor:pointer; } .resultblock .row .item p { display:block; margin:.1em 0; } .resultblock .row .item hr { display:block; margin:1em 0; } .resultblock .row .item .formobj { display:block; padding:.5em 0; position:relative; width:100%; } .resultblock .row .item .formobj .item { display:flex; width:100%; padding:.2em 0; margin:0; xxxborder-bottom:1px solid var(--lightgray); position:relative; } .resultblock .row .item .formobj .item.border { border-bottom:1px solid var(--lightgray); } .resultblock .row .item .formobj .item.flex { flex-wrap:wrap; } .resultblock .row .item .formobj .item .item { padding:.1em 0; } .resultblock .row .item .formobj .item .price { xxxposition:absolute; xxxright:0; text-align:right; width:auto; line-height:1.5; margin-right:.5em; } .resultblock .row .item .formobj strongxxx { display:block; padding:.5em 0; font-weight:bold; font-size:1.2em; } .resultblock .row .item .formobj span { display:inline-block; width:7em; font-weight:bold; } .resultblock .row .item .formobj.final { padding-bottom:1em; } .resultblock .row .item .formobj.final .item { border-bottom:0; } .resultblock .row .item .formobj .item.thin { border-bottom:1px solid var(--lightgray); } .resultblock .row .item .formobj .item.thin:first-child { border-top:1px solid var(--lightgray); } .resultblock .row .item .formobj .item.thin * { font-weight:normal; } .resultblock .row .item .listitemrow .item { padding:.3em 0; } .resultblock .row .item .cart { background:transparent; } .finalrowdetail { display:flex; width:100%; gap:.3em; gap:0; } .finalrowdetail .col { display:block; width:33.33%; text-align:center; xxxbackground:var(--border); padding:.5em; border-right:1px solid var(--border); } .finalrowdetail .col:last-child { border-right:0; } .finalrowdetail .col span { display:block!important; width:100%!important; text-align:center!important; font-size:.8em!important; } .grayarea { padding:1em; background:#ecedee; } @media -ms-viewport, screen and (max-width:860px) { .resultblock .row .item .formobj.column .item.flex { flex-direction:column; } .resultblock .row .item .formobj.column .item div, .resultblock .row .item .formobj.column .item p { width:100%!important; padding-left:0!important; } .resultblock .row .item .formobj.column .item .price { margin-right:0; text-align:left; } .resultblock .row .item .formobj.column .item .descbox { padding-bottom:.8em; } .resultblock .row .item .formobj.column span.title { font-size:1.05em; margin:.5em 0; width:auto; background:rgba(200,200,200,.3); border-radius:2em; padding:.25em 1em; } .resultblock .row .item .formobj.column small { font-size:.7em; display:block; font-weight:normal; } } .version-tfm .btn { background:#9f5915; } .version-tfm .btn-closebtn { xxxxbackground:var(--gray); } .version-tfm .blockform .desc { background:var(--orange); } .version-tfm .blockform .group-extrabox { border-color:var(--darkorange); } .version-tfm .blockform .group-extrabox .desc { background:var(--darkorange); } .version-tfm .blockform .groupextrabox .item { border-color:var(--darkorange); } .version-tfm .blockform .groupextrabox .item .price { color:var(--darkorange); } .version-tfm .blockform .groupextrabox .item .btn { background:var(--darkorange); } .version-tfm .blockform .groupextrabox .item.selected .countbox { background:orange; } .version-tfm .blockform .groupadditional .item.selected .counter, .version-tfm .blockform .groupadditional .item.selected strong { color:orange; } .version-tfm .btn-buy { background:#ff7a00; } .version-tfm .resultblock .row .item h2.ordernum { color:orange; }