/* 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 */ body { xxx-background-color:#f1f2f5; padding-top:60px; } body.oneportal { xx-padding-top:0; } body.oneportal .footer, body.oneportal .topbanner { display:none; }.version-tfm .nav a[data-id="/store/hualian"] body.oneportal .header { xxborder-bottom:1px dotted #eee; } body.oneportal .header .estoretitle { background:#ff5722; } body.oneportal .productblock .item { box-shadow:0 1px 5px rgba(0,0,0,.2); } body.oneportal:after { content:''; display:block; display:none; padding:1em; transform:translate(-50%,50%) rotate(45deg); position:fixed; bottom:0; left:0; background:#ff5722; color:#ff5722; font-weight:bold; z-index:99991; } 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.onkk: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:purple; color:orange; font-weight:bold; z-index:99999; } body.coshop {} .pc { display:block; } .mobile { display:none; } .debugger { display:none; position:fixed; top:4em; left:0; background:lightgreen; z-index:144; font-size:1em!important; padding:1em; } /* 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 1.5em; padding:0; height:100%; width:10vw; max-width:180px; vertical-align:middle; /*position:absolute; top:0; left:2em; z-index:55; transform:translateY(-.16em);*/ transform:translateY(-.3em); } .header .logo img { display:block; height:100%; } .header .estoretitle { display:inline-block; vertical-align:middle; background:#333; color:white; font-size:1em; border-radius:1em; padding:.3em 1em; cursor:pointer; } .header .coshopbrand { display:inline-block; vertical-align:middle; position:relative; transform:translateY(.3em); margin-left:2em; } .header .coshopbrand:before { content:url(../icon/icon-close.svg); display:inline-block; width:1em; height:auto; opacity:.5; position:absolute; top:50%; left:-2em; transform:translateY(-50%); } .header .coshopbrand img { display:inline-block; height:3.4em; width:auto; } .header.shorten { xxxxheight:60px; box-shadow:0 5px 30px rgba(0,0,0,.03); } .header.shorten .logo { xxxxwidth:10vw; } .header.shorten .estoretitle { xxxxfont-size:.9em; } .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; } .noscroll { overflow:hidden; } .noscroll .overlay { display:block; } .nav { display:table; width:auto; height:100%; position:absolute; top:50%; right:1em; transform:translateY(-50%); } .nav a { display:table-cell; box-sizing:border-box; cursor:pointer; text-align:center; padding:1em 1.8em; text-transform:uppercase; font-size:.95em; position:relative; font-weight:600; letter-spacing:.2em; color:#333; text-decoration:none; vertical-align:middle; } .nav a:after { content:''; display:block; width:0; height:4px; background:#333; position:absolute; bottom:0; left:0; transition:all .3s; } .nav a:hover:after { width:100%; } .nav a.selected { background:#f6f6f7; } .nav a[data-id="/store/hualian"] { display:none; } .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:#333; 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:block; box-sizing:border-box; background:#333; text-align:center; position:relative; color:white; padding:2em; font-size:.87em; } .footer .col { position:relative; padding:.8em; text-align:left; vertical-align:top; width:100%; xx-border:1px solid red; } .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:1.5em .8em; } .footer .col.logoset .logo { display:block; width:150px; padding:0; height:50px; } .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; } .container { xxxpadding-bottom:3em; } .container:before { content:''; display:block; width:100%; height:38em; background-color:#f1f2f5; /*background-image:url(../img/bgpattern.svg); background-position:top left; background-size:cover; background-repeat:repeat; background:linear-gradient(180deg, rgba(190,207,219,1) 0%, rgba(241,242,248,1) 100%);*/ position:absolute; top:0; left:0; z-index:-1; } .container.order:before { height:18em; } .container.order .row { margin:1em auto; xx-border:1px solid #ccc; border:0; } .container.simplegray { background:#f1f2f5; } .container.simplegray:before { display:none; } .container.additional { xxxbackground:#f1f2f5; } .container.additional:before { display:none; } body.addressrow .container { padding-top:46px; } .overlay { display:none; width:100%; height:100%; background:rgba(50,50,55,.8); position:fixed; top:0; left:0; z-index:970; } .alertbox { display:block; width:600px; height:auto; padding:25px; text-align:center; border-radius:4px; box-shadow:0 2px 4px rgba(0,0,0,.4); background:white; position:fixed; top:50%; left:50%; z-index:93; transform:translate(-50%,-50%); } .alertbox p { font-size:1.2em; font-weight:bold; margin:10px 0; } /* OVERLAYER */ .overlaycon { 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; } .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: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 .mask .con { display:block; text-align:left; } .overlaycon .mask .con img { display:block; max-width:100%; margin:0 auto; } .overlaycon .mask .con img.img { display:block; width:200px; margin:0 auto 1em auto; } .overlaycon .mask .con img.icon { display:block; width:100px; margin:0 auto; } .overlaycon .mask .con h2 { display:block; margin:1em 0; font-size:1.1em; } .overlaycon .mask .con p { display:block; padding:0; text-align:left; margin:2px 0; } .overlaycon .mask .con p span { display:inline-block; margin-right:10px; } .overlaycon .mask .con .price { display:block; color:#f86200; font-size:1.4em; margin-top:10px; } .overlaycon .mask .con .price2 { display:block; } .overlaycon .mask .con .btnrow { display:block; text-align:right; } .overlaycon .mask .con table { border-collapse:collapse; border:1px solid #ccc; } .overlaycon .mask .con table th, .overlaycon .mask .con table td { text-align:left; border:1px solid #ccc; padding:.5em; vertical-align:top; } .overlaycon .mask .con table tr:nth-child(odd) { background:#f1f2f5; } .overlaycon .mask .con table th { word-break:keep-all; } .overlaycon .mask .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 .mask .con a.btn-choose.selected { background:#f86200; } .overlaycon .mask .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.plandetail {} .overlaycon.plandetail .con {} .overlaycon.plandetail .con h2 { font-size:2em; text-align:center; } .overlaycon.plandetail .con .subtitle { font-size:1.2em; text-align:center; } .overlaycon.privacy {} .overlaycon.privacy .con { padding:2em; text-align:center; } .overlaycon.privacy .con textarea { width:100%; height:400px; } .overlaycon.privacy .con .btn-close { font-size:1.2em; text-align:center; } .overlaycon.basic { width:500px; } .overlaycon.basic .con { text-align:center; padding:1em 1.5em; } .overlaycon.basic .con p { font-size:1.1em; text-align:center; margin:0; width:auto; padding:.5em 5em; } .overlaycon.removep .con { margin:4em auto; width:90%; xxxxmax-width:450px; text-align:center; } .overlaycon.removep .con h3 { font-size:1.3em; } .overlaycon.removep .con>.item { display:flex; border-bottom:1px solid #ccc; align-items:center; margin:1em 0; font-size:1em; text-align:left; } .overlaycon.removep .con>.item * { font-size:1em; padding:1em; } .overlaycon.removep .con .row { display:flex; border-bottom:1px solid #ccc; justify-content:center; align-content:center; padding:1em 0; font-size:1em; text-align:left; flex-wrap:wrap; width:100%; } .overlaycon.removep .con .row .item { display:block; width:250px; margin:0; padding:0 2em; font-size:1em; text-align:center; border-radius:5px; border:2px solid white; padding-bottom:80px; position:relative; } .overlaycon.removep .con .row .item * { font-size:1em; padding:.2em; text-align:center; } .overlaycon.removep .con .row .item .icon { width:200px; } .overlaycon.removep .con .row .item h3 { font-size:1.2em; } .overlaycon.removep .con .row .item .con { font-size:.9em; text-align:justify; width:100%; margin:1em 0; } .overlaycon.removep .con .row .item .price { font-weight:bold; position:absolute; bottom:3.8em; left:50%; transform:translateX(-50%); } .overlaycon.removep .con .row .item .btn-select { padding:.5em 1em; background:#ff6b00; color:white; margin-bottom:1em; position:absolute; bottom:0; left:50%; transform:translateX(-50%); } .overlaycon.removep .con .row .item.selected { border-color:#ff6b00; } .overlaycon.removep .con .row .item.selected .btn-select { /*background:#ff6b00; color:white;*/ background:transparent; color:#ff6b00; } .overlaycon.removep .con .row .item.selected .btn-select:before { content:url(../icon/icon-checked-orange.svg); display:inline-block; width:1.3em; margin-right:.5em; transform:translateY(3px); } .overlaycon.removep .con .row .item.disabled .btn-select { background:#e1e2e5; color:#aaa; } .overlaycon.removep .con .btnrow { text-align:center; padding:1em; margin-bottom:-2em; } .overlaycon.removep .con .btnrow.hide { display:none; } .overlaycon.addlist { width:500px; } .overlaycon.addlist .con { text-align:center; margin:2em; } .overlaycon.addlist .con p { font-size:1.2em; text-align:left; margin:1em auto; width:auto; padding-left:1.5em; position:relative; } .overlaycon.addlist .con p input[type="radio"] { margin-right:.5em; position:absolute; top:.2em; left:.2em; } .overlaycon.loading { width:500px; background:transparent; } .overlaycon.loading .con { text-align:center; margin:2em; font-size:2em; color:white; } .overlaycon.loading p { text-align:center; font-weight:bold; color:white; } .overlaycon.otheradd { text-align:left; font-size:1.1em; width:650px; padding:4em; } .overlaycon.otheradd .orange { color:orange; } .overlaycon.otheradd .blue { color:dodgerblue; } .overlaycon.otheradd h2 { margin-top:.3em!important; font-size:1.5em!important; } .overlaycon.otheradd table.orange td, .overlaycon.otheradd table.orange th { background:#ffedcc; color:#333; } .overlaycon.otheradd table.orange tr:nth-child(odd) td, .overlaycon.otheradd table.orange tr:nth-child(odd) th { background:#fde0a0; color:#333; } .overlaycon.otheradd table.blue td, .overlaycon.otheradd table.blue th { background:#e9f3ff; color:#333; } .overlaycon.otheradd table.blue tr:nth-child(odd) td, .overlaycon.otheradd table.blue tr:nth-child(odd) th { background:#cee4ff; color:#333; } .overlaycon.hualianform { text-align:left; font-size:1.02em; width:750px; padding:4em; } .overlaycon.hualianform .con { padding:.5em 1.5em; } .overlaycon.hualianform .con h2 { margin-top:0; font-size:1.5em!important; color:orange;} .overlaycon.hualianform .con .must { display:block; padding:.1em 0; } .overlaycon.hualianform .con .must span { display:inline-block; width:20%; } .overlaycon.hualianform .con .must input { display:inline-block; padding:.2em .5em; width:79%; height:45px; } .overlaycon.hualianform .con .must textarea { vertical-align:top; display:inline-block; padding:.2em .5em; width:79%; height:105px; } .overlaycon.hualianform .con .must .input-dateflat { display:inline-block; width:39%; margin-right:4px; } .overlaycon.hualianform .con .must .select-time { display:inline-block; min-width:0; width:39%; } .overlaycon.hualianform .con .must span.top { vertical-align:top; padding-top:.5em; } .overlaycon.hualianform .btnrow { text-align:center!important; display:block!important; } .coshoppop { display:block; display:none; width:100%; height:auto; position:fixed; top:60px; left:0; background:white; padding:1em; z-index:777; } @media -ms-viewport, screen and (min-width:1401px) { body { padding-top:90px; } .header { height:90px; } .header .logo { width:12vw; } .nav a { font-size:1.1em; } .nav a:after { content:''; display:block; width:0; height:4px; background:#333; position:absolute; bottom:0; left:0; transition:all .3s; } .nav a:hover:after { width:100%; } .nav a.selected { background:#f6f6f7; } } @media -ms-viewport, screen and (min-width:941px) and (max-width:1440px) { body { padding-top:70px; } .header { height:70px; } .header .logo { width:12vw; } .nav a { font-size:1.05em; } .nav a:after { content:''; display:block; width:0; height:4px; background:#333; position:absolute; bottom:0; left:0; transition:all .3s; } .nav a:hover:after { width:100%; } .nav a.selected { background:#f6f6f7; } } @media -ms-viewport, screen and (min-width:641px) and (max-width:940px) { .header .logo { width:14vw; } .nav a { width:auto; padding:1em; } .container { padding:0; } } @media -ms-viewport, screen and (max-width:640px) { body { xx-padding-top:60px; padding-top:105px; } body.coshop { padding-top:60px; } .pc { display:none; } .mobile { display:block; } .header { height:60px; } .header .logo { width:150px; left:1.5em; transform:translateY(-.06em); } .header .estoretitle { display:none; } .header .coshopbrand { margin-left:.5em; transform:translateY(.5em); } .header .coshopbrand:before { left:-1.3em; } .header .coshopbrand img { height:2.7em; } .header .addbar { text-align:left; padding:.8em .5em; } .header .addbar strong { margin-right:.5em; vertical-align:middle; } .header .addbar p { max-width:calc(100% - 160px); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; vertical-align:middle; display:block; } .header .addbar a { vertical-align:middle; position:absolute; top:50%; right:1em; transform:translateY(-50%); } .nav { background:white; position:relative; top:auto; left:auto; right:auto; width:100vw; height:auto; display:flex; transform:none; } .nav a { display:inline-block; text-align:center; font-size:.9em; font-weight:normal; width:25vw; padding:1em .2em; letter-spacing:-1px; } .nav.open { display:block; transform:translate(0,0) scale(1); } .nav a.selected:after { display:block; width:100%; color:dodgerblue; } .navicon { display:block; display:none; } .footer { font-size:1em; } .footer .col { padding:1em 0; } .footer .col a { width:150px; margin:0 0 .5em 0; } .footer .col.logoset { padding:1em 0; } .footer .col.sub { text-align:left; padding-top:0; padding-left:0; } .footer .col.sub a.btn-social { position:relative; top:auto; left:auto; } .container:before { background:#f1f2f5; } .container.order:before { height:14em; } .overlaycon { width:calc(100vh - 140px)!important; max-height:calc(100vh - 140px); height:auto; } .overlaycon .mask { margin:0; max-height:calc(100vh - 140px); height:calc(100vh - 140px); } .overlaycon .mask .imgobj { width:100%; height:300px; position:relative; margin:0 auto; padding:0; } .overlaycon .mask .imgobj img { height:300px; width:auto; position:absolute; top:0; left:50%; transform:translateX(-50%); } .overlaycon .mask .con { display:block; text-align:left; padding:4em 2em; } .overlaycon .mask .con img, .overlaycon .mask .con img.img, .overlaycon .mask .con img.icon { width:60%; } .overlaycon .mask .con { padding:0; margin:2em; width:calc(100% - 4em); } .overlaycon .mask .con p { display:block; padding:0; text-align:left; margin:2px 0; } .overlaycon .mask .con p span { display:inline-block; margin-right:10px; } .overlaycon .mask .con .price { display:block; color:#f86200; font-size:1.4em; margin-top:10px; } .overlaycon .mask .con .price2 { display:block; } .overlaycon.plandetail .mask .con { padding:0; margin:0; width:100%; } .overlaycon.plandetail .con h2 { font-size:1.2em; } .overlaycon.plandetail .mask .con img, .overlaycon.plandetail .mask .con img.img { width:100%; } .overlaycon.plandetail .mask .con img.icon { width:40%; } .overlaycon.otheradd { padding:0; } .overlaycon.hualianform { padding:2em; width:100%; } .overlaycon.removep .con h3 { margin:2em auto; text-align:center; } .overlaycon.removep .con .row { display:block; border-bottom:0; } .overlaycon.removep .con .row .item { width:80%; margin:1em auto; border-bottom:1px solid #ccc; } .overlaycon.removep .con>.item { display:block; text-align:center; } .overlaycon.removep .con>.item h3 { font-size:1.3em; padding:0; margin:1em auto; } .overlaycon.removep .con>.item .count, .overlaycon.removep .con>.item .right { display:inline-block; width:49%; } .overlaycon.removep .con>.item .right { text-align:right; } .overlaycon.sortcon .con p { margin:8px 0; padding:0 10%; width:100%; text-align:left; } .overlaycon.sortcon .con p input { width:40px; } } /**/ .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:640px) { .version-tfm .nav a.btnofficial { position:fixed; top:.4em; right:.2em; } } /* ============================================================================================================ _ _ | |_ ___ _ __| |__ __ _ _ _ _ _ ___ _ _ | _/ _ \ '_ \ '_ \/ _` | ' \| ' \/ -_) '_| \__\___/ .__/_.__/\__,_|_||_|_||_\___|_| |_| ============================================================================================================ */ .row { xx-border:1px solid red; padding:1em; } .row.bggray { background:#f1f2f5; } .row.bgwhite { background:white; } .bannerblock { display:block; height:21.5vw; margin:0; margin-bottom:-.5em; border-radius:0px; text-align:center; position:relative; z-index:150; overflow:hidden; cursor:pointer; } .bannerblock .item { display:block; width:auto; max-width:1900px; height:100%; margin:0; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); overflow:hidden; } .bannerblock .item img { display:block; padding:0; margin:0; height:100%; width:auto; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .bannerblock .item img.pc { display:block; } .bannerblock .item img.mobile { display:none; } .bannerblock .navset { display:block; width:100%; margin:0; padding:.6em 1em; z-index:65; position:absolute; bottom:0; left:50%; transform:translateX(-50%); text-align:center; } .bannerblock .navset a { display:inline-block; padding:0; margin:.3em; width:10px; height:10px; opacity:.5; background:white; border-radius:5px; cursor:pointer; } .bannerblock .navset a.selected { opacity:1; box-shadow:0 1px 2px rgba(0,0,0,.2); } .bannerblock .cover { display:block; width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(50,50,50,.7); z-index:50; opacity:0; } .bannerblock .btn-prev, .bannerblock .btn-next { display:block; width:3em; height:3em; margin:0; padding:1em; position:absolute; top:50%; transform:translateY(-50%); text-align:center; background-position:center; background-color:#333; background-size:50%; background-repeat:no-repeat; opacity:.6; z-index:60; transition:all .2s; cursor:pointer; border-radius:5px; } .bannerblock .btn-prev:hover { opacity:1; left:5px; } .bannerblock .btn-next:hover { opacity:1; right:5px; } .bannerblock .btn-prev { left:10px; background-image:url(../icon/icon-arrowprev-white.svg); } .bannerblock .btn-next { right:10px; background-image:url(../icon/icon-arrownext-white.svg); } @media -ms-viewport, screen and (max-width:1440px) and (min-width:641px) { .bannerblock { display:block; height:24vw; } } @media -ms-viewport, screen and (max-width:640px) { .bannerblock { height:122vw; border-radius:0; margin:0; margin-bottom:0; } .bannerblock .item { width:100%; height:100%; max-height:100%; } .bannerblock .item img { width:100%; height:auto; } .bannerblock .item img.pc { display:none; } .bannerblock .item img.mobile { display:block; } .bannerblock .nav { padding:0; } .bannerblock .nav a { margin:.2em; } .bannerblock .cover { display:none; } .bannerblock .btn-prev, .bannerblock .btn-next { padding:.2em; background-size:50%; } .bannerblock .btn-prev { left:0; } .bannerblock .btn-next { right:0; } } /* ============================================================================================================ _ _ _ _ _ _ | (_)__| |_ | |__| |___ __| |__ | | (_-< _| | '_ \ / _ \/ _| / / |_|_/__/\__| |_.__/_\___/\__|_\_\ ============================================================================================================ */ .sectitle { display:block; width:auto; font-size:2.2em; text-align:center; position:relative; margin:1em auto; } /* .sectitle:before, .sectitle:after { content:''; display:block; position:absolute; top:50%; transform:translateY(-50%); border-top:1px solid #333; width:10vw; height:1px; } .sectitle:before { left:-11vw; } .sectitle:after { right:-11vw; } */ .sectitle span { color:#00b3ff; } .sectitle.recommand { font-weight:normal; background:orange; color:white; padding:1.2em; font-size:1.2em; margin:0; } .productblock { display:block; margin:0 auto; box-sizing:border-box; padding:0; overflow:hidden; position:relative; text-align:center; box-shadow:none; padding:2em 0; } .productblock .col { display:inline; position:relative; width:auto; vertical-align:top; } .productblock .col1 { margin-right:-5px; } .productblock .item { display:inline-block; position:relative; width:calc(100% - 4.8em); padding:0; margin:2.4em;margin:1em; border-radius:0; z-index:10; box-shadow:none; vertical-align:top; border:1px solid #ccc; cursor:pointer; transition:all .3s; overflow:hidden; opacity:0; } .productblock .item .imgobj { display:block; width:100%; } .productblock .item .imgobj img { display:block; width:100%; } .productblock .item .imgobj img.mobile { display:none; } .productblock .item .cover { display:block; position:absolute; top:50%; left:50%; width:100%; height:100%; background:#00b3ff; z-index:10; transform:translate(-50%,-50%); } .productblock .item .coverbg { display:block; position:absolute; top:50%; left:50%; width:101%; height:101%; background:#f1f2f5; z-index:10; transform:translate(-50%,-50%); } .productblock .item .corner { display:block; position:absolute; top:0; left:127%; width:200px; height:200px; background:#00b3ff; z-index:12; transform:translate(-50%,-50%) rotate(45deg); transition:all .3s; } .productblock .item .corner .arrow { display:block; width:50px; height:50px; position:absolute; top:70%; left:50%; z-index:12; transform:translate(-50%,-50%) rotate(-45deg); transition:all .7s; background-image:url(../icon/icon-parrow.svg); background-repeat:no-repeat; background-size:50%; background-position:center; } .productblock .item .corner p { display:block; color:white; font-size:.7em; font-weight:bold; text-transform:uppercase; position:absolute; top:86%; left:46%; z-index:13; transform:translate(-50%,-50%) rotate(-45deg); transition:all .7s; } .productblock .item .conxxxx { display:block; padding:1.5em 3.5em; font-size:.9em; text-align:center; line-height:140%; background:rgba(255,255,255,.5); position:absolute; top:110%; left:50%; transform:translate(-50%,-100%); border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.2); opacity:0; transition:all .3s; width:100%; box-shadow:none; display:none; } .productblock .item .con h3 {} .productblock .item .con:before { content:''; display:block; } .productblock .item.show { opacity:1; } .productblock .item.show .cover { animation:_lazyout_r 1s cubic-bezier(.3,1,.5,1) forwards; } .productblock .item.show .coverbg { animation:_lazyout .7s cubic-bezier(.3,1,.5,1) forwards; } @keyframes _lazyout_r { 0%{ left:50%; transform:translate(-50%,-50); } 100%{ left:150%; transform:translate(-50%,-50); }} @keyframes _lazyout { 0%{ left:50%; } 100%{ left:150%; }} .productblock .item.showover {} .productblock .item.showover .cover, .productblock .item.showover .coverbg { display:none; } .productblock .item.additional {} .productblock .item.additional img { height:calc(50vw - 20px); } .productblock .item.mobile { width:calc(33% - 4em); padding:0; margin:2em; xxxx-width:calc(50% - 4.5em); } .productblock .item.mobile img.pc { display:none; } .productblock .item.mobile img.mobile { display:block; } .productblock .item.mobile .corner { left:144%; } .productblock .item:hover { box-shadow:0 2px 5px rgba(0,0,0,.2); xxx-transform:translateY(-.5em) scale(1.02); } .productblock .item:hover .corner { left:102%; } .productblock .item:hover .conxxxxx { top:101%; opacity:1; } .productblock .item:hover .corner .arrow { top:80%; left:40%; } .productblock .btn-loadmore { display:block; margin:3em auto; font-size:1.2em; cursor:pointer; } .productblock.block64 {} .productblock.block64 .item { padding-left:60%; } .productblock.block64 .item .imgobj { display:block; width:64.5%; height:100%; overflow:hidden; position:absolute; top:0; left:0; } .productblock.block64 .item .imgobj img { display:block; width:auto; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } .productblock.block64 .item .con { display:block; padding:2.5em 3.5em; margin:0; width:100%; height:100%; text-align:left; position:relative; } .productblock.block64 .item .con h3 { font-weight:bold; font-size:1.5em; text-align:center; } .productblock.block64 .item .con p { margin-top:1em; text-align:justify; font-size:1.1em; } .productblock.block64 .item .con .btn-more { border-radius:4em; font-size:1.1em; position:absolute; bottom:1.8em; left:50%; transform:translateX(-50%); word-break:keep-all; background:#333; } .productblock.block64 .item:nth-child(even) { padding-left:0; padding-right:60%; } .productblock.block64 .item:nth-child(even) .imgobj { left:auto; right:0; } .productblock.block64 .item:hover .con .btn-more { background:dodgerblue; } .version-tfm .productblock.block64 .item:hover .con .btn-more { background:orange; } .productblock.forlogin { text-align:left; } .adproductblock { padding:1em; background:white; border:1px solid red; } @media -ms-viewport, screen and (max-width:1440px) and (min-width:641px) { .productblock { padding:1em 0; } .productblock .item {} .productblock .item.mobile { width:calc(33% - 3em); xxxx-width:calc(50% - 4em); margin:1.5em; } .productblock.block64 .item .con { padding:2.5em 2em; font-size:.9em } } @media -ms-viewport, screen and (max-width:1024px) and (min-width:641px) { } @media -ms-viewport, screen and (max-width:640px) { .sectitle { font-size:1.5em; } .productblock { } .productblock .col { display:inline-block; width:calc(50vw - 10px); vertical-align:top; } .productblock .col1 { margin-right:-5px; } .productblock .item { width:88%; margin:.8em 0; } .productblock .item .imgobj img.pc { display:none; } .productblock .item .imgobj img.mobile { display:block; } .productblock .item .corner { left:150%; display:none; } .productblock .item.mobile { width:80%; margin:1.2em 0; } .productblock .item { xxxborder:1px solid #ccc; xxxxbox-shadow:0 1px 3px rgba(0,0,0,.06); margin:1.1em 0; } .productblock.block64 .item { padding-left:0; height:auto!important; } .productblock.block64 .item .imgobj { width:100%; position:relative; top:auto; left:0; height:auto!important; } .productblock.block64 .item .imgobj img { width:100%; height:auto; position:relative; top:auto; left:auto; transform:none; } .productblock.block64 .item .con { padding:2em 2em; } .productblock.block64 .item .con .btn-more { position:relative; bottom:auto; left:50%; transform:translateX(-50%); margin:2em auto 0 auto; width:180px; text-align:center; } .productblock.block64 .item:nth-child(even) { padding-right:0; } } /**/ .version-tfm .productblock .item .corner, .version-tfm .productblock .item .cover { background:orange; } /* ============================================================================================================ _ _ _ _ __| |___| |_ __ _(_) | _ __ __ _ __ _ ___ / _` / -_) _/ _` | | | | '_ \/ _` / _` / -_) \__,_\___|\__\__,_|_|_| | .__/\__,_\__, \___| |_| |___/ ============================================================================================================ */ .detailbanner { display:block; box-sizing:border-box; width:100%; margin:2em auto 0 auto; padding:0; overflow:hidden; overflow:hidden; position:relative; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.2); } .detailbanner .banner { display:inline-block; box-sizing:border-box; width:100%; padding:0; margin:0 auto; } .detailbanner .banner .imgobj { display:inline-block; position:relative; width:100%; padding:0; margin:0; } .detailbanner .banner .imgobj img { display:block; width:100%; margin:0; } .detailbanner .banner .imgobj img.pc { display:block; } .detailbanner .banner .imgobj img.mobile { display:none; } .detailbanner .con { display:block; position:relative; box-sizing:border-box; text-align:left; font-size:1.1em; width:100%; background:white; margin:0 auto; padding:3em 5em; padding-left:280px; background:#e8e9ef; background:#f7f7fb; } .detailbanner .con .icon { display:block; width:100px; position:absolute; top:50%; left:140px; transform:translateY(-50%); } .detailbanner .con h2 { display:block; margin-bottom:.5em; color:orange; color:#ff8500; font-size:2em; } .detailbanner .con p { font-size:1.1em; } .detailbanner.block64 .banner { width:64%;width:100%; } .detailbanner.block64 .con { display:block; position:relative; box-sizing:border-box; text-align:left; font-size:1.1em; width:100%; background:white; margin:0 auto; padding:3em 5em; padding-left:280px; background:#e8e9ef; background:#f7f7fb; } .detailbanner.block64 .con .icon { display:block; width:100px; position:absolute; top:50%; left:140px; transform:translateY(-50%); } .detailbanner.block64 .con h2 { display:block; margin-bottom:.5em; color:orange; color:#ff8500; font-size:2em; } .detailbanner.block64 .con p { font-size:1.1em; } .additionalblock { margin:0 auto; } .additionalblock a, .additionalblock img { display:block; width:100%; } .iconblock { display:block; box-sizing:border-box; width:100%; margin:0 auto; overflow:hidden; overflow:hidden; position:relative; text-align:center; padding:2em 5em; } .iconblock .item { display:inline-block; width:20%; text-align:center; padding:.5em; vertical-align:top; } .iconblock .item img { display:block; width:60%; height:auto; margin:0 auto; } .iconblock .item h3 { xxxdisplay:block; font-size:1.4em; height:2.5em; } .iconblock .item p { display:block; } .iconblock .item .btn-more { display:inline-block; margin:1em auto; border-radius:2em; padding:.5em 1em; border:1px solid black; cursor:pointer; transition:all .2s; } .iconblock .item .btn-more:hover { background:#333; color:white; } .planblock { display:block; text-align:center; box-sizing:border-box; position:relative; padding:1em 0; margin-bottom:-2em; } .planblock h2.sectitle { display:block; } .planblock .planset { display:flex; justify-content:center; margin:1em auto 0 auto; xxxxborder:1px solid #ccc; padding:0; flex-wrap:wrap; } .planblock .planset .item { display:block; width:20%; border-radius:5px; padding:.5em; background:white; box-shadow:0 1px 3px rgba(0,0,0,.3); text-align:center; cursor:pointer; margin:.5em; position:relative; width:14%; margin:.3em; border-radius:0; } .planblock .planset .item h3 { font-family:'Arial Black',PingFangTC-Regular,'微軟正黑體','Arial','Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; font-size:2.8em; color:orange; color:dodgerblue; margin:.1em 0; letter-spacing:-.05em; } .planblock .planset .item:nth-child(1) h3 { color:dodgerblue; } .planblock .planset .item:nth-child(2) h3 { color:#25b2d7; } .planblock .planset .item:nth-child(3) h3 { color:#5fc09d; } .planblock .planset .item:nth-child(4) h3 { color:#88c86f; } .planblock .planset .item:nth-child(5) h3 { color:#a9d041; } .planblock .planset .item:nth-child(6) h3 { color:#ccbb1f; } .planblock .planset .item h3.price { font-size:2em; color:#333; } .planblock .planset .item h3.upload { font-size:1.3em; color:#333; } .planblock .planset .item h3.upload:before { content:'Upload '; font-size:.6em; } .planblock .planset .item .icon { display:block; width:100px; height:100px; margin:.5em auto; } .planblock .planset .item:after { content:''; display:block; height:0; width:0; background:dodgerblue; border:0; position:absolute; bottom:0; left:50%; transform:translate(-50%,-50%) rotate(-45deg); transform-origin:center; transition:all .3s; } .planblock .planset .item:nth-child(1):after { background:dodgerblue; } .planblock .planset .item:nth-child(2):after { background:#25b2d7; } .planblock .planset .item:nth-child(3):after { background:#5fc09d; } .planblock .planset .item:nth-child(4):after { background:#88c86f; } .planblock .planset .item:nth-child(5):after { background:#a9d041; } .planblock .planset .item:nth-child(6):after { background:#ccbb1f; } .planblock .planset .item:before { content:''; display:block; width:100%; height:0; position:absolute; bottom:0; left:0; z-index:1; background:dodgerblue; transition:all .3s; } .planblock .planset .item.selected h3 { color:white; } .planblock .planset .item.selected { /*background:orange; background:dodgerblue; color:white;*/ } .planblock .planset .item.selected:nth-child(1) { background:dodgerblue; } .planblock .planset .item.selected:nth-child(2) { background:#25b2d7; } .planblock .planset .item.selected:nth-child(3) { background:#5fc09d; } .planblock .planset .item.selected:nth-child(4) { background:#88c86f; } .planblock .planset .item.selected:nth-child(5) { background:#a9d041; } .planblock .planset .item.selected:nth-child(6) { background:#ccbb1f; } .planblock .planset.setab .item.itemab.selected:nth-child(1) h3 { color:dodgerblue; } .planblock .planset.setab .item.itemab.selected:nth-child(2) h3 { color:#25b2d7; } .planblock .planset.setab .item.itemab.selected:nth-child(3) h3 { color:#5fc09d; } .planblock .planset.setab .item.itemab.selected:nth-child(4) h3 { color:#88c86f; } .planblock .planset.setab .item.itemab.selected:nth-child(5) h3 { color:#a9d041; } .planblock .planset.setab .item.itemab.selected:nth-child(6) h3 { color:#ccbb1f; } .planblock .planset.setab .item.itemab.itemabm.selected h3 { color:white; } .planblock .planset.setab .item.itemab.itemabm.selected:nth-child(1) { background:dodgerblue; } .planblock .planset.setab .item.itemab.itemabm.selected:nth-child(2) { background:#25b2d7; } .planblock .planset.setab .item.itemab.itemabm.selected:nth-child(3) { background:#5fc09d; } .planblock .planset.setab .item.itemab.itemabm.selected:nth-child(4) { background:#88c86f; } .planblock .planset.setab .item.itemab.itemabm.selected:nth-child(5) { background:#a9d041; } .planblock .planset.setab .item.itemab.itemabm.selected:nth-child(6) { background:#ccbb1f; } .planblock .planset .item.selected:after { display:block; bottom:-1.5em; width:1.5em; height:1.5em; } .planblock .planset .item.disabled { background:#eee; color:#888; cursor:default; } .planblock .planset .item.disabled h3 { color:#ccc; } .planblock .planset .item.disabled .btn-more { border:1px solid #aaa!important; opacity:.5; cursor:default; display:none!important; } .planblock .planset .item.disabled .icon { opacity:.4; } .planblock .planset.setab { xxxx-flex-wrap:wrap; } .planblock .planset.setab .item { width:50%; width:calc(50% - 2em); xxxx-min-width:calc(33.33% - 2em); margin:1em; padding:1em 2em; } .planblock .planset.setab .item:last-child { xxxxxmargin-right:0; } .planblock .planset.setab .item h3 { font-size:2em; font-family:PingFangTC-Regular,'微軟正黑體',Arial,"Hiragino Sans GB","Source Han Sans",'PingFangTC-Regular',sans-serif; font-weight:bold; font-weight:normal; } .planblock .planset.setab .item p { margin:1em 0; } .planblock .planset.setab .item .subtitle { font-size:1.1em; height:4em; word-wrap:normal; overflow:hidden; xxxxx-white-space:nowrap; text-overflow:ellipsis; } .planblock .planset.setab .item .btn-more { display:inline-block; margin:1em auto; border-radius:2em; padding:.5em 1em; border:1px solid black; cursor:pointer; transition:all .2s; position:relative; z-index:5; } .planblock .planset.setab .item .btn-more:hover { background:#333; color:white; } .planblock .planset.setab .item.selected .btn-more { background:#333; color:white; } .planblock .planset.setab .item.itemab { background:white; border:6px solid white; transition:all .3s; } .planblock .planset.setab .item.itemab:after { display:block; background:transparent; bottom:auto; left:auto; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 2px 2px 0; border-color:transparent dodgerblue transparent transparent; transform:translate(0,0) rotate(0); } .planblock .planset.setab .item.itemab:before { content:url(../icon/icon-checked-white.svg); background:transparent; display:block; position:absolute; left:auto; bottom:auto; top:.7em; right:.7em; width:2em; height:2em; } .planblock .planset.setab .item.itemab.selected { border:6px solid dodgerblue; } .planblock .planset.setab .item.itemab.selected:nth-child(1) { border-color:dodgerblue; } .planblock .planset.setab .item.itemab.selected:nth-child(2) { border-color:#25b2d7; } .planblock .planset.setab .item.itemab.selected:nth-child(3) { border-color:#5fc09d; } .planblock .planset.setab .item.itemab.selected:nth-child(4) { border-color:#88c86f; } .planblock .planset.setab .item.itemab.selected:nth-child(5) { border-color:#a9d041; } .planblock .planset.setab .item.itemab.selected:nth-child(6) { border-color:#ccbb1f; } .planblock .planset.setab .item.itemab.selected:nth-child(1):after { border-color:transparent dodgerblue transparent transparent; } .planblock .planset.setab .item.itemab.selected:nth-child(2):after { border-color:transparent #25b2d7 transparent transparent; } .planblock .planset.setab .item.itemab.selected:nth-child(3):after { border-color:transparent #5fc09d transparent transparent; } .planblock .planset.setab .item.itemab.selected:nth-child(4):after { border-color:transparent #88c86f transparent transparent; } .planblock .planset.setab .item.itemab.selected:nth-child(5):after { border-color:transparent #a9d041 transparent transparent; } .planblock .planset.setab .item.itemab.selected:nth-child(6):after { border-color:transparent #ccbb1f transparent transparent; } .planblock .planset.setab .item.itemab.selected:after { border-width:0 80px 80px 0; } .planblock .conbox { display:block; background:white; text-align:center; padding:2em; margin:2em auto; box-shadow:0 1px 2px rgba(0,0,0,.2); } .planblock .conbox .boxrow { display:flex; flex-wrap:wrap; max-width:60%; margin:1em auto; border:1px solid black; } .planblock .conbox .boxrow p { display:block; border-right:1px solid black; width:25%; padding:.5em; text-align:center; font-size:1.1em; height:auto!important; } .planblock .conbox .boxrow p span { display:inline-block; } .planblock .conbox .boxrow p:last-child { border-right:0; } .planblock .conbox .boxrow p:nth-child(4) { border-right:0; } .planblock .conbox .boxrow p.full { width:100%; border-top:1px solid black; } .planblock .conbox .boxrow p.full>span { display:block; font-weight:bold; } .planblock .conbox .boxrow.boxrowab { margin:1em auto; border:0; display:flex; max-width:500px; flex-wrap:wrap; justify-content:center; } .planblock .conbox .boxrow.boxrowab >span { display:block; width:50%; margin:0; margin-right:-1px; text-align:center; padding:.8em 3em; font-size:1.2em; border:1px solid #333; border-right:0; } .planblock .conbox .boxrow.boxrowab >span:last-of-type { border-right:1px solid #333; } .planblock .conbox .boxrow.boxrowab p.full { text-align:center; display:block; border:1px solid #333; clear:both; width:100%; margin:-1px auto auto auto; } .planblock .conbox .boxrow.boxrowab p>span { display:block; font-weight:bold; } .planblock .conbox h3 { font-family:'Arial Black',PingFangTC-Regular,'微軟正黑體','Arial','Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; font-size:2.8em; color:orange; color:#333; margin:.1em 0; letter-spacing:-.05em; } .planblock .conbox h4.firstpay { font-size:2em; font-weight:bold; text-align:center; } .planblock .conbox h4.firstpay span { font-family:'Arial Black',PingFangTC-Regular,'微軟正黑體','Arial','Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; color:orange; font-size:1.1em; } .planblock .conbox p { font-size:1.1em; height:4.2em; } .planblock .conbox .boxgift { margin-top:1em; display:flex; flex-wrap:wrap; } .planblock .conbox .boxgift a { display:block; margin:0; } .planblock .conbox .boxgift a img { display:block; max-width:100%; } .planblock .conbox .boxgift img { display:block; max-width:100%; margin:0 auto; } .planblock .conbox .conab .boxgift a { display:block; max-width:25%; margin:0; } .planblock .conbox .conab .graybox { display:block; padding:1.5em 2em; background:#f1f2f5; padding-left:40%; text-align:left; position:relative; } .planblock .conbox .conab h3 { font-family:PingFangTC-Regular,'微軟正黑體',Arial,"Hiragino Sans GB","Source Han Sans",PingFangTC-Regular,sans-serif; font-size:1.8em; } .planblock .conbox .conab .icon { margin:.5em auto; display:block; width:100px; position:absolute; top:50%; left:20%; transform:translate(-50%,-50%); } .planblock .conbox .conab .boxrow { margin:1em auto; border:0; display:flex; max-width:500px; flex-wrap:wrap; justify-content:center; } .planblock .conbox .conab .boxrow >span { display:block; width:50%; margin:0; margin-right:-1px; text-align:center; padding:.8em 3em; font-size:1.2em; border:1px solid #333; border-right:0; } .planblock .conbox .conab .boxrow >span:last-of-type { border-right:1px solid #333; } .planblock .conbox .conab .boxrow p.full { text-align:center; display:block; border:1px solid #333; clear:both; width:100%; margin:-1px auto auto auto; } .planblock .conbox .conab .boxrow p>span { display:block; font-weight:bold; } .planblock .conbox .conab .firstpay { text-align:left; } .planblock .conbox .conab .boxgift { display:flex; flex-wrap:wrap; justify-content:center; } .planblock .conbox .conab .boxgift a { margin:.5em; position:relative; display:block; width:20%; border:1px solid #ccc; color:#333; text-align:center; text-decoration:none; } .planblock .conbox .conab .boxgift a p { margin:.5em 0 0 0; padding:1.5em 1em; text-align:center; text-decoration:none; } .planblock .conbox .conab .boxgift a img { margin:.5em auto; display:block; width:70%; height:130px; object-fit:contain; } .planblock .conbox .conab .boxgift a.selected:after { content:url(../icon/icon-checked-white.svg); display:block; width:1.5em; height:1.5em; padding:.3em; border-radius:50%; background:#87b91c; position:absolute; bottom:4em; left:50%; transform:translateX(-50%); animation:_jumpout .3s forwards; } .planblock .conbox .conab .boxgift a.selected p { background:dodgerblue; color:white; } .planblock .conbox .conab .boxgift a.disabled { cursor:default; opacity:.3; } .planblock .conbox .conab .graybox.full { padding-left:2em; text-align:center; } .planblock .conbox .conab .graybox.full .boxrow { text-align:center; margin:1em auto; } .planblock .conbox .conab .graybox.full .firstpay { text-align:center; } @keyframes _jumpout { 0%{ transform:translateX(-50%) scale(.1); } 70%{ transform:translateX(-50%) scale(1.1); } 100%{ transform:translateX(-50%) scale(1); } } .planblock1 { margin-bottom:0; } .moreblock { text-align:center; } .morelinkset { margin:1.5em 0; } .morelinkset a { display:inline-block; border-right:1px solid #ccc; margin:0; padding:1em; font-size:1em; color:#333; text-decoration:none; } .morelinkset a:last-child { border-right:0; } .morelinkset a .icon-gift, .morelinkset a .icon-more { display:inline-block; width:2em; height:2em; vertical-align:middle; margin-right:.4em; background-size:cover; } .morelinkset a .icon-gift { background-image:url(../img/icon-gift.svg); } .morelinkset a .icon-more { background-image:url(../img/icon-more.svg); } .adblock { display:block; box-sizing:border-box; background:white; overflow:hidden; overflow:hidden; position:relative; text-align:center; padding:2em 5em; margin:2em auto; box-shadow:0 1px 2px rgba(0,0,0,.2); } .adblock .mask { display:flex; width:90%; text-align:center; xxxxborder:1px solid red; margin:0 auto; align-items:stretch; justify-content:center; } .adblock .mask .item { display:block; width:20vw; text-align:center; vertical-align:top; overflow:hidden; margin:1em 0; padding:.5em 1em 4em 1em; vertical-align:top; position:relative; xxxxborder:1px solid #ccc; border-radius:3px; } .adblock .mask .item img { display:block; width:60%; height:auto; margin:1em auto; xxx-border:1px solid #ccc; } .adblock .mask .item h3 { display:block; font-size:1.2em; padding:1em; } .adblock .mask .item p { display:block; } .adblock .mask .item .btn-addtocart { display:block; xxxwidth:calc(100% - 2em); width:auto; font-size:1.1em; margin:0 auto; border-radius:2px; padding:.5em 1em; background:#888; color:white; cursor:pointer; transition:all .2s; position:absolute; bottom:0; left:50%; transform:translateX(-50%); } .adblock .mask .item .btn-addtocart:hover { background:#333; color:white; } .adblock .mask .item .controlset { display:block; font-size:1.1em; margin:0; position:absolute; bottom:0; left:50%; transform:translateX(-50%); background:transparent; padding:0; transition:all .2s; width:100%; display:none; } .adblock .mask .item .controlset p { display:inline-block; width:auto; font-size:1em; background:dodgerblue; color:white; border-radius:2px; text-align:center; padding:.5em 1em; } .adblock .mask .item .controlset p:before { content:url(../icon/icon-check.svg); display:inline-block; width:1em; transform:scale(1.3) translate(-3px, 2px); } .adblock .mask .item .controlset a { display:block; width:1.5em; height:1.5em; font-size:1.5em; line-height:100%; font-weight:bold; color:#333; padding:.14em 0; position:absolute; top:50%; transform:translateY(-50%); cursor:pointer; opacity:.5; border:1px solid #888; border-radius:50%; } .adblock .mask .item .controlset a.btn-minus { left:1em; } .adblock .mask .item .controlset a.btn-add { right:1em; } .adblock .mask .item .controlset a.btn-minus:hover, .adblock .mask .item .controlset a.btn-add:hover { opacity:1; } .adblock .mask .item.selected .btn-addtocart { display:none; } .adblock .mask .item.selected .controlset { display:block; } .adblock .mask .item .controlset p { display:inline-block; width:auto; font-size:1em; background:dodgerblue; color:white; border-radius:2px; text-align:center; padding:.5em 1em; } .adblock .navset { display:block; width:100%; margin:0; padding:1em; z-index:65; position:relative; left:50%; transform:translateX(-50%); text-align:center; } .adblock .navset a { display:inline-block; padding:0; margin:.3em; vertical-align:middle; width:10px; height:10px; opacity:.5; background:#555; border-radius:5px; cursor:pointer; } .adblock .navset a.selected { opacity:1; box-shadow:0 1px 2px rgba(0,0,0,.2); width:15px height:15px; } .adblock .cover { display:block; width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(50,50,50,.7); z-index:50; opacity:0; } .adblock .btn-prev, .adblock .btn-next { display:block; width:5em; height:5em; margin:0; padding:1em; position:absolute; top:45%; transform:translateY(-50%); text-align:center; background-position:center; border:1px solid #ccc; background-size:30%; background-repeat:no-repeat; opacity:.6; z-index:60; transition:all .2s; cursor:pointer; border-radius:3em; } .adblock .btn-prev:hover { opacity:1; } .adblock .btn-next:hover { opacity:1; } .adblock .btn-prev { left:80px; background-image:url(../icon/icon-arrowprev.svg); } .adblock .btn-next { right:80px; background-image:url(../icon/icon-arrownext.svg); } .adblock .row { display:flex; flex-wrap:wrap; justify-content:center; width:100%; text-align:left; margin:0 auto; } .adblock .row .item { display:block; width:25%; height:300px; overflow:hidden; margin:1em 0; padding:0 1em; position:relative; border-right:1px solid #ccc; vertical-align:middle; } .adblock .row .item:last-child { border-right:0; } .adblock .row .item.disabled { pointer-events:none; opacity:.5; } .adblock .row .item.disabled .btn-addtocart { background:gray!important; } .adblock .row .item.disabled.selected .btn-addtocart:before { display:none!important; } .adblock .row .item img { display:block; height:160px; width:100%; /*position:absolute; top:50%; left:0; transform:translateY(-50%); */cursor:pointer; } .adblock .row .item h3 { display:inline-block; font-size:1.2em; font-weight:bold; height:auto; vertical-align:middle; margin:.5em 0; } .adblock .row .item h3 span.orange { color:orange; } .adblock .row .item .btn-addtocart { display:block; position:relative; position:absolute; bottom:0; left:50%; transform:translateX(-50%); background:transparent; padding:0; transition:all .2s; text-align:center; background:#333; color:white; border-radius:40px; padding:.5em; cursor:pointer; width:150px; font-size:1.2em; } .adblock .row .item .btn-addtocart:hover { background:#444; } .adblock .row .item.selected .btn-addtocart { background:dodgerblue; } .adblock .row .item.selected .btn-addtocart:before { content:url(../icon/icon-check-green.svg); display:inline-block; width:1.2em; margin-right:.4em; margin-left:-.5em; transform:translateY(.2em); } .adblock .row .item.selected.included .btn-addtocart { pointer-events:none; } .adblock .row .item .controlset { display:block; width:150px; position:relative; position:absolute; bottom:4em; left:50%; transform:translateX(-50%); background:transparent; padding:0; transition:all .2s; text-align:center; } .adblock .row .item .controlset p { display:inline-block; font-size:1.2em; text-align:center; padding:.5em 1em; } .adblock .row .item .controlset a { display:block; width:1.5em; height:1.5em; font-size:1.5em; line-height:100%; font-weight:bold; color:#333; padding:.14em 0; position:absolute; top:50%; transform:translateY(-50%); cursor:pointer; opacity:.5; background:#ccc; color:#333; } .adblock .row .item .controlset a.btn-minus { left:1em; } .adblock .row .item .controlset a.btn-add { right:1em; } .adblock .row .item .controlset a.btn-minus:hover, .adblock .row .item .controlset a.btn-add:hover { opacity:1; } /* .boxothergifttitle { xxxxdisplay:none!important; } .boxothergift { display:flex; justify-content:left; flex-wrap:wrap; xxxxxisplay:none; } .boxothergift a { display:block; position:relative; width:calc(25% - 1em); text-align:center; padding-bottom:.5em; margin:.5em; border:1px solid #ccc; border-radius:5px; cursor:pointer; } .boxothergift a img { display:block; width:auto; margin:.5em auto; max-width:100%; height:150px; object-fit:contain; } .boxothergift a.selected { background:#333; color:white; border:0; box-shadow:0 1px 2px rgba(0,0,0,.2); } .boxothergift a.selected img { opacity:.3; } .boxothergift a.selected:after { content:url(../icon/icon-checked-white.svg); display:block; width:80px; height:80px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); } */ .boxothergifttitle { xxxxdisplay:none!important; } .boxothergift { display:flex; justify-content:center; flex-wrap:wrap; xxxxxisplay:none; } .boxothergift a { display:block; position:relative; width:calc(25% - 1em); text-align:center; margin:.5em; border:1px solid #ccc; border-radius:5px; cursor:pointer; } .boxothergift a img { display:block; width:auto; margin:.5em auto; max-width:100%; height:150px; object-fit:contain; } .boxothergift a p { padding:.8em; } .boxothergift a.selected { box-shadow:0 1px 2px rgba(0,0,0,.2); } .boxothergift a.selected p { background:dodgerblue; color:white; } .boxothergift a.selected:after { content:url(../icon/icon-checked-white.svg); display:block; width:2em; height:2em; position:absolute; top:calc(100% - 4.5em); left:50%; transform:translate(-50%,-50%); background:#8bc34a; border-radius:50%; } .boxothergift.total3 a { width:calc(33.33% - 1em); } .boxothergift.total4 a { width:calc(25% - 1em); } .boxothergift.total5 a { width:calc(33.33% - 1em); } .boxothergift.total5 a:nth-child(4), .boxothergift.total5 a:nth-child(5) { width:calc(50% - 1em); } .boxothergift.total6 a { width:calc(33.33% - 1em); } .boxothergift.total7 a { width:calc(25% - 1em); } .boxothergift.total7 a:nth-child(1), .boxothergift.total7 a:nth-child(2), .boxothergift.total7 a:nth-child(3) { width:calc(33.33% - 1em); } .giftblock { display:block; text-align:center; box-sizing:border-box; position:relative; margin:1em auto; xxpadding-bottom:2em; } .giftblock .conbox { display:block; background:white; padding:2em; margin:2em auto; box-shadow:0 1px 2px rgba(0,0,0,.2); } .giftblock .conbox h2.sectitle { display:block; } .giftblock .conbox .boxgift { display:block; margin:0 auto; max-width:80%; max-width:60%; } .giftblock .conbox .boxgift .item { display:block; max-width:100%; margin:0; padding:.8em; text-align:left; border-bottom:1px solid #ccc; position:relative; padding-left:4.5em; } .giftblock .conbox .boxgift .item b.num { display:block; width:1.6em; height:1.6em; text-align:center; font-weight:bold; font-size:1.2em; position:absolute; top:.5em; left:1em; border:1px solid #333; border-radius:50%; } .giftblock .conbox .boxgift .item p { display:block; text-align:left; font-size:1.2em; } .giftblock .conbox .boxgift .item img { display:block; max-width:100%; margin-top:.5em; } .giftblock .conbox .boxgift .item:last-child { border-bottom:0; } .noteblock { padding:4.5em; box-sizing:border-box; width:100%; margin:0 auto; background:white; } .noteblock h2 { font-size:1.2em; text-align:center; } .noteblock ol { margin:.5em; font-size:1.05em; text-align:left; list-style:decimal; padding:0 0 0 1.5em; line-height:140%; } .btn-order { display:block; width:auto; position:fixed; bottom:1em; right:1em; background:#068bf7; color:white; font-size:1.2em; padding:1em; border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.2); cursor:pointer; letter-spacing:-.05em; transition:all .3s; transform:translateX(120%); z-index:77; } .btn-order .plan { margin:.5em 0; font-size:1.1em; font-weight:bold; font-family:'Arial Black',PingFangTC-Regular,'微軟正黑體','Arial','Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; } .btn-order .plan span { display:block; font-size:1.15em; color:#333; color:orange; font-weight:inherit; font-family:inherit; } .btn-order .thumb { display:block; width:6em; } .btn-order .plan, .btn-order .thumb { display:none; } .btn-order .icon { display:block; width:4em; } .btn-order.show { transform:translateX(0); } .btn-order.on0 { background:dodgerblue; } .btn-order.on1 { background:#25b2d7; } .btn-order.on2 { background:#5fc09d; } .btn-order.on3 { background:#88c86f; } .btn-order.on4 { background:#a9d041; } .btn-order.on5 { background:#ccbb1f; } .btn-order:hover { padding:1em 1.5em; } .btn-order.setab .plan { font-size:1em; font-family:'Arial',PingFangTC-Regular,'微軟正黑體','Arial','Hiragino Sans GB','Source Han Sans','PingFangTC-Regular',sans-serif; max-width:10em; } /**/ .version-tfm .planblock .planset .item:nth-child(1) h3 { color:#ff7e00; } .version-tfm .planblock .planset .item:nth-child(2) h3 { color:#ff9400; } .version-tfm .planblock .planset .item:nth-child(3) h3 { color:#f0b227; } .version-tfm .planblock .planset .item:nth-child(4) h3 { color:#c2cd16; } .version-tfm .planblock .planset .item:nth-child(5) h3 { color:#a3c100; } .version-tfm .planblock .planset .item:nth-child(6) h3 { color:#89c70f; } .version-tfm .planblock .planset .item h3.price { font-size:2em; color:#333; } .version-tfm .planblock .planset .item:nth-child(1):after { background:#ff7e00; } .version-tfm .planblock .planset .item:nth-child(2):after { background:#ff9400; } .version-tfm .planblock .planset .item:nth-child(3):after { background:#f0b227; } .version-tfm .planblock .planset .item:nth-child(4):after { background:#c2cd16; } .version-tfm .planblock .planset .item:nth-child(5):after { background:#a3c100; } .version-tfm .planblock .planset .item:nth-child(6):after { background:#89c70f; } .version-tfm .planblock .planset .item.selected { background:orange; color:white; } .version-tfm .planblock .planset .item.selected:nth-child(1) { background:#ff7e00; } .version-tfm .planblock .planset .item.selected:nth-child(2) { background:#ff9400; } .version-tfm .planblock .planset .item.selected:nth-child(3) { background:#f0b227; } .version-tfm .planblock .planset .item.selected:nth-child(4) { background:#c2cd16; } .version-tfm .planblock .planset .item.selected:nth-child(5) { background:#a3c100; } .version-tfm .planblock .planset .item.selected:nth-child(6) { background:#89c70f; } .version-tfm .planblock .planset .item.selected h3 { color:white; } .version-tfm .planblock .planset .item.itemab.selected { background:white; color:#333; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(1) h3 { color:#ff7e00; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(2) h3 { color:#ff9400; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(3) h3 { color:#f0b227; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(4) h3 { color:#c2cd16; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(5) h3 { color:#a3c100; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(6) h3 { color:#89c70f; } /*.version-tfm .planblock .planset .item.itemab.selected { background:white; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(1) { background:#ff7e00; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(2) { background:#ff9400; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(3) { background:#f0b227; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(4) { background:#c2cd16; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(5) { background:#a3c100; } .version-tfm .planblock .planset .item.itemab.selected:nth-child(6) { background:#89c70f; }*/ .version-tfm .planblock .planset.setab .item.itemab { background:white; border:6px solid white; transition:all .3s; } .version-tfm .planblock .planset.setab .item.itemab:after { display:block; background:transparent; bottom:auto; left:auto; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 2px 2px 0; border-color:transparent #ff7e00 transparent transparent; transform:translate(0,0) rotate(0); } .version-tfm .planblock .planset.setab .item.itemab.selected { border:6px solid dodgerblue; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(1) { border-color:#ff7e00; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(2) { border-color:#ff9400; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(3) { border-color:#f0b227; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(4) { border-color:#c2cd16; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(5) { border-color:#a3c100; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(6) { border-color:#89c70f; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(1):after { border-color:transparent #ff7e00 transparent transparent; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(2):after { border-color:transparent #ff9400 transparent transparent; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(3):after { border-color:transparent #f0b227 transparent transparent; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(4):after { border-color:transparent #c2cd16 transparent transparent; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(5):after { border-color:transparent #a3c100 transparent transparent; } .version-tfm .planblock .planset.setab .item.itemab.selected:nth-child(6):after { border-color:transparent #89c70f transparent transparent; } .version-tfm .planblock .planset.setab .item.itemab.selected:after { border-width:0 80px 80px 0; } .version-tfm .planblock .planset .item.itemab.itemabm.selected h3 { color:white; } .version-tfm .planblock .planset .item.itemab.itemabm.selected:nth-child(1) { background:#ff7e00; } .version-tfm .planblock .planset .item.itemab.itemabm.selected:nth-child(2) { background:#ff9400; } .version-tfm .planblock .planset .item.itemab.itemabm.selected:nth-child(3) { background:#f0b227; } .version-tfm .planblock .planset .item.itemab.itemabm.selected:nth-child(4) { background:#c2cd16; } .version-tfm .planblock .planset .item.itemab.itemabm.selected:nth-child(5) { background:#a3c100; } .version-tfm .planblock .planset .item.itemab.itemabm.selected:nth-child(6) { background:#89c70f; } .version-tfm .btn-order.on0 { background:#ff7e00; } .version-tfm .btn-order.on1 { background:#ff9400; } .version-tfm .btn-order.on2 { background:#f0b227; } .version-tfm .btn-order.on3 { background:#c2cd16; } .version-tfm .btn-order.on4 { background:#a3c100; } .version-tfm .btn-order.on5 { background:#89c70f; } .version-tfm .planblock .planset .item.disabled { background:#eee; color:#888; cursor:default; } .version-tfm .planblock .planset .item.disabled h3 { color:#ccc; } .version-tfm .adblock .row .item.selected .controlset a.btn-minus, .version-tfm .adblock .row .item.selected .controlset a.btn-add { background:#ff9400; } @media -ms-viewport, screen and (min-width:1600px) { .btn-order { right:50%; transform:translateX(680px); opacity:0; } .btn-order.show { transform:translateX(680px)!important; opacity:1; } } @media -ms-viewport, screen and (max-width:1277px) and (min-width:641px) { .planblock .planset { padding:0 2em; } } @media -ms-viewport, screen and (max-width:1024px) and (min-width:641px) { .detailbanner { margin:0; box-shadow:none; } .detailbanner .con { padding:2em; padding-left:180px; } .detailbanner .con .icon { left:90px; transform:translate(-50%,-50%); } .detailbanner .con h2 { font-size:1.5em; } .detailbanner .con p { font-size:1em; } .iconblock .item { width:25%; } .planblock .planset .item .icon { width:50px; } .planblock .planset .item h3 { font-size:2em; } .planblock .planset .item h3.price { font-size:1.8em!important; } .planblock .planset.setab .item h3 { font-size:1.8em; } .iconblock .item h3 { font-size:1.1em; } .giftblock .conbox h2.sectitle { margin:1em 0; } } @media -ms-viewport, screen and (max-width:640px) { .detailbanner { margin:0; } .detailbanner .banner { width:100%!important; } .detailbanner .banner .imgobj img.pc { display:none; } .detailbanner .banner .imgobj img.mobile { display:block; } .detailbanner .con { padding:2em 1em!important; } .detailbanner .con .icon { width:80px; position:relative; top:auto; left:auto; transform:none; margin:-1em auto 0 auto; display:none!important; } .detailbanner .con h2 { font-size:1.5em; text-align:center; } .iconblock { padding:0; } .iconblock .item { width:30%; } .iconblock .item h3 { font-size:1.2em; height:3.5em; } .planblock { padding-bottom:.5em; margin:.5em; } .planblock .conbox { padding:1em; margin:0; } .planblock h2.sectitle { margin:1em auto; } .planblock .planset { flex-wrap:wrap; } .planblock .planset .item { width:29%; margin:.5em; } .planblock .planset .item h3 { font-size:1.8em; } .planblock .planset .item h3.price { font-size:1.5em!important; } .planblock .planset .item:after, .planblock .planset .item.selected:after { display:none; } .planblock .conbox { padding:1em; } .planblock .conbox .conab .graybox { text-align:center; padding:1em 1.5em; } .planblock .conbox .conab .graybox .icon { width:80px; position:relative; top:auto; left:auto; margin:0 auto; transform:none; display:none; } .planblock .conbox .conab .graybox h3 { display:none; } .planblock .conbox .conab .firstpay { font-size:1.4em; text-align:center; } .planblock .conbox .conab .boxrow { width:100%; } .planblock .conbox .conab .boxrow span { padding:.8em 1em; font-size:1.1em; } .planblock .conbox .conab .boxrow p>span { padding:.2em; } .planblock .conbox .boxrow { width:100%; max-width:100%; } .planblock .conbox .boxrow p span { display:block; } .planblock .conbox .boxrow.boxrowab >span { padding:.8em; font-size:1.1em; } .planblock .planset.setab .item { width:100%; padding:1em; margin:.5em; } .planblock .planset.setab .item .icon { width:80px; margin:.3em auto; } .planblock .planset.setab .item h3 { font-size:1.5em; } .planblock .planset.setab .item p { margin:1em 0; } .planblock .planset.setab .item:after { /*display:none!important;*/ } .planblock .conbox .conab .boxgift a { width:45%; } .planblock .conbox .conab .boxgift a.selected:after { bottom:5.5em; } .giftblock { padding-bottom:.5em; margin:.5em; } .giftblock .conbox { padding:1em; margin:0; } .giftblock .conbox h2.sectitle { margin:1em 0; } .giftblock .conbox .boxgift { max-width:100%; } .adblock { padding-bottom:.5em; margin:.5em; padding:1em; } /* .adblock .mask { width:100%; height:auto; position:relative; display:block; text-align:center; } .adblock .item { display:block!important; width:80%; border-bottom:1px solid #ccc; margin:0 auto; padding:2em; } .adblock .item h3 { font-size:1.1em; padding:0; } .adblock .item .btn-addtocart, .adblock .item .controlset { font-size:1.2em; margin-top:1em; position:relative; } .adblock .navset, .adblock .btn-prev, .adblock .btn-next { display:none!important; } */ .adblock .row { padding:1em; display:block; } .adblock .row .item { margin:0; width:100%; xxxxmin-height:120px; height:auto; padding:1em 0 4em 0; font-size:1.2em; border-right:0; text-align:center; } .adblock .row .item img { display:block; height:auto; width:50%; margin:0 auto; /*position:relative; top:auto; left:0; transform:none; margin-right:.5em; */ } .adblock .row .item h3 { font-size:1em; } .adblock .row .item h3 span { font-size:.9em; display:block; } .adblock .row .item * { display:inline-block; vertical-align:top; } .adblock .row .item .controlset { width:120px; right:0; margin:0; position:relative; top:auto; left:0; transform:none; margin-top:.5em; font-size:.95em; } .adblock .row .item .controlset p { font-size:1em; } .adblock .row .item .controlset a.btn-minus { left:0; } .adblock .row .item .controlset a.btn-add { right:0; } .boxothergift a { width:calc(50% - 1em); height:auto; } .boxothergift a p { height:8em!important; } .boxothergift a.selected:after { top:160px; } .boxothergift.total1 a { width:calc(100% - 1em); } .boxothergift.total4 a { width:calc(50% - 1em); } .boxothergift.total5 a { width:calc(50% - 1em); } .boxothergift.total5 a:last-child { width:calc(100% - 1em); } .noteblock { padding:1em; } .btn-order { padding:1.2em 1.5em; font-size:1.2em; font-weight:bold; bottom:0; right:.5em; width:calc(100% - 1em); height:auto; border-radius:3px 3px 0 0; transform:translateY(105%); box-shadow:0 1px 5px rgba(0,0,0,.2); text-align:center; } .btn-order .plan { display:inline-block; vertical-align:middle; margin-right:2.5em; display:none; } .btn-order .plan span { color:white; } .btn-order .thumb { display:inline-block; width:auto; height:4em; vertical-align:middle; margin-right:1em; display:none; } .btn-order .icon { display:block; width:2em; vertical-align:middle; margin:0 auto; display:none; } .btn-order.show { transform:translateY(0); } .btn-order.setab .plan { font-size:.9em; max-width:calc(100% - 10em); } } /**/ .version-tfm .btn-order { background:#eb5a06; } /* ============================================================================================================ _ ___ _ _ __| |___ _ _ _ __ _ _ ___ __ ___ ______ / _ \ '_/ _` / -_) '_| | '_ \ '_/ _ \/ _/ -_|_-<_-< \___/_| \__,_\___|_| | .__/_| \___/\__\___/__/__/ |_| ============================================================================================================ */ .stepblock { display:block; margin:0 auto; padding:1.8em 0; text-align:center; } .stepblock .item { display:inline-block; margin:0; padding:0 1em; text-align:center; position:relative; width:9em; vertical-align:top; opacity:.3; padding-top:2.7em; } .stepblock .item span { display:block; text-align:center; background:#333; color:white; width:2.2em; padding:.4em; border-radius:50%; font-size:1em; position:absolute; top:0; left:50%; transform:translateX(-50%); font-weight:bold; } .stepblock .item.selected { opacity:1; } .stepblock .item.selected span { background:dodgerblue; } .stepblock .item.done { opacity:1; } .stepblock .item.done span { background:dodgerblue; } .stepblock .item:after { content:''; display:block; width:8.2em; margin:0; height:1px; position:absolute; top:1em; left:50%; border-bottom:1px solid dodgerblue; opacity:.3; z-index:-1; } .stepblock .item:last-child:after { display:none; } .planheader { display:table; box-sizing:border-box; width:100%; margin:0 auto; padding:0; overflow:hidden; overflow:hidden; position:relative; text-align:center; box-shadow:0 1px 2px rgba(0,0,0,.2); xxxborder-radius:5px; background:#e7f0f7; background:#e7e7ed; background:white; xxxbackground:#e7f0f7; } .planheader .imgobj { display:table-cell; width:auto; max-width:30%; height:100%; vertical-align:middle; } .planheader .imgobj img { display:block; height:200px; } .planheader .con { display:table-cell; vertical-align:middle; padding:2em; text-align:left; } .planheader .con .icon { display:block; border:1px solid red; } .planheader .con h2 { font-size:1.6em; color:orange; } .planheader .con h3 { font-size:1.6em; color:#333; } .notice_r { font-size:1.7em; margin:1em 0; color:orange; } .formobj { border-top:1px solid #ccc; padding:2em 0 2em 3.5em; padding:2em 0; border-top:0; } .formobj h2 { display:block; font-size:1.35em; margin-bottom:1em; margin-left:-2.3em; margin-left:0; background:#f1f2f5; padding:1em; /*padding:0; border-bottom:2px solid #333;*/ } .formobj h2:before { content:''; display:inline-block; width:1.5em; height:1.5em; width:1.1em; height:1.1em; vertical-align:middle; margin-right:.7em; transform:translateY(-.1em); background-image:url('../icon/icon-arrownext-white.svg'); background-color:#333; background-repeat:no-repeat; background-size:60%; background-position:center; position:relative; } .formobj h2 .finalrow { display:inline-block; font-size:1em; margin:0; background:transparent; padding:0; float:right; } .formobj h2 .finalrow h3, .formobj h2 .finalrow p { display:inline-block; position:relative; margin:0 .4em; vertical-align:middle; top:auto; right:auto; transform:none; } .formobj h2.nopadding { padding:1em 0; } .formobj h2 .rednote { display:block; font-size:.7em; margin-left:2.6em; color:#ff373e; } .formobj h2 .rednote a { display:inline-block; font-size:inherit; color:#3f51b5; cursor:pointer; color:inherit; text-decoration:underline; } .formobj h2 .rednote.inlinelarge { display:inline-block; font-size:inherit; margin-left:.5em; } .formobj h2 .rednote.inlinelarge a { background:orange; color:white; text-decoration:none; padding:0 .5em; border-radius:.2em; } .formobj h2 .rednote.inlinelarge a:hover { background:red; } .formobj select, .formobj input[type="text"], .formobj input[type="number"], .formobj input[type="email"], .formobj input[type="date"] { display:inline-block; width:100%; min-width:150px; font-size:1.1em; height:45px; } .formobj input[type="email"] { background:#fafbfd; box-shadow:inset 0 1px 2px rgba(0,0,0,.2); } .formobj input[type="email"] { background:#fafbfd; box-shadow:inset 0 1px 2px rgba(0,0,0,.2); } .formobj p { margin:.3em 0; width:calc(50% - 1.7em); display:inline-block; xxxmargin-right:1.5em; } .formobj p input.input-id { text-transform:uppercase; } .formobj p span { font-size:1.1em; margin-right:.3em; margin-bottom:.3em; display:block; } .formobj p span.gift { background:#333; color:white; padding:.1em .3em; } .formobj p span.type { background:#61d826; color:white; padding:.1em .3em; } .formobj p.full { width:calc(100% - 1.7em); } .formobj p.red { color:red; } .formobj p.redbox { border:2px solid red; text-align:center; color:red; margin-top:1em; padding:1em .2em; border-radius:3px; } .formobj:first-of-type, .formobj.inputform-old, .formobj.inputform-new { border-top:0; position:relative; } .formobj.inputform-old .cover, .formobj.inputform-new .cover { display:block; z-index:22; opacity:0; background:white; position:absolute; top:0; left:0; width:100%; height:100%; xxxdisplay:none; } .formobj .icon { display:inline-block; width:1.8em; height:auto; margin-right:.01em; transform:translate(-.1em, -.2em); vertical-align:top; margin-left:-.5em; } .formobj .errormsg { background:crimson; background:#ff373e; color:white; font-size:1.1em; display:block; padding:1em 1.5em; clear:both; display:none; border-radius:2px; width:100%!important; position:relative; z-index:150; } .formobj .errormsg:before { content:url(../icon/icon-alert.svg); display:inline-block; width:1em; height:1em; margin-right:.5em; transform:translateY(.1em); } .formobj .errormsg a { text-decoration:underline; cursor:pointer; } .formobj.error .errormsg { display:block; } .formobj.error .error { position:relative; } .formobj.error .error input[type="text"], .formobj.error .error input[type="date"], .formobj.error .error input[type="email"] { background:#ffb8ba; border-bottom:2px solid #ff373e; } .formobj.error .error input[type="text"].nomust, .formobj.error .error input[type="date"].nomust, .formobj.error .error input[type="email"].nomust { background:#fafbfd; border-bottom:none; } .formobj.error .error:after { content:url(../icon/icon-arrowprev-white.svg); display:block; width:1.4em; height:1.4em; background:#ff373e; position:absolute; top:1em; right:0; display:none; } .paygroupbox .errormsg { position:relative!important; top:auto; left:auto; } .formobj.inline p { display:inline-block; xxxmargin-right:1.5em; } .formobj.inline p.full { display:block; width:100%; } .formobj.narrow { max-width:900px; xxxxxxxborder:1px solid red; margin:0 auto; } .formobj.info div { display:block; width:100%; font-size:1em; padding:.35em 0; xxxxxxxxxxxborder:1px solid red; padding-left:150px; position:relative; } .formobj.info div span { display:inline-block; width:150px; font-size:1em; vertical-align:middle; position:absolute; top:0; left:0; padding:1em 0; } .formobj.info div span.errormsg { padding:1em; } .formobj.info div p { display:inline-block; width:calc(100% - 180px); font-size:1em; vertical-align:middle; } .formobj.info div p.large { width:100%; box-sizing:border-box; } .formobj.info div p.large a { display:inline-block; margin-left:.5em; color:dodgerblue; display:inline-block; } .formobj.info div p.subnote { display:block; width:auto; font-size:.9em; opacity:.7; xxxmargin-left:150px; } .formobj.info div textarea { display:inline-block; width:calc(100% - 150px); width:100%; vertical-align:top; font-size:1em; margin-bottom:1em; } .formobj.info div p ol { display:inline-block; width:calc(100% - 150px); vertical-align:top; font-size:1em; margin-bottom:1em; } .formobj.info div div { margin-bottom:1em; } .formobj.info div div ol { display:inline-block; width:calc(100% - 150px);width:100%; vertical-align:top; font-size:1em; margin-bottom:1em; list-style-position:outside; padding-left:1em; } .formobj.info div input[type='text'], .formobj.info div input[type='date'], .formobj.info div input[type='email'] { display:inline-block; width:calc(100% - 150px); width:100%; } .formobj.info div .innerbox { display:inline-block; width:calc(100% - 150px);width:100%; vertical-align:top; margin:0; margin-bottom:1em; padding-left:0; } .formobj.info div .innerbox.nopadding { padding-left:0; } .formobj.info div .innerbox p { display:block; width:100%; position:relative; margin:.1em 0 .3em 0; } .formobj.info div .innerbox .gapleft { padding-left:100px; position:relative; } .formobj.info div .innerbox input[type='text'], .formobj.info .inner input[type='date'], .formobj.info .inner input[type='email'] { width:100%; } .formobj.info hr { display:block; border:0; border-top:1px solid #ccc; margin:1.5em 0; } .formobj.full textarea { display:block; width:100%!important; vertical-align:top; font-size:1em; margin:1em 0; } .formobj.info div.nopadding { padding-left:0; } .formobj.info div.nopadding span { position:relative; } .formobj.info div.nopadding >div { xxxpadding:0; xxxpadding-bottom:1.5em; } .formobj.addressset .selectcity, .formobj.addressset .selectarea { width:25%; } .formobj.addressset .selectroad { width:44%; margin-right:0; position:relative; } .formobj.addressset .selectroad .searchinputblock { display:block; width:calc(100% - 40px); position:absolute; top:0; left:0; border-radius:3px 0 0 3px; box-shadow:none; } .formobj.addressset p { xxxxx-border:1px solid #eee; width:calc(33% - 1.7em); width:auto; xxwidth:24.2%;width:15.2%; } .formobj.addressset p span { margin-right:.3em; display:inline-block; } .formobj.addressset p select { min-width:50px; width:150px; margin-right:.3em; } .formobj.addressset p input { min-width:50px; width:70px; margin-right:.3em; } .formobj.addressset p input:nth-child(3) { width:50px; margin-right:0; } .formobj.addressset p:nth-child(9), .formobj.addressset p:nth-child(10) { width:27%; xxborder:1px solid red; } .formobj.addressset p:nth-child(11) { width:19.3%; } .formobj.addressset p:nth-child(12) { width:36%; } .formobj.addressset p:nth-child(12) input { width:100%; } .formobj.addressset p:nth-child(12) span { display:none; } .formobj.addressset p:nth-child(10) span { width:43px; xxborder:1px solid red; } .formobj.addressset p:nth-child(10) input:last-of-type { width:70px; } .formobj.addressset p:last-of-type { width:auto; width:50%; xxxdisplay:block; } .formobj.addressset p:last-of-type input { width:100%; } .formobj.addressset p:last-of-type span { display:block; } .formobj.addressset .disabled { cursor:default; opacity:.5; } .formobj.addressset .searchinputblock.disabled { opacity:1; color:#aaa; border:1px solid #e6e6e6; } .formobj.addressset .input-street1, .formobj.addressset .input-street2, .formobj.addressset .input-street3, .formobj.addressset .input-street4, .formobj.addressset .input-street5, .formobj.addressset .input-street6, .formobj.addressset .input-street7 {} .formobj.addressset p.input-street10 { width:auto; width:50%;xxxdisplay:none; } .formobj.addressset p.input-street10 input { width:100%; } .formobj.addressset p.input-street10 span { display:none; } .formobj.addressset p.input-privacy { width:100%; padding:1em 0; font-size:1.1em; } .formobj.addressset p.input-privacy input { min-width:auto; width:auto; margin:0 1em 0 0; } .formobj.addressset p.input-privacy a { text-decoration:underline; color:dodgerblue; display:inline-block; margin:0 4px; cursor:pointer; } .formobj p.innerfull { display:inline-block; margin-right:1em; } .formobj p.innerfull select, .formobj p.innerfull input { display:block; width:100%; } .formobj .mailaddress-same .input { display:inline-block; margin-bottom:3px; } .formobj .mailaddress-same .input-address1 { width:calc(100% - 105px)!important; margin-right:3px; } .formobj .mailaddress-same .input-addresszip { min-width:100px; width:100px!important; } .formobj .mailaddress input, .formobj .mailaddress select { display:inline-block; margin-right:3px; margin-bottom:3px; } .formobj .mailaddress .input-address1, .formobj .mailaddress .input-address2, .formobj .mailaddress select { width:33%!important; } .formobj .mailaddress .input-address1, .formobj .mailaddress .input-address2 { display:none!important; } .formobj .mailaddress .input-address3 { width:32%!important; float:right; } .formobj .mailaddress .input-address4 { width:80%!important; } .formobj .mailaddress .input-addresszip { width:19%!important; min-width:auto!important; pointer-events:none; opacity:.5; float:right; } .formobj .radioset { display:flex; width:100%; } .formobj .radioset span { display:block; width:20%; padding:.5em; } .formobj .radioset span label { margin-left:.5em; } .formobj .radioset a { display:block; width:20%; padding:.7em; border:1px solid #ccc; border-right:0; text-align:center; cursor:pointer; font-size:1.2em; } .formobj .radioset a.selected { background:#8cd439; xxbackground:dodgerblue; color:white; box-shadow:inset 0 1px 2px rgba(0,0,0,.2); } .formobj .radioset a.selected:before { content:url(../icon/icon-checked-white.svg); display:inline-block; width:1.2em; height:1.2em; background-color:#8cd439; background:transparent; padding:0; border-radius:50%; margin-left:-.5em; transform:translateY(.1em); vertical-align:top; } .formobj .radioset a:first-child { border-radius:3px 0 0 3px; } .formobj .radioset a:last-child { border-radius:0 3px 3px 0; border-right:1px solid #ccc; } .formobj .radioset a>span { display:block; padding:0; width:100%; text-align:center; font-size:.8em; font-weight:bold; } .formobj .radioset a.disabled { pointer-events:none; background:#f1f2f5; opacity:.3; } .error .must input[type="text"] { xx-border-bottom:2px solid #ff373e; } .cart {} .cart h3 { font-weight:bold; font-size:1.2em; } .cart h3 .red { color:#ff6b00; } .cart h3 .red .smaller { xxxcolor:#888; font-size:.8em; } .cart h4 { font-weight:bold; font-size:1.2em; } .cart p.red { color:red; color:#ff6b00; } .cart span.gift { background:#333; color:white; padding:.1em .3em; } .listitemrow { display:block; } .listitemrow .item { display:block; border-bottom:1px solid #ccc; padding:.9em 0; position:relative; font-size:1em; } .listitemrow .item .icon { display:inline-block; width:4em; position:relative; margin:0 1em 1em 0; } .listitemrow .item p { display:block; } .listitemrow .item h4 { margin-right:4em; } .listitemrow .item p .icon { display:inline-block; width:1.3em; margin:0 .3em .3em 0; transform:translateY(-.1em); } .listitemrow .item .right { display:inline-block; margin:0; width:auto; position:absolute; top:50%; right:0; transform:translateY(-50%); font-size:1.1em; } .listitemrow .item .right.top { top:2em; } .listitemrow .item .count { display:inline-block; margin:0; width:auto; position:absolute; top:50%; right:120px; text-align:right; transform:translateY(-50%); } .listitemrow .item .orange { color:#ff6b00; } .listitemrow .item.itemr { display:flex; } .listitemrow .item.itemr h3 { display:block; width:150px; } .listitemrow .item.itemr .listrow { display:block; width:40%; padding:0; } .listitemrow .item.itemr .listrow>p { display:block; width:100%; text-align:left; margin:0; font-size:.9em; } .listitemrow .item.itemr .listrow>p span { display:inline-block; } .listitemrow .item.itemr .listrow>p span:first-child { width:60%; } .listitemrow .item.itemr .listrow>p span.price { opacity:.5; } .listitemrow .item.total { border-bottom:0; padding-left:calc(100% - 140px); font-size:1.2em; } .listitemrow .item.total h3 { font-size:.9em; } .listitemrow .item.total .right { font-weight:bold; } .listitemrow .item.detail { display:flex; } .listitemrow .item.detail .right {} .listitemrow .item.detail .details { display:flex; padding-left:1.2em; width:calc(100% - 150px); } .listitemrow .item.detail .details >span { display:block; width:150px; text-align:left; border-right:1px solid gray; padding:0 1.2em; position:relative; padding-bottom:2.9em; } .listitemrow .item.detail .details >span:after { content:''; display:block; text-align:center; font-weight:bold; width:1em; height:1em; color:white; background-color:#333; background-position:center; background-repeat:no-repeat; background-size:50%; background-image:url(../icon/icon-add-white-bold.svg); position:absolute; top:50%; right:0; border-radius:50%; padding:.2em; transform:translate(50%,-50%); } .listitemrow .item.detail .details >span .price { display:block; text-align:left; font-size:1.2em; font-weight:bold; position:relative; } .listitemrow .item.detail .details >span input { display:block; box-sizing:border-box; width:calc(100% - 2em); min-width:auto; color:#ff5722; position:absolute; bottom:0; } .listitemrow .item.detail .details >span.discount input { padding-left:2em; } .listitemrow .item.detail .details >span.discount:before { content:'-$'; position:absolute; bottom:0; left:1em; color:#ff5722; padding:.8em; z-index:16; } .listitemrow .item.detail .details >span.disabled:before { content:'業務優惠 -$'; font-size:.8em; left:.5em; bottom:.3em; } .listitemrow .item.detail .details >span.disabled input { border:0; background:transparent; padding:0; padding-left:4.5em; box-shadow:none; color:#ff5722; } .listitemrow .item.detail .details >span:last-child { border-right:0; } .listitemrow .item.detail .details >span:last-child:after { display:none; } .listitemrow .item.detail .details >span.selfinput .price:after { content:''; display:block; height:1px; width:3em; position:absolute; top:50%; left:0; border-top:1px solid #333; transform:translateY(-50%); padding:0; margin:0; } .listitemrow .item.detail .listrow { display:flex; padding-left:0; width:calc(100% - 250px); } .listitemrow .item.detail .listrow.noflex { display:block; } .listitemrow .item.detail .listrow .details { display:block; width:140px; text-align:left; margin:0; font-size:1em; border-right:1px solid gray; padding-bottom:1.2em; padding:.8em; padding-left:0; margin-right:1em; position:relative; } .finalcart .listitemrow .item.detail .listrow .details { font-size:.9em; width:120px; } .listitemrow .item.detail .listrow .details:after { content:''; display:block; text-align:center; font-weight:bold; width:1em; height:1em; color:white; background-color:#333; background-position:center; background-repeat:no-repeat; background-size:50%; background-image:url(../icon/icon-add-white-bold.svg);position:absolute; top:50%; right:0; border-radius:50%; padding:.2em; transform:translate(50%,-50%); } .listitemrow .item.detail .listrow .details:last-child { border-right:0; } .listitemrow .item.detail .listrow .details:last-child:after { display:none; } .listitemrow .item.detail .listrow .details >span.discount:before { left:0; } .listitemrow .item.detail .listrow .details >span { display:block; width:100%!important; padding:0; position:relative; padding-bottom:2.9em; } .listitemrow .item.detail .listrow .details >span:after { display:none; } .listitemrow .item.detail .listrow .details >span .price { text-align:left; font-size:1.2em; font-weight:bold; opacity:1; } .listitemrow .item.detail .listrow .details >span input { width:calc(100% - .8em); min-width:0; margin-right:1em; } .listitemrow .item.detail .listrow .details >span input.disabled { pointer-events:none; opacity:.3; } .listitemrow.gray { background:#f1f2f5; padding:1.5em; } .listitemrow.additional .item { padding-left:80px; padding-right:150px; } .listitemrow.additional .item h3 { display:inline-block; } .listitemrow.additional .item .icon { position:absolute; top:50%; left:0; transform:translateY(-50%); } .listitemrow.additional .item.total { padding-right:0; padding-left:calc(100% - 140px)!important; } .listitemrow.additional .item .btn-delete { display:block; position:absolute; right:-3em; top:50%; transform:translateY(-50%); opacity:.3; cursor:pointer; } .listitemrow.additional .item .btn-delete:hover { opacity:1; } .listitemrow.additional .item .btn-delete:before { content:url(../icon/icon-close.svg); display:block; width:1.2em; } .listitemrow.additional .item .btn-addextrabox { border:1px solid #ff6b00; color:#ff6b00; font-weight:bold; padding:.3em 1em; border-radius:3px; cursor:pointer; display:none; } .listitemrow.additional .item .btn-addextrabox:hover { background:#ff6b00; color:white; } .listitemrow.additional .item.empty h3 { display:none; } .listitemrow.additional .item.empty .btn-delete { display:none; } .listitemrow.additional .item.empty .btn-addextrabox { display:inline-block; } .listitemrow.additional .item.hide { display:none; } .finalcart .listitemrow.additional .item .btn-delete, .resultblock .listitemrow.additional .item .btn-delete { display:none; } .resultblock .item .icon { display:none; } .listitemrow.nodelete .item .btn-delete { display:none; } .finalcart .listitemrow .item.detail .details >span input { border:0; background:transparent; } .finalrow { border-bottom:0; padding-left:calc(100% - 220px); font-size:1.3em; position:relative; margin-bottom:2em; } .finalrow h3 { font-size:1em; } .finalrow .right { font-weight:bold; font-size:1.3em; display:inline-block; margin:0; width:auto; position:absolute; top:50%; right:0; transform:translateY(-50%); font-size:1.3em; } .finalrow .orange { color:orange; color:#ff6b00; } .finalrowdetail { display:block; display:flex; } .finalrowdetail .col { display:block; position:relative; border:2px solid white; width:33.33%; background:#f1f2f5; padding:.5em; font-size:1em; font-weight:bold; text-align:center; } .finalrowdetail .col span { display:block; font-size:.9em; font-weight:normal; color:#333; text-align:center; } .finalrowdetail .col.red { color:#ff6b00; } .btndesc { display:block; font-size:1.2em; cursor:pointer; margin-top:.8em; } .btndesc .btn-open { display:inline-block; width:1.3em; height:1.3em; padding:.1em; border:1px solid #333; cursor:pointer; margin-left:.4em; transform:translateY(.2em) rotate(0deg); transition:all .3s; } .btndesc .btn-open img { display:block; width:100%; height:100%; } .btndesc .btn-open.open { transform:translateY(.2em) rotate(-90deg); } .descblock { display:block; font-size:1em; background:#f1f2f5; padding:1.2em; margin:.5em 0 1em 0; } .descblock strong { display:block; margin-bottom:.5em; width:1.1em; width:100%; } .descblock p { display:block; width:100%; } .giftset {} .giftset p { display:block; font-size:1.1em; } .giftset p span { display:inline-block; font-size:1em; border:1px solid #333; width:1.5em; height:1.5em; text-align:center; } .completeblock { display:block; padding:2.5em 4em; background:dodgerblue; color:white; text-align:left; margin-bottom:2em; } .completeblock .icon { display:inline-block; width:3em; margin-right:1em; vertical-align:middle; } .completeblock h2 {} .idrow { font-size:1.15em; } .finalcenter { text-align:center; font-size:1.2em; } .finalcenter input[type="checkbox"] { margin-right:.5em; } .finalcart { background:#f1f2f5; padding:1.5em; margin:1em 0; } .finalcart .formobj { padding-top:0; } .finalcart .formobj h2 { padding:0; } .finalcart .formobj .listitemrow .item { xxxpadding:.2em 0; } .finalcart .formobj .listitemrow { margin:2em 3em; } .finalcart .finalrow { margin:0 2em; padding-left:65%; } .finalcart .finalrowdetail { margin:1em 2.6em; } .finalcart .finalrowdetail .col { background:white; margin:2px; border:0; } .finalcart .noteblock { background:transparent; margin:0 2.5em; } .noteblock { margin-top:1em; padding:1em 0; } .noteblock b { font-size:1.2em; margin-bottom:.5em; } .noteblock ol { padding-left:1.5em; } .form-privacy textarea { min-height:300px; } .flatpickr-current-month .flatpickr-monthDropdown-months { min-width:auto; } .flatpickr-day.disabled { color:red; cursor:not-allowed; opacity:.8; background:transparent!important; border:0!important; cursor:default; position:relative; pointer-events:none; } .flatpickr-day.disabled:before { content:''; display:block; width:0; height:2em; border-right:1px solid red; position:absolute; top:50%; left:50%; transform-origin:center; transform:translate(-50%,-50%) rotate(45deg); } .flatpickr-day.disabled:afterxxxxxxxx { content:'該日期額滿'; display:block; font-size:.9em; word-break:keep-all; padding:.5em; background:red; position:absolute; top:-1em; left:1em; color:white; z-index:999; } .floatmark { display:block; font-size:.9em; word-break:keep-all; padding:.2em .5em; background:red; position:absolute; top:-1em; left:1em; color:white; z-index:999999; } .resultblock { background:white; padding:2em; } .resultblock .row { display:block; margin:1em auto; padding:0 4em; } .resultblock .row .item.block { display:block; position:relative; padding:0; border:1px solid #ccc; margin-bottom:-1px; } .resultblock .row .item.block .btn-collapse { display:block; padding:.8em; position:absolute; top:1em; right:1em; cursor:pointer; } .resultblock .row .item.block .btn-collapse img { display:block; width:1.2em; } .resultblock .row .item.block .btn-collapse.open { transform:rotate(180deg); } .resultblock .row .item.block .content { display:none; background:#f1f2f5; padding:1em 2.5em; } .resultblock .row .item.block .content.open { display:block; } .resultblock .row .item h2.ordernum { display:block; color:dodgerblue; font-weight:bold; margin:.8em 1.5em; font-size:1.6em; } .resultblock .row .item p { display:block; margin:.1em 0; } .resultblock .row .item hr { display:block; margin:1em 0; } .resultblock .row .item .pblock { padding:2em; border:1px solid #ccc; position:relative; margin:2em 0; } .resultblock .row .item .pblock strong { font-size:1.3em; } .resultblock .row .item .pblock p { vertical-align:middle; } .resultblock .row .item .pblock .icon { display:inline-block; width:50px; vertical-align:middle; margin-right:.3em; } .resultblock .row .item .formobj h2 { padding:0; background:none; } .resultblock .row .item .listitemrow .item { padding:.3em 0; } .resultblock .highlightblock { padding:1em 0; border-bottom:1px solid #ccc; margin-bottom:1em; } .resultblock .highlightblock p { font-size:1.1em; } .resultblock .highlightblock p span { display:inline-block; width:180px; } /**/ .version-tfm .formobj .radioset a.selected { background:#ff5622; } .version-tfm .stepblock .item.selected span, .version-tfm .stepblock .item.done span { background:#ff9400; } .version-tfm .stepblock .item:after { border-bottom:1px solid #ff9400; } .version-tfm .completeblock { background:#ff9400; } .version-tfm .resultblock .row .item h2 { color:#ff6b00; } @media -ms-viewport, screen and (min-width:640px) and (max-width:768px) { .planheader { width:calc(100% - 4em); margin:0 2em; } .planheader .con {} .formobj { padding:2em; } .formobj.info { padding:4em; } .listitemrow .item { padding:.3em 0; } .listitemrow .item.itemr h3 { width:80px; } .listitemrow .item.itemr .listrow { display:block; width:60%; padding:0; } .listitemrow.additional .item .btn-delete { right:-2em; } .cart.finalcart { padding:4em 2em; } .noteblock { padding:2em 5em; background:transparent; } .finalrow { margin:0; padding:0 1.5em; padding-left:50%!important; } .finalrow .right { right:1em; } .completeblock { margin:0 2em 2em 2em; } .finalcart { xxxx-padding:1.5em 0; } .finalrowdetail { margin:1.5em; } .idrow { padding:0 2em; } } @media -ms-viewport, screen and (max-width:640px) { .stepblock { zoom:.8; } .stepblock .item { width:22vw; padding-left:0; padding-right:0; } .stepblock .item:after { width:19vw; } .planheader { width:calc(100% - 2em); margin:0 auto 2em auto; position:relative; } .planheader .imgobj { display:table-cell; /*width:50vw; margin:1em auto 0 auto; position:absolute; top:0; left:0; */ width:30vw; margin:0; } .planheader .imgobj img { width:100%; height:auto; } .planheader .con { display:table-cell; /*width:100%; padding:2em;*/ text-align:left; padding:0 1em; } .planheader .con h2, .planheader .con h3 { font-size:1.5em; margin-top:0; font-size:1.2em; } .planheader .con .pc { display:none; } .formobj { padding:1em 0; } .formobj h2 { margin-left:0; padding-left:0; } .formobj p { width:100%; } .formobj.info div { padding-left:0; } .formobj.info div span { position:relative; top:auto; padding:0; width:100%; } .formobj.info div p { display:inline-block; width:calc(100% - 180px);width:100%; font-size:1em; vertical-align:middle; } .formobj.info div .innerbox { display:block; width:100%; margin:.8em 0; } .formobj.info div .innerbox .gapleft { padding-left:0; } .formobj.info div .innerbox input[type='text'] { width:100%; } .formobj.info div input[type='text'], .formobj.info div input[type='date'], .formobj.info div input[type='email'], .formobj.info div textarea { width:100%; float:none; } .formobj.info div p.subnote { margin-left:0; } .formobj.inline p { margin-right:.5em; } .formobj.addressset .selectcity { width:calc(50% - .3em); } .formobj.addressset .selectarea { width:49.7%; margin-right:0; text-align:right; } .formobj.addressset .selectroad { width:100%; margin-right:0; } .formobj.addressset p { width:calc(50% - .8em); } .formobj.addressset p:nth-child(9), .formobj.addressset p:nth-child(10) { width:calc(50% - .8em); } .formobj.addressset p:nth-child(11) { width:auto; } .formobj.addressset p:nth-child(10) span { width:auto; } .formobj.addressset p:nth-child(10) input:last-of-type { width:50px!important; } .formobj.addressset p:nth-child(12) { width:100%; } .formobj.addressset p.input-privacy input[type="checkbox"] { width:auto; display:inline-block; } .formobj.addressset p:last-of-type { width:100%; display:block; } .formobj.addressset p:last-of-type input { width:100%; } .formobj.addressset p:last-of-type span { display:none; } .formobj.addressset p:nth-child(even) { margin-right:0; } .formobj.addressset p.input-street10 { xxxdisplay:block; width:100%; } .formobj.addressset p input { width:70px; } .formobj .mailaddress-same .input-address1 { width:100%!important; margin-right:0; } .formobj .mailaddress-same .input-addresszip { width:100%!important; } .formobj .mailaddress .input-address1, .formobj .mailaddress .input-address2, .formobj .mailaddress select { width:49%!important; } .formobj .mailaddress .input-address3, .formobj .mailaddress .input-address4 { width:100%!important; } .formobj .mailaddress .input-addresszip { width:100%!important; } .formobj h2 .finalrow { font-size:.8em; margin-top:-.5em; } .formobj h2 .finalrow h3, .formobj h2 .finalrow p { display:block; margin:; } .listitemrow .item { padding:.3em 0; } .listitemrow .item.total { padding-left:0; } .listitemrow .item .count { position:relative; top:auto; right:auto; text-align:left; transform:none; } .listitemrow .item .icon { width:80px; } .listitemrow .item.itemr h3 { width:80px; } .listitemrow .item.itemr .listrow { display:block; width:60%; padding:0; } .listitemrow .item.detail .listrow.noflex { display:block; } .listitemrow.additional .item { padding-left:90px; padding-right:100px; } .listitemrow.additional .item * { margin:.4em 0; } .listitemrow.additional .item a { font-size:1.1em; } .listitemrow.additional .item .btn-delete { right:0; top:0; transform:none; } .listitemrow.additional.extrabox .item { padding-left:80px; padding-right:50px; } .listitemrow.additional.extrabox .item .count { display:block; } .finalrow { padding-left:0!important; text-align:center; } .finalrow .right { position:relative; top:auto; text-align:center; transform:none; } .listitemrow .item.detail .listrow .details { width:100%; padding:0; border-right:0; } .finalcart .listitemrow .item.detail .listrow .details { width:100%; } .listitemrow .item.detail .listrow .details:after { display:none; } .listitemrow .item.detail .listrow .details >span { padding-bottom:3.2em; } .finalcart .listitemrow .item.detail .listrow .details >span:before { content:'- '; display:inline-block; } .listitemrow .item.detail .listrow .details >span .price { display:inline-block; width:auto; margin-left:.5em; font-size:1em; xxxborder:1px solid red; } .listitemrow .item.detail .listrow .details >span.discount:before { transform:translateY(-.3em); } .completeblock { padding:2em; } .idrow { padding:0 1em; } .finalrowdetail { margin:1em; } .finalrowdetail .col { padding:1.5em .5em; font-size:1em; } .finalrowdetail .col span { display:block; padding:.5em auto; } .finalcart { padding:1em; margin:1.5em 0; } .finalcart .formobj .listitemrow { margin:2em 0; } .finalcart .finalrowdetail { margin:1em 0; } .finalcart .noteblock { margin:.5em 0; } .resultblock { padding:1em; } .resultblock .row { padding:0; } .resultblock .row .item.block .content { padding:1em; } } .btnrow { text-align:center; } .btnrow .errormsg { background:crimson; background:#ff373e; color:white; font-size:1.1em; display:block; padding:1em 1.5em; clear:both; display:none; border-radius:2px; } .btnrow .errormsg:before { content:url(../icon/icon-alert.svg); display:inline-block; width:1em; height:1em; margin-right:.5em; transform:translateY(.1em); } .btnrow .errormsg a { text-decoration:underline; cursor:pointer; } .btnrow.error .errormsg { display:block; } .btnrow.error .error { position:relative; } .btnrow.error .error input[type="text"] { background:#ffb8ba; } .btnrow.error .error:after { content:url(../icon/icon-arrowprev-white.svg); display:block; width:1.4em; height:1.4em; background:#ff373e; position:absolute; top:1em; right:0; display:none; } .btninnerrow { text-align:left; z-index:25; position:relative; } .btninnerrow .checked { text-align:left; display:block; color:#8cd439; font-size:1.1em; width:auto!important; } .btninnerrow .checked:before { content:url(../icon/icon-checked-white.svg); display:inline-block; width:1.2em; height:1.2em; background-color:#8cd439; padding:.2em; border-radius:50%; margin-right:.5em; transform:translateY(-.12em); vertical-align:top; } .btninnerrow .msgblock { display:inline-block; background:#ff373e; color:white; border-radius:50px; padding:1em; text-align:center; margin:0.5em auto; display:none; } .btninnerrow .msgblock.show { display:block; } .btn { display:inline-block; font-size:1.2em; padding:.6em 3.5em; background:#aaa; margin:.5em .1em .5em 0; border-radius:3px; color:white; text-decoration:none; cursor:pointer; transition:all .2s; } .btn:hover { background:#999; } .btn-text { background:none; color:dodgerblue; padding:.5em 1em; font-size:1em; cursor:pointer; } .btn-text:hover { background:none; color:#2593ff; } .btn-primary { background:dodgerblue; } .btn-primary:hover { background:#2593ff; } .btn-secondary { background:dimgray; } .btn-secondary:hover { background:#444; } .btn-debug { color:gray; cursor:pointer; } .btn-portalnormal, .btn-portalspecial { position:fixed; bottom:.2em; right:.5em; cursor:pointer; z-index:199; } .btn.disabled { pointer-events:none; background:gray!important; opacity:.5; } /**/ .version-tfm .btn-text { color:#ff9400; } .version-tfm .btn-text:hover { color:#ff7e00; } .version-tfm .btn-primary { background:#ff9400; } .version-tfm .btn-primary:hover { background:#ff7e00; } @media -ms-viewport, screen and (max-width:640px) { .btninnerrow { text-align:center; margin-top:1.5em; } .btninnerrow .btn { width:100%; } .btninnerrow .btn-text { display:block; } .btninnerrow .checked { text-align:center; } .btn { width:100%; } } .dplusmsg { background:#3f51b5; padding:1em; text-align:center; color:white; } /*062023*/ .float-contact { display:block; position:fixed; bottom:1em; right:1em; background:#2593ff; padding:1em 2em; color:white; z-index:1127; border-radius:.2em; font-weight:bold; font-size:1.12em; pointer-events:none; text-decoration:none; } .float-contact span { text-decoration:underline; } .float-contact:before { content:url(../img/icon-customerservice.svg); display:inline-block; width:2em; height:2em; vertical-align:middle; margin-right:1em; } .float-privacy { display:block; xxxtext-align:center; position:fixed; bottom:0; left:0; width:100%; background:#515255; color:white; padding:4em 6em; z-index:127; } .float-privacy p { margin-bottom:.8em; font-size:1.1em; } .float-privacy a { display:inline-block; text-decoration:underline; color:white; margin:0 .2em; } .float-privacy a.btn { text-decoration:none; margin:.4em 0; background:#333; padding:.5em 1em; } .version-tfm .float-contact { background:#ff9400!important; } @media -ms-viewport, screen and (max-width:640px) { .float-contact { pointer-events:unset; font-size:1em; padding:.6em 1em; bottom:0; right:0; width:100%; text-align:center; } .float-privacy { padding:2em; } } /* ============================================================================================================ _ _ _ _ _ __ __ ___ __ __ __ _(_)__| | |_| |_ | ' \/ _` \ \ / \ V V / / _` | _| ' \ |_|_|_\__,_/_\_\ \_/\_/|_\__,_|\__|_||_| ============================================================================================================ */ .productblock, .detailbanner, .additionalblock, .adblock, .adblock .mask, .adblock .row, .iconblock, .planblock .planset, .planblock .conbox, .giftblock .conbox, .noteblock, .resultblock .row, .container.additional .row { max-width:1200px; max-width:1000px; margin:0 auto; } .stepblock, .planheader, .container.order .row { max-width:1000px; max-width:800px; } .dohide { position:absolute; left:-9999px; top:0; height:1px; }