@charset "UTF-8";
/* normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/** 1. Change the default font family in all browsers (opinionated). 2. Prevent adjustments of font size after orientation changes in IE and iOS. */
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

/** Remove the margin in all browsers (opinionated). */
body { margin: 0; }

/* HTML5 display definitions @mixin ========================================================================= */
/** Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. 2. Add the correct display in IE. */
/** Add the correct display in IE 9-. */
audio, canvas, progress, video { display: inline-block; }

/** Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0; }

/** Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { vertical-align: baseline; }

/** Add the correct display in IE 10-. 1. Add the correct display in IE. */
template { display: none; }

/* Links @mixin ========================================================================= */
/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a { background-color: transparent; -webkit-text-decoration-skip: objects; }

/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
a:active, a:hover { outline-width: 0; }

/* Text-level semantics @mixin ========================================================================= */
/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; }

/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b, strong { font-weight: inherit; }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** Add the correct font style in Android 4.3-. */
dfn { font-style: italic; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Add the correct background and color in IE 9-. */
mark { background-color: #ff0; color: #000; }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sub { bottom: -0.25em; }

sup { top: -0.5em; }

/* Embedded content @mixin ========================================================================= */
/** Remove the border on images inside links in IE 10-. */
img { border-style: none; }

/** Hide the overflow in IE. */
svg:not(:root) { overflow: hidden; }

/* Grouping content @mixin ========================================================================= */
/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/** Add the correct margin in IE 8. */
figure { margin: 1em 40px; }

/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; overflow: visible; }

/* Forms @mixin ========================================================================= */
/** 1. Change font properties to `inherit` in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
button, input, select, textarea { font: inherit; margin: 0; }

/** Restore the font weight unset by the previous rule. */
optgroup { font-weight: bold; }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { text-transform: none; }

/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }

/** Change the border, margin, and padding in all browsers (opinionated). */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { -webkit-box-sizing: border-box; box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }

/** Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
[type="checkbox"], [type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }

/** Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Correct the text style of placeholders in Chrome, Edge, and Safari. */
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

* { -webkit-box-sizing: border-box; box-sizing: border-box; }

html { height: 100%; }

body { font-family: "微軟正黑體", Arial; }

li, ul { margin: 0; padding: 0; list-style-type: none; }

img { display: block; }

p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }

a { text-decoration: none; }

input { border-width: 1px; }

textarea:focus, input:focus { outline: none; }

#body { min-height: auto; }

#app { position: relative; }

.container { max-width: 640px; margin: 0 auto; }

.crm-container { max-width: 640px; margin: 0 auto; }

.uv-title { display: none; }

@media only screen and (max-width: 1023px) { #app-nav { display: none; margin-top: 51px; } }

@media only screen and (max-width: 1023px) { #app-nav.is-active { display: block; position: absolute; left: 0; top: 67px; width: 100%; z-index: 999; background-color: #fff; } }

#app-nav .app-nav-list { margin: 0 auto; width: 1024px; position: relative; padding: 1.5% 0; text-align: center; font-size: 0; }

@media only screen and (max-width: 1023px) { #app-nav .app-nav-list { padding: 0; } }

#app-nav .app-nav-item { position: relative; padding: 0 2.6% 0 6%; display: inline-block; vertical-align: middle; text-align: center; font-size: 18px; color: #00a0e9; cursor: pointer; border-right: 1px solid #7fcff4; background-repeat: no-repeat; background-size: contain; }

@media only screen and (max-width: 640px) { #app-nav .app-nav-item { display: block; font-size: 20px; padding: 4vw 2.6vw 4vw 30vw; text-align: left; border-right: none; border-bottom: 1px solid #ededed; } }

@media only screen and (min-width: 641px) and (max-width: 1023px) { #app-nav .app-nav-item { display: block; font-size: 26px; padding: 4vw 2.6vw 4vw 30vw; text-align: left; border-right: none; border-bottom: 1px solid #ededed; } }

#app-nav .app-nav-item1 { background-position: 25%; background-image: url("../images/nav/home_icon.png"); }

@media only screen and (max-width: 640px) { #app-nav .app-nav-item1 { background-position: 14.5vw; background-size: 35px 32px; } }

@media only screen and (min-width: 641px) and (max-width: 1023px) { #app-nav .app-nav-item1 { background-position: 18.5vw; background-size: 35px 32px; } }

#app-nav .app-nav-item2 { background-position: 18%; background-image: url("../images/nav/question_icon.png"); }

@media only screen and (max-width: 640px) { #app-nav .app-nav-item2 { background-position: 16vw; background-size: 21px 29px; } }

@media only screen and (min-width: 641px) and (max-width: 1023px) { #app-nav .app-nav-item2 { background-position: 19vw; background-size: 21px 29px; } }

#app-nav .app-nav-item3 { background-position: 23%; background-image: url("../images/nav/product_icon.png"); }

@media only screen and (max-width: 640px) { #app-nav .app-nav-item3 { background-position: 16.5vw; background-size: 14px 35px; } }

@media only screen and (min-width: 641px) and (max-width: 1023px) { #app-nav .app-nav-item3 { background-position: 19.5vw; background-size: 14px 35px; } }

#app-nav .app-nav-item4 { background-position: 13%; background-image: url("../images/nav/shopping_car_icon.png"); }

@media only screen and (max-width: 640px) { #app-nav .app-nav-item4 { background-position: 14vw; background-size: 32px 32px; } }

@media only screen and (min-width: 641px) and (max-width: 1023px) { #app-nav .app-nav-item4 { background-position: 18vw; background-size: 32px 32px; } }

#app-nav .app-nav-item5 { background-position: 20%; background-image: url("../images/nav/rule_icon.png"); }

@media only screen and (max-width: 640px) { #app-nav .app-nav-item5 { background-position: 15.5vw; background-size: 23px 28px; } }

@media only screen and (min-width: 641px) and (max-width: 1023px) { #app-nav .app-nav-item5 { background-position: 18.5vw; background-size: 23px 28px; } }

#app-nav .app-nav-item6 { background-position: 20%; background-image: url("../images/nav/award_list_icon.png"); }

@media only screen and (max-width: 640px) { #app-nav .app-nav-item6 { background-position: 15vw; background-size: 27px 32px; } }

@media only screen and (min-width: 641px) and (max-width: 1023px) { #app-nav .app-nav-item6 { background-position: 18.5vw; background-size: 27px 32px; } }

#app-nav .app-nav-item6 { border-right: none; }

@media only screen and (max-width: 1023px) { #app-nav .app-nav-item6 { border-bottom: none; } }

#app-hamburger-section { display: none; height: 50px; background-color: transparent; width: 100%; clear: both; content: ''; position: absolute; z-index: 999; right: 0; top: 70px; -webkit-transition: none; -o-transition: none; transition: none; }

@media only screen and (max-width: 1023px) { #app-hamburger-section { display: block; background-color: transparent; } }

#app-hamburger-section.is-active { background-color: #fff; }

.app-hamburger { display: block; position: relative; overflow: hidden; margin: 0; padding: 0; float: right; width: 50px; height: 50px; font-size: 0; text-indent: -9999px; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-shadow: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; background-color: #00a0e9; -webkit-transition: all 0.15s 0.1s; -o-transition: all 0.15s 0.1s; transition: all 0.15s 0.1s; }

.app-hamburger:focus { outline: none; }

.app-hamburger.is-active span { background: transparent; }

.app-hamburger.is-active span:before { -webkit-transform: translateY(12px) rotate(45deg); -ms-transform: translateY(12px) rotate(45deg); transform: translateY(12px) rotate(45deg); }

.app-hamburger.is-active span:after { -webkit-transform: translateY(-10px) rotate(-45deg); -ms-transform: translateY(-10px) rotate(-45deg); transform: translateY(-10px) rotate(-45deg); }

.app-hamburger span { display: block; position: absolute; top: 23.5px; left: 12px; right: 12px; height: 3px; background: #fff; }

.app-hamburger span:before, .app-hamburger span:after { position: absolute; display: block; left: 0; width: 100%; height: 3px; background-color: #fff; content: ""; -webkit-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; }

.app-hamburger span:before { top: -11px; }

.app-hamburger span:after { bottom: -11px; }

#app-loading { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 999; background-color: #fff; }

#app-loading .loading { position: relative; width: 66px; height: 66px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-size: cover; background-image: url("../images/loading/loading.gif"); }

#product-group .content-img { width: 80%; margin: 0 auto 20px; }

#product-group .product-group-title { padding: 5% 0 3%; color: #fff; font-size: 39px; text-align: center; }

@media only screen and (max-width: 640px) { #product-group .product-group-title { font-size: 7vw; } }

.product-nav { margin-bottom: 3%; padding: 0 11%; font-size: 0; text-align: center; }

.product-nav-item { display: inline-block; vertical-align: top; -webkit-transition: none; -o-transition: none; transition: none; overflow: hidden; width: calc(342px / 1.7); height: calc(122px / 1.7); background-size: 100%; }

@media only screen and (max-width: 640px) { .product-nav-item { width: calc(342px / 3.3); height: calc(122px / 3.3); } }

.product-nav-item:nth-of-type(1) { margin-right: 12px; background-image: url("../images/product2/nav_btn1.png"); }

@media only screen and (max-width: 640px) { .product-nav-item:nth-of-type(1) { margin-right: 1vw; } }

.product-nav-item:nth-of-type(1).is-active, .product-nav-item:nth-of-type(1):hover, .product-nav-item:nth-of-type(1).is-active { background-image: url("../images/product2/nav_btn1_h.png"); }

.product-nav-item:nth-of-type(2) { margin-left: 12px; background-image: url("../images/product2/nav_btn2.png"); }

@media only screen and (max-width: 640px) { .product-nav-item:nth-of-type(2) { margin-left: 1vw; } }

.product-nav-item:nth-of-type(2).is-active, .product-nav-item:nth-of-type(2):hover, .product-nav-item:nth-of-type(2).is-active { background-image: url("../images/product2/nav_btn2_h.png"); }

#product-good .product1-content-img { position: relative; left: 13px; width: 68%; margin: 145px auto 20px; }

@media only screen and (max-width: 640px) { #product-good .product1-content-img { margin: 17vw auto 6vw; left: 0; } }

#product-good .product2-content-img { position: relative; left: -41px; width: 87%; margin: 0 auto 20px; }

@media only screen and (max-width: 640px) { #product-good .product2-content-img { left: -5vw; } }

#product-footer { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 998; padding: 30px 0 25px; text-align: center; background-color: #21c2f8; opacity: 0; -webkit-transition: none; -o-transition: none; transition: none; }

@media only screen and (max-width: 640px) { #product-footer { padding: 5% 0; } }

#product-footer.in-view { -webkit-transition: opacity 1.2s ease-in-out; -o-transition: opacity 1.2s ease-in-out; transition: opacity 1.2s ease-in-out; opacity: 1; }

#product-footer.on-bottom { position: relative; }

#product-footer .btn-link { display: inline-block; vertical-align: top; background-position: center; background-size: 100%; background-repeat: no-repeat; margin: 0 2%; width: 274px; height: 64px; }

@media only screen and (max-width: 640px) { #product-footer .btn-link { width: 46%; height: 0; padding-bottom: 12%; } }

#product-footer .btn-link-buy { background-image: url("../images/product_shared/footer_btn1.png"); }

#product-footer .btn-link-location { background-image: url("../images/product_shared/footer_btn2.png"); }

#app-product1 { background-color: #a8dcf7; }

#app-product1 .content-title { color: #1f9dec; font-size: 40px; text-align: center; font-weight: bold; padding-bottom: 2%; }

@media only screen and (max-width: 640px) { #app-product1 .content-title { font-size: 7vw; } }

#app-product1 .context-sub-title { color: #0067ad; font-size: 32px; font-weight: 500; text-align: center; padding-bottom: 3%; }

@media only screen and (max-width: 640px) { #app-product1 .context-sub-title { font-size: 5vw; } }

#app-product1 .context-sub-title-block { display: inline-block; background-color: #0067ad; color: #fff; padding: 1% 8%; border-radius: 50px; position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); font-size: 22px; margin-bottom: 6%; }

@media only screen and (max-width: 640px) { #app-product1 .context-sub-title-block { font-size: 5vw; } }

#app-product1 .product-two-row { padding: 0 3%; margin-bottom: 3%; white-space: nowrap; }

#app-product1 .product-two-row .product-item { width: 50%; display: inline-block; vertical-align: top; }

#app-product1 .product-two-row .product-item .item-cover { min-height: 300px; position: relative; background-color: #f4f4f4; }

@media only screen and (max-width: 640px) { #app-product1 .product-two-row .product-item .item-cover { min-height: 40vw; } }

#app-product1 .product-two-row .product-item .item-cover .cover-img1 { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -43%); -ms-transform: translate(-50%, -43%); transform: translate(-50%, -43%); }

@media only screen and (max-width: 640px) { #app-product1 .product-two-row .product-item .item-cover .cover-img1 { width: 13vw; } }

#app-product1 .product-two-row .product-item .item-cover .cover-img2 { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

@media only screen and (max-width: 640px) { #app-product1 .product-two-row .product-item .item-cover .cover-img2 { width: 13vw; } }

#app-product1 .product-two-row .product-item .item-cover .cover-img3 { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

@media only screen and (max-width: 640px) { #app-product1 .product-two-row .product-item .item-cover .cover-img3 { width: 15vw; } }

#app-product1 .product-two-row .product-item .item-name { padding: 11% 6%; font-size: 18px; color: #fff; background-color: #00a0e9; }

#app-product1 .product-two-row .product-item .item-name.item-lines { padding: 6% 6%; }

@media only screen and (max-width: 640px) { #app-product1 .product-two-row .product-item .item-name { font-size: 3.8vw; padding: 10.5% 6%; }
  #app-product1 .product-two-row .product-item .item-name.item-lines { padding: 4% 6%; } }

#app-product1 .product-two-row .product-item .item-odd { padding: 11% 6%; font-size: 18px; color: #00609d; background-color: #a8e1fc; }

#app-product1 .product-two-row .product-item .item-odd.item-lines { padding: 6% 6%; white-space: initial; }

#app-product1 .product-two-row .product-item .item-odd.item-multi-lines { padding: 6% 6%; }

@media only screen and (max-width: 640px) { #app-product1 .product-two-row .product-item .item-odd { font-size: 3.8vw; padding: 10.5% 6%; }
  #app-product1 .product-two-row .product-item .item-odd.item-lines { padding: 4% 6%; }
  #app-product1 .product-two-row .product-item .item-odd.item-multi-lines { padding: 11% 6%; white-space: initial; } }

#app-product1 .product-two-row .product-item .item-even { padding: 11% 6%; font-size: 18px; color: #38a9ee; background-color: #e2faff; }

#app-product1 .product-two-row .product-item .item-even.item-lines { padding: 6% 6%; }

@media only screen and (max-width: 640px) { #app-product1 .product-two-row .product-item .item-even { font-size: 3.8vw; padding: 10.5% 6%; }
  #app-product1 .product-two-row .product-item .item-even.item-lines { padding: 4% 6%; } }

#app-product1 .product-single-row { padding: 0 3%; margin-bottom: 3%; }

#app-product1 .product-single-row .product-item .item-cover { min-height: 300px; position: relative; background-color: #f4f4f4; }

@media only screen and (max-width: 640px) { #app-product1 .product-single-row .product-item .item-cover { min-height: 40vw; } }

#app-product1 .product-single-row .product-item .item-cover .cover-img1 { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

@media only screen and (max-width: 640px) { #app-product1 .product-single-row .product-item .item-cover .cover-img1 { width: 13vw; } }

#app-product1 .product-single-row .product-item .item-cover .cover-img2 { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

@media only screen and (max-width: 640px) { #app-product1 .product-single-row .product-item .item-cover .cover-img2 { width: 13vw; } }

#app-product1 .product-single-row .product-item .item-cover .cover-img3 { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0 auto; }

@media only screen and (max-width: 640px) { #app-product1 .product-single-row .product-item .item-cover .cover-img3 { width: 20vw; } }

#app-product1 .product-single-row .product-item .item-name { padding: 3%; font-size: 18px; color: #fff; background-color: #00a0e9; }

@media only screen and (max-width: 640px) { #app-product1 .product-single-row .product-item .item-name { font-size: 3.8vw; } }

#app-product1 .product-single-row .product-item .item-odd { padding: 3%; font-size: 18px; color: #00609d; background-color: #a8e1fc; }

@media only screen and (max-width: 640px) { #app-product1 .product-single-row .product-item .item-odd { font-size: 3.8vw; } }

#app-product1 .product-single-row .product-item .item-even { padding: 3%; font-size: 18px; color: #3baaee; background-color: #effcff; }

@media only screen and (max-width: 640px) { #app-product1 .product-single-row .product-item .item-even { font-size: 3.8vw; } }

#app-product1 #content1 { position: relative; width: 100%; height: 1711px; background-position: center; background-repeat: no-repeat; background-image: url("../images/product1/bg1.png"); }

@media only screen and (max-width: 640px) { #app-product1 #content1 { height: auto; margin-bottom: 10vw; } }

#app-product1 #content1 .context { width: 88%; margin: 0 auto; padding: 68px 0 20px; }

#app-product1 #content2 { position: relative; width: 100%; height: 2216px; margin-bottom: 8px; background-position: center; background-repeat: no-repeat; background-image: url("../images/product1/bg2.png"); }

@media only screen and (max-width: 640px) { #app-product1 #content2 { height: auto; margin-bottom: 10vw; } }

#app-product1 #content2 .main-content { position: relative; width: 100%; height: 0; padding-bottom: 335%; background-size: 100%; background-repeat: no-repeat; background-image: url("../images/product1/content_bg2.png"); }

#app-product1 #content2 .context { width: 88%; margin: 0 auto 3%; padding: 115px 0 0; }

@media only screen and (max-width: 640px) { #app-product1 #content2 .context { padding: 14% 0 0; } }

#app-product1 #content2 .context .content2-img { width: 80%; margin: 0 auto 5%; }

#app-product1 #content3 { position: relative; width: 100%; height: 2387px; margin-bottom: 28px; background-position: center; background-repeat: no-repeat; background-image: url("../images/product1/bg3.png"); }

@media only screen and (max-width: 640px) { #app-product1 #content3 { height: auto; margin-bottom: 10vw; } }

#app-product1 #content3 .main-content { position: relative; width: 100%; height: 0; padding-bottom: 365%; background-size: 100%; background-repeat: no-repeat; background-image: url("../images/product1/content_bg3.png"); }

#app-product1 #content3 .context { width: 88%; margin: 0 auto 3%; padding: 115px 0 0; }

@media only screen and (max-width: 640px) { #app-product1 #content3 .context { padding: 14% 0 0; } }

#app-product1 #content3 .context .content3-img { width: 48%; margin: 0 auto 5%; }

#app-product1 #content4 { position: relative; width: 100%; height: 2590px; background-position: center; background-repeat: no-repeat; background-image: url("../images/product1/bg4.png"); }

@media only screen and (max-width: 640px) { #app-product1 #content4 { height: auto; padding-bottom: 10vw; } }

#app-product1 #content4 .main-content { position: relative; width: 100%; height: 0; padding-bottom: 365%; background-size: 100%; background-repeat: no-repeat; background-image: url("../images/product1/content_bg4.png"); }

#app-product1 #content4 .context { width: 88%; margin: 0 auto 3%; padding: 115px 0 0; }

@media only screen and (max-width: 640px) { #app-product1 #content4 .context { padding: 14% 0 0; } }

#app-product1 #content4 .context .content4-img { width: 48%; margin: 0 auto 5%; }