.container[data-v-8960c116] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }[dir] .container[data-v-8960c116],[dir] .round-container[data-v-8960c116] { text-align: center } .progress-container[data-v-8960c116] { position: relative; display: inline-block; width: 88px; height: 5px }[dir] .progress-container[data-v-8960c116] { background-color: #bfbfbf; cursor: pointer }[dir=ltr] .progress-container[data-v-8960c116] { margin-right: 12px }[dir=rtl] .progress-container[data-v-8960c116] { margin-left: 12px }[dir=ltr] .progress-container[data-v-8960c116]:last-child { margin-right: 0 }[dir=rtl] .progress-container[data-v-8960c116]:last-child { margin-left: 0 }[dir] .progress-container[data-v-8960c116]:hover { background-color: #fff } .progress-container.small-progress[data-v-8960c116] { width: 42px; height: 4px }[dir] .progress-container.small-progress[data-v-8960c116] { background-color: #eaeaea }[dir] .progress-container.small-progress[data-v-8960c116]:hover { background-color: #545454 } .progress[data-v-8960c116] { position: absolute; top: 0; display: none; height: 100% }[dir=ltr] .progress[data-v-8960c116] { left: 0 }[dir=rtl] .progress[data-v-8960c116] { right: 0 } .active-progress .progress[data-v-8960c116] { display: block }[dir] .active-progress .progress[data-v-8960c116] { background: #fff }[dir=ltr] .active-progress .progress[data-v-8960c116],[dir=rtl] .active-progress .progress[data-v-8960c116] { -webkit-animation: animate-data-v-8960c116 10s linear; animation: animate-data-v-8960c116 10s linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards }[dir] .small-progress.active-progress .progress[data-v-8960c116] { background: #545454 }[dir] .progress-dark.progress-container[data-v-8960c116]:hover { background-color: #131313 }[dir] .progress-dark.active-progress .progress[data-v-8960c116] { background: #131313 } @-webkit-keyframes animate-data-v-8960c116 { 0% { width: 0 } to { width: 100% } } @keyframes animate-data-v-8960c116 { 0% { width: 0 } to { width: 100% } } .progress-round[data-v-8960c116] { width: 8px; height: 8px }[dir] .progress-round[data-v-8960c116] { margin: 0 10px; border: 1px solid #131313; border-radius: 50% } .active-progress-round[data-v-8960c116] { display: block }[dir] .active-progress-round[data-v-8960c116] { background-color: #131313 } .diy_pc_dis{ display:block;} .diy_mo_dis{ display:none;} @media(max-width:768px) { .diy_pc_dis{ display:none;} .diy_mo_dis{ display:block;} .container[data-v-8960c116] { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100% }[ dir=ltr] .container[data-v-8960c116],[dir=rtl] .container[data-v-8960c116] { padding-right: 36px; padding-left: 36px } .container .progress-container[data-v-8960c116] { width: 48px }[ dir=ltr] .container .progress-container[data-v-8960c116] { margin: 0 8px 0 4px }[ dir=rtl] .container .progress-container[data-v-8960c116] { margin: 0 4px 0 8px }[ dir] .container .progress-container[data-v-8960c116]:active,[dir] .container .progress-container[data-v-8960c116]:hover { background-color: #bfbfbf }[ dir=ltr] .container .progress-container[data-v-8960c116]:last-child { margin-right: 0 }[ dir=rtl] .container .progress-container[data-v-8960c116]:last-child { margin-left: 0 } .progress-container.progress-round-container[data-v-8960c116] { display: inline-block; width: 8px; height: 8px }[ dir] .progress-container.progress-round-container[data-v-8960c116] { margin: 0 10px; background-color: #f9f9f9; border: 1px solid #131313; border-radius: 50% } .progress-round-container.active-progress[data-v-8960c116] { display: inline-block }[ dir] .progress-round-container.active-progress[data-v-8960c116] { background-color: #131313 } } .current-slide[data-v-3f45a3f6] { display: none } .show-current-slide[data-v-3f45a3f6] { display: block }[dir=ltr] .fade[data-v-3f45a3f6],[dir=rtl] .fade[data-v-3f45a3f6] { -webkit-animation-name: fade-data-v-3f45a3f6; animation-name: fade-data-v-3f45a3f6; -webkit-animation-duration: 1.5s; animation-duration: 1.5s } @-webkit-keyframes fade-data-v-3f45a3f6 { 0% { opacity: .4 } to { opacity: 1 } } @keyframes fade-data-v-3f45a3f6 { 0% { opacity: .4 } to { opacity: 1 } }[dir] .container[data-v-e9a539f0] { margin-bottom: 68px } .intro[data-v-e9a539f0] { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between }[dir] .intro[data-v-e9a539f0] { margin-top: 80px } .title[data-v-e9a539f0] { color: #000; font-weight: 800; font-size: 36px; line-height: 54px } @media(max-width:768px) { .title[data-v-e9a539f0] { font-size: 28px; line-height: 44px } } .mark-bar[data-v-e9a539f0] { position: absolute; bottom: -16px } .description[data-v-e9a539f0] { width: 628px; color: #545454; font-weight: 300; font-size: 14px; line-height: 24px }[dir] .description[data-v-e9a539f0] { margin: 25px 0 0 0 } @media(max-width:768px) { [ dir] .container[data-v-e9a539f0] { margin: 48px 24px 44px } .intro[data-v-e9a539f0] { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column }[ dir] .intro[data-v-e9a539f0] { margin-top: 48px }[ dir] .title[data-v-e9a539f0] { text-align: center } .mark-bar[data-v-e9a539f0] { position: static }[ dir] .mark-bar[data-v-e9a539f0] { margin: 12px auto 0 } .description[data-v-e9a539f0] { width: auto }[ dir] .description[data-v-e9a539f0] { margin: 24px auto 0; text-align: center } } .card-intro-item[data-v-729a7182] { z-index: 10; display: none; width: 360px }[dir] .card-intro-item[data-v-729a7182] { padding-top: 32px; background-color: #fff }[dir=ltr] .card-intro-item[data-v-729a7182],[dir=rtl] .card-intro-item[data-v-729a7182] { padding-right: 36px; padding-left: 36px } .card-intro-title[data-v-729a7182] { color: #131313; font-weight: 600; font-size: 24px; line-height: 36px } .restrict-text-title[data-v-729a7182] { display: -webkit-box; max-height: 36px; overflow: hidden; line-height: 36px; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-box-orient: vertical; -webkit-line-clamp: 1 } .card-intro-description[data-v-729a7182] { color: #545454; font-weight: 300; font-size: 14px; line-height: 24px; white-space: pre-wrap }[dir] .card-intro-description[data-v-729a7182] { margin-top: 20px } .restrict-text-description[data-v-729a7182] { display: -webkit-box; max-height: 72px; overflow: hidden; line-height: 24px; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; -webkit-box-orient: vertical; -webkit-line-clamp: 3 } .card-intro-item-active[data-v-729a7182] { display: block }[dir=ltr] .card-intro-item-active[data-v-729a7182],[dir=rtl] .card-intro-item-active[data-v-729a7182] { -webkit-animation: fade-data-v-729a7182 .8s linear; animation: fade-data-v-729a7182 .8s linear }[dir] .learn-more[data-v-729a7182] { margin-top: 28px } @-webkit-keyframes fade-data-v-729a7182 { 0% { opacity: 0 } 50% { opacity: 0 } to { opacity: 1 } } @keyframes fade-data-v-729a7182 { 0% { opacity: 0 } 50% { opacity: 0 } to { opacity: 1 } } .mobile-container[data-v-6bdb9978] { position: relative } .container[data-v-6bdb9978] { width: 100%; height: 487px; overflow: hidden }[dir] .container[data-v-6bdb9978] { margin: 0 auto } .img[data-v-6bdb9978] { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .card-intro[data-v-6bdb9978] { position: absolute; bottom: -1px }[dir=ltr] .card-intro[data-v-6bdb9978] { right: 0 }[dir=rtl] .card-intro[data-v-6bdb9978] { left: 0 } .container[data-v-1cf4ba00] { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; min-height: 615px } .container[data-v-1cf4ba00]:before { position: absolute; top: 0; width: calc(50% + 302px); min-height: 100%; content: "" }[dir] .container[data-v-1cf4ba00]:before { background-color: #f9f9f9 }[dir=ltr] .container[data-v-1cf4ba00]:before { left: 0 }[dir=rtl] .container[data-v-1cf4ba00]:before { right: 0 } .gray-bg[data-v-1cf4ba00] { position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: calc(50% - 314px); min-height: 615px; overflow: auto }[dir=ltr] .gray-bg[data-v-1cf4ba00] { padding-left: calc(50% - 640px) }[dir=rtl] .gray-bg[data-v-1cf4ba00] { padding-right: calc(50% - 640px) } .gray-bg[data-v-1cf4ba00]:after { display: block; min-height: inherit; content: "" } .img-container[data-v-1cf4ba00] { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: calc(50% + 314px); height: 487px; overflow: hidden }[dir] .img-container[data-v-1cf4ba00] { margin: auto 0; background-size: cover }[dir=ltr] .img-container[data-v-1cf4ba00] { padding-right: calc(50% - 640px) }[dir=rtl] .img-container[data-v-1cf4ba00] { padding-left: calc(50% - 640px) } .group[data-v-1cf4ba00] { width: 294px }[dir] .group[data-v-1cf4ba00] { margin: 64px 0 } .group-item[data-v-1cf4ba00] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start }[dir] .group-item[data-v-1cf4ba00] { margin-bottom: 32px; cursor: pointer }[dir] .group-item[data-v-1cf4ba00]:last-child { margin-bottom: 0 } .divide[data-v-1cf4ba00] { width: 8px; min-height: 22px }[dir] .divide[data-v-1cf4ba00] { margin-top: 7px; background-color: #545454 }[dir=ltr] .divide[data-v-1cf4ba00] { margin-right: 16px }[dir=rtl] .divide[data-v-1cf4ba00] { margin-left: 16px } .group-text[data-v-1cf4ba00] { -webkit-box-flex: 1; -ms-flex: 1 0; flex: 1 0 } .group-title[data-v-1cf4ba00] { color: #545454; font-weight: 800; font-size: 20px; line-height: 36px } .group-description[data-v-1cf4ba00] { max-height: 0; overflow: hidden; color: #545454; font-weight: 300; font-size: 14px; line-height: 24px } .img[data-v-1cf4ba00] { position: absolute; width: 100%; height: 487px; opacity: 0; -webkit-transition: all 0s ease; -o-transition: all 0s ease; transition: all 0s ease }[dir=ltr] .img[data-v-1cf4ba00] { left: 50% }[dir=rtl] .img[data-v-1cf4ba00] { right: 50% } .card-intro[data-v-1cf4ba00] { position: relative; z-index: 2 } .active .group-title[data-v-1cf4ba00] { color: #000; font-weight: 600; font-size: 24px; line-height: 36px } .active .divide[data-v-1cf4ba00] { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch }[dir] .active .divide[data-v-1cf4ba00] { margin-top: 8px; margin-bottom: 5px; background-color: #307638 } .active .group-description[data-v-1cf4ba00] { max-height: 15em; overflow: hidden; -webkit-transition: max-height .8s cubic-bezier(.4,0,1,1); -o-transition: max-height .8s cubic-bezier(.4,0,1,1); transition: max-height .8s cubic-bezier(.4,0,1,1) }[dir] .active .group-description[data-v-1cf4ba00] { margin-top: 12px } .default:hover .group-title[data-v-1cf4ba00] { color: #000 }[dir] .default:hover .divide[data-v-1cf4ba00] { background-color: #000 } .img-active[data-v-1cf4ba00] { bottom: 1px; opacity: 1; -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease }[dir=ltr] .img-active[data-v-1cf4ba00] { left: 0 }[dir=rtl] .img-active[data-v-1cf4ba00] { right: 0 }[dir] .web[data-v-47ec3685] { margin-bottom: 80px } .mobile[data-v-47ec3685] { position: relative; display: none }[dir] .mobile[data-v-47ec3685] { margin-bottom: 104px } .btn-container[data-v-47ec3685] { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100% }[dir] .btn-container[data-v-47ec3685] { margin-top: -32px; margin-bottom: 64px } @media(max-width:768px) { .web[data-v-47ec3685] { display: none } .mobile[data-v-47ec3685] { display: block } .btn-container[data-v-47ec3685] { -webkit-box-pack: normal; -ms-flex-pack: normal; justify-content: normal }[ dir] .btn-container[data-v-47ec3685] { margin-top: 48px; margin-bottom: 80px; padding: 0 24px } .show-more[data-v-47ec3685] { width: 100% } }