@charset "utf-8";
ul,li,ol,dl,dd {list-style-type: none;}
i, em {font-style: normal;}
p,h1,h2,h3,h4,h5,h6,figure,figcaption {margin: 0; padding: 0;}

input::-webkit-input-placeholder {color: #b6cbe0; font-size: 16px;}
input:-moz-placeholder {color: #b6cbe0; font-size: 16px;}
input:-ms-input-placeholder {color: #b6cbe0; font-size: 16px;}
input {-webkit-appearance:none;}

:root {
    --main-button: linear-gradient(90deg, #6ccafd 0%, #2eafe6 100%);
    --popup-button: linear-gradient(90deg, #55a7fb 0%, #5e9ad6 100%);
}

/* 超过隐藏 */
.ellipsis {overflow: hidden; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis;}

/* webkit 内核 scrollbar 样式 */
*::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.2); background-color: #ccc;}
*::-webkit-scrollbar {width: 8px; height: 8px; background-color: rgba(0,0,0,0.5);}
*::-webkit-scrollbar-thumb {
    background-image: -webkit-gradient(linear, left bottom, left top,
    color-stop(0, rgb(150,150,150)), color-stop(0.5, rgb(150,150,150)), color-stop(1, rgb(150,150,150)));
}
/* webkit 内核 scrollbar 样式 */

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;}

.clearFix {zoom: 1;}
.clearFix::after {visibility: hidden; display: block; font-size: 0; content: ""; clear: both; height: 0;}

#main {position: relative;}
.shopify-section--header {
    position: -webkit-sticky;
    position: sticky!important;
}
#shopify-section-header:hover {z-index: 10;}
#shopify-section-ruviu-app-reviews {margin: 20px 0 0;}
#smile-ui-container, #tidio-chat, .ak-master-sales-pop {display: none !important;}
  
  
.__tab {
  width: 100%; height: 50px; padding: 13px 40px; top: 0; right: 0; z-index: 9; background: rgba(255, 255, 255, 0.7);
  display: flex; justify-content: flex-end;
}
.__tab li {
  padding: 0 10px; margin: 0 10px; height: 24px; line-height: 24px; font-size: 18px; color: #222; border-radius: 12px; cursor: pointer;
}
.__tab li:hover {background: #efefef;}
.__tab li:last-child {color: #fff; background: #00bdb5; animation: wiggle 2s linear infinite;}
  
#pageBuyNow_oService_oPillow, #pageOPillow {animation: shrink 0.3s 0.1s forwards;}
#pageBuyNow_oService_oPillow {display: none;}


/* 文字大小 */
#pageOPillow {position: relative; z-index: 4;}
#pageOPillow * {font-family: "CalibreWeb-Light", "Avenir Next", sans-serif;}
#pageOPillow b {font-family: "CalibreWeb-Medium", "Avenir Next", sans-serif; font-weight: normal;}
#pageOPillow strong {font-family: "CalibreWeb-Regular", "Avenir Next", sans-serif; font-weight: normal;}
#pageOPillow h1 {font-size: 42px; font-weight: bold; color: #222222; font-family: "Avenir Next", sans-serif;}
#pageOPillow h2 {font-size: 42px; line-height: 45px; font-family: "CalibreWeb-Regular", "Avenir Next", sans-serif;}
#pageOPillow h3 {font-size: 28px; line-height: 28px; font-family: "CalibreWeb-Regular", "Avenir Next", sans-serif;}
#pageOPillow h4 {font-size: 18px; line-height: 24px; margin-top: 20px; letter-spacing: 0.5px; font-family: "CalibreWeb-Light", "Avenir Next", sans-serif;}
#pageOPillow .color6d {color: #6d6d6d;}
#pageOPillow .icon {font-size: 16px; color: #ccc;}



.appH4 {line-height: 1.2; margin-top: 8px; display: none;}
.pcH4 {display: block;}

#pageOPillow .part {width: 100%; overflow: hidden; position: relative;}
#pageOPillow a.shopNow, #pageOPillow a.notifyLaunch {
    height: 36px; line-height: 36px; font-size: 20px; color: #fff; border-radius: 18px; padding: 0 36px; display: inline-block;
    background: #00bdb5;
}

#pageOPillow.noStart .tech, #pageOPillow.noStart .scene, #pageOPillow.noStart .bodyParts,
#pageOPillow.noStart .inTheBox, #pageOPillow.noStart .specification, #pageOPillow.noStart a.shopNow, #pageOPillow.noStart .foot {display: none;}


#pageOPillow .mainKV {
    width: 100%; height: 1177px; text-align: left; padding: 170px 0 0 280px;
    background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/20200610-opillow-01.jpg") no-repeat center bottom;
    position: -webkit-sticky; position: sticky; left: 0; z-index: 0; animation: shrink 1s linear;
}
.mainKV h1, .mainKV h2, .mainKV h4, .mainKV a {opacity: 0; animation: shrink 1s, yAxisMove 1s; animation-fill-mode: forwards;}
#pageOPillow .mainKV h2 {font-size: 36px; color: #535353; margin-top: 70px; animation-delay: 0.5s;}
.mainKV h4 {color: #7d7d7d; animation-delay: 1s;}
.mainKV a {margin-top: 100px; animation-delay: 1.5s;}
.mainKV .reddot {width: 120px;}

#pageOPillow .selling {height: 700px; background: #fff;}
.selling ul {width: 100%; max-width: 1440px; margin: 80px auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.selling ul li {width: 25%; min-width: 170px; height: 180px; line-height: 24px; font-size: 18px; font-style: italic; color: #898989; text-align: center; margin: 50px 0;}
.selling ul li p {width: 100%; height: 100px; display: flex; align-items: center; justify-content: center;}

#pageOPillow .common {width: 100%; height: 100vh; min-height: 830px; overflow: hidden; position: -webkit-sticky; position: sticky; top: 0;}
.common .content {width: 100%; max-width: 1440px; padding: 0 20px; margin: 10vh auto 0;}
.common .content h4 {width: 630px;}

#pageOPillow .comfortable {height: 1500px; background: #f5f9fa; overflow: inherit;}
#pageOPillow .comfortable h2, #pageOPillow .comfortable h4, #pageOPillow .comfortable h3 {text-align: right; float: right;}
.comfortable .pillowAnimation {text-align: right; margin-top: 120px;}
.comfortable .info {font-size: 17px; color: #8e8e8e; display: inline-block;}
#pageOPillow .comfortable h3 {width: 466px; text-align: center; display: inline-block;}
.comfortable .massage {width: 466px; height: 266px; margin: 20px 0 100px; background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/20200610-opillow-box-ui.png") no-repeat; float: right; position: relative;}
.comfortable .massage::after {
    content: ''; width: 590px; height: 45px; background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/20200610-opillow-box-shadow.png") no-repeat;
    position: absolute; bottom: -80px; left: -62px;
}
.comfortable .massage::before {
    content: ''; width: 436px; height: 282px; background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/20200610-opillow-box-ui-mask.png") no-repeat;
    position: absolute; bottom: 0; left: 6px; opacity: 0.8; transition: opacity 1s; transition-delay: 0.5s;
}

.appBr{display: none !important;}
.massage {transform: perspective(0);}
.massage svg, .massage p {width: calc(100% - 18px); height: 100%; margin: 0; position: absolute; left: 0; top: 0; z-index: 3;}
.massage i {
    width: 137px; height: 160px; background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/frame_hand.png"); position: absolute; left: 90px; top: 120px; z-index: 3; opacity: 0; transition: opacity 1s 1s;
    offset-path: path("M25.000,0.000 C38.807,0.000 50.000,13.879 50.000,31.000 C50.000,48.121 38.807,62.000 25.000,62.000 C11.193,62.000 0.000,48.121 0.000,31.000 C0.000,13.879 11.193,0.000 25.000,0.000 Z");
    offset-rotate: -20deg;
}
.massage svg {opacity: 0; transition: opacity 1s 1s;}
.massage p em {width: 76px; height: 90px; position: absolute; left: 140px; bottom: 10px; z-index: 2;}
.massage p em img {width: 70px; opacity: 0; animation: bright 3s 2s infinite;}
.massage p:last-of-type {transform: rotateY(180deg); -webkit-transform: rotateY(180deg);}

.pillowAnimation.start .massage::before {opacity: 0;}
.pillowAnimation.start .massage p em::before, .pillowAnimation.start .massage p em::after {opacity: 0;}
.pillowAnimation.start .massage i {opacity: 1; animation: handMassage 3s 1.5s ease-in-out infinite;}
.pillowAnimation.start .massage svg {opacity: 1;}

.comfortable .model {position: absolute; left: -340px; top: 200px; z-index: 0;}

#pageOPillow .ergonomic {height: 550px; background: #e7e7e7;}
.ergonomic {padding: 80px 0; text-align: center;}
.ergonomic .point {position: absolute; z-index: 2;}
.ergonomic i.point {width: 18px; height: 18px; background: #79c9fe; border-radius: 9px; left: 176px; top: 104px;}
.ergonomic i.point::after, .ergonomic i.point::before {
    content: ''; width: 54px; height: 54px; border-radius: 50%; border: #79c9fe 1px solid; opacity: 0; position: absolute; left: -18px; top: -18px; z-index: -1;
    animation: scale 2s linear infinite;
}
.ergonomic i.point::after {animation-delay: 0.5s;}
.ergonomic svg.point {
    right: 398px;
    top: 78px;
    stroke-dasharray: 74;
    stroke-dashoffset: -74;
    animation: dash2 4s linear infinite;
    /* animation-timing-function: linear cubic-bezier(.42, 0, 1, 1); */
}
.ergonomic ul {display: flex; justify-content: center; align-items: center; margin: 70px 0;}
.ergonomic ul li {font-size: 32px; color: #444; display: flex; justify-content: center; align-items: center; position: relative;}
.ergonomic ul li:nth-of-type(1) {border-right: 1px #ccc solid; padding-right: 10%;}
.ergonomic ul li:nth-of-type(2) {padding-left: 10%;}
.ergonomic ul li img {margin-right: 50px;}
.ergonomic ul li p {width: 260px; text-align: center;}
.ergonomic ul li p span {font-size: 18px; line-height: 22px; margin-top: 4px; display: inline-block;}
.ergonomic i {
    color: #9a9a9a;
    font-size: 17px;
}

#pageOPillow .attachment {height: 2800px; overflow: inherit;}
.attachment h2 {height: 50px; overflow: hidden; position: relative;}
.attachment h4 {height: 140px; position: relative;}
#pageOPillow .attachment h2 span {font-family: "CalibreWeb-Regular", "Avenir Next", sans-serif;}
.attachment h2 span, .attachment h4 span {opacity: 0; float: left; position: absolute; left: 0; top: 20px; transition: opacity 0.8s, top 0.8s;}
.attachment h2.o1 span:first-child, .attachment h4.o1 span:first-child {opacity: 1; top: 0;}
.attachment h2.o2 span:last-child, .attachment h4.o2 span:last-child {opacity: 1; top: 0;}

.attachment .common {background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/20200610-opillow-wall.jpg"); background-size: cover;}
.attachment .common p {font-size: 18px; font-style: italic; color: #69abe5; margin-top: 40px; cursor: pointer;}
.attachment .common p::after {
    content: ''; width: 0; height: 0; display: inline-block; margin: 0 0 -3px 10px; border: 8px solid; border-color: #69abe5 transparent transparent;
    transform: rotate(-90deg); transition: transform 0.3s, margin 0.3s;
}
.attachment .common p.on::after {transform: rotate(0); margin-bottom: -8px;}
.attachment .chair {margin-top: 200px;}
.attachment .chairAnimation {width: 100%; max-width: 1200px; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; z-index: 2;}
  
.attachment .frame_004, .attachment .chair2, .attachment .pc, .attachment .light, .attachment .frame_person {position: absolute; opacity: 0;}
.attachment .frame_paste {position: absolute;}
.attachment .pc {transform: translateX(100px);}
.attachment .frame_004, .attachment .chair2, .attachment .frame_person, .attachment .frame_paste, .attachment .pc {transition: all 0.6s;}

.attachment .chairAnimation.start .frame_004 {transform: scale(0.7); animation: none; background-position: -2070px 0;}
.attachment .chairAnimation.start .frame_paste {opacity: 0;}
.attachment .chairAnimation.start .frame_person,
.attachment .chairAnimation.start .chair2,
.attachment .chairAnimation.start .pc {opacity: 1; transition-delay: 0.4s;}
.attachment .chairAnimation.start .pc {transform: translateX(0); transition-delay: 0.3s;}

.attachment .frame_004 {
    width: 690px; height: 1007px; background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/frame_0004.png") 0 0; bottom: -240px; left: calc(50% - 380px); z-index: 3;
    opacity: 1; animation: frame_0004 3s steps(3) infinite;
}
.attachment .frame_paste {right: 250px; top: 160px; display: flex; align-items: center;}
.attachment .frame_paste svg {margin: 21px -5px 0 0;}
.attachment .frame_person {width: 540px; position: absolute; bottom: -120px; left: 413px;}
.attachment .parts {top: 194px; left: calc(50% - 68px); z-index: 1; filter: drop-shadow(0 6px 6px rgba(0,0,0,0.3));}
.attachment .chair1 {top: 200px; left: calc(50% - 203px); z-index: 0;}

.attachment .chair2 {width: 520px; height: 826px; bottom: -100px; right: 400px; z-index: 5;}
.attachment .chair2 em {width: 100px; height: 20px; line-height: 20px; font-size: 18px; color: #4db3fd; text-align: right; position: absolute; bottom: 680px; left: 62px; cursor: pointer;}
.attachment .chair2 em i {width: 16px; height: 16px; border-radius: 50%; background: rgba(121, 201, 254, 0.8); position: absolute; top: -9px; left: -1px; z-index: 2;}
.attachment .chair2 em i::before, .attachment .chair2 em i::after {
    content: ''; width: 42px; height: 42px; border: 1px #79c9fe solid; border-radius: 50%; position: absolute; top: -13px; left: -13px; opacity: 0;
    animation: scale 2s linear infinite;
}
.attachment .chair2 em i::before {animation-delay: 0.5s;}

.attachment .chair2 em::after {
    content: ''; width: 152px; height: 152px; background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/20200610-opillow-chair-head-scale.png"); opacity: 0; pointer-events: none;
    position: absolute; top: -94px; left: -80px; z-index: 3; transition: opacity 0.5s;
}
.attachment .chair2 em:hover::after {opacity: 1;}
#pageOPillow .attachment .chair2 em span {font-family: "CalibreWeb-Regular", "Avenir Next", sans-serif; position: absolute; top: -48px; left: -24px; z-index: 4; transform: rotate(-18deg); pointer-events: none;}
#pageOPillow .attachment .chair2 em span::after {
    content: ''; width: 34px; height: 8px; border: 1px #79c9fe solid; border-bottom: none;
    position: absolute; top: 22px; left: -2px;
}
#pageOPillow .attachment .chair2 em:hover span {top: -70px; left: -44px; font-size: 28px;}
#pageOPillow .attachment .chair2 em:hover span::after {width: 48px; border-width: 2px; top: 26px;}
.attachment .chair2 .path {position: absolute; bottom: 298px; stroke-dasharray: 380; stroke-dashoffset: -380; transform: scale(0.7); animation: dash1 4s linear infinite;}
.attachment .chair2 .line {left: 148px;}


.attachment .pc {width: 390px; bottom: -100px; right: 0; z-index: 2;}
.attachment .light {
    width: 300px; height: 180%; top: -780px; opacity: 0; filter: blur(20px); pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 100%);
}
.attachment .light:nth-of-type(2) {width: 200px; top: -900px;}

.attachment .perfectly {width: 580px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; pointer-events: none; margin-top: calc(10vh - 30px);}
.attachment .perfectly figure {width: 100%; display: none; margin-top: 40px; justify-content: flex-start; flex-wrap: wrap; opacity: 0;}
.attachment .perfectly figure.no1 {text-align: center; margin-top: 0;}
.attachment .perfectly figure.no1 i b {font-size: 22px;}
.attachment .perfectly figure.no1 i {font-size: 18px; line-height: 24px; display: inline-block; margin: 0 auto 20px;}
.attachment .perfectly figure.no2 img {max-width: 59px; max-height: 80px;}
.attachment .perfectly figure.no2 span {width: 70px; height: 80px; display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; margin-right: 70px; position: relative;}
.attachment .perfectly figure.no2 span::after {
    content: ''; width: 12px; height: 12px; border-radius: 50%; background: #e07a63; opacity: 0; position: absolute; right: 9px; top: -2px;
}
.attachment .perfectly figure.no2:nth-of-type(2) span::after {background: #85caff;}
.attachment .perfectly figure.no2 span:nth-of-type(4)::after {right: 6px;}
.attachment .perfectly figure.no2:nth-of-type(3) span:nth-of-type(1)::after {width: 18px; height: 18px; right: 4px; top: 4px;}
.attachment h4.o1 + .perfectly figure.no1, .attachment h4.o2 + .perfectly figure.no2 {display: flex; animation: shrink 0.5s 0.5s linear forwards;}
.attachment h4.o1 + .perfectly {justify-content: flex-start;}
.attachment h4.o1 + .perfectly figure.no1 {width: 250px;}
.attachment h4.o1 + .perfectly figcaption {width: 100%; margin: 16px 0 0; color: #a5a5a5;}
.attachment h4.o2 + .perfectly figure.no2 span::after {animation: shrink 1s 8 linear alternate forwards;}

.attachment .perfectly figure.no2 span:last-child {margin-right: 0;}
.attachment .perfectly figure figcaption {width: 100%; margin-bottom: 20px; font-size: 18px; font-family: "CalibreWeb-Regular", "Avenir Next", sans-serif;}
.attachmentApp {height: 0; display: none;}
.brNone {display: none;}

#pageOPillow .tech {background: #2a2a2a; overflow: inherit;}
.tech h2 {color: #fff;}
.tech h4 {color: #ccc;}
.tech h4 b {color: #fff;}
.tech .icon {width: 520px; height: 120px; color: #fff; margin-top: 80px; display: flex; justify-content: space-between;}
.tech .icon li {text-align: center;}
.tech .icon li img {height: 55px; display: block; margin: 0 auto 10px;}

.tech .button {color: #999; font-size: 18px; margin-top: 80px; position: absolute; bottom: 156px;}
.tech .button::before {
  content: ''; width: 8px; height: 8px; border-radius: 4px; background: #00ff00;
  position: absolute; top: 60px; left: 32px; z-index: 2; animation: shrink 2s steps(2) infinite;
}
.tech .button img {float: left;}
.tech .button figcaption {height: 130px; line-height: 36px; margin-left: 40px; padding: 10px 0; float: left;}
.tech .button figcaption i {display: block; animation: heating 2s 1s linear infinite}
.tech .button figcaption i:last-child {animation-delay: 2s;}
.tech .pillowOutAnimation {width: 100%; max-width: 1200px; height: 100%; overflow: hidden; position: absolute; top: 0; right: 0; z-index: 2;}
.tech .outside1, .tech .outside2, .tech .outside3, .tech .outside4 {position: absolute; transition: transform 1s 0.3s, opacity 1s 0.3s;}
.tech .outside1 {bottom: 100px; right: 0; z-index: 1;}
.tech .outside2 {bottom: 434px; right: 166px; z-index: 3; transform: translate(-8px, 40px);}
.tech .outside3 {bottom: 434px; right: 211px; z-index: 2;}
.tech .outside4 {bottom: 554px; right: 184px; z-index: 4; transform: translate(-25px, 95px);}
.tech .start .outside2 {transform: translate(0, 0);}
.tech .start .outside4 {transform: translate(0, -50px); opacity: 0;}
.tech .info {font-size: 17px; color: #8e8e8e; position: absolute; bottom: 50px; left: 40%;}

#pageOPillow .skin {height: 2500px; overflow: inherit;}
.skin .common {background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/20200610-opillow-cloth.jpg"); background-size: cover;}
.skin .icon {float: right;}
.skin .icon li img {height: 48px;}
.skin .text-right {width: 630px; height: 100%; float: right; text-align: right; position: relative;}
.skin .info {width: 100%; position: absolute; top: 80vh; left: 0; text-align: right;}
.skin .skinAnimation {
    width: 100%; max-width: 1200px; height: 100%; min-height: 890px; overflow: hidden; position: absolute; top: 0; left: -100px; z-index: 2;
    pointer-events: none; transition: all 1s 1s;
}
.skin .skinAnimation.start {left: -150px; top: 50px;}
.skinAnimation p {opacity: 0;}
.skinAnimation.start p {
    width: 20px; height: 20px; line-height: 20px; font-size: 18px; color: #fff; font-weight: bold; margin: 0;
    position: absolute; bottom: 705px; left: 620px; z-index: 6; animation: shrink 0.5s 1.5s forwards;
}
.skinAnimation.start p:nth-of-type(2) {bottom: 842px; left: 720px;}
.skinAnimation.start p em {white-space: nowrap; position: absolute; right: 120px; top: -25px; font-weight: normal; opacity: 0; animation: shrink 0.5s 0.3s forwards;}
.skinAnimation.start p:nth-of-type(2) em {animation-delay: 0.5s; right: 217px;}
.skinAnimation.start p::after {
    content: ''; width: 1px; height: 1px; background: #fff; position: absolute; right: 10px; bottom: 12px;
    animation: linkPath 0.8s 1s ease-in-out forwards;
}
.skinAnimation.start p:nth-of-type(2)::after {animation: linkPath2 0.55s 0.5s ease-in-out forwards;}
.skinAnimation.start p:nth-of-type(2)::after {animation-delay: 1.2s;}

.skinAnimation.start p i {width: 14px; height: 14px; background: #fff; border-radius: 7px; display: inline-block; float: left; position: relative; transform: perspective(0);}
.skinAnimation.start p i::after, .skinAnimation.start p i::before {
    content: ''; width: 42px; height: 42px; border-radius: 50%; border: #fff 1px solid; position: absolute; left: -14px; top: -14px; z-index: -1;
    animation: scale 2s linear infinite;
}
.skinAnimation.start p i::before {animation-delay: 0.5s;}

.skin .in1, .skin .in2 {position: absolute; bottom: 0; left: 0; opacity: 1; transition: all 1s;}
.skin .in3, .skin .in4 {position: absolute; left: 485px; bottom: 230px; opacity: 0; transition: all 1s;}
.skin .in1 {z-index: 3; transition-delay: 0.8s;}
.skin .in2 {z-index: 2; transition-delay: 1s;}
.skin .in3 {z-index: 4; transition-delay: 1s;}
.skin .in4 {z-index: 5; transition-delay: 1s;}
.skin .start .in1 {opacity: 0;}
.skin .start .in2 {filter: brightness(0.5);}
.skin .start .in3 {left: 560px; bottom: 350px; opacity: 1;}
.skin .start .in4 {left: 665px; bottom: 470px; opacity: 1;}
.skin .info {color: #8e8e8e;}

#pageOPillow .scene {height: 1030px; transition: background 0.5s;}
.scene h2, .scene h4 {opacity: 0; transform: translateY(100px); transition: all 1s;}
.scene h4 {transition-delay: 0.3s;}
.scene.s02 {background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/20200610-opillow-02.jpg") no-repeat center top;}
.scene.s03 {background: url("https://cdn.shopify.com/s/files/1/0032/9370/8323/files/20200610-opillow-03.jpg") no-repeat center top;}
.scene ul {width: 40px; height: 10px; position: absolute; bottom: 20px; left: calc(50% - 20px); z-index: 2;}
.scene ul li {width: 10px; height: 10px; border-radius: 5px; background: rgba(0,0,0,0.4); margin: 0 5px; float: left; cursor: pointer; transition: background 0.5s;}
.scene.s02 li:nth-of-type(1) {background: rgba(0,0,0,1);}
.scene.s03 li:nth-of-type(2) {background: rgba(0,0,0,1);}
.scene .start h2, .scene .start h4 {opacity: 1; transform: translateY(0);}

#pageOPillow .bodyParts {background: #f8f8f8; padding: 90px 0 0;}
#pageOPillow .bodyParts h3 {font-size: 32px; text-align: center;}
.bodyParts ul {width: 100%; height: 300px; display: flex; justify-content: center; align-items: center;}
.bodyParts li {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding: 10px 7%; border-right: 1px #bcbcbc solid;}
.bodyParts li span {width: 113px; height: 100px; display: flex; justify-content: center; align-items: flex-end;}
.bodyParts li p {width: 100%; text-align: center; font-size: 18px; margin: 20px 0 0; line-height: 24px;}
.bodyParts li:last-child {border-right: none;}

#pageOPillow .inTheBox {height: 670px; background: #fff; padding: 90px 0;}
.inTheBox h2 {width: 100%; text-align: center;}
.inTheBox ul, .inTheBox .box {width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 50px;}
.inTheBox ul li {font-size: 18px; padding: 10px 60px; border-right: 1px #bcbcbc solid;}
.inTheBox ul li:last-child {border-right: none;}
.inTheBox .box img {margin: 0 30px; opacity: 0; transform: translateY(100px); transition: all 1s;}
.inTheBox .box img:nth-of-type(2) {transition-delay: 0.3s;}
.inTheBox .box img:nth-of-type(3) {transition-delay: 0.5s;}
.inTheBox p {text-align: center; margin-top: 80px; font-size: 17px; color: #a5a5a5;}
.inTheBox.start .box img {opacity: 1; transform: translateY(0);}
.app-inTheBox {display: none !important;}

#pageOPillow .specification {height: 720px; background: #f8f8f8; display: flex; justify-content: center; align-items: center;}
#pageOPillow.noStart .specification.__show {display: flex; height: 100vh; position: fixed; top: 0; left: 0; z-index: 8;}
.specification .s-left {width: 410px;}
.specification .s-left h2 {margin-bottom: 30px;}
.specification .s-left p {width: 100%; line-height: 24px; font-size: 18px; border-top: 1px #bcbcbc solid; padding: 15px 0; display: flex; align-items: center;}
.specification .s-left p:last-child {border-bottom: 1px #bcbcbc solid;}
.specification .s-left p i.input {position: relative;}
.specification .s-left p i.input::after {content: ''; width: 16px; height: 1px; background: #333; position: absolute; left: calc(50% - 11px); top: 9px;}
.specification .s-left span {width: 120px; margin-right: 30px; font-weight: bold; color: #575757;font-family: arial!important;font-size: 14px;}

.specification .s-right {width: 840px; height: 518px; margin-left: 160px; padding-top: 80px; position: relative;}
.specification .s-right p {max-width: 345px; height: 465px; float: left; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative;}
.specification .s-right p:nth-of-type(1) img:nth-of-type(2) {transform: translateX(22px) translateY(38px);}
.specification .s-right p:nth-of-type(2) {margin: 0 60px;}
.specification .s-right img {opacity: 0; transition: opacity 1s;}
.specification.start .s-right p:nth-of-type(2) img {transition-delay: 0.3s;}
.specification.start .s-right p:nth-of-type(3) img {transition-delay: 0.5s;}
.specification.start .s-right p:nth-of-type(4) img {transition-delay: 0.8s;}
.specification.start .s-right img {opacity: 1;}

.s-right *::before, .s-right *::after, .s-right::before, .s-right::after {content: ''; position: absolute; font-size: 18px;}
.s-right *::after, .s-right::after {border: 1px #bcbcbc solid;}
.s-right::before {content: '388mm'; right: 0; top: 300px;}
.s-right::after {width: 15px; height: 465px; border-left: none; right: 56px;}
._pro:nth-of-type(1)::before {content: '310mm'; top: -70px; left: 160px;}
._pro:nth-of-type(2)::before {content: '195mm'; top: -70px;}
._pro:nth-of-type(3)::before {content: '52mm'; top: -70px; text-indent: 20px;}

._pro:nth-of-type(1)::after, ._pro:nth-of-type(2)::after, ._pro:nth-of-type(3)::after {height: 15px; border-bottom: none; top: -40px;}
._pro:nth-of-type(1)::after {width: 82%; left: 50px;}
._pro:nth-of-type(2)::after {width: 100%;}
._pro:nth-of-type(3)::after {width: 75%; left: 20px;}
._p_1::before {content: '195mm'; left: -70px; top: 120px;}
._p_1::after {width: 15px; height: 172px; border-right: none; top: 49px; left: -16px;}
._p_2::before {content: '105mm'; left: -70px; top: 386px;}
._p_2::after {width: 15px; height: 120px; border-right: none; top: 345px; left: -16px;}
._p_3::before {content: '30mm'; left: 32px; top: -30px; font-size: 14px;}
._p_3::after {width: 32px; height: 6px; border-bottom: none; top: -8px; left: 34px;}

#pageOPillow .foot, #pageOPillow .launch, #pageOPillow .more {background: #fff; padding: 80px 0; text-align: center;}
#pageOPillow .more {background: #fff; padding: 21vh 0; display: none; justify-content: center; flex-wrap: wrap;}
#pageOPillow .more svg {margin-bottom: 20px;}
#pageOPillow .more h2 {width: 100%; padding: 0 20px;}
#pageOPillow.noStart .more {display: flex;}

#pageOPillow .getOff {background: #f8f8f8; padding: 10vh 0; display: none; text-align: center; color: #4d78a5;}
#pageOPillow .getOff h2 {font-size: 57px; line-height: 57px;}
.getOff h2 b {font-size: 32px;}
#pageOPillow .getOff span {font-size: 20px; line-height: 20px; display: block; text-align: center; font-family: "CalibreWeb-Medium", sans-serif;}
.getOff span i {letter-spacing: -2px;}
.getOff span i::before {content: '------------';}
.getOff p {margin: 20px 0; font-size: 18px;}
.getOff p + b {display: block; font-size: 18px;}
.getOff input {
    width: 80%; max-width: 350px; line-height: 40px; font-size: 18px; margin: 0 auto;
    text-align: center; background: none; border: 1px #7ea0c5 solid; display: block;
}
.getOff button {width: 60%; max-width: 220px; line-height: 36px; border-radius: 18px; text-align: center; color: #fff; font-size: 18px; margin-top: 30px; background: var(--popup-button);}
.getOff button + i {font-size: 16px; display: block;}
#pageOPillow.noStart .getOff {display: block;}


#headsUp {
    width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 10;
    display: flex; justify-content: center; align-items: center;
    animation: headsUp 0.3s forwards;
}
#headsUp * {font-family: "CalibreWeb-Light", "Avenir Next", sans-serif;}
#headsUp b {font-family: "CalibreWeb-Medium", "Avenir Next", sans-serif; font-weight: normal;}
#headsUp .close {
    width: 28px; height: 28px; border-radius: 50%; border: 1px #fff solid; position: absolute; top: -28px; right: -28px; z-index: 1; cursor: pointer;
    display: flex; justify-content: center; align-items: center;
}
#headsUp .close::before {content: '+'; line-height: 36px; font-size: 36px; color: #fff; transform: rotate(45deg); padding: 0 0 2px 2px;}
#headsUp .popup {
    width: 720px; height: 400px; box-shadow: 0 0 10px rgba(0,0,0,0.5); position: relative; z-index: 12; color: #7ea0c5; opacity: 0;
    animation: shrink 0.3s forwards, yAxisMove 0.3s forwards;
}
#headsUp .popup.p2 {color: #4d78a5;}
#headsUp .popup img {height: 400px; float: left; pointer-events: none;}
#headsUp .popup.p2 img {width: 370px;}
#headsUp .popup .text {width: 320px; height: 400px; background: #f6fafd; padding: 30px; float: left;}
#headsUp .popup .text.t1 {width: 300px; padding: 70px 30px; position: absolute; right: 0; top: 0; z-index: 1;}
#headsUp .popup .text.t1::before {content: ''; width: 114px; height: 100%; position: absolute; left: -62px; top: 0; z-index: -1; background: url('https://cdn.shopify.com/s/files/1/0032/9370/8323/files/bgOpillow-popup-left.png?v=1598934449')}
#headsUp .popup .text.t2 {width: 350px; padding: 20px 30px;}

#headsUp h2 {font-size: 57px; line-height: 57px; font-family: "CalibreWeb-Medium", "Avenir Next", sans-serif; font-weight: normal;}
#headsUp h2 + span {font-size: 20px; line-height: 20px; display: block; text-align: center; font-family: "CalibreWeb-Medium", sans-serif;}
#headsUp h2 + span i {letter-spacing: -2px;}
#headsUp h2 + span i::before {content: '------------';}
#headsUp h2 b {font-size: 32px;}
#headsUp h3 {font-size: 32px; font-family: "CalibreWeb-Medium", "Avenir Next", sans-serif; font-weight: normal;}

#headsUp p {margin: 20px 0; font-size: 18px;}
#headsUp .popup.p2 p {line-height: 20px;}
#headsUp .popup.p2 p + b {font-size: 20px; line-height: 20px;}

#headsUp input {width: 100%; line-height: 28px; font-size: 18px; background: none; border: none; border-bottom: 1px #7ea0c5 solid;}
#headsUp .popup.p2 input {text-indent: 10px; border: 1px #7ea0c5 solid;}

#headsUp button {width: 100%; line-height: 36px; border-radius: 18px; text-align: center; color: #fff; font-size: 18px; margin-top: 30px; background: var(--popup-button);}
#headsUp .popup.p2 button + i {font-size: 16px; display: block; text-align: center;}
#headsUp.closing .popup {opacity: 1; animation: headsUp-closing 0.3s forwards;}

@media screen and (max-width: 1600px) {
    #pageOPillow .mainKV {padding: 150px 0 0 150px}
    .skin .skinAnimation.start {left: -220px;}
}

@media screen and (max-width: 1440px) {
    #pageOPillow .mainKV {padding: 150px 0 0 150px}
    .attachment .chairAnimation, .tech .pillowOutAnimation {right: -50px;}
    .skin .skinAnimation {left: -150px;}
    .skin .skinAnimation.start {left: -250px;}
    .specification .s-right {margin-left: 110px;}
}

@media screen and (max-width: 1380px) {
  .common .content {padding: 0 40px;}
  #pageOPillow .mainKV {padding: 100px 0 0 100px;}
  #pageOPillow .comfortable h3 {width: 424px;}
  .comfortable .massage {transform: scale(0.85); right: -30px; top: -0.5rem;}
  .comfortable .model {width: 1080px; top: 240px;}

  .ergonomic ul li:nth-of-type(1) {padding-right: 5%;}
  .ergonomic ul li:nth-of-type(2) {padding-left: 5%;}

  .attachment .chairAnimation, .tech .pillowOutAnimation {right: -130px;}
  .attachment .perfectly figure.no2 span {height: 70px; margin-right: 50px;}
  .attachment .perfectly figure.no2 img {max-height: 70px;}

  .skin .skinAnimation {left: -180px;}
  .skin .skinAnimation.start {left: -360px;}
  .specification .s-left {width: 320px;}
}

@media screen and (max-width: 1280px) {
    .comfortable .model {left: -440px;}

    .attachment .chairAnimation {max-width: 950px;}
    .attachment .chair2 em {left: 188px}
    .attachment .chair2 .line {left: 260px;}
    .attachment .frame_person {left: 288px;}

    .tech .pillowOutAnimation {max-width: 977px; right: -100px}
    .tech .info {left: 28%;}

    .skin .skinAnimation {left: -200px;}
    .skin .skinAnimation.start {left: -400px;}

    .skinAnimation.start p {left: 658px;}
    .skinAnimation.start p:nth-of-type(2) {left: 758px}

    .specification .s-left p {font-size: 16px;}
    .specification .s-right {margin-left: 90px;}
}

@media screen and (max-width: 1200px) {
    .common .content {margin: 60px auto 0; padding: 0 40px;}
    #pageOPillow .mainKV {padding: 60px 0 0 60px; height: 120vh; background-size: cover;}
    #pageOPillow .selling {height: auto;}
    .selling ul {padding: 0 50px;}
    .selling ul, .selling ul li {margin: 30px auto;}
    .selling ul li p img {transform: scale(0.7);}

    .comfortable .pillowAnimation {margin-top: 50px; transform: scale(0.8) translateX(12%);}
    .comfortable .model {width: 800px; left: -300px; top: 326px;}

    .attachment .chairAnimation {right: -100px; transform: scale(0.8) translate(20px, 100px);}
    .attachment .frame_paste {top: 10px; right: 130px;}
    .attachment .pc {right: -100px;}
    .attachment .common .content h4, .tech .common .content h4 {width: 470px;}
    .attachment h4.o1 + .perfectly, .attachment .perfectly {margin-top: 20px;}

    .ergonomic ul li:nth-of-type(1) {padding-right: 5%;}
    .ergonomic ul li:nth-of-type(2) {padding-left: 5%;}
    .ergonomic ul li img {width: 180px; margin-right: 10px;}
    .ergonomic ul li p {width: 200px;}
    .ergonomic ul li p span {font-size: 16px;}
    .ergonomic i.point {left: 134px; top: 82px;}
    .ergonomic svg.point {right: 272px; top: 59px;}

    .tech .pillowOutAnimation {transform: scale(0.8) translateX(15%);}
    .tech .icon {width: 440px; margin-top: 80px;}
    .tech .button {margin-top: 80px;}
    .tech .info {bottom: 20px;}

    .skin .common .content h4 {float: right;}
    .skin .skinAnimation {min-height: 900px; left: -300px; transform: scale(0.9);}
    .skin .skinAnimation.start {left: -450px;}
    .skin .info {width: 100%; float: right; text-align: right; margin-top: 40px;}
    .skinAnimation.start p em {right: 66px; top: -38px;}
    .skinAnimation.start p:nth-of-type(2) em {right: 164px;}
    .skinAnimation.start p::after {animation-name: linkPath3;}
    .skinAnimation.start p:nth-of-type(2)::after {animation-name: linkPath4;}

    #pageOPillow .scene {height: 100vh; background-size: cover;}

    #pageOPillow .bodyParts, #pageOPillow .inTheBox {padding: 40px 0;}

    .bodyParts ul {height: 240px; padding: 40px 80px 0;}
    #pageOPillow .inTheBox {height: auto;}
    .inTheBox .box img {max-width: 30%;}

    .specification .s-left {transform: translateX(50px);}
    .specification .s-right {transform: scale(0.8);}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    #pageOPillow .mainKV {padding: 100px 0 0 80px; height: 123vh; background-size: cover;}

    .attachment .chairAnimation {right: -100px; transform: scale(0.8) translate(136px, 100px);}
    .attachment .frame_paste {right: 170px;}
    .attachment .pc {right: 0;}

    #pageOPillow .specification {flex-wrap: wrap; height: auto; padding: 40px 0;}
    .specification .s-left {width: 50%; transform: translateX(0);}
    .specification .s-left p {font-size: 18px;}
    .specification .s-right {margin: 40px 0; transform: scale(1) translateX(26px);}
}

@media screen and (max-width: 640px) {
    .__tab {padding: 10px 0; display: flex; justify-content: center; background: #fff;}
    .__tab li {font-size: 14px;}

    /* 文字大小 */
    #pageOPillow h1 {font-size: 0.8666666666666667rem; font-weight: bold; font-family: "Avenir Next", sans-serif;}
    #pageOPillow b {font-size: 0.4rem;}

    #pageOPillow h4 {
        width: 100%;
        font-size: 0.4rem;
        line-height: 1.1;
        margin-top: 0.3466666666666667rem;
        padding: 0;
    }

    #pageOPillow .color6d {color: #6d6d6d;}

    #pageOPillow .icon {
        font-size: 16px;
        color: #ccc;
        position: relative;
        left: -0.35rem;
    }


    #pageOPillow h2{
        line-height: 1.2;
        font-size: 0.6666666666666666rem;
        font-family: 'CalibreWeb-Medium';
    }
    #pageOPillow .comfortable h2, #pageOPillow .comfortable h4, #pageOPillow .comfortable h3{
        line-height: 1.1;
        transform: translateY(0) !important;
    }
    #pageOPillow .comfortable h4{
        padding: 0;
    }
    .ergonomic svg.point{
        top: .69rem;
        left: 0.82rem;
        transform: scale(.4);
    }
    .ergonomic svg.point path{
        stroke-width: 4px;
    }
    .brNone{
        display: block;
    }
    .selling ul{
        padding: 0 20px;
    }
    .appH4{
        line-height: 1.2;
        margin-top: 8px;
        display: block;
        padding: 0 6%;
        text-align: left;
    }
    .pcH4{
        display: none;
    }
    #pageOPillow a.shopNow{
        width: 3.5533333333333335rem;
        height: .8rem;
        line-height: .8rem;
        display: inline-block;
        padding: 0;
        margin-top: 1.1266666666666667rem;
        font-size: 0.46rem;
        text-align: center;
    }
    #pageOPillow h1{
        margin-top: .4666666666666667rem;
        text-align: left;
    }
    #pageOPillow .mainKV h2{
        margin-top: 0.16rem;
        font-size: 0.6666666666666666rem;
        line-height: 1.2;
        text-align: left;
    }
    #pageOPillow .common{
        height: auto;
        min-height: auto;
    }
    #pageOPillow .mainKV {
        height: 17rem;
        padding: 20px 10px 0 0.5rem;
        text-align: left;
        background-color: #ddeef8;
        background-position: center bottom -0.7rem;
        background-size: auto 74%;
    }
    #pageOPillow .comfortable{
        height: 16.3rem;
    }
    .selling ul li{
        width: 50%;
        min-width: 50%;
        margin: 0;
        font-size: 0.3466666666666667rem;
        color: #141414;
        line-height: 1.1;
        height: auto;
        margin: 0.4rem 0;
    }
    .selling ul li p{
        height: 2.2333333333333333rem;
    }
    .common .content{
        margin-bottom: 0;
        margin-top: 1.1rem;
        padding: 0 0.5rem;
    }
    .common .content h4{
        width: 100%;
    }
    #pageOPillow .comfortable h3{
        margin-top: 1.0266666666666666rem;
        width: 100%;
        font-size: 0.4rem;
        text-align: center;
        margin-right: 0.47rem;
        width: 4.3rem;
        font-family: 'CalibreWeb-Medium';
    }
    .comfortable .pillowAnimation{
        margin-top: 0;
    }
    .comfortable .pillowAnimation{
        transform: scale(1) translateX(0%);
    }
    .comfortable .massage{
        transform: scale(0.45) translateY(-130px); right: -130px;
        top: -0.5rem;
    }
    .comfortable .massage::after{
        opacity: 0.5;
    }
	.comfortable .model {
		position: inherit;
		left: 0;
		transform: translateY(-11rem) translateX(-8.3rem) !important;
		max-width: 13.6rem;
	}

    #pageOPillow .ergonomic{
        height: auto;
        padding: 0.6666666666666666rem 0;
    }
    #pageOPillow .ergonomic-h2{
        padding-bottom: 0.8666666666666667rem;
    }
    .ergonomic ul{
        display: block;
        margin: 0 20px;
    }
    .ergonomic ul li{
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
    }
    .ergonomic ul li p{
        font-size: 0.4266666666666667rem;
        font-weight: 200;
        font-family: 'CalibreWeb-Medium' !important;
    }
    .ergonomic ul li p span{
        font-size: 0.3466666666666667rem;
        line-height: 1.1;
        font-weight: 300;
    }
    .ergonomic i{
        padding-top: .7666666666666667rem;
        display: block;
        font-size: 0.32rem;
    }
    .ergonomic ul li:nth-of-type(1) {
        padding: 0;
        padding-bottom: 0.8rem;
        margin-bottom: 0.8rem;
        border-right: none;
        border-bottom: 1px #ccc solid;
    }
    .tech .pillowOutAnimation{
        display: block;
        height: 12.33333rem;
        position: relative;
        left: -0.3rem;
        top: -1.65rem;
        transform: scale(1.2) translateX(0);
        margin-bottom: 0.1rem;
        overflow: initial;
    }
    .tech .outside3{
        transform: scale(0.6) translateX(0);
    }
    .tech .outside4{
        bottom: 264px;
        transform:  scale(0.5) translateX(0)  translate(-2px, 87px);
        opacity: 1;
    }
    /* .tech .outside3, .tech .start .outside4{
        transform: scale(0.6) translateX(0);
    } */
    .tech .outside2{
        bottom: 194px;
        transform: scale(0.6) translateX(0)  translate(-1px, 54px);
    }
    
    .tech .outside3{
        bottom: 185px;
    }
    .tech .outside1{
        bottom: 100px;
    }


    .tech .start .outside4{
        transform: scale(0.5) translateX(0) translate(0, 33px);
    }
    .tech .start .outside2{
        transform: scale(0.6) translateX(0) translate(0, 33px);
    }
    .tech .outside2, .tech .outside3, .tech .outside4{
        right: -31px;
    }
    .tech .info{
        margin-top: 1rem;
        text-align: right;
        font-size: 0.31rem;
        bottom: -.1rem;
        line-height: 1.2;
    }
    #pageOPillow .tech{height: 40rem; background: #131313;}
    .tech .infoText{
        transform: scale(0.8);
        color: #585858;
    }
    .pcBr{
        display: none !important;
    }
    .appBr{
        display: block !important;
    }
    .tech .icon{
        width: 92%;
        height: auto;
    }
    .tech .icon, .tech .button{
        margin-top: 1rem;
    }
    .skin .text-right{
        width: 100%;
    }
    .skin .icon li img{
        height: 0.8rem;
    }
    .tech .icon li{
        font-size: 0.3466666666666667rem;
        line-height: 1.1;
            width: 3.5rem;
    }
    .tech .icon li img{
        height: 0.86rem;
    }
    .tech .skinAnimationBox .icon li img{
        height: 0.76rem;
    }
    
    .tech .content .parallax{
        transform: translateY(0) !important;

    }
    .tech .content .button {
        transform: translateY(0) !important;
        position: absolute;
        bottom: 1.4666667rem;
    }
    .tech .button img{
        height: 1.7333333333333334rem;
        width: auto;
    }
    .tech .button::before{
        width: 0.14666666666666667rem;
        height: 0.14666666666666667rem;
        top: 50%;
        margin-top: -0.12rem;
        left: 0.39rem;
    }
    .tech .content .parallax figcaption{
        font-size: 0.3466666666666667rem;
        line-height: 1.6;
        margin-left: 0.4666666666666667rem;
        height: auto;
        padding: 0.095rem 0;
    }
    #pageOPillow .common.skinAnimationBox{
        height: 100vh;
    }
    .skin .common{
        background: url(https://cdn.shopify.com/s/files/1/0032/9370/8323/files/bj.jpg);
        background-size: 100% 100%;
        
    }
    .skin .skinAnimation{
        top: 30px;
    }
    .skinAnimationBox .skinAnimation{
        overflow: initial;
    }
    #pageOPillow .skinAnimationBox .icon {
        left: 0.6rem;
    }
    .skinAnimationBox .info{
        bottom: 3rem;
        position: relative;
        top: 0;
        left: 0;
        font-size: 0.32rem;
    }
    .skin .in3, .skin .in4{
        left: 52%;
        bottom: 100px;
        width: 40%;
    }
    .skin .start .in3{
        width: 40%;
        left: 6.5rem;
        bottom: 3.4rem;
    }
    .skin .start .in4{
        width: 40%;
        left: 8rem;
        bottom: 4.5rem;
    }
    .skin .skinAnimation{
        /* position: relative;
        left: -2rem;
        top: -3.5rem;
        height: 100vh; */
        left: 0rem;
        top: 0rem;
        /* height: 100vh; */
        position: absolute;
        bottom: 0rem;
        transform: scale(1);
        min-height: auto;
    }
    .skin .skinAnimation.start{
        left: -2.5rem; top: 2.5rem;
    }
    .skinAnimation p{
        left: 300px;
        bottom: 150px;
    }
    .skinAnimation.start p{
        left: 7.3rem;
        bottom: 7.3rem;
    }
    .skinAnimation.start p:nth-of-type(2){
        left: 9.5rem;
        bottom: 8.5rem;
    }
    .skinAnimation.start p:nth-of-type(2) em{
        right: 4.1rem;
    }
    #pageOPillow .bodyParts{
        padding: 0.8rem 0 0.3rem 0;
    }
    .bodyParts ul{
        display: block;
        padding: 0;
        width: 80%;
        margin: 0.5rem auto auto;
        overflow: hidden;
        height: 8rem;
    }
    .bodyParts ul li{
        float: left;
        width: 50%;
        padding: 10px 5%;
        border: 1px #bcbcbc solid;
        position: relative;
        left: -1px;
        top: -1px;
        border-bottom: none;
        border-right: none;
        height: 4rem;
    }
    .bodyParts ul li:nth-of-type(3), .bodyParts ul li:nth-of-type(4) {
        padding-top: 0.6rem;
    }
    .bodyParts ul li:nth-of-type(3) img, .bodyParts ul li:nth-of-type(4) img{
        width: 1.6866666666666666rem;
    }
    .bodyParts li span{
        height: 1.5rem;
    }
    .bodyParts li p{
        font-size: 0.37333333333333335rem;
        margin-top: -0.4rem;
        line-height: 1;
    }
    .bodyParts ul li img{
        width: 1.9866666666666666rem;
    }
    .bodyParts ul li:nth-of-type(2){
        border-right: none;
    }
    .bodyParts ul li:nth-of-type(1){
        padding-right: 1rem;
        padding-bottom: 1rem;
    }
    .bodyParts ul li:nth-of-type(2){
        padding-left: 1rem;
        padding-bottom: 1rem;
    }
    .bodyParts ul li:nth-of-type(3){
        padding-right: 1rem;
        padding-top: 1rem;
            margin-top: -0.2rem;
    }
    .bodyParts ul li:nth-of-type(4){
        padding-left: 1rem;
        padding-top: 1rem;
            margin-top: -0.2rem;
    }
    /* .bodyParts ul li:nth-of-type(1) span, .bodyParts ul li:nth-of-type(3) span{
        justify-content: left;
    }

    .bodyParts ul li:nth-of-type(1) p, .bodyParts ul li:nth-of-type(3) p{
        text-align: left;
    } */
    .bodyParts li{}

    .bodyParts li p:nth-of-type(2), .bodyParts li p:nth-of-type(4){
        text-align: right;
    }
    .inTheBox .box{
        display: block;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .inTheBox ul li{
        font-size: 0.32rem;
        text-align: center;
        padding: 0 0.6rem;
    }
    .inTheBox ul{
        margin-top: 0.5333333333333333rem;
    }
    .inTheBox .box img:nth-of-type(1){
        width: 4.333333333333333rem;
        max-width: 4.333333333333333rem;
    }
    .inTheBox .box img:nth-of-type(3){
        width: 5rem;
        max-width: 5rem;
        margin-top: 0.6rem;
    }
    .inTheBox .box img:nth-of-type(2){
        width: 1.8rem;
        position: relative;
        top: 0.2rem;
        left: -0.5rem;
    }
    .pc-inTheBox{
        display: none !important;
    }
    .app-inTheBox{
        display: block !important;
        text-align: center;
    }
    .app-inTheBox li img{
        opacity: 0;
        transform: translateY(100px);
        transition: all 1s;
    }
    .inTheBox.start .app-inTheBox li img{
        opacity: 1;
        transform: translateY(0);
    }
    .inTheBox p{
        text-align: center;
        font-size: 0.32rem;
        padding: 0 0.5rem;
        margin-top: 0.8rem;
    }
    #pageOPillow .specification {height: auto; padding-bottom: 1.2rem; margin-top: 1.1rem; flex-wrap: wrap;}
    #pageOPillow.noStart .specification.__show {overflow-y: scroll;}
    .specification .s-right{
        margin: 0;
        display: flex;
        width: 100%;
        height: auto;
        margin-top: .5rem;
        padding-top: 2rem;
    }
    .specification .s-right p{
        height: 5.72rem;
    }
    .specification .s-right p:nth-of-type(2){
        /* margin-top: 120px;
        margin-left: -20px; */
        margin: 0 0.6466666666666667rem;
        position: relative;
        left: -0.6rem;
    }
    .specification .s-right p:nth-of-type(3){
        /* margin-top: 120px; */
        position: relative;
        left: -0.9rem;
    }
    .specification .s-right p:nth-of-type(1) img:nth-of-type(2){
        width: 72%; transform: translateX(0.3rem) translateY(0.8066666666666667rem);
    }
    ._p_1::after{
        left: 0.1rem;
        height: 2rem;
        width: 0.2rem;
        top: 0.5rem;
    }
    ._p_2::after{
        width: 0.2rem;
        height: 1.8rem;
        border-right: none;
        top: 4.4rem;
        left: 0.1rem;
    }
    ._p_1::before{
        left: -.6rem;
        word-wrap: break-word;
        word-break: break-all;
        width: 0.8rem;
        line-height: 1;
        top: 1.2rem;
    }
    ._p_2::before{
        top: 5rem;
        left: -.6rem;
        word-wrap: break-word;
        word-break: break-all;
        width: 0.8rem;
        line-height: 1;
    }
    ._pro:nth-of-type(1)::after{
        left: 0.2rem;
        width: 4rem;
    }
    .s-right *::before, .s-right *::after, .s-right::before, .s-right::after{
        font-size: 0.41333333333333335rem;
    }
    .specification.start .s-right p:nth-of-type(3) img{
        position: relative;
        left: 0.3rem;
    }
    ._pro:nth-of-type(1) img{
        width: 80%;
        left: -0.2rem;
        position: relative;
    }
    ._pro:nth-of-type(1)::after, ._pro:nth-of-type(2)::after, ._pro:nth-of-type(3)::after {height: 0.2rem; top: -60px;}
    ._pro:nth-of-type(1)::before,
    ._pro:nth-of-type(2)::before,
    ._pro:nth-of-type(3)::before {
        top: -90px;
        left: 4%;
        text-align: center;
        width: 100%;
    }
    .specification .s-right p:nth-of-type(3)::after{width: 80%;}

    ._p_3::after {width: 0.5rem; left: 0.7655rem; top: -0.7rem;}
    ._p_3::before {left: 0.5rem; top: -1.3rem;}

    ._pro:nth-of-type(3)::after{ }
    .specification .s-left{
        transform: translateX(0);
        /* margin-left: 0.8666666666666667rem; */
        margin-top: 1.1rem;
        margin: 0;
        padding: 0 0.5rem;
        width: 10rem;
    }
    .specification .s-left p{
        font-size: 0.32rem;
        color: #575757;
        padding: 10px 0;
        display: flex;
    }
    .specification .s-left p i{
        text-align: left;
        flex: 1;
    }
    .specification .s-left p i.input::after{
        background: #8a8a8a;
        width: 0.3rem;
        left: 0.51rem;
    }
    .specification .s-left span{
        margin-right: 2.4rem;
    }
    .s-right::after{
        height: 6.38rem;
        right: 0.2rem;
        width: 0.2rem;
        top: 1.73rem;
    }
    .s-right::before{
        top: 5rem;
        right: -.8rem;
        word-wrap: break-word;
        word-break: break-all;
        width: 0.8rem;
        line-height: 1;
    }
    .ergonomic ul li img{
        width: 2.1333333333333333rem;
        margin-right: 0.5866666666666667rem;
    }
    .ergonomic i.point{
        width: 0.18666666666666668rem;
        height: 0.18666666666666668rem;
        padding: 0;
        left: 2.34rem;
        top: 1.0rem;
    }
    .ergonomic i.point::after, .ergonomic i.point::before{
        width: 0.5333333333333333rem;
        height: 0.5333333333333333rem;
        top: 50%;
        margin-top: -0.2666666666666666rem;
        left: 50%;
        margin-left: -0.2666666666666666rem;
    }
    #pageOPillow .foot{
        padding: 0.1666666666666666rem 0 1.0666666666666667rem 0;
    }
    /* 凳子动漫屏attachment */
    #pageOPillow .attachment{
        height: 0 !important;
        display: none;
    }
    #pageOPillow  .attachmentApp{
        height: 50rem;
        display: block;
        /* padding-top: 1.3333333333333333rem; */
        overflow: inherit;
    }
    #pageOPillow .attachmentApp .attachmentApp-box{
        height: 17.84rem;
        overflow: hidden;
        background: url(https://cdn.shopify.com/s/files/1/0032/9370/8323/files/20200610-opillow-wall.jpg);
        min-height: 100vh;
    }
    .attachmentApp-box .light{
        width: 30%;
        height: 80%;
        background: linear-gradient(180deg, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0) 100%);
        top: -20%;
        left: 0%;
        position: absolute;
        filter: blur(10px);
        transform: rotate(-45deg);
        transition: all 1s;
        opacity: 0.7;
    }
    .attachmentApp-box .light:nth-of-type(2) {
        width: 30%;
        top: -8rem;
        left: 2rem;
        transform: rotate(-40deg);
    }

    /* .attachStare2 .light{
        transform: rotate(-30deg);
        left: -4%;
        top: -20%;
    }
    .attachStare2 .light:nth-of-type(2) {
        width: 30%;
        top: -8rem;
        left: 2rem;
        transform: rotate(-40deg);
    } */

    .attachStareText{
        height: 2.066666666666667rem;
        width: 100%;
        position: relative;
        margin-top: 1.1rem;
    }
    .attachStareCen{
        height: 5.2rem;
        width: 100%;
        position: relative;
        
    }
    .attachStare1 .attachStareCen{
        height: 4rem;
    }
    .attachmentApp .attachStareText div{
        opacity: 0;
        top: 20px;
        transition: all .8s;
        position: absolute;
    }

    .attachmentApp .attachmentApp-title{
        padding: 0 0.5rem;
        top: 20px;
        
    }
    .attachmentApp .attachmentApp-text{
        padding: 0 0.5rem;
        font-size: 0.4rem;
        transition: all .8s;
        top: 20px;
        line-height: 1.1;
        margin-top: 0.3466666666666667rem;
    }
    .attachmentApp-text span{
        font-weight: 700;
    }
    .attachmentApp-cen{
        padding: 0 0.5rem ;
        padding-top: 1.8333333333333333rem;
        overflow: hidden;
        color: #575757;
        opacity: 0;
        transition: all .8s;
        position: absolute;
    }

    .attachmentApp-cen:nth-of-type(2){
        padding-top: 1rem;
    }
    
    .start .attaTwoBox{
        z-index: 2;
    }

    #pageOPillow .attachmentApp .cen-text h3 {
        font-size: 0.4266666666666667rem;
        color: #6d6d6d;
        font-family: 'CalibreWeb-Medium' !important;
        text-align: left;
    }
    #pageOPillow .attachmentApp .cen-text .cen-textS{
        font-size: 0.3466666666666667rem;
        line-height: 1.2;
        padding-bottom: 0.15rem;
        color: #3c3c3c;
        margin-top: 0;
    }
    #pageOPillow .attachmentApp .cen-text .cen-textt{
        line-height: 1;
        font-size: 0.32rem;
        color: #9a9a9a;
        margin-top: 0.06rem;
    }
    .attachmentApp-cen img{
        height: 1.9333333333333333rem;
        width: auto;
        padding-right:.4rem;
        float: left;
    }
    .attachmentApp-cen .no2:nth-of-type(2) img{
        padding-right: .85rem;
    }
    .attachmentApp-cen .cen-text{
        float: left;
        margin-top: -0.2rem;
    }
    .attachmentApp h2 span, .attachmentApp h4 span{
        transition: opacity 0.8s, top 0.8s;
    }
    .attachStare1 .attachStareImg{
        height: 11.733333333333333rem;
        position: absolute;
        display: block;
        bottom: 0;
        width: 100%;
    }
    .attachStare2 .attachStareImg{
        height: 10.4rem;
        position: absolute;
        display: block;
        bottom: -1.2rem;
        width: 100%;
    }
    .attachmentApp .attachmentApp-img{
        position: absolute;
        opacity: 0;
        height: 11.733333333333333rem;
        width: 100%;
    }
    .attachmentApp-frames{
        width: 8.8rem;
        height: 12.533333333333333rem;
        background: url(https://cdn.shopify.com/s/files/1/0032/9370/8323/files/frame_0004.png) 0 0;
        overflow: hidden;
        background-size: 400% 100%;
        z-index: 3;
        opacity: 1;
        animation: frames-img 3s steps(3) infinite;
        position: absolute;
        left: 0.5rem;
        bottom: -2.8rem;
    }
    .frames-img img{
        width: 3.2rem;
        right: 0.8rem;
        position: absolute;
        top: 1.8rem;
    }
    .frames-img svg{
        position: absolute;
        left: 3.8666666666666667rem;
        width: 2.5rem;
        height: 0.5rem;
        top: 3.5rem;
    }
    .frames-img svg path{
        stroke-width: 1px
    }
    .attachmentApp-cen .no2{
        overflow: hidden;
        margin-bottom: 0.24rem;
    }
    .attachmentApp-cen .no2 img{
        height: 1.0666666666666667rem;
        width: auto;
    }
    .attachmentApp-cen .no2 figcaption{
        padding-bottom: 0.12666666666666666rem;
        font-size: 0.3466666666666667rem;
    }
    .attachmentApp-cen .no2 span{
        position: relative;
        display: inline-block;
        padding-right: 0.8rem;
    }
    .attachmentApp-cen .no2 span::after{
        content: '';
        width: 0.16rem;
        height: 0.16rem;
        border-radius: 50%;
        background: #e07a63;
        opacity: 0;
        position: absolute;
        right: 1.15rem;
        top: -2px;
    }
    .attachmentApp-cen .no2:nth-of-type(2) span {
        padding-right: 0;
    }
    .attachmentApp-cen .no2:nth-of-type(2) span::after {
        right: 0.85rem;
    }
    .attachmentApp-cen figure.no2:nth-of-type(2) span::after{
        background: #85caff;
    }

    .attachmentApp-img .attachmentApp-framesNo{
        width: 8.8rem;
        height: 12.533333333333333rem;
        background: url(https://cdn.shopify.com/s/files/1/0032/9370/8323/files/frame_0004.png) 0 0;
        overflow: hidden;
        background-size: 400% 100%;
        z-index: 3;
        opacity: 1;
        background-position: -300% 0;
        position: absolute;
        left: 0.5rem;
        bottom: -2.5rem;
    }
    .attachmentApp-imgtwo{
        position: absolute;
        opacity: 0;
        height: 10rem;
        width: 100%;
        margin-top: 0.6rem;
    }
    .attachmentApp-imgtwo .attachmentApp-framesNo{
        width: 6.453333333333333rem;
        height: 9.2rem;
        background: url(https://cdn.shopify.com/s/files/1/0032/9370/8323/files/frame_0004.png) 0 0;
        background-size: 400% 100%;
        z-index: 3;
        opacity: 1;
        background-position: -300% 0;
        position: absolute;
        left: 1rem;
        bottom: -0.5rem;
    }
    .attachmentApp-imgtwo .proImg{
        width: 6.6rem;
        height: auto;
        z-index: 3;
        opacity: 1;
        background-position: -300% 0;
        position: absolute;
        left: 2.29rem;
        bottom: -0.7rem;
    }
    .attachmentApp-imgtwo  .appParallax{
        width: 5.0rem;
        height: auto;
        z-index: 3;
        opacity: 0;
        background-position: -300% 0;
        position: absolute;
        left: 10.0rem;
        bottom: -0.1rem;
        transition: all .8s;
    }
    .attachmentApp-framesNo em{
        width: 1rem;
        height: 0.5rem;
        line-height: 20px;
        font-size: 18px;
        color: #4db3fd;
        text-align: right;
        position: absolute;
        top: 0.3rem;
        left: .27rem;
        cursor: pointer;
    }
    .attachmentApp-framesNo em i{
        width: 0.18666666666666668rem;
        height: 0.18666666666666668rem;
        border-radius: 50%;
        background: rgba(121, 201, 254, 0.8);
        position: absolute;
        top: -.2rem;
        left: 0;
        z-index: 2;
    }
    .attachmentApp-framesNo em i::before, .attachmentApp-framesNo em i::after{
        content: '';
        width: 0.5333333333333333rem;
        height: 0.5333333333333333rem;
        border: 1px #79c9fe solid;
        border-radius: 50%;
        position: absolute;
        opacity: 0;
        top: 50%;
        margin-top: -0.26666666666666666rem;
        left: 50%;
        margin-left: -0.26666666666666666rem;
        animation: scale 2s linear infinite;
    }
    .attachmentApp-framesNo em i::before{
        animation-delay: 0.5s;
    }
    .attachmentApp-framesNo em span {
        font-family: "CalibreWeb-Regular", "Avenir Next", sans-serif;
        position: absolute;
        top: -48px;
        left: -24px;
        z-index: 4;
        transform: rotate(-18deg);
        pointer-events: none;
    }
    .attachmentApp-framesNo em span::after{
        content: '';
        width: 34px;
        height: 8px;
        border: 1px #79c9fe solid;
        border-bottom: none;
        position: absolute;
        top: 22px;
        left: -2px;
    }
    .attachmentApp-framesNo .path{
        position: absolute;
        left: .8rem;
        bottom: 1.5rem;
        stroke-dasharray: 380;
        stroke-dashoffset: -380;
        transform: scale(0.4);
        animation: dash1 4s linear infinite;
    }
    .attachmentApp-framesNo .path path{
        stroke-width: 5 !important;
    }
    #pageOPillow .bodyParts h3{
        font-size: 0.6133333333333333rem;
    }
    .scene.s02 {background: url('https://cdn.shopify.com/s/files/1/0032/9370/8323/files/app9-1.jpg') no-repeat center right;}
    .scene.s03 {background: url('https://cdn.shopify.com/s/files/1/0032/9370/8323/files/app9-11.jpg') no-repeat center;}
    #pageOPillow .bodyParts, #pageOPillow .inTheBox {padding: 1.1rem 0;}
    .skinAnimation.start p em {
        right: 1.9rem;
        top: -0.65rem;
        font-size: 0.37333333333333335rem;
    }
    .skinAnimation.start p i{
        width: 0.21333333333333335rem;
        height: 0.21333333333333335rem;
        top: 0.07rem;
        left: 0.1rem;
    }
    .skinAnimation.start p i::after,
    .skinAnimation.start p i::before{
        height: 0.5866666666666667rem;
        width: 0.5866666666666667rem;
        top: 50%;
        margin-top: -0.29333333333rem;
        margin-left: -0.29333333333rem;
        left: 50%;
    }
            
    /* 动漫样式 */
    .attachmentApp .attachStare1 .attachStareText div:nth-of-type(1), .attachmentApp .attachStare2 .attachStareText div:nth-of-type(2) {opacity: 1; top: 0;}

    .attachmentApp .attachStare1 .attachmentApp-cen:nth-of-type(1), .attachmentApp .attachStare2 .attachmentApp-cen:nth-of-type(2) {opacity: 1;}
    .attachStare1 .attachmentApp-img, .attachStare2 .attachmentApp-imgtwo {opacity: 1;}

    .attachStare2 figure.no2 span::after {animation: shrink 1s 8 linear alternate forwards;}
    .attachStare2 .attachmentApp-imgtwo .appParallax{
        width: 5.0rem;
        height: auto;
        z-index: 3;
        opacity: 1;
        background-position: -300% 0;
        position: absolute;
        left: 7.0rem;
        bottom: -0.1rem;
    }

    .skinAnimation.start p:nth-of-type(1)::after{
        animation: applinkPath1 0.8s 1s ease-in-out forwards;
    }
    .skinAnimation.start p:nth-of-type(2)::after{
        animation: applinkPath 0.8s 1s ease-in-out forwards;
    }
  
    #pageOPillow .getOff {padding: 10vh 20px;}

    #headsUp .popup, #headsUp .popup .text, #headsUp .popup .text.t2 {width: 308px; height: auto;}
  	#headsUp .popup .text.t1 {width: 100%; padding: 15px 20px; position: inherit;}
  	#headsUp .popup .text.t1::before {content: none;}
  
    #headsUp .popup .text.t2 {padding: 15px 20px 10px;}
    #headsUp .close {right: 6px; top: 6px;}
    #headsUp .close::before {padding: 0 0 1px 1px;}
    #headsUp h2 {font-size: 42px; line-height: 30px; text-align: center;}
    #headsUp h2 + span i::before {content: '----';}
    #headsUp h3 {font-size: 24px;}
    #headsUp p {font-size: 14px;}
    #headsUp .popup.p2 p {line-height: 14px;}
    #headsUp button {width: 180px; line-height: 28px; font-size: 18px; margin: 20px calc(50% - 90px) 0;}
    #headsUp .popup.p2 button + i {font-size: 14px;}
  	#headsUp .popup img {height: auto;}
    #headsUp .popup.p2 img {
        width: 308px; height: auto; margin: -10% 0 -7%;
        clip-path: polygon(0 10%, 100% 10%, 100% 93%, 0 93%);
        -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 93%, 0 93%);
    }
    #headsUp .popup .text {padding: 10px 20px;}

    @keyframes applinkPath {
        0% {width: 0;} 100% {width: 3.65rem;}
    }
    @keyframes applinkPath1 {
        0% {width: 0;} 100% {width: 1.45rem;}
    }
}

@keyframes shrink {
    0% {opacity: 0;} 100% {opacity: 1;}
}
@keyframes scale {
    0% {opacity: 0; transform: scale(0);} 30%, 70% {opacity: 1;} 100% {opacity: 0; transform: scale(1);}
}
@keyframes scale2 {
    0% {transform: scale(0.7);} 100% {transform: scale(1);}
}
@keyframes handMassage {
    50% {offset-rotate: 10deg;}
    100% {offset-distance: 100%; offset-rotate: -20deg;}
}
@keyframes bright {
    0% {opacity: 0;} 20%, 25% {opacity: 1;} 40%, 100% {opacity: 0;}
}
@keyframes heating {
    10%, 45% {color: #fff;} 50% {color: #999;}
}
@keyframes yAxisMove {
    0% {transform: translateY(100px);} 100% {transform: translateY(0);}
}
@keyframes frames-img {
    0% {background-position: 0 0;} 100% {background-position: -300% 0;} 
}
@keyframes frame_0004 {
    0% {background-position: 0 0;} 100% {background-position: -2070px 0;}
}
@keyframes dash1 {
    from {stroke-dashoffset: 380;} to {stroke-dashoffset: -380;}
}
@keyframes dash2 {
    from {stroke-dashoffset: 74;} to {stroke-dashoffset: -74;}
}
@keyframes linkPath {
    0% {width: 1px;} 100% {width: 100px;}
}
@keyframes linkPath2 {
    0% {width: 1px;} 100% {width: 196px;}
}
@keyframes linkPath3 {
    0% {width: 1px;} 100% {width: 194px;}
}
@keyframes linkPath4 {
    0% {width: 1px;} 100% {width: 296px;}
}
@keyframes headsUp {
    0% {background: rgba(0,0,0,0);} 100% {background: rgba(0,0,0,0.5);}
}
@keyframes headsUp-closing {
    0% {transform: scale(1); opacity: 1; right: 0; top: 0;}
    100% {transform: scale(0.1); opacity: 0; right: -50%; top: -50%;}
}
@keyframes wiggle {
  0%, 7% {transform: rotateZ(0);}
  15% {transform: rotateZ(-15deg);}
  20% {transform: rotateZ(10deg);}
  25% {transform: rotateZ(-10deg);}
  30% {transform: rotateZ(6deg);}
  35% {transform: rotateZ(-4deg);}
  40%, 100% {transform: rotateZ(0);}
}