/* ======================== Structure ======================== */ /** navigation **/ #subscription-nav { } #subscription-nav > li:hover .nav-menu { display: block;} #subscription-nav .nav-menu { z-index: 999; position: absolute; left: 0;/* right:0; */padding-top: 10px; min-width:200px; display: none; } #subscription-nav .menu-inner { border: 1px solid #aaa; padding:25px 30px; background: #fff; } #subscription-nav .menu-inner .set { min-width: 160px; margin:5px 0;} #subscription-nav .menu-inner .title { font-size: 1.2em; font-weight: 500; margin-bottom: 1em; white-space: nowrap;} #subscription-nav .menu-inner li { margin: .6em 0;} /* ======================== Plans ======================== */ #subscription-plans { background: url(../image/plan-bg.jpg) no-repeat 50% 50% fixed; background-size: cover; } #subscription-plans h2 { text-align: center; color: var(--theme-text-color); font-size: 2em; font-weight: 500;} #subscription-plans .tooltipster-base { max-width: 210px; } #subscription-plans .tooltipster-content { color: #666; font-size: 13px; line-height: 1.5em; } #plan-list-wrapper { max-width: 1300px; margin: auto;} #plan-list-wrapper.narrow { max-width: 840px;} #plan-list-wrapper.narrow .plan-table .col-item { width: 47.5%; margin-right: 5%;} #plan-list-wrapper.narrow .plan-table .col-item:nth-child(2n) { margin-right: 0;} .plan-table { } .plan-table .col-item { width: 30%; margin-right: 5%; position: relative; } .plan-table .plan-box { min-height: 100%; background-color: #fff; border: 1px solid var(--light-border-color); border-radius: 15px; } .plan-table .plan-box.is-preview { opacity: .6;} .plan-table .plan-box.hide-button .body { padding-top: 0;} .plan-table .header { padding:30px 8% 0 8%;} .plan-table .title { height: 55px; font-size: 1.8em; letter-spacing: .02em; padding-bottom: 30px; margin-bottom: 20px; color: var(--mid-text-color); border-bottom: 2px solid var(--light-border-color);} .plan-table .title .postfix { font-weight: 400; background: var(--mid-text-color); color: #fff; border-radius: 5px; font-size: .55em; padding: .5em .6em .6em .6em; margin-left: 10px;} .plan-table .price { display:flex; align-items: flex-end; margin-bottom: 5px;} .plan-table .amount { font-size: 2.4em; font-weight: 500; color: var(--theme-text-color);} .plan-table .period { font-size: .9em; color: #222; margin-left: .5em;} .plan-table .price-note { font-size: .9em; color: #888; margin-left: auto;} .plan-table .buy { margin-top: 20px;} .plan-table .buy .buttons { margin-top: 15px; gap: 8px; } .plan-table .buy .buttons button, .plan-table .buy .buttons a { color: var(--mid-text-color); border: 2px solid var(--light-border-color); background: none; border-radius: 30px; transition: all .2s; cursor: pointer;} .plan-table .buy .buttons button:hover, .plan-table .buy .buttons a:hover { background-color: var(--theme-bg-color); border: 1px solid var(--theme-border-color); color: #fff;} .plan-table .buy .buttons .sep { margin: 0 8px; display: inline-block; font-size: 12px; transform: translateY(-2px); } .plan-table .option-selector-wrapper { margin-top: 15px;} .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single { border: 2px solid var(--light-border-color); border-radius: 30px; } .plan-table .option-selector-wrapper .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 40px; text-align: center; color: var(--mid-text-color);} .plan-table .body { padding: 15px 10% 40px 10%;} .plan-table .spec { color: #414042; margin-top: 20px; margin-bottom: 5px; font-size: 1.02em;} .plan-table .features { margin-top: 20px; } .plan-table .features li { padding: .7em .5em .7em 0; font-size: 1.05em; color: #414042;} .plan-table .features .fa-check { font-size: .8em; margin-right: 4px; color: var(--theme-text-color);} .plan-table .features .quota { color: var(--theme-text-color); font-weight: 500; margin-left: .5em;} .plan-table .features .tooltip { color: #ddd; font-size: .88em; margin-left: 1px;} .plan-table .plan-group-switch { position: absolute; right: 8%; top: 27px; border-radius: 40px; background-color: #f7f7f7; cursor: pointer;} .plan-table .plan-group-switch .switch-button { position: absolute; left: 0; top: 0; width: 60px; height: 100%; background-color: #fff; border: 1px solid var(--light-border-color); border-radius: 40px; transition: all .3s; } .plan-table .plan-group-switch ul { display: flex; position: relative; z-index: 1; } .plan-table .plan-group-switch li { white-space:nowrap; padding: .7em 1.1em; color: #666; font-weight: 500; transition: .2s all; } .plan-table .plan-group-switch li.active { color: var(--mid-text-color);} .plan-table .plan-box.highlighted { border: 3px solid var(--highlight-border-color); box-shadow: 3px 3px 10px rgb(232,214,168,.12);} .plan-table .plan-box.highlighted .title { color: var(--highlight-mid-text-color); border-bottom: 2px solid var(--highlight-text-color); } .plan-table .plan-box.highlighted .title .postfix { background-color: var(--highlight-border-color); } .plan-table .plan-box.highlighted .amount { color: var(--highlight-dark-text-color);} .plan-table .plan-box.highlighted .buttons button, .plan-table .plan-box.highlighted .buttons a { color: var(--highlight-text-color); border: 2px solid var(--highlight-border-color); box-shadow: 3px 3px 10px rgb(232,214,168,.12);} .plan-table .plan-box.highlighted .buttons button:hover, .plan-table .plan-box.highlighted .buttons a:hover { background-color: var(--highlight-border-color); border: 2px solid var(--highlight-border-color); color: #fff; } .plan-table .plan-box.highlighted .features { } .plan-table .plan-box.highlighted .features .fa-check, .plan-table .plan-box.highlighted .features .quota { color: var(--highlight-text-color); } .plan-table .plan-box.coming-soon { background-color: rgba(200,200,200,.5); } .plan-table .plan-box.coming-soon .buy button, .plan-table .plan-box.coming-soon .buy a, .plan-table .plan-box.coming-soon .buy button:hover, .plan-table .plan-box.coming-soon .buy a:hover { color: #bbb; border: 2px solid #bbb; background: none; pointer-events: none;} .plan-table .plan-box.coming-soon .amount, .plan-table .plan-box.coming-soon .period, .plan-table .plan-box.coming-soon .price-note, .plan-table .plan-box.coming-soon .spec, .plan-table .plan-box.coming-soon .features li, .plan-table .plan-box.coming-soon .features .fa-check, .plan-table .plan-box.coming-soon .features .quota { color: #aaa; } .plan-table .plan-box.coming-soon .features .tooltip { display: none;} .plan-table .plan-box.coming-soon .double-dash { font-weight: 200; margin-right: 10px;} .plan-table .plan-group-switch.highlighted { background-color: var(--highlight-bg-color);} .plan-table .plan-group-switch li { color: #888; } .plan-table .plan-group-switch li.active.highlighted { color: var(--highlight-mid-text-color); } .plan-table .plan-group-switch .switch-button.highlighted { border: 1px solid var(--highlight-border-color); } .plan-table .remark { margin-top: 12px; font-size: .92em; color: var(--mid-text-color); } .plan-table .remark i { font-size: 1.1em; margin-right: 3px;} #comparison-table-nav { display: none;} #comparison-table-nav li { flex-grow: 1; text-align: center;} #comparison-table-wrapper { max-width: 1300px; margin: 80px auto; overflow: hidden; background-color: #fff; border: 1px solid var(--light-border-color); border-radius: 15px;} #comparison-table-wrapper.narrow { max-width: 840px;} .comparison-table { border: none; } .comparison-table tr { } .comparison-table th, .comparison-table td { padding: 1.2em 0; border: none; border-bottom: 1px solid var(--soft-border-color); } .comparison-table tr:last-child td { border-bottom: none;} .comparison-table th { font-size: 1.4em; text-align: center; border-bottom: 1px solid var(--mid-border-color); color: #444;} .comparison-table td { font-size: 1.1em; text-align: center; color: var(--theme-text-color); font-weight: 500; } .comparison-table td:first-child { padding-left: 5%; text-align: left; color: #444; font-weight: normal; } .comparison-table th.highlighted { background-color: var(--highlight-bg-color); color: var(--theme-text-color);} .comparison-table td.highlighted { background-color: var(--highlight-bg-color);} /* ======================== My Services ======================== */ .feature-list { } .feature-list li { border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,.1); overflow: hidden; cursor: pointer; transition: border .4s;} .feature-list li:hover { border: 1px solid #bebebe; } .feature-list .icon { width: 90px; flex-grow: 0; flex-shrink: 0; background-color: #ddd; } .feature-list .icon img { left: 10%; right: 10%; top: 10%; bottom:10%; max-width: 80%; max-height: 80%; } .feature-list .info { padding: 15px;} .feature-list .title { margin-top: auto; margin-bottom: .5em; font-size: 1.1em; font-weight: 500; line-height: 1.2em;} .feature-list .description { margin-bottom: auto; color: #888; font-size: .96em; line-height: 1.2em;} /* ======================== Checkout ======================== */ /** checkout cart **/ #cart-table { width:100%; display:table; } #cart-table .row { display:table-row; } #cart-table .col { display:table-cell; padding:40px 20px; text-align:left; vertical-align:middle; position:relative; } #cart-table .row.header .col { padding:12px 20px; background-color: var(--theme-bg-color); color: #fff; } #cart-table .quantity { width:150px; font-weight:500; } #cart-table .price { width:150px; font-weight:500; white-space: nowrap; } #cart-table .remove { width:150px; text-align:right; } #cart-table .item .col { border-bottom:1px solid #ddd; color: #444; font-size: 1.1em; } #cart-table .item:last-child .col { border-bottom: none;} #cart-table .image { padding: 15px 0;} #cart-table .thumb { width:120px; } #cart-table .info { padding-left:20px; line-height:1.25em; } #cart-table .title { font-weight:500; } #cart-table .options { margin-left: 10px; font-weight: 400; font-size: .9em;} #cart-table .remove .remove-button { color:#666; cursor: pointer; } #cart-table .add-button, #cart-table .sub-button { display:inline-block; margin-right:2px; color:#666; cursor: pointer; } #cart-table .remove .msg { width: 100%; text-align: left; margin-top: 10px;} #cart-amount { display: table; width: 100%; color: #444;} #cart-amount .row { display: table-row; } #cart-amount .row > div { display: table-cell; padding:22px 0; border-top: 1px solid #ddd; font-weight:500; line-height:1.2em; } #cart-amount .row .label { width:110px; } #cart-amount .row .value { text-align:right; } #cart-amount .total { font-size: 1.33em;} #cart-amount .total > div { padding:16px 0 20px 0; } #cart-note { margin:30px 10px 0 10px; color:#666; line-height:1.25em; } #checkout-cart .note { margin-top: 20px; color: #666; font-size: 1.05em; line-height: 1.2em; } #checkout-cart .tips { padding:25px; margin:0 0 20px 0; border: 1px solid #ddd; } #checkout-cart .tips .title { font-size: 1.3em; font-weight: 500; margin-bottom: .8em;} #checkout-cart .tips .desc { color:#444; font-size: 1.05em; line-height: 1.4em; } #checkout-cart .tips .desc a { color: var(--theme-text-color); font-weight: 500;} #checkout-cart .no-item { margin-bottom:30px; padding:100px 4%; border: 1px solid #ddd; text-align: center; font-size: 1.33em; color:#666; } #checkout-cart .continue-shopping-button { color:#666;} #checkout-cart .continue-shopping-button i { margin-right: 5px;} #checkout-coupon #coupon-wrapper { padding-bottom: 30px;} #checkout-coupon #coupon-input { max-width: 380px; position: relative;} #checkout-coupon input { flex-grow:1; border:1px solid #ccc; height:38px; padding:.6em .7em; border-radius:4px 0 0 4px; outline:none; } #checkout-coupon #apply-coupon-button { font-size:.96em; height:38px; padding:.6em 1em; background:var(--theme-bg-color); color:#fff; border-radius:0 4px 4px 0; border:1px solid var(--theme-bg-color); white-space: nowrap; } #checkout-coupon #remove-coupon-button { display:inline-block; margin-left:14px; text-decoration:underline; color:#777; } #checkout-coupon #coupon_code { display:inline-block; } #checkout-coupon .coupon-msg { width:100%; margin-top: 10px; color:#666; font-size:.9em; line-height:1.2em; } /** checkout indicator **/ #checkout-indicator { margin: 40px auto 40px auto; } #checkout-indicator-body { width: 90%; max-width: 640px; margin: auto; position: relative;} #checkout-indicator-body::before { z-index: -1; content: ''; position: absolute; left: 55px; right: 55px; top:153px; height: 2px; border-radius: 1px ; background-color: var(--light-border-color); } #checkout-indicator .set { width: 110px; flex-grow: 0; flex-shrink: 0; text-align: center; color: #444;} #checkout-indicator .icon { width: 110px; height: 110px; border-radius: 50%; position: relative; border: 8px solid #fff; background-color: var(--light-bg-color); color: var(--theme-bg-color);} #checkout-indicator .icon i { position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 36px; } #checkout-indicator .step { margin: 10px 0; font-weight: 500; letter-spacing: .05em;} #checkout-indicator .step span { font-size: 1.25em; margin-left: .25em;} #checkout-indicator .dot { margin: 10px auto; width: 12px; height: 12px; border-radius: 50%; background-color: var(--light-border-color); border: 2px solid #fff;} #checkout-indicator .label { letter-spacing: .25em; font-weight: 500;} #checkout-indicator .set.active .icon { background-color: var(--theme-bg-color); border-color: var(--light-bg-color); color: #fff; } #checkout-indicator .set.active .dot { border-color: var(--theme-bg-color); background-color: #fff;} #checkout-main { flex-grow: 1; } #checkout-aside { flex-grow: 0; flex-shrink: 0; width: 300px; margin-left: 50px;} #checkout-aside h3 { font-size: 1.4em; font-weight: 500; color: var(--theme-text-color); margin-bottom: 1em;} #checkout-aside .note { line-height: 1.2em; margin-top: 20px; color: #666; } /** checkout form **/ #checkout-form { width: 100%; margin-top:30px; color: #666;} #checkout-form fieldset { width: 100%; padding:0 30px; margin: 40px 0; position:relative; } #checkout-form legend { font-size:1.2em; font-weight: 500; color: var(--theme-text-color); margin-bottom: 15px;} #checkout-form legend + .note { margin-left: 10px; } #checkout-form #email-set { } #checkout-form #email-set.login { padding-top: 30px;} #checkout-form #email-set .checkout-type label { margin-right:15px; margin-right: 40px; } #checkout-form #email-set #checkout-login { color:#666; margin:25px 0 20px 0; } #checkout-form #email-set #checkout-login a { text-decoration: underline; color: #000;} #checkout-form #email-set .row .error { text-align: left;} #checkout-form .row .label { white-space: nowrap; margin-bottom: 0;} #checkout-form .row input[type="text"], #checkout-form .row select { flex-grow:1; width: 100%;} #checkout-form .row .error { width: 100%; text-align: left; } #checkout-form #payment-method-set { } #checkout-form #payment-method-option .item { margin:0 40px 10px 0; white-space: nowrap;} #checkout-form #payment-method-option .error { text-align: left; } #checkout-form #submit-set { padding:10px 0; border: none;} #checkout-form [type="submit"] { } #checkout-form .continue-shopping-button { color:#666; } #checkout-form .continue-shopping-button i { margin-right: 5px; font-size: .86em;} #payment-method-detail .set { border-top:1px solid #ddd; margin-top:20px; padding-top:20px; line-height:1.5em; } #payment-method-detail .row { margin-bottom:10px; } #payment-method-detail .row [type="text"] { max-width: 390px;} #payment-method-detail .row .error { text-align: left;} #checkout-form #invoice-set .note { color: #666; line-height: 1.2em;} #checkout-form #invoice-set .row { margin-top: 20px; } #checkout-form #invoice-set .label { margin-bottom: 15px; font-weight: 500;} /** checkout result **/ #checkout-result { } #checkout-result h2 { font-size:1.3em; margin:30px 0; text-align: center; } #checkout-result .button-wrapper { margin:30px 0;} #checkout-result .note { line-height:1.4em; margin:20px 0; color:#888; } #checkout-result .result-info { padding:10px 8% 30px 8%; margin: auto; max-width: 600px;} #checkout-result .result-info .col-item { margin-top: 20px;} #checkout-result .result-info .label { margin-bottom: 10px; font-weight: 500; color: var(--theme-text-color);} #checkout-result .result-info .value { color: #888;} #subscription-order-failed #checkout-result { max-width: 600px; margin: auto;} /* ======================== Profiles ======================== */ .profile-content .no-item { padding:100px 4%; border: 1px solid #ddd; text-align: center; font-size: 1.33em; color:#666; } .profile-list { display: table; width: 100%; border-top:1px solid #ddd;} .profile-list li { display: table-row; } .profile-list .col { display: table-cell; padding: 12px 2%; text-align:left; vertical-align: middle; border-bottom:1px solid #ddd;} .profile-list .col:first-child { padding-left: 0;} .profile-list .col:last-child { padding-right: 0;} .profile-list .col .label { display:none; } .profile-list .row:nth-child(even) .col { background:#f7f7f7; } .profile-list .row.header .col { padding:15px 1.5% !important; } .profile-list .title { line-height: 1.33em;} .profile-list .price { white-space: nowrap;} .profile-list .actions { width:100px; text-align: right;} .profile-list .link { margin: 8px 0 8px 20px; color:#888; } .profile-list .link:hover { color: #666;} .profile-empty { text-align: center; padding: 80px 4%; font-size: 1.3em; color: #bbb;} #subscription-list { border: none;} #subscription-list li { border: 1px solid #ddd; margin-bottom: 15px; padding:15px 25px;} #subscription-list .row { margin: 15px 0; display: flex; align-items: center;} #subscription-list .label { margin-right: 10px;} #subscription-list .value { color: #666;} #subscription-list .button { margin-top: 10px; max-width: none;} #subscription-list .button:hover { background-color: #444; cursor: pointer;} #subscription-cancel { } #subscription-cancel .profile-box { padding: 50px 3%; } #subscription-cancel h2 { font-size: 1.33em;} #subscription-cancel .content { margin: 30px 0;} #subscription-cancel .link-wrapper { margin-top: 30px;} #subscription-cancel .back { color: #888; display: inline-block; } #subscription-inquiry .profile-box { padding: 40px 3%; text-align: left; } #subscription-inquiry legend { margin-bottom: 1.2em; font-weight: 500; color: var(--theme-text-color);} #subscription-inquiry legend, #subscription-inquiry .label { text-align: left;} #subscription-inquiry .link-wrapper { margin-top: 30px;} #payments-list li { border: 1px solid #ddd; padding: 40px 30px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;} #payments-list li button { border: none; padding: none; background: none; cursor: pointer; outline: none; } #payments-list li button:hover { color: #666;} /* ======================== Order ======================== */ #order-list .col { padding:15px 1.5%; } #order-list .order-no a { text-decoration: underline;} /** order review **/ #order-review { color: #666;} #order-review .summary { margin-top: 15px; margin-bottom: 20px; } #order-review .order-no, #order-review .order-date { font-size: 1.05em; margin-bottom:.9em; } #order-review .label { font-weight:500; margin-right:15px; color: var(--theme-text-color); } #order-review .set { width:50%; padding:25px 0; border-top:1px solid var(--light-border-color); } #order-review .set.full { width: 100%; } #order-review .set h3 { font-size: 1.2em; margin-bottom:1em; color:var(--theme-text-color) ; } #order-review .set .row { line-height:1.5em; margin-bottom:5px; } #order-review .set a { text-decoration: underline;} #order-review #order-detail { width:100%; margin-bottom:20px; } #order-review #order-detail-table { width:100%; display:table; } #order-review #order-detail-table .row { display:table-row; } #order-review #order-detail-table .col { padding:15px; display:table-cell; } #order-review #order-detail .header .col { text-align:left; font-size:1.05em; background-color: var(--theme-bg-color); color: #fff; } #order-review #order-detail .item .col { vertical-align:top; border-top:1px solid var(--light-border-color); vertical-align:middle; } #order-review #order-detail .item:nth-child(even) .col { background-color: #f3f4f6; } #order-review #order-detail .col div { line-height:1.5em; } #order-review #order-detail .thumb { width:120px; padding-left: 0; } #order-review #order-detail .price, #order-review #order-detail .quantity { width:12%; } #order-review .subtotal, #order-review .discount, #order-review .coupon, #order-review .total { text-align:right; font-size:1.05em; margin-bottom:10px; } #order-review .total { font-weight:500; margin-bottom: 0; } #order-review .total .value { font-size:1.2em; } #order-review .button { margin-top: 15px; } /* ======================== Guide page ======================== */ #subscription-guide .page-contents .paragraph { border-top:1px solid #ddd; padding: 30px 0; max-width: 860px;} #subscription-guide .page-contents .paragraph:first-child { border: none;} #subscription-guide .page-contents .paragraph h3 { margin-bottom: 1em;} /* ================================ Responsive Layout ================================ */ /* for 1280px or less */ @media screen and (max-width: 1280px) { /** Plans **/ .plan-table .col-item { width: 32%; margin-right: 2%; } .plan-table .title { height: 40px; font-size: 1.5em;} .plan-table .amount { font-size: 2em;} .plan-table .plan-group-switch { top: 24px;} .plan-table .plan-group-switch li { padding: .5em .9em;} .plan-table .spec { font-size: 1.05em;} .plan-table .features li { font-size: 1.05em;} #comparison-table-wrapper { margin: 50px auto 0 auto;} .comparison-table th { font-size: 1.2em;} .comparison-table td { font-size: 1.05em; } /** Checkout **/ #checkout-indicator { margin: 20px auto 40px auto;} #checkout-indicator .set { width: 100px;} #checkout-indicator .icon { width: 100px; height: 100px;} #checkout-indicator .icon i { font-size: 30px; } #checkout-indicator-body::before { top: 143px;} #checkout-aside { width: 220px; margin-left: 30px;} #checkout-aside h3 { font-size: 1.3em;} } /* for 1024px or less */ @media screen and (max-width: 1024px) { /** Plans **/ #subscription-plans h2 { font-size: 1.6em; margin-bottom: 30px;} #subscription-nav .nav-menu { position: static; padding: 15px 0 0 1em; } #subscription-nav .menu-inner { border:none; padding:0; background:none; } #subscription-nav .menu-inner li { margin: .6em 0;} #subscription-nav .menu-inner .set { width: 100%;} #subscription-nav .menu-inner .title { margin-bottom: .5em;} /** Checkout **/ #checkout-form fieldset { margin: 30px 0; } /** order-list **/ #order-list .col.date { display:none; } #order-review .set { width: 100%; margin-bottom: 10px; padding: 20px 20px;} #order-review #order-detail { padding: 10px 15px;} #order-review #order-detail-table .col { padding: 10px 1.5%;} #order-review #order-detail .thumb { padding-left: 0; } #order-review #order-detail .thumb { width: 90px;} #order-review #order-detail .price, #order-review #order-detail .quantity { width: auto;} } /* for 768px or less */ @media screen and (max-width: 768px) { /** Plans **/ .plan-table .col-item { width: 100% !important; margin-right: 0 !important; margin: 10px 0 !important;} .plan-table .header { padding: 20px 6% 0 6%;} .plan-table .title { padding-bottom: 20px;} .plan-table .body { padding: 15px 6% 20px 6%;} .plan-table .features li { padding: .6em .4em .6em 0; font-size: 1em;} .plan-table .plan-group-switch { top: 18px; right: 6%;} #comparison-table-nav { display: flex; justify-content: space-between; margin: 40px 0 25px 0;} #comparison-table-nav li { margin: 0 5%; font-size: 1.2em; font-weight: 500; color: #444; cursor: pointer;} #comparison-table-nav li.mobile-active { color: var(--theme-text-color);} #comparison-table-wrapper { margin-top: 0;} .comparison-table th { width: 50% !important; font-size: 1.1em;} .comparison-table td { width: 50% !important; font-size: 1em;} /** Checkout **/ #checkout-cart { flex-direction: column;} #checkout-aside { width: 100%; margin-left: 0; margin-top: 30px;} #checkout-form form { flex-direction: column;} #checkout-form fieldset { padding: 0 6%;} /** Complete **/ #subscription-order-complete #cart-table .col:nth-child(1), #subscription-order-complete #cart-table .col:nth-child(4), #subscription-order-complete #cart-table .col:nth-child(5) { display: none;} } /* for 640px or less */ @media screen and (max-width: 640px) { /** Plans **/ #subscription-plans h2 { font-size: 1.4em; margin-bottom: 15px;} .plan-table .title { font-size: 1.33em;} .plan-table .amount { font-size: 1.8em;} .plan-table .plan-group-switch { top: 16px;} #comparison-table-nav { margin: 20px 0;} #comparison-table-nav li { font-size: 1.1em;} #comparison-table-wrapper { border-left:none; border-right: none; background: none; border-radius: 0; box-shadow: none;} .comparison-table th { display: none !important;} .comparison-table th, .comparison-table td { padding: 1.15em 0; } /** Checkout **/ #checkout-indicator { margin: 0 auto 30px auto;} #checkout-indicator .set { width: 80px;} #checkout-indicator .icon { width: 80px; height: 80px; border-width: 6px;} #checkout-indicator .icon i { font-size: 24px; } #checkout-indicator .step { font-size: 13px;} #checkout-indicator .step span { font-size: 1.1em;} #checkout-indicator .label { font-size: 13px; letter-spacing: .15em;} #checkout-indicator-body::before { top: 120px; left: 40px; right: 40px;} /** Profiles **/ #subscription-cancel .profile-box { padding: 30px 3%; } #subscription-cancel h2 { font-size: 1.2em; } #subscription-cancel .content { margin: 20px 0; font-size: .95em;} #subscription-inquiry .profile-box { padding: 30px 3%; } #subscription-inquiry legend { font-size: 1.2em; } } /* for 480px or less */ @media screen and (max-width: 480px) { /** Checkout **/ #checkout-indicator .set { width:72px;} #checkout-indicator .icon { width:72px; height: 72px; } #checkout-indicator .icon i { font-size: 21px; } #checkout-indicator-body::before { top: 112px; } #cart-table .col { padding: 30px 20px;} #cart-table .item .col { font-size: 1em;} #cart-amount .row > div { padding: 20px 0;} #cart-amount .total { font-size: 1.25em;} /** order-list **/ #order-list .col.status { display:none; } #order-review .set { padding: 15px;} #order-review #order-detail .thumb { width: 64px;} } /* for 360px or less */ @media screen and (max-width: 360px) { /** Checkout **/ #cart-table .col { padding: 30px 15px;} #cart-table .row.header .col { padding: 12px 15px;} }