.container-1920 {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}
.container-text {
    max-width: 1200px;
    min-width: 300px;
    display: block;
    margin: auto;
    width: 100%
}
.page-content {
    position: relative;
    z-index: 1;
}

.font-headline-4 {
    font-size: 60px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-headline-4 {
        font-size:36px
    }
}

@media screen and (max-width: 768px) {
    .font-headline-4 {
        font-size:32px
    }
}

.font-headline-3 {
    font-size: 48px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-headline-3 {
        font-size:34px
    }
}

@media screen and (max-width: 768px) {
    .font-headline-3 {
        font-size:28px
    }
}

.font-headline-2 {
    font-size: 40px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-headline-2 {
        font-size:32px
    }
}

@media screen and (max-width: 768px) {
    .font-headline-2 {
        font-size:28px
    }
}

.font-headline-1 {
    font-size: 30px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-headline-1 {
        font-size:24px;
        line-height: 1.5
    }
}

@media screen and (max-width: 768px) {
    .font-headline-1 {
        font-size:20px;
        line-height: 1.5
    }
}

.font-title {
    font-size: 24px;
    line-height: 1.5
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-title {
        font-size:20px
    }
}

@media screen and (max-width: 768px) {
    .font-title {
        font-size:20px
    }
}

.font-subheading {
    font-size: 20px;
    line-height: 1.5
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-subheading {
        font-size:18px
    }
}

@media screen and (max-width: 768px) {
    .font-subheading {
        font-size:18px
    }
}

.font-subtitle {
    font-size: 18px;
    line-height: 1.5
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-subtitle {
        font-size:16px
    }
}

@media screen and (max-width: 768px) {
    .font-subtitle {
        font-size:16px
    }
}

.font-body-2 {
    line-height: 1.5;
    font-size: 16px
}

.font-body-1 {
    font-size: 14px;
    line-height: 1.7
}

.font-descriptions {
    font-size: 12px;
    line-height: 1.7
}

/*-------------------------*/

.landing-container {
    -webkit-text-size-adjust: none
}

.landing-container sup {
    font-size: 12px;
    display: inline-block;
    top: 0;
    vertical-align: super
}

.landing-container .font-headline-4 sup {
    -webkit-transform: translateY(-.7em);
    transform: translateY(-.7em)
}

.landing-container .font-body-1 sup {
    -webkit-transform: scale(.7);
    transform: scale(.7)
}

@media screen and (min-width: 1600px) {
    .landing-container .font-headline-1 sup {
        -webkit-transform:translateY(-5px);
        transform: translateY(-5px)
    }

    .landing-container .font-headline-4 sup {
        -webkit-transform: translateY(-1.6em);
        transform: translateY(-1.6em)
    }
}

@media screen and (max-width: 735px) {
    .landing-container sup {
        font-size:9px;
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px)
    }

    .landing-container .font-headline-4 sup {
        -webkit-transform: translateY(-.9em);
        transform: translateY(-.9em)
    }
}


.margin-top-20x {
    margin-top: 200px
}

.margin-top-10x {
    margin-top: 100px
}

.margin-top-8x {
    margin-top: 80px
}

.margin-top-7x {
    margin-top: 70px
}

.margin-top-6x {
    margin-top: 60px
}

.margin-top-5x {
    margin-top: 50px
}

.padding-top-10x {
    padding-top: 100px
}

@media screen and (max-width: 735px) {
    .margin-top-20x {
        margin-top:100px
    }

    .margin-top-10x {
        margin-top: 50px
    }

    .margin-top-8x {
        margin-top: 40px
    }

    .padding-top-10x {
        padding-top: 50px
    }
}

.section-footnote {
    padding: 100px 0
}

.section-footnote .statement-text {
    padding-top: 20px;
    color: rgba(0,0,0,.4)
}

@media screen and (max-width: 735px) {
    .section-footnote {
        padding:50px 15px
    }
}

body.hide-scorll-bar::-webkit-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: none
}

.scroll-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 2;
    display: none
}

.scroll-mask.light-mask {
    background: #fff
}

.scroll-mask.dark-mask {
    background: #000
}

.page-content {
    position: relative;
    z-index: 1
}

.font-title-kv {
    font-size: 80px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-title-kv {
        font-size:46px
    }
}

@media screen and (max-width: 768px) {
    .font-title-kv {
        font-size:40px
    }

    .font-title-kv-8 {
        font-size: 50px
    }
}

.font-subtitle-kv {
    font-size: 36px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-subtitle-kv {
        font-size:30px
    }
}

@media screen and (max-width: 768px) {
    .font-subtitle-kv {
        font-size:26px
    }
}

.font-price-kv {
    font-size: 30px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-price-kv {
        font-size:30px
    }
}

@media screen and (max-width: 768px) {
    .font-price-kv {
        font-size:26px
    }
}

.section-kv__affirm {
    margin-top: 10px
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .section-kv__affirm {
        margin-top:0
    }
}

@media screen and (max-width: 768px) {
    .section-kv__affirm {
        margin-top:5px
    }
}

body {
    width: 100%
}

body #bar-store-confirm {
    display: none
}

body .notice-ribbon {
    overflow: hidden;
    height: 0;
    visibility: hidden
}

body #op-nav-container,body #page-header {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

body.kv-active {
    background-color: #fff
}

body.kv-active #op-nav-container,body.kv-active #page-header {
    visibility: visible;
    opacity: 1
}

body.kv-active .landing-container .section-kv {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s,-webkit-transform .5s
}

body.kv-active .landing-container .section-kv .kv-logo-container {
    z-index: 1
}

body.kv-active .landing-container .section-kv .kv-text-container {
    z-index: 2
}

body.kv-active .landing-container .section-core-video {
    opacity: 1
}

.section-kv {
    position: relative;
    width: 100vw;
    height: 56.25vw;
    z-index: 1
}

.section-kv:after {
    visibility: hidden;
    content: "";
    position: absolute;
    height: 3px;
    width: 100%;
    bottom: -2px;
    left: 0;
    background-color: #fff;
    -webkit-transition: all 0s ease .5s;
    transition: all 0s ease .5s
}

.section-kv .kv-text-container {
    position: absolute;
    z-index: 5
}

.section-kv .kv-video-container {
    width: 100%;
    height: 56.25vw;
    margin: 0 auto
}

.section-kv .kv-video-container--active {
    -webkit-transition: all 2s ease 3s;
    transition: all 2s ease 3s
}

.section-kv__text-animation {
    opacity: 0;
    -webkit-transition: all 1s ease 0s;
    transition: all 1s ease 0s;
    -webkit-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0)
}

.section-kv__text {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    width: 100%;
    max-width: 1200px
}

.section-kv .not-support-video {
    left: 50%;
    -webkit-transform: translate3d(-50%,30px,0);
    transform: translate3d(-50%,30px,0);
    -webkit-transition: all 1s ease 1.5s;
    transition: all 1s ease 1.5s
}

@media screen and (max-width: 735px) {
    .section-kv .not-support-video {
        -webkit-transform:translate3d(-50%,-30px,0);
        transform: translate3d(-50%,-30px,0);
        -webkit-transition-delay: .7s;
        transition-delay: .7s
    }
}

.section-kv.show-text:after {
    visibility: visible
}

.section-kv.show-text .section-kv__link,.section-kv.show-text .section-kv__text-animation {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.section-kv__price {
    margin-top: 25px
}

@media screen and (min-width: 736px) and (max-width:1260px) {
    .section-kv__text-animation {
        padding:0 30px
    }
}

@media screen and (max-width: 735px) {
    .section-kv {
        height:auto;
        margin-top: -25px;
        border-bottom: 1px solid #000
    }

    .section-kv .kv-text-container {
        position: relative;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
    }

    .section-kv .kv-video-container {
        height: 177.86vw;
        top: -13.86%
    }

    .section-kv .kv-video-container--active {
        -webkit-transition: all 1.5s ease 5s;
        transition: all 1.5s ease 5s
    }

    .section-kv__text-animation {
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0);
        -webkit-transition-duration: 1s;
        transition-duration: 1s;
        -webkit-transition-delay: 2s;
        transition-delay: 2s
    }

    .section-kv__text {
        position: static;
        padding: 2rem 0;
        margin: 0;
        left: 0;
        -webkit-transform: none;
        transform: none;
        text-align: center
    }

    .section-kv__price {
        margin-top: 20px
    }

    .section-kv.not-support-inline-video .section-kv__text-animation {
        -webkit-transition-delay: .5s;
        transition-delay: .5s
    }

    .section-kv.not-support-inline-video .section-kv__link {
        -webkit-transition-delay: .9s;
        transition-delay: .9s
    }
}

.section-kv__img {
    width: 100%;
    height: 100%
}

.section-kv__img img {
    width: 100%;
    max-width: 100%
}

.section-kv__link {
    position: absolute;
    top: 86%;
    left: 9;
    z-index: 1;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-transition: all 1s ease .2s;
    transition: all 1s ease .2s;
    -webkit-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0)
}

@media screen and (max-width: 735px) {
    .section-kv__link {
        top:100%;
        margin-top: 2rem;
        -webkit-transition-delay: 2s;
        transition-delay: 2s
    }
}

.section-kv__offline {
    -webkit-transition: color .3s ease;
    transition: color .3s ease;
    color: #000;
    display: inline-block
}

.section-kv__offline:hover,.section-kv__offline:hover .section-kv__icon {
    color: #eb0028
}

@media screen and (max-width: 735px) {
    .section-kv__offline {
        -webkit-transform:translateZ(0);
        transform: translateZ(0)
    }
}

.section-kv__icon {
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    vertical-align: middle;
    font-size: 2em
}

.landing-container .section-kv .kv-text-container {
    width: 100%;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0)
}

@media screen and (max-width: 735px) {
    .landing-container .section-kv .kv-text-container {
        left:0;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        margin-bottom: -25%
    }

    .landing-container .section-kv__text {
        padding: 0 0 2rem
    }

    .landing-container .section-kv__link {
        top: 88%;
        margin-top: 0
    }
}

.main-19811-overview .section-kv {
    background-color: #000;
    color: #fff;
    z-index: 9
}

.main-19811-overview .section-kv:after,.main-19811-overview .section-kv:before {
    background-color: #000
}

.main-19811-overview .section-kv:before {
    position: absolute;
    width: 100%;
    height: 50px;
    top: -50px;
    left: 0;
    content: ""
}

.main-19811-overview .section-kv__text {
    left: 0;
    top: 8%;
    -webkit-transform: none;
    transform: none;
    max-width: 100%;
    text-align: center;
    margin: 0
}

.main-19811-overview .section-kv__link {
    top: 86%;
    bottom: auto
}

.main-19811-overview .section-kv__offline {
    color: #fff;
    -webkit-transform: none;
    transform: none
}

.main-19811-overview .section-kv__offline:hover {
    color: #eb0028
}

.main-19811-overview .section-kv__offline:hover .main-19811-overview__icon {
    background-color: #eb0028
}

.main-19811-overview .section-kv__icon {
    color: #fff
}

@media screen and (max-width: 1200px) {
    .main-19811-overview .section-kv__text {
        top:3%
    }
}

@media screen and (max-width: 1023px) {
    .main-19811-overview .section-kv__text {
        top:-6%;
        margin-top: -20px
    }
}

@media screen and (max-width: 735px) {
    .main-19811-overview .section-kv__text {
        position:relative;
        top: 0;
        padding: 0;
        margin-top: 0;
        margin-bottom: -14%
    }

    .main-19811-overview .section-kv .kv-video-container {
        top: -7.86%;
        height: 144.66vw
    }

    .main-19811-overview .section-kv__link {
        top: 97%;
        margin-top: 0
    }
}

.section-ksp {
    position: relative;
    width: 100vw;
    padding: 6vw 0
}

.section-ksp:after {
    content: "";
    position: absolute;
    height: 3px;
    width: 100%;
    bottom: -2px;
    left: 0;
    background-color: #fff
}

.section-ksp__wrap {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 3rem 0
}

.section-ksp__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

.section-ksp__svg svg {
    max-width: 60%;
    opacity: 0;
    -webkit-transition: all .6s ease;
    transition: all .6s ease
}

.section-ksp__svg .svg-elem-1 {
    stroke-dashoffset: 15319.0380859375px;
    stroke-dasharray: 15319.0380859375px;
    -webkit-transition: stroke-dashoffset 1s ease 0s;
    transition: stroke-dashoffset 1s ease 0s
}

.section-ksp__svg--active svg {
    opacity: .2
}

.section-ksp__svg--active .svg-elem-1 {
    -webkit-transition-duration: 15s;
    transition-duration: 15s;
    stroke-dashoffset: 0
}

@media screen and (max-width: 735px) {
    .section-ksp__svg {
        top:0
    }

    .section-ksp__svg svg {
        max-width: 92.26%
    }
}

.section-ksp__list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    display: -webkit-inline-box;
    display: inline-flex
}

.section-ksp__item {
    padding: .5rem 2rem;
    text-align: center;
    opacity: 0;
    display: inline-block
}

@media screen and (max-width: 735px) {
    .section-ksp {
        padding:1rem 0 5rem
    }

    .section-ksp__wrap {
        padding: 0
    }

    .section-ksp__item {
        text-align: left;
        padding: .5rem 1rem;
        font-size: 36px
    }
}

.section-ksp--en .section-ksp__list {
    font-size: 80px
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .section-ksp--en .section-ksp__list {
        font-size:50px
    }
}

@media screen and (max-width: 768px) {
    .section-ksp--en .section-ksp__list {
        font-size:32px
    }

    .section-ksp--en .section-ksp__list .section-ksp__item {
        padding: 1rem
    }
}

.main-19811-overview .section-ksp {
    padding-top: 5rem;
    background-color: #000
}

.main-19811-overview .section-ksp:after {
    background-color: #000
}

.main-19811-overview .section-ksp__svg--active svg {
    opacity: .5
}

.main-19811-overview .section-ksp__item {
    color: #fff
}

.misc-dialog.pics-dialog .cover {
    background-color: transparent
}

.misc-dialog.pics-dialog .pics-dialog__box {
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.misc-dialog.pics-dialog .pics-dialog__box img {
    max-width: 100%
}

@media screen and (max-width: 735px) {
    .section-pics {
        padding:0
    }
}

.section-pics__wrap {
    max-width: 1600px;
    margin: 0 auto;
    padding: 4.3333%
}

.section-pics__triptych {
    position: relative
}

.section-pics__triptych:before {
    content: "";
    display: block;
    padding-top: 56.5%;
    width: 1px
}

.section-pics__triptych .section-pics__close {
    position: absolute;
    visibility: hidden;
    width: 30px;
    height: 30px;
    top: 2rem;
    right: 1rem;
    font-size: 22px;
    z-index: 19;
    line-height: 0;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    font-weight: 400;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: none;
    color: #000;
    opacity: 0;
    -webkit-transition: all .6s ease;
    transition: all .6s ease
}

.section-pics__triptych .section-pics__close i:before {
    border-radius: 50%;
    border: 1px solid #000;
    padding: 2px
}

.section-pics__triptych .section-pics__close:hover i {
    color: #eb0028
}

.section-pics__triptych .section-pics__close:hover i:before {
    border-color: #eb0028
}

.section-pics__triptych--active .section-pics__close {
    visibility: visible;
    opacity: 1
}

@media screen and (max-width: 735px) {
    .section-pics__triptych:before {
        display:none
    }
}

.section-pics__shim {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.section-pics__shim i {
    position: absolute;
    background-color: #f2f2f2
}

.section-pics__shim i:first-child {
    width: 100%;
    top: 0;
    left: 0;
    height: calc(60.84% - 10px)
}

.section-pics__shim i:nth-child(2) {
    width: calc(50% - 5px);
    bottom: 0;
    left: 0;
    height: 39.16%
}

.section-pics__shim i:nth-child(3) {
    width: calc(50% - 5px);
    right: 0;
    bottom: 0;
    height: 39.16%
}

@media screen and (max-width: 735px) {
    .section-pics__shim {
        display:none
    }
}

.section-pics__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    opacity: 1;
    cursor: pointer;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 1
}

.section-pics__slide:first-child .scale-wrap-first img {
    height: 120%
}

.section-pics__slide--active {
    opacity: 1;
    z-index: 2
}

.section-pics__slide--active .section-pics__imgbox {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

@media screen and (max-width: 735px) {
    .section-pics__slide--active .section-pics__scale:first-child .section-pics__imgbox {
        -webkit-transition-delay:0s;
        transition-delay: 0s
    }

    .section-pics__slide--active .section-pics__scale:nth-child(2) .section-pics__imgbox {
        -webkit-transition-delay: .1s;
        transition-delay: .1s
    }

    .section-pics__slide--active .section-pics__scale:nth-child(3) .section-pics__imgbox {
        -webkit-transition-delay: .2s;
        transition-delay: .2s
    }
}

.section-pics__slide--active .section-pics__video {
    opacity: 1
}

.section-pics__slide--leaveleft,.section-pics__slide--leaveright {
    -webkit-transition: all 1s ease .1s;
    transition: all 1s ease .1s;
    visibility: hidden
}

.section-pics__slide--leaveleft .section-pics__scale .section-pics__imgbox,.section-pics__slide--leaveright .section-pics__scale .section-pics__imgbox {
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}

@media screen and (max-width: 735px) {
    .section-pics__slide--leaveleft .section-pics__scale:first-child .section-pics__imgbox,.section-pics__slide--leaveright .section-pics__scale:first-child .section-pics__imgbox {
        -webkit-transition-delay:0s;
        transition-delay: 0s
    }

    .section-pics__slide--leaveleft .section-pics__scale:nth-child(2) .section-pics__imgbox,.section-pics__slide--leaveright .section-pics__scale:nth-child(2) .section-pics__imgbox {
        -webkit-transition-delay: .1s;
        transition-delay: .1s
    }

    .section-pics__slide--leaveleft .section-pics__scale:nth-child(3) .section-pics__imgbox,.section-pics__slide--leaveright .section-pics__scale:nth-child(3) .section-pics__imgbox {
        -webkit-transition-delay: .2s;
        transition-delay: .2s
    }
}

.section-pics__slide--leaveleft .section-pics__scale .section-pics__imgbox {
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0)
}

.section-pics__slide--leaveright .section-pics__scale .section-pics__imgbox {
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0)
}

.section-pics__slide--left .section-pics__scale .section-pics__imgbox {
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0)
}

.section-pics__slide--right .section-pics__scale .section-pics__imgbox {
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0)
}

@media screen and (max-width: 735px) {
    .section-pics__slide {
        display:block
    }

    .section-pics__slide:before {
        display: none
    }

    .section-pics__slide:first-child {
        position: relative
    }
}

.section-pics__scale {
    position: absolute;
    overflow: hidden;
    width: 100%;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.section-pics__scale--zindex {
    z-index: 10
}

.section-pics__scale img {
    width: auto;
    height: 100%;
    position: relative;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    outline: 1px solid transparent
}

@media screen and (max-width: 735px) {
    .section-pics__scale img {
        height:100%
    }
}

.section-pics__scale:first-child {
    top: 0;
    left: 0;
    height: 60%
}

.section-pics__scale:nth-child(2) {
    width: 49.75%;
    bottom: 0;
    left: 0;
    height: 39.16%
}

.section-pics__scale:nth-child(2) img {
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0)
}

.section-pics__scale:nth-child(3) {
    width: 49.75%;
    right: 0;
    bottom: 0;
    height: 39.16%
}

@media screen and (max-width: 735px) {
    .section-pics__scale {
        margin-bottom:2px
    }

    .section-pics__scale:first-child,.section-pics__scale:nth-child(2),.section-pics__scale:nth-child(3) {
        position: static;
        width: 100%;
        height: 42.66vw
    }

    .section-pics__scale:first-child img,.section-pics__scale:nth-child(2) img,.section-pics__scale:nth-child(3) img {
        min-width: 100%
    }

    .section-pics__scale:nth-child(2) img {
        width: 100%;
        height: 100%;
        top: 0;
        left: 50%;
        -webkit-transform: translate3d(-50%,0,0);
        transform: translate3d(-50%,0,0)
    }
}

.section-pics__scale--active.section-pics__scale--zindex {
    z-index: 10;
    width: 100%;
    height: 100%
}

.section-pics__scale--active .scale-wrap-first img {
    height: 100%
}

.section-pics__imgbox {
    height: 100%;
    background-color: #f2f2f2;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0)
}

.section-pics__imgbox .scale-wrap {
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    overflow: hidden;
    background-color: #f2f2f2
}

.section-pics__imghover {
    height: 100%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}

.section-pics__imghover.active:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.section-pics__video {
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: all 1s ease;
    transition: all 1s ease
}

.section-pics__video .section-core-video {
    height: 100%
}

.section-pics__video .section-core-video .core-video-cover {
    width: 0
}

.section-pics__video .section-core-video .core-video-text .container-text {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center
}

.section-pics__video .section-core-video .core-video-text .text-content {
    height: auto
}

.section-pics__video .section-core-video .core-video-text .text-main {
    display: none
}

.section-pics__video .section-core-video .core-video-text .core-video-play {
    text-align: center
}

.section-pics__video .section-core-video .core-video-text .core-video-play .video-text {
    display: none
}

.section-pics__video .section-core-video .core-video-wrapper {
    height: 100%;
    margin: 0
}

.section-pics__video .section-core-video .core-video-wrapper .video-container {
    height: 100%;
    padding: 0
}

.section-pics__video .section-core-video .core-video-wrapper .video-container .phone-video {
    height: 100%
}

.section-pics__dotnav {
    display: -webkit-box;
    display: flex;
    padding: 2rem 0 0;
    -webkit-box-pack: end;
    justify-content: flex-end;
    margin: 0;
    list-style: none;
}

@media screen and (max-width: 735px) {
    .section-pics__dotnav {
        padding:2rem 0;
        -webkit-box-pack: center;
        justify-content: center
    }
}

.section-pics__dot {
    position: relative;
    cursor: pointer;
    text-align: center;
    padding: 0 1.2rem;
    -webkit-transition: all .8s ease;
    transition: all .8s ease
}

@media screen and (max-width: 735px) {
    .section-pics__dot {
        padding:0 .8rem
    }
}

.section-pics__dot b {
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto 5px;
    border-radius: 50%
}

.section-pics__dot b:before {
    position: relative;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid #000;
    opacity: 0;
    -webkit-transition: opacity .8s ease;
    transition: opacity .8s ease;
    -webkit-transform: scale(1.3);
    transform: scale(1.3)
}

.section-pics__dot:first-child b {
    background-image: linear-gradient(-135deg,#f2dcfb,#ffa6d4 25%,#202a1d 50%,#6cd3bf 75%,#a6e2d7)
}

.section-pics__dot:first-child b:before {
    border-color: #2d2828
}

.section-pics__dot:nth-child(2) b {
    background-image: linear-gradient(-135deg,#a9e2d7,#3c9184)
}

.section-pics__dot:nth-child(2) b:before {
    border-color: #18c26c
}

.section-pics__dot:nth-child(3) b {
    background-image: linear-gradient(-135deg,#c1acfe,#f6c6e1 25%,#ffdfe8 50%,#fdceee 75%,#babdff)
}

.section-pics__dot:nth-child(3) b:before {
    border-color: #ca6462
}

.section-pics__dot:nth-child(4) b {
    background-image: linear-gradient(-135deg,#474a50,#1d232e,#0b111d)
}

.section-pics__dot:nth-child(4) b:before {
    border-color: #1d232e
}

.section-pics__dot:last-child {
    margin-left: 1.6rem
}

.section-pics__dot:last-child b:before {
    border-width: 0;
    opacity: .5;
    background: url(../_images/kv/icon-play.svg) no-repeat 50%
}

.section-pics__dot:last-child:after {
    content: "";
    position: absolute;
    top: 0;
    left: -.8rem;
    width: 1px;
    height: 30px;
    background-color: #000;
    opacity: .3
}

.section-pics__dot:last-child i {
    opacity: .5
}

.section-pics__dot i {
    position: absolute;
    opacity: 0;
    font-style: normal;
    white-space: nowrap;
    left: -50%;
    text-align: center;
    width: 200%;
    bottom: -1.8rem;
    -webkit-transition: opacity .6s ease;
    transition: opacity .6s ease
}

.section-pics__dot--active:last-child b:before,.section-pics__dot--active b:before {
    opacity: 1
}

.section-pics__dot--active:last-child i,.section-pics__dot--active i {
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
    opacity: 1
}

.section-pics__dot:hover b:before {
    opacity: 1
}

.main-19811-overview .section-pics {
    color: #fff;
    background-color: #000
}

.main-19811-overview .section-pics__triptych .section-pics__close {
    color: #fff
}

.main-19811-overview .section-pics__triptych .section-pics__close i:before {
    border-color: #fff
}

.main-19811-overview .section-pics__shim i {
    background-color: #161719
}

.main-19811-overview .section-pics__slide .scale-wrap-first img {
    height: 110%
}

.main-19811-overview .section-pics__slide:first-child .section-pics__scale--active .scale-wrap-first img {
    opacity: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.main-19811-overview .section-pics__scale:nth-child(2) img {
    width: 100%
}

.main-19811-overview .section-pics__imgbox {
    background-color: #171719
}

.main-19811-overview .section-pics__imgbox .scale-wrap {
    background-color: #161719
}

.main-19811-overview .section-pics__imgbox .scale-wrap-first {
    background-size: cover
}

.main-19811-overview .section-pics__dot:first-child b {
    background-image: linear-gradient(-135deg,#175cf9,#0e3a9b,#00031a,#119e82,#12d698)
}

.main-19811-overview .section-pics__dot:first-child b:before {
    border-color: #fff
}

.main-19811-overview .section-pics__dot:nth-child(3) b {
    background-image: linear-gradient(-135deg,#69a1ff,#0b55fd,#32089e,#010535)
}

.main-19811-overview .section-pics__dot:nth-child(3) b:before {
    border-color: #0b55fd
}

.main-19811-overview .section-pics__dot:nth-child(4) b:before {
    border-color: #fff
}

.main-19811-overview .section-pics__dot:last-child {
    margin-left: 1.6rem
}

.main-19811-overview .section-pics__dot:last-child b:before {
    -webkit-mask: url(../_images/kv/icon-play.svg) no-repeat center;
    mask: url(../_images/kv/icon-play.svg) no-repeat center;
    background: #fff
}

.main-19811-overview .section-pics__dot:last-child:after {
    background-color: #fff
}

@media screen and (max-width: 735px) {
    .main-19811-overview .section-pics {
        padding-bottom:3rem
    }

    .main-19811-overview .section-pics__scale:nth-child(2) img {
        width: 100%
    }
}

.section-core-video .core-video-wrapper .core-video-text {
    padding: 0
}

@media screen and (max-width: 735px) {
    .section-core-video .core-video-wrapper .core-video-text .video-btn {
        margin-right:0
    }
}

.main-19811-overview .section-core-video .core-video-wrapper .video-container:after {
    display: none
}

@media screen and (max-width: 735px) {
    .main-19811-overview .section-core-video .core-video-wrapper .video-container:after {
        display:block
    }
}

.section-display canvas,.section-display img,.section-display video {
    width: 100%
}

.section-display .display-pin-inner {
    position: relative;
    width: 100%
}

.section-display .entrance-scene {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

@media screen and (max-width: 735px) {
    .section-display .entrance-scene {
        background:url(../_images/display/90hz-mo.svg) 50% no-repeat;
        background-size: cover;
        -webkit-transform-origin: 63.8% 49.5%;
        transform-origin: 63.8% 49.5%
    }
}

@media screen and (min-width: 736px) {
    .section-display .entrance-scene {
        background:url(../_images/display/90hz-pc.svg) 50% no-repeat;
        background-size: cover;
        -webkit-transform-origin: 57.5% 49%;
        transform-origin: 57.5% 49%
    }
}

.section-display .entrance-scene svg {
    position: absolute;
    width: 101%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0)
}

.section-display .entrance-scene .svg-hz90 {
    fill: #fff
}

@media screen and (min-width: 736px) {
    .section-display .entrance-scene-ie {
        background:url(../_images/display/90hz-for-ie.svg) 50% no-repeat;
        background-size: cover
    }
}

.section-display .entrance-scene-ie:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #fff
}

.section-display .display-detail {
    height: 100vh;
    overflow: hidden;
    position: relative;
    background: #f2f2f2
}

.section-display .display-medias-container {
    position: relative;
    z-index: 1;
    width: 49.21875%;
    padding-bottom: 21.25%;
    -webkit-transform: scale(2.5);
    transform: scale(2.5);
    margin: auto;
    max-width: 1920px
}

.section-display .display-medias-container canvas,.section-display .display-medias-container img,.section-display .display-medias-container video {
    width: 100%
}

.section-display .display-medias-container img {
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%
}

@media screen and (min-width: 2000px) {
    .section-display .display-medias-container {
        width:71.09375%;
        padding-bottom: 32.42188%;
        max-width: unset
    }
}

@media screen and (min-width: 768px) and (max-width:1200px) {
    .section-display .display-medias-container {
        width:78.75%;
        padding-bottom: 34%;
        -webkit-transform-origin: 50% 32%;
        transform-origin: 50% 32%
    }
}

@media screen and (max-width: 735px) {
    .section-display .display-medias-container {
        width:100%;
        padding-bottom: 43.20388%;
        -webkit-transform-origin: 50% 40%;
        transform-origin: 50% 40%
    }
}

.section-display .display-video-container {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

.section-display .display-refresh-container {
    opacity: 0;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 99%;
    overflow: hidden
}

.section-display .display-refresh-container .fresh-video-container {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden
}

.section-display .display-refresh-container .phone-border {
    position: absolute;
    z-index: 1;
    width: 100%;
    -webkit-transition: opacity 1s ease;
    transition: opacity 1s ease
}

.section-display .display-text-container {
    width: 100%;
    padding: 50px 0
}

@media screen and (min-width: 2000px) {
    .section-display .display-text-container {
        padding:100px 0
    }
}

@media screen and (max-width: 735px) {
    .section-display .display-text-container {
        padding:30px 0
    }
}

@media screen and (max-width: 375px) {
    .section-display .display-text-container {
        padding:20px 0 10px
    }
}

.section-display .refresh-text-container {
    position: absolute;
    z-index: 2;
    width: 100%;
    top: 0;
    left: 0
}

@media screen and (min-width: 736px) {
    .section-display .refresh-text-container {
        padding-top:8.85417%
    }

    .section-display .refresh-text-container .font-container {
        width: 83.33333%;
        max-width: 1000px;
        margin: auto
    }

    .section-display .refresh-text-container .font-container .subline {
        max-width: 500px;
        margin-left: 0
    }
}

@media screen and (min-width: 1024px) and (max-width:1200px) {
    .section-display .refresh-text-container {
        padding-top:50px
    }

    .section-display .refresh-text-container .font-container .subline {
        max-width: 450px
    }
}

@media screen and (max-width: 769px) {
    .section-display .refresh-text-container {
        padding:50px 0 30px
    }
}

.section-display .authentication-info {
    position: relative;
    z-index: 3
}

.section-display .authentication-info .tip {
    text-align: center;
    color: #000
}

.section-display .authentication-info .authority-icon,.section-display .authentication-info .tip {
    opacity: 0;
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0)
}

@media screen and (min-width: 736px) {
    .section-display .authentication-info {
        width:83.33333%;
        max-width: 1000px;
        margin: auto
    }

    .section-display .authentication-info .authority-icon {
        max-width: 350px;
        margin-left: 0;
        margin-bottom: 10px
    }

    .section-display .authentication-info .tip {
        max-width: 370px;
        margin-left: 0;
        text-align: left
    }
}

@media screen and (min-width: 769px) and (max-width:1366px) {
    .section-display .authentication-info .authority-icon {
        max-width:200px
    }
}

@media screen and (max-width: 769px) {
    .section-display .authentication-info {
        width:90%;
        max-width: 650px;
        margin: 20px auto 35px;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }

    .section-display .authentication-info .authority-icon {
        width: 50.90909%;
        padding-bottom: 14.69697%;
        position: relative;
        margin: auto
    }

    .section-display .authentication-info .tip {
        max-width: unset;
        text-align: center
    }

    .section-display .authentication-info img {
        position: absolute;
        top: 0;
        left: 0
    }
}

@media screen and (max-width: 375px) {
    .section-display .authentication-info {
        margin:10px auto 0
    }

    .section-display .authentication-info .authority-icon {
        padding-bottom: 33px
    }

    .section-display .authentication-info .tip {
        margin-top: 0
    }
}

.section-display .display-soft-iris {
    position: relative
}

.section-display .soft-phone-img {
    position: relative;
    z-index: 2;
    padding-bottom: 47.29167%
}

.section-display .soft-phone-img img {
    position: absolute;
    left: 0;
    top: 0
}

@media screen and (max-width: 769px) {
    .section-display .soft-phone-img {
        padding-bottom:99.6%
    }
}

.section-display .soft-medias-container {
    position: relative;
    z-index: 1;
    opacity: 0
}

.section-display .soft-medias-container .soft-video-container {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    overflow: hidden
}

.section-display .soft-medias-container .tip {
    text-align: right;
    color: #b5b5b5;
    margin: 20px auto 0;
    padding-right: 10px
}

@media screen and (max-width: 769px) {
    .section-display .soft-medias-container {
        margin-top:50px
    }
}

@media screen and (min-width: 769px) {
    .section-display .soft-text-container {
        position:absolute;
        z-index: 2;
        width: 26.04167%;
        max-width: 500px;
        margin-left: 23.95833%;
        top: 0;
        left: 0
    }

    .section-display .soft-text-container .subline {
        width: auto;
        max-width: unset
    }
}

@media screen and (min-width: 769px) and (max-width:1200px) {
    .section-display .soft-text-container {
        width:31.04167%;
        margin-left: 20.95833%
    }
}

.section-display .display-selling-points .selling-points-img {
    width: 83.33333%;
    max-width: 1600px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    -webkit-transform: translate3d(0,50%,0) scale(2);
    transform: translate3d(0,50%,0) scale(2)
}

.section-display .display-selling-points .selling-points-img .mask-black,.section-display .display-selling-points .selling-points-img .wallpaper {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1
}

.section-display .display-selling-points .selling-points-img .mask-black {
    opacity: .3;
    z-index: 2;
    background: #000
}

.section-display .display-selling-points .selling-points-img .phone-border {
    width: 100%;
    padding-bottom: 34.64789%;
    position: relative;
    z-index: 3
}

.section-display .display-selling-points .selling-points-img .phone-border img {
    position: absolute;
    left: 0;
    top: 0
}

@media screen and (max-width: 735px) {
    .section-display .display-selling-points .selling-points-img {
        width:130%;
        max-width: unset;
        position: relative;
        margin-left: -40%
    }
}

.section-design {
    overflow: hidden;
    background: #000
}

.section-design canvas,.section-design img,.section-design video {
    width: 100%
}

.section-design__pin-inner {
    position: relative;
    width: 100%
}

@media screen and (max-width: 735px) {
    .section-design__pin-inner {
        min-height:calc(100vh - 100px)
    }
}

.section-design__design-detail {
    position: relative
}

.section-design__entrance-scene {
    position: absolute;
    z-index: 3;
    width: 100%;
    left: 0;
    top: -1px;
    font-size: 0;
    -webkit-transform-origin: 45.5% 50%;
    transform-origin: 45.5% 50%;
    height: calc(100vh - 50px);
    overflow: hidden
}

.section-design__entrance-scene.en {
    -webkit-transform-origin: 54% 50%;
    transform-origin: 54% 50%
}

@media screen and (min-width: 768px) and (max-width:1200px) {
    .section-design__entrance-scene.en {
        -webkit-transform-origin:59.5% 50%;
        transform-origin: 59.5% 50%
    }
}

@media screen and (max-width: 735px) {
    .section-design__entrance-scene {
        -webkit-transform-origin:52.8% 50%;
        transform-origin: 52.8% 50%;
        top: -1px
    }

    .section-design__entrance-scene.en {
        -webkit-transform-origin: 59% 50%;
        transform-origin: 59% 50%
    }
}

.section-design__entrance-scene-ie {
    height: 100vh;
    top: -4%
}

.section-design__svg-content {
    width: 100%;
    height: 100%
}

@media screen and (max-width: 735px) {
    .section-design__svg-content {
        background:url(../_images/design/3d-mo.svg) 50% no-repeat;
        background-size: cover
    }

    .section-design__svg-content.en {
        background: url(../_images/design/design-mo.svg) 50% no-repeat;
        background-size: cover
    }
}

@media screen and (min-width: 736px) {
    .section-design__svg-content {
        background:url(../_images/design/3d-pc.svg) 50% no-repeat;
        background-size: cover
    }

    .section-design__svg-content.en {
        background: url(../_images/design/design-pc.svg) 50% no-repeat;
        background-size: cover
    }
}

@media screen and (min-width: 736px) {
    .section-design__svg-content-ie {
        background:url(../_images/design/3d-for-ie.svg) 50% no-repeat;
        background-size: cover
    }

    .section-design__svg-content-ie.en {
        background: url(../_images/design/design-for-ie.svg) 50% no-repeat;
        background-size: cover
    }
}

.section-design__svg-content-ie:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #fff
}

.section-design__mask-container {
    background-color: #fff
}

.section-design__rotate-container {
    position: relative;
    width: 100%;
    max-width: 263px;
    margin: auto;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

@media screen and (min-width: 768px) and (max-width:1440px) {
    .section-design__rotate-container {
        max-width:200px
    }
}

@media screen and (max-width: 735px) {
    .section-design__rotate-container {
        width:136px;
        margin-top: 20px
    }
}

.section-design__rotate-img {
    position: relative;
    padding-bottom: 289.73384%;
    top: 0;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    width: 100%;
    margin: auto
}

.section-design__rotate-side {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

.section-design__side-01 {
    -webkit-transform: rotate(-60deg);
    transform: rotate(-60deg)
}

.section-design__side-02 {
    -webkit-transform: rotate(-120deg);
    transform: rotate(-120deg)
}

.section-design__side-03 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.section-design__turn-box,.section-design__video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.section-design__video-container {
    right: 0;
    margin: auto;
    opacity: 0
}

.section-design__back-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.section-design__back-img {
    right: 0;
    margin: auto;
    opacity: 0
}

.section-design__back,.section-design__back-img {
    position: absolute;
    top: 0;
    left: 0
}

.section-design__back-01,.section-design__back-02 {
    opacity: 0
}

.section-design__back-01,.section-design__back-02,.section-design__back-03 {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.section-design__text-container {
    position: relative;
    width: 100%
}

.section-design__headline-text {
    padding-top: 50px;
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0)
}

@media screen and (max-width: 735px) {
    .section-design__headline-text {
        -webkit-transform:translate3d(0,30%,0);
        transform: translate3d(0,30%,0);
        padding-top: 40px
    }
}

.section-design__headline-text.font-container .headline,.section-design__headline-text.font-container .headline .head-title {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
}

.section-design__ag-container {
    position: absolute;
    width: 100%;
    left: 50%;
    -webkit-transform: translate3d(-50%,0,0);
    transform: translate3d(-50%,0,0);
    bottom: 25px
}

.section-design__color-desc {
    position: relative;
    margin-bottom: 5px
}

.section-design__colorful-bg {
    overflow: hidden;
    background-color: #e3e3e3
}

.section-design__colorful-opacity {
    opacity: 0;
    will-change: opacity;
    position: relative;
    width: 100%;
    padding-bottom: 57.14286%
}

@media screen and (max-width: 735px) {
    .section-design__colorful-opacity {
        padding-bottom:85.86667%
    }
}

.section-design__colorful-img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    will-change: transform;
    -webkit-transform: translateZ(0) scale(2);
    transform: translateZ(0) scale(2)
}

@media screen and (min-width: 1025px) {
    .hidden-not-pad {
        display:none
    }
}

@media screen and (max-width: 1024px) {
    .hidden-pad {
        display:none
    }
}

.section-performance {
    overflow: hidden
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin {
        height:auto;
        max-height: none
    }
}

.section-performance .performance-pin .performance-pin-inner {
    position: relative;
    height: auto
}

.section-performance .performance-pin .performance-pin-inner .entrance-scene {
    position: relative;
    width: 100%;
    height: 100%
}

.section-performance .performance-pin .performance-pin-inner .performance-865 {
    padding: 5% 0;
    width: 100%
}

@media screen and (width: 1024px) {
    .section-performance .performance-pin .performance-pin-inner .performance-865 {
        padding:8% 0
    }
}

@media screen and (width: 768px) {
    .section-performance .performance-pin .performance-pin-inner .performance-865 {
        padding:8% 0
    }
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin .performance-pin-inner .performance-865 {
        width:100%;
        position: relative
    }
}

.section-performance .performance-pin .performance-pin-inner .performance-865 .font-container .subline {
    text-align: center
}

.section-performance .performance-pin .performance-pin-inner .performance-865 .font-container {
    padding: 0 30px
}

.section-performance .performance-pin .performance-pin-inner .per-865-bottom-box {
    width: 100vw;
    position: relative;
    padding-bottom: 100px
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin .performance-pin-inner .per-865-bottom-box {
        padding-bottom:0
    }
}

.section-performance .performance-pin .performance-pin-inner .per-865-bottom-box .svgBg {
    position: absolute;
    z-index: 3;
    width: 100%;
    left: 0;
    top: 0;
    background: url(../_images/performance/865-pc.svg) 50% no-repeat;
    background-size: cover;
    height: calc(100vh - 50px)
}

@media screen and (width: 1024px) {
    .section-performance .performance-pin .performance-pin-inner .per-865-bottom-box .svgBg {
        height:calc(100vh - 100px)
    }
}

@media screen and (width: 768px) {
    .section-performance .performance-pin .performance-pin-inner .per-865-bottom-box .svgBg {
        height:calc(100vh - 100px)
    }
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin .performance-pin-inner .per-865-bottom-box .svgBg {
        background:url(../_images/performance/865-mo.svg) 50% no-repeat;
        background-size: cover;
        height: calc(100vh - 100px)
    }
}

.section-performance .performance-pin .performance-pin-inner .per-865-bottom-box .svgBg-ie {
    background: url(../_images/performance/865-for-ie.svg) 50% no-repeat;
    background-size: cover
}

.section-performance .performance-pin .performance-pin-inner .per-865-bottom-box .svgBg-ie:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #fff
}

.section-performance .performance-pin .performance-pin-inner .performance-chip-line-box {
    height: 100%;
    width: 100vw;
    top: 0
}

.section-performance .performance-pin .performance-pin-inner .performance-container-chip {
    padding-bottom: 40px
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin .performance-pin-inner .performance-container-chip {
        padding-bottom:0
    }
}

.section-performance .performance-pin .performance-pin-inner .performance-chip-line {
    position: relative;
    top: 0;
    margin: auto;
    max-width: 1200px
}

.section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-line-box-img {
    position: relative;
    width: 100%;
    height: 300px;
    text-align: center;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%
}

@media screen and (width: 1024px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-line-box-img {
        height:200px
    }
}

@media screen and (width: 768px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-line-box-img {
        height:200px
    }
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-line-box-img {
        height:200px
    }
}

.section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-line-box-img img {
    width: 900px;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media screen and (width: 1024px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-line-box-img img {
        width:600px
    }
}

@media screen and (width: 768px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-line-box-img img {
        width:600px
    }
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-line-box-img img {
        width:600px
    }
}

.section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-box {
    margin-top: 30px
}

.section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-goods {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0
}

.section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-goods img {
    width: 900px;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media screen and (width: 1024px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-goods img {
        width:600px
    }
}

@media screen and (width: 768px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-goods img {
        width:600px
    }
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-line .performance-chip-goods img {
        width:600px
    }
}

.section-performance .performance-pin .performance-pin-inner .performance-chip-8gb {
    max-width: 270px;
    opacity: 0;
    display: inline-block;
    text-align: left;
    position: absolute;
    left: 10%;
    top: 50%
}

@media screen and (width: 1024px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-8gb {
        left:10%;
        max-width: 25%
    }
}

@media screen and (width: 768px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-8gb {
        left:5%;
        max-width: 25%
    }
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-8gb {
        position:static;
        display: block;
        width: 90%;
        margin: auto;
        max-width: 100%;
        -webkit-transform: translateY(50%);
        transform: translateY(50%)
    }
}

.section-performance .performance-pin .performance-pin-inner .performance-chip-ufs {
    max-width: 270px;
    opacity: 0;
    display: inline-block;
    text-align: left;
    position: absolute;
    right: 10%;
    top: 50%
}

@media screen and (width: 1024px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-ufs {
        right:10%;
        max-width: 25%
    }
}

@media screen and (width: 768px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-ufs {
        right:5%;
        max-width: 25%
    }
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin .performance-pin-inner .performance-chip-ufs {
        position:static;
        display: block;
        width: 90%;
        max-width: 100%;
        margin: 50px auto auto;
        -webkit-transform: translateY(50%);
        transform: translateY(50%)
    }
}

.section-performance .performance-pin .performance-pin-inner .performance-charge-line1,.section-performance .performance-pin .performance-pin-inner .performance-charge-line2 {
    position: absolute;
    top: auto
}

.section-performance .performance-pin .performance-pin-inner .performance-charge-line1 p,.section-performance .performance-pin .performance-pin-inner .performance-charge-line2 p {
    background-image: -webkit-gradient(linear,right top,left top,from(#ff526f),to(#005bd7));
    background-image: linear-gradient(270deg,#ff526f,#005bd7);
    height: 5px;
    margin-bottom: 5px;
    width: 0
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin .performance-pin-inner .performance-charge-line1,.section-performance .performance-pin .performance-pin-inner .performance-charge-line2 {
        position:static
    }
}

.section-performance .performance-pin .performance-pin-inner .performance-charge-line1 {
    margin-bottom: 20px
}

.section-performance .performance-pin .performance-pin-inner .performance-charge-line2 {
    margin-top: 50px
}

@media screen and (max-width: 735px) {
    .section-performance .performance-pin .performance-pin-inner .performance-charge-line2 {
        margin-top:30px
    }
}

.section-performance .performance-pin .performance-pin-inner .performance-charge-line2 p {
    background: #bebebe
}

.section-performance .performance-pin .performance-container {
    width: 100%
}

.section-performance .performance-5g .performance-5g-qualcomm {
    margin-top: 50px
}

.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-banner {
    overflow: hidden;
    background: #000;
    padding-bottom: 54.13%;
    position: relative;
    margin-bottom: 10px
}

@media screen and (max-width: 735px) {
    .section-performance .performance-5g .performance-5g-qualcomm .performance-5g-banner {
        padding-bottom:60%;
        margin: 35px 4% 70px
    }
}

.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-banner img {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    will-change: transform;
    -webkit-transform: translateZ(0) scale(2);
    transform: translateZ(0) scale(2);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

@media screen and (max-width: 735px) {
    .section-performance .performance-5g .performance-5g-qualcomm .performance-5g-wifi {
        padding-bottom:57%;
        margin: 35px 4% 70px
    }
}

@media screen and (max-width: 735px) {
    .section-performance .performance-5g .performance-5g-qualcomm .performance-5g-5g {
        padding-bottom:57%;
        margin: 35px 4%
    }
}

.section-performance .performance-5g .performance-5g-qualcomm img {
    width: 100%
}

.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws {
    display: -webkit-box;
    display: flex
}

@media screen and (max-width: 735px) {
    .section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws {
        display:block
    }
}

.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-div {
    -webkit-box-flex: 1;
    flex: 1;
    position: relative;
    padding-bottom: 42.8%;
    overflow: hidden;
    background: #000
}

@media screen and (max-width: 735px) {
    .section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-div {
        padding-bottom:66.9%
    }
}

.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-div img {
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    will-change: transform;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: translateZ(0) scale(2);
    transform: translateZ(0) scale(2)
}

.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-div1 {
    margin-right: 10px
}

@media screen and (max-width: 735px) {
    .section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-div1 {
        margin-right:0;
        margin-bottom: 10px
    }
}

.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text1,.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text2 {
    width: 100%;
    position: absolute;
    z-index: 9;
    margin-top: 6%
}

.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text1 .font-container .subline,.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text2 .font-container .subline {
    color: #fff;
    min-width: auto
}

.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text1 .font-container .subline p:first-child,.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text2 .font-container .subline p:first-child {
    font-size: 30px
}

.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text1 .font-container .subline p:last-child,.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text2 .font-container .subline p:last-child {
    font-size: 16px
}

@media screen and (max-width: 735px) {
    .section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text1,.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text2 {
        width:70%
    }

    .section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text1 .font-container .subline-vertical,.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text2 .font-container .subline-vertical {
        opacity: 0
    }

    .section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text1 .font-container .head-title,.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text2 .font-container .head-title {
        margin-bottom: 0
    }
}

.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text1 p,.section-performance .performance-5g .performance-5g-qualcomm .performance-5g-ws .performance-5g-ws-text2 p {
    opacity: 1
}

.section-performance .performance-5g-xs .performance-5g-qualcomm {
    margin-top: 35px
}

.section-performance .performance-5g-xs .performance-5g-qualcomm .performance-5g-text1 .font-container .head-title,.section-performance .performance-5g-xs .performance-5g-qualcomm .performance-5g-text2 .font-container .head-title {
    margin-bottom: 10px
}

.section-performance .performance-game {
    position: relative;
    z-index: 9;
    margin: 120px auto -15vh
}

@media screen and (max-width: 735px) {
    .section-performance .performance-game {
        margin:60px auto 0;
        padding-bottom: 120px
    }
}

.section-performance .performance-game .game-style-title {
    position: relative;
    max-width: 1200px;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 40px
}

.section-performance .performance-game .game-style-title .sub-title {
    max-width: 700px
}

.section-performance .performance-game .game-title2 {
    position: absolute;
    left: 50%;
    top: 10%;
    opacity: 0;
    z-index: 9;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

@media screen and (max-width: 735px) {
    .section-performance .performance-game .game-title2 {
        top:20%
    }
}

.section-performance .performance-game .game-warp {
    position: relative;
    width: 1020px;
    margin: 0 auto
}

@media screen and (max-width: 1600px) {
    .section-performance .performance-game .game-warp {
        max-width:900px
    }
}

@media screen and (max-width: 1440px) {
    .section-performance .performance-game .game-warp {
        max-width:800px
    }
}

@media screen and (max-width: 1024px) {
    .section-performance .performance-game .game-warp {
        max-width:650px;
        width: 80%
    }
}

@media screen and (max-width: 735px) {
    .section-performance .performance-game .game-warp {
        margin-bottom:10%;
        width: 90%
    }
}

.section-performance .performance-game .game-warp .game-warp-phone {
    opacity: 0;
    position: relative;
    z-index: 2;
    padding-bottom: 44.45%
}

.section-performance .performance-game .game-warp .game-warp-phone img {
    width: 100%
}

.section-performance .performance-game .game-warp .game-warp-phone .game-warp-img {
    width: 100%;
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0)
}

.section-performance .performance-game .game-warp .game-warp-phone .warp-phone-text {
    position: absolute;
    top: 50%;
    right: 15%;
    color: #eb0028;
    opacity: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.section-performance .performance-game .game-warp .game-warp-phone .warp-phone-text p {
    font-size: 180px;
    line-height: 1;
    font-weight: 700
}

@media screen and (max-width: 1600px) {
    .section-performance .performance-game .game-warp .game-warp-phone .warp-phone-text p {
        font-size:120px
    }
}

.section-performance .performance-game .game-warp .game-warp-phone .warp-phone-text span {
    color: #fff
}

.section-performance .performance-game .game-warp .game-warp-phone .warp-phone-text .phone-text-red {
    position: absolute;
    top: 0;
    width: 100%;
    color: #fff;
    overflow: hidden
}

.section-performance .performance-game .game-warp .game-warp-line {
    position: absolute;
    width: 80%;
    max-width: 1400px;
    opacity: 0;
    right: -60vw;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.section-performance .performance-game .game-warp .game-warp-line img {
    width: 100%
}

.section-performance .performance-game .game-warp .game1-video-container,.section-performance .performance-game .game-warp .game2-video-box {
    position: absolute;
    width: 100%;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    opacity: 0;
    z-index: 2
}

.section-performance .performance-game .game-warp .game1-video-container canvas,.section-performance .performance-game .game-warp .game1-video-container video,.section-performance .performance-game .game-warp .game2-video-box canvas,.section-performance .performance-game .game-warp .game2-video-box video {
    width: 100%
}

.section-performance .performance-game .game-warp .circle-container {
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1
}

.section-performance .performance-game .game-warp .circle-container .left-circle,.section-performance .performance-game .game-warp .circle-container .right-circle {
    position: absolute;
    width: 50%;
    padding-bottom: 50%
}

.section-performance .performance-game .game-warp .circle-container .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    opacity: .8
}

.section-performance .performance-game .game-warp .circle-container .left-circle-1,.section-performance .performance-game .game-warp .circle-container .left-circle-2,.section-performance .performance-game .game-warp .circle-container .left-circle-3,.section-performance .performance-game .game-warp .circle-container .right-circle-1,.section-performance .performance-game .game-warp .circle-container .right-circle-2,.section-performance .performance-game .game-warp .circle-container .right-circle-3 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    position: absolute;
    background-image: radial-gradient(circle,transparent 50%,#9cd8fb);
    -webkit-animation: circleWave 6s cubic-bezier(.42,.005,.07,1) infinite;
    animation: circleWave 6s cubic-bezier(.42,.005,.07,1) infinite
}

.section-performance .performance-game .game-warp .circle-container .left-circle-1,.section-performance .performance-game .game-warp .circle-container .right-circle-1 {
    -webkit-transform: scale(.3);
    transform: scale(.3);
    z-index: 3
}

.section-performance .performance-game .game-warp .circle-container .right-circle-1 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s
}

.section-performance .performance-game .game-warp .circle-container .left-circle-2,.section-performance .performance-game .game-warp .circle-container .right-circle-2 {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-transform: scale(.6);
    transform: scale(.6);
    z-index: 2
}

.section-performance .performance-game .game-warp .circle-container .right-circle-2 {
    -webkit-animation-delay: 3s;
    animation-delay: 3s
}

.section-performance .performance-game .game-warp .circle-container .left-circle-3,.section-performance .performance-game .game-warp .circle-container .right-circle-3 {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
    -webkit-transform: scale(1);
    transform: scale(1);
    z-index: 1
}

.section-performance .performance-game .game-warp .circle-container .right-circle-3 {
    -webkit-animation-delay: 5s;
    animation-delay: 5s
}

.section-performance .performance-game .game-warp .circle-container .left-circle {
    top: 50%;
    left: 0;
    -webkit-transform: translate3d(-39%,-50%,0);
    transform: translate3d(-39%,-50%,0)
}

.section-performance .performance-game .game-warp .circle-container .right-circle {
    top: 50%;
    right: 0;
    -webkit-transform: translate3d(39%,-50%,0);
    transform: translate3d(39%,-50%,0)
}

.section-performance .performance-game .game2-video-box .game2-video-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: 3
}

.section-performance .performance-game .game2-video-box .game2-video-container img,.section-performance .performance-game .game2-video-box .game2-video-container video {
    vertical-align: middle;
    border-radius: 5%
}

.section-performance .performance-game .game2-video-box img {
    position: relative;
    width: 100%;
    z-index: 5
}

@media screen and (max-width: 735px) {
    .section-performance .performance-game .game-style-title {
        width:100%
    }

    .section-performance .performance-game .game-container {
        margin-bottom: -35vh
    }

    .section-performance .performance-game .game-warp {
        -webkit-transform: translateX(-25%);
        transform: translateX(-25%)
    }

    .section-performance .performance-game .game-warp .game-warp-line {
        width: 120%;
        right: -145%;
        top: 50%
    }

    .section-performance .performance-game .game-warp .game-warp-phone {
        opacity: 1
    }

    .section-performance .performance-game .game-warp .game-warp-phone .warp-phone-text p {
        font-size: 60px
    }

    .section-performance .performance-game .game2-video-container {
        top: 53%
    }
}

@-webkit-keyframes circleWave {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    20% {
        opacity: 1
    }

    80% {
        opacity: .2;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes circleWave {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0)
    }

    20% {
        opacity: 1
    }

    80% {
        opacity: .2;
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    to {
        opacity: 0;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.section-camera {
    width: 100%;
    position: relative
}

@media screen and (max-width: 735px) {
    .section-camera {
        padding-bottom:0
    }
}

.section-camera .camera-part1 {
    overflow: hidden
}

.section-camera .camera-part1 .svgBox {
    position: relative;
    min-height: calc(100vh - 25px)
}

.section-camera .camera-part1 .svgBox .svgBg {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    left: 0;
    top: -1px;
    background: url(../_images/camera/4800-pc.svg) 50% no-repeat;
    background-size: cover
}

@media screen and (max-width: 735px) {
    .section-camera .camera-part1 .svgBox .svgBg {
        background:url(../_images/camera/4800-mo.svg) 50% no-repeat;
        background-size: cover
    }
}

.section-camera .camera-part1 .svgBox .svgBg-ie {
    background: url(../_images/camera/48mp-for-ie.svg) 50% no-repeat;
    background-size: cover
}

.section-camera .camera-part1 .svgBox .svgBg-ie:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: #fff
}

.section-camera .camera-part1 .svgBox svg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2
}

.section-camera .camera-part1 .svgBox svg .st0 {
    fill: #fff
}

@media screen and (max-width: 1024px) {
    .section-camera .camera-part1 .svgBox svg {
        height:calc(100vh - 50px);
        width: unset
    }
}

.section-camera .camera-part1 .svgBox .imgBox {
    height: calc(100vh - 50px)
}

.section-camera .camera-part1 .svgBox .imgBox,.section-camera .camera-part1 .svgBox .imgBox .imgBox-content {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

@media screen and (max-width: 1024px) and (min-width:767px) {
    .section-camera .camera-part1 .svgBox .imgBox .imgBox-content {
        -webkit-transform:translate(-50%,-70%);
        transform: translate(-50%,-70%)
    }
}

@media screen and (max-width: 768px) and (min-width:735px) {
    .section-camera .camera-part1 .svgBox .imgBox .imgBox-content {
        -webkit-transform:translate(-50%,-62%);
        transform: translate(-50%,-62%)
    }
}

.section-camera .camera-part1 .svgBox .imgBox img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.section-camera .camera-part1 .svgBox .imgBox img:first-child {
    width: 100%
}

.section-camera .camera-part1 .svgBox .imgBox img:nth-child(2) {
    position: absolute;
    top: 39.9%;
    left: 15.3%;
    width: 64%;
    z-index: 2;
    -webkit-transform: scale(1.25);
    transform: scale(1.25)
}

.section-camera .camera-part1 .svgBox .imgBox .camera-title {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1
}

.section-camera .camera-part1 .svgBox .imgBox .camera-title .head-title {
    margin-bottom: 30px
}

@media screen and (max-width: 735px) {
    .section-camera .camera-part1 .svgBox .imgBox .camera-title .head-title {
        margin-bottom:5px
    }
}

.section-camera .camera-part1 .svgBox .imgBox .camera-title .sub-title {
    max-width: 1000px
}

.section-camera .camera-part1 .svgBox .imgBox .camera-title p {
    color: #fff
}

@media screen and (min-width: 736px) and (max-width:1025px) {
    .section-camera .camera-part1 .svgBox .imgBox .camera-title {
        width:90%
    }
}

@media screen and (max-width: 1200px) {
    .section-camera .camera-part1 .camera-title p {
        width:100%;
        padding: 10px 0
    }

    .section-camera .camera-part1 .svgBox {
        height: 100vh
    }

    .section-camera .camera-part1 .svgBox svg {
        height: 100vh;
        width: unset
    }
}

@media screen and (max-width: 1024px) {
    .section-camera .camera-part1 {
        margin-bottom:-45%
    }
}

@media screen and (max-width: 735px) {
    .section-camera .camera-part1 {
        margin-bottom:0
    }

    .section-camera .camera-part1 .camera-title {
        width: 100%
    }

    .section-camera .camera-part1 .camera-title .headline {
        text-align: left
    }

    .section-camera .camera-part1 .camera-title p {
        padding: 0
    }

    .section-camera .camera-part1 .svgBox .imgBox {
        height: 100vh;
        width: 100%;
        -webkit-transform: translate(-50%,-62%);
        transform: translate(-50%,-62%)
    }

    .section-camera .camera-part1 .svgBox .imgBox .img {
        -webkit-transform: scale(1.8);
        transform: scale(1.8)
    }

    .section-camera .camera-part1 .svgBox .imgBox img:nth-child(2) {
        top: 55%;
        left: 8.4%;
        width: 83%
    }

    .section-camera .camera-part1 .svgBox svg {
        left: 0;
        -webkit-transform: unset;
        transform: unset
    }
}

.section-camera .camera-part2 {
    display: -webkit-box;
    display: flex;
    width: 100%;
    padding: 10% 40px 40px 22%;
    text-align: right
}

.section-camera .camera-part2>div img {
    -webkit-filter: blur(50px);
    filter: blur(50px);
    -webkit-transform: scale(1.8);
    transform: scale(1.8)
}

.section-camera .camera-part2 .part2-imgBox1 {
    position: relative;
    -webkit-box-flex: 1;
    flex: 1;
    max-width: 555px;
    margin-right: 40px
}

.section-camera .camera-part2 .part2-imgBox1 .imgBox1-text {
    width: 90%;
    text-align: left;
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%)
}

.section-camera .camera-part2 .part2-imgBox1 .imgBox1-text p {
    padding-bottom: 5%
}

.section-camera .camera-part2 .part2-imgBox1 .imgBox1-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    opacity: 0
}

.section-camera .camera-part2 .part2-imgBox1 .imgBox1-box img {
    width: 100%
}

.section-camera .camera-part2 .part2-imgBox2 {
    -webkit-box-flex: 1.4;
    flex: 1.4;
    max-width: 880px;
    overflow: hidden;
    opacity: 0
}

.section-camera .camera-part2 .part2-imgBox2 img {
    width: 100%
}

@media screen and (max-width: 1024px) {
    .section-camera .camera-part2 {
        padding:25% 20px 40px 5%
    }

    .section-camera .camera-part2 .part2-imgBox1 .imgBox1-text {
        width: 100%
    }
}

@media screen and (max-width: 735px) {
    .section-camera .camera-part2 {
        display:block;
        padding: 90px 20px 0;
        text-align: left
    }

    .section-camera .camera-part2 .part2-imgBox1 {
        width: 100%;
        margin-right: 0
    }

    .section-camera .camera-part2 .part2-imgBox1 .imgBox1-box {
        position: relative;
        margin-bottom: 4px
    }

    .section-camera .camera-part2 .part2-imgBox1 .imgBox1-text {
        width: 100%;
        padding-bottom: 45px;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    .section-camera .camera-part2 .part2-imgBox1 .imgBox1-text p {
        padding-bottom: 25px
    }
}

.section-camera .camera-part3 {
    position: relative;
    width: 100%;
    padding: 8% 0
}

.section-camera .camera-part3 .part3-imgBox {
    position: relative;
    width: 50%;
    height: 78vh;
    max-height: 836px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden
}

.section-camera .camera-part3 .part3-imgBox img {
    height: auto;
    width: auto;
    min-width: 50%;
    margin: 0 -100%
}

.section-camera .camera-part3 .part3-imgBox .part3-text {
    position: absolute;
    width: 1100px;
    top: 20%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 2;
    opacity: 0
}

.section-camera .camera-part3 .part3-imgBox .part3-text p {
    text-align: left;
    color: #fff;
    max-width: 60%
}

.section-camera .camera-part3 .part3-imgBox .part3-text p:last-child {
    max-width: 48%;
    padding-top: 10px
}

@media screen and (max-width: 1200px) {
    .section-camera .camera-part3 .part3-imgBox .part3-text {
        width:90%
    }
}

@media screen and (max-width: 735px) {
    .section-camera .camera-part3 {
        padding:90px 20px 0
    }

    .section-camera .camera-part3 .part3-imgBox {
        width: 100%;
        height: 85vh
    }

    .section-camera .camera-part3 .viewPort-box {
        position: relative;
        height: 100%;
        overflow: hidden
    }

    .section-camera .camera-part3 .viewPort-box .hidden-box {
        top: 30%;
        height: 50vh;
        overflow: hidden
    }

    .section-camera .camera-part3 .viewPort-box .hidden-box,.section-camera .camera-part3 .viewPort-box img {
        position: absolute;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        width: 100%
    }

    .section-camera .camera-part3 .viewPort-box img {
        top: 50%;
        margin: unset
    }

    .section-camera .camera-part3 .part3-text {
        width: 100%;
        padding-bottom: 45px
    }

    .section-camera .camera-part3 .part3-text p:first-child {
        padding-bottom: 25px
    }
}

.section-camera .camera-part5 {
    background: #f2f2f2;
    margin: 3% 0 6%;
    padding-top: 5%
}

.section-camera .camera-part5 .part5-main {
    display: -webkit-box;
    display: flex;
    max-width: 1200px;
    margin: 0 auto
}

.section-camera .camera-part5 .part5-main>div {
    -webkit-box-flex: 1;
    flex: 1
}

.section-camera .camera-part5 .part5-l .part5-l-box {
    width: 80%;
    max-width: 634px;
    margin: 0 auto
}

.section-camera .camera-part5 .part5-l .part5-l-box .boom-box {
    position: relative
}

.section-camera .camera-part5 .part5-l .part5-l-box .boom-box img {
    width: 100%
}

.section-camera .camera-part5 .part5-l .part5-l-box .boom-box .boom-container {
    position: absolute;
    top: 8.5%;
    left: 47%;
    width: 43%
}

.section-camera .camera-part5 .part5-l .part5-l-box canvas {
    width: 100%;
    display: block
}

.section-camera .camera-part5 .part5-r {
    position: relative;
    overflow: hidden
}

.section-camera .camera-part5 .part5-r .part5-r-text {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.section-camera .camera-part5 .part5-r .tinypoints {
    background: #f2f2f2
}

@media screen and (min-width: 736px) {
    .section-camera .camera-part5 .part5-r .font-container .tinypoints {
        display:block
    }

    .section-camera .camera-part5 .part5-r .font-container .tinypoints .tinypoints-item {
        width: 100%;
        opacity: 0;
        -webkit-transform: translateY(50%);
        transform: translateY(50%)
    }
}

@media screen and (max-width: 768px) {
    .section-camera .camera-part5 {
        padding-top:20%
    }

    .section-camera .camera-part5 .part5-l .part5-l-box {
        width: 88%
    }

    .section-camera .camera-part5 .part5-r .part5-r-text {
        -webkit-transform: translateY(-55%);
        transform: translateY(-55%)
    }
}

@media screen and (max-width: 735px) {
    .section-camera .camera-part5 {
        background:unset;
        margin: 0 0 45px;
        padding-top: 0
    }

    .section-camera .camera-part5 .part5-main {
        position: relative;
        display: block
    }

    .section-camera .camera-part5 .part5-l {
        position: relative;
        z-index: 2
    }

    .section-camera .camera-part5 .part5-l .part5-l-box {
        position: relative;
        background: #f2f2f2;
        width: 100%;
        padding: 180px 20px 0
    }

    .section-camera .camera-part5 .part5-l .part5-l-box canvas {
        width: 100%;
        display: block
    }

    .section-camera .camera-part5 .part5-l .part5-l-box .boom-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding-top: 180px;
        overflow: hidden
    }

    .section-camera .camera-part5 .part5-l .part5-l-box .boom-text>i {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: -webkit-gradient(linear,left bottom,left top,from(#f2f2f2),color-stop(20%,hsla(0,0%,94.9%,.6)),color-stop(21%,hsla(0,0%,94.9%,0)),color-stop(79%,hsla(0,0%,94.9%,0)),color-stop(80%,hsla(0,0%,94.9%,.6)),to(#f2f2f2));
        background: linear-gradient(0deg,#f2f2f2 0,hsla(0,0%,94.9%,.6) 20%,hsla(0,0%,94.9%,0) 21%,hsla(0,0%,94.9%,0) 79%,hsla(0,0%,94.9%,.6) 80%,#f2f2f2);
        z-index: 2;
        opacity: 0
    }

    .section-camera .camera-part5 .part5-l .part5-l-box .boom-text .tinypoints-item {
        position: absolute;
        top: 180px;
        left: 0
    }

    .section-camera .camera-part5 .part5-l .part5-l-box .boom-text p {
        padding: 0 20px 10px;
        text-align: left
    }

    .section-camera .camera-part5 .part5-l .boom-box {
        -webkit-transform: translateY(-120px);
        transform: translateY(-120px)
    }

    .section-camera .camera-part5 .part5-r {
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 0
    }

    .section-camera .camera-part5 .part5-r .part5-r-text {
        position: relative;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.section-camera .camera-part6>p {
    padding-bottom: 2%;
    text-align: center
}

@media screen and (max-width: 735px) {
    .section-camera .camera-part6>p {
        padding-bottom:15px
    }
}

.section-camera .camera-part6 .infinite-box {
    width: 100%;
    display: -webkit-box;
    display: flex
}

.section-camera .camera-part6 .part6-container {
    display: -webkit-box;
    display: flex;
    -webkit-box-flex: 1;
    flex: 1
}

.section-camera .camera-part6 .part6-container img {
    width: 100%;
    height: 100%
}

.section-camera .camera-part6 .part6-container .box-l {
    -webkit-box-flex: 2.5;
    flex: 2.5;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

.section-camera .camera-part6 .part6-container .box-l>div {
    -webkit-box-flex: 1;
    flex: 1
}

.section-camera .camera-part6 .part6-container .box-l .box-l-t {
    margin-bottom: 10px
}

@media screen and (max-width: 735px) {
    .section-camera .camera-part6 .part6-container .box-l .box-l-t {
        margin-bottom:5px
    }
}

.section-camera .camera-part6 .part6-container .box-l .box-l-b,.section-camera .camera-part6 .part6-container .box-l .box-l-t {
    display: -webkit-box;
    display: flex
}

.section-camera .camera-part6 .part6-container .box-l .box-l-b .part6-imgBox,.section-camera .camera-part6 .part6-container .box-l .box-l-t .part6-imgBox {
    -webkit-box-flex: 1;
    flex: 1
}

.section-camera .camera-part6 .part6-container .box-l .box-l-b .part6-imgBox:first-child,.section-camera .camera-part6 .part6-container .box-l .box-l-t .part6-imgBox:first-child {
    margin-right: 10px
}

@media screen and (max-width: 735px) {
    .section-camera .camera-part6 .part6-container .box-l .box-l-b .part6-imgBox:first-child,.section-camera .camera-part6 .part6-container .box-l .box-l-t .part6-imgBox:first-child {
        margin-right:5px
    }
}

.section-camera .camera-part6 .part6-container .box-l .box-l-b .part6-imgBox-2,.section-camera .camera-part6 .part6-container .box-l .box-l-t .part6-imgBox-2 {
    -webkit-box-flex: 2;
    flex: 2
}

.section-camera .camera-part6 .part6-container .box-r {
    -webkit-box-flex: 1;
    flex: 1;
    margin: 0 10px
}

@media screen and (max-width: 735px) {
    .section-camera .camera-part6 .part6-container .box-r {
        margin:0 5px
    }
}

.section-camera .camera-part6 .vifnslb-element {
    -webkit-animation-duration: 40s!important;
    animation-duration: 40s!important;
    width: 600%
}

@media screen and (max-width: 735px) {
    .section-camera .camera-part6 .vifnslb-element {
        width:1800%
    }
}

.ipad-camera .camera-part1 {
    margin-bottom: 0
}

.ipad-camera .camera-part1 .svgBox .imgBox .imgBox-content {
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.ipad-camera .camera-part2 {
    padding: 10% 40px
}

.section-os {
    padding-top: 150px;
    background-color: #fff
}

.section-os,.section-os .os-main {
    width: 100%;
    position: relative
}

.section-os .os-title {
    margin: 0 auto
}

.section-os .os-title .link-wrap {
    text-align: center;
    padding-top: 25px;
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.section-os .os-title .link-wrap a {
    position: relative;
    color: #000;
    padding-right: 0;
    -webkit-transition: padding-right .3s ease-in .1ms;
    transition: padding-right .3s ease-in .1ms
}

.section-os .os-title .link-wrap a:after {
    display: inline-block;
    content: " ";
    height: 8px;
    width: 8px;
    border-color: #000;
    border-style: solid;
    border-width: 2px 2px 0 0;
    position: absolute;
    -webkit-transform: rotate(45deg) translateY(-50%);
    transform: rotate(45deg) translateY(-50%);
    top: 43%;
    right: -8px
}

.section-os .os-title .link-wrap a:hover {
    padding-right: 10px;
    opacity: .7;
    text-decoration: underline
}

.section-os .os-title .link-wrap a:hover:after {
    opacity: .7
}

.section-os .os-imgBox {
    display: -webkit-box;
    display: flex;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 120px
}

.section-os .os-imgBox>div {
    -webkit-box-flex: 1;
    flex: 1;
    position: relative
}

.section-os .os-imgBox>div img {
    width: 100%;
    max-width: 336px;
    padding: 5%
}

@media screen and (max-width: 735px) {
    .section-os {
        padding-top:100px
    }

    .section-os .os-imgBox {
        width: 150%;
        -webkit-transform: translateX(-17%);
        transform: translateX(-17%)
    }
}

.landing-container {
    color: #000
}

@media screen and (max-width: 735px) {
    .misc-dialog.select-dialog .hint-card {
        width:95%
    }
}

.misc-dialog.select-dialog .select-container {
    background-color: #fff;
    padding: 50px 80px
}

@media screen and (min-width: 768px) and (max-width:1000px) {
    .misc-dialog.select-dialog .select-container {
        padding:50px 20px
    }
}

@media screen and (max-width: 735px) {
    .misc-dialog.select-dialog .select-container {
        padding:50px 20px
    }
}

.misc-dialog.select-dialog .modal-title {
    font-size: 30px;
    font-weight: 400
}

@media screen and (max-width: 735px) {
    .misc-dialog.select-dialog .modal-title {
        font-size:20px
    }
}

.misc-dialog.select-dialog .sub-title {
    font-size: 20px;
    margin: 20px 0 30px
}

@media screen and (max-width: 735px) {
    .misc-dialog.select-dialog .sub-title {
        font-size:16px
    }
}

.misc-dialog.select-dialog .store-enters .store-enter {
    width: 260px;
    min-width: 200px;
    height: 190px;
    padding: 20px
}

@media screen and (max-width: 735px) {
    .misc-dialog.select-dialog .store-enters .store-enter {
        width:100%;
        height: 130px;
        min-width: auto;
        border-width: 2px;
        padding: 20px 0 0
    }
}

@media screen and (min-width: 768px) and (max-width:1000px) {
    .misc-dialog.select-dialog .store-enters .store-enter {
        width:200px;
        height: 150px;
        padding: 20px
    }
}

.misc-dialog.select-dialog .store-enters .store-enter .store-link {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    border: 1px solid #999;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100%
}

@media screen and (max-width: 735px) {
    .misc-dialog.select-dialog .store-enters .store-enter .store-link {
        background-size:80%
    }
}

.misc-dialog.select-dialog .store-enters .store-enter .amazon {
    background-image: url(/store/20170907/assets/images/misc/common/ec-amazon.jpg)
}

.misc-dialog.select-dialog .store-enters .store-enter .oneplus {
    background-image: url(/store/20170907/assets/images/misc/common/ec-oneplus.jpg)
}

.misc-dialog.select-dialog .store-enters .store-enter .jd {
    background-image: url(/store/20170907/assets/images/misc/common/ec-jd.png)
}

.misc-dialog.select-dialog .store-enters .store-enter .lazada {
    background-image: url(/store/20170907/assets/images/misc/common/ec-lazada.jpg)
}

.misc-dialog.select-dialog .store-enters .store-enter .ais {
    background-image: url(/store/20170907/assets/images/misc/common/ec-ais.jpg)
}

.text-black .learn-more:after {
    background-color: #000
}

.text-white .learn-more:after {
    background-color: #fff
}

.font-container.tinypoints-container {
    -webkit-transform: translate3d(0,10%,0);
    transform: translate3d(0,10%,0);
    opacity: 0
}

.font-container .head-title {
    margin-bottom: 20px
}

.font-container .headline {
    text-align: center
}

.font-container .headline .head-title {
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
    opacity: 0
}

.font-container .headline .head-title sup {
    font-size: 30%;
    top: 0
}

.font-container .headline .sub-title {
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
    opacity: 0
}

@media screen and (min-width: 736px) {
    .font-container .headline .head-title {
        width:83.33333%;
        max-width: 1000px;
        margin: auto
    }

    .font-container .headline .sub-title {
        width: 66.66667%;
        max-width: 800px;
        margin: auto
    }
}

@media screen and (min-width: 768px) and (max-width:1440px) {
    .font-container .headline .head-title {
        width:66.66667%;
        max-width: 800px
    }

    .font-container .headline .sub-title {
        width: 50%;
        max-width: 600px
    }
}

@media screen and (max-width: 735px) {
    .font-container .headline .head-title {
        margin-bottom:10px
    }
}

.font-container .subline {
    text-align: left;
    margin: auto
}

@media screen and (min-width: 736px) {
    .font-container .subline {
        width:83.33333%;
        max-width: 1000px;
        min-width: 300px;
        opacity: 0;
        -webkit-transform: translate3d(0,50%,0);
        transform: translate3d(0,50%,0)
    }

    .font-container .subline.subline-horizontal {
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between
    }

    .font-container .subline.subline-horizontal .head-title {
        width: 40%;
        max-width: 400px
    }

    .font-container .subline.subline-horizontal .sub-title {
        width: 50%
    }
}

@media screen and (min-width: 768px) and (max-width:1440px) {
    .font-container .subline {
        width:66.66667%;
        max-width: 800px
    }
}

@media screen and (max-width: 735px) {
    .font-container .subline .head-title,.font-container .subline .sub-title {
        opacity:0;
        -webkit-transform: translate3d(0,50%,0);
        transform: translate3d(0,50%,0)
    }
}

.font-container .tinypoints {
    background: #f5f5f5
}

.font-container .tinypoints .tinypoints-item {
    margin-top: 50px;
    opacity: 0;
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0)
}

@media screen and (min-width: 736px) {
    .font-container .tinypoints {
        width:91.66667%;
        max-width: 1200px;
        margin: auto;
        padding: 10px 5% 60px;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between;
        flex-wrap: wrap;
        box-sizing: border-box
    }

    .font-container .tinypoints .tinypoints-item {
        width: 40%
    }
}

@media screen and (min-width: 768px) and (max-width:1440px) {
    .font-container .tinypoints {
        max-width:1000px;
        padding: 0 4.16667% 30px
    }

    .font-container .tinypoints .tinypoints-item {
        margin-top: 30px
    }
}

@media screen and (max-width: 735px) {
    .font-container .tinypoints .tinypoints-item:first-child {
        margin-top:0
    }
}

.font-container .padding-top-1x {
    padding-top: 10px
}

.font-container .learn-more {
    position: relative;
    padding-bottom: 10px;
    display: inline-block;
    color: #000
}

.font-container .learn-more,.font-container .learn-more:after {
    -webkit-transition: .6s cubic-bezier(.77,0,.175,1);
    transition: .6s cubic-bezier(.77,0,.175,1)
}

.font-container .learn-more:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px
}

.font-container .learn-more:hover {
    color: #eb0028
}

.font-container .learn-more:hover,.font-container .learn-more:hover:after {
    -webkit-transition: .6s cubic-bezier(.77,0,.175,1);
    transition: .6s cubic-bezier(.77,0,.175,1)
}

.font-container .learn-more:hover:after {
    background-color: #eb0028;
    width: 130%
}

@media screen and (max-width: 735px) {
    .font-container {
        padding-left:20px;
        padding-right: 20px
    }

    .font-container.tinypoints-container {
        background: #f5f5f5;
        padding-top: 50px;
        padding-bottom: 50px
    }

    .font-container .padding-top-2x {
        padding-top: 10px
    }

    .font-container .padding-top-3x {
        padding-top: 20px
    }

    .font-container .padding-top-4x {
        padding-top: 30px
    }

    .font-container .padding-top-8x {
        padding-top: 40px
    }
}

#hotdog-footer {
    margin: 20px
}

@media screen and (max-width: 735px) {
    #hotdog-footer {
        margin:0
    }
}

#hotdog-footer.isTrident .hotdog-footer-list>ul li {
    max-width: none
}

.hotdog-footer-list {
    width: 100%;
    background-color: #fff;
    padding-top: 140px
}

.hotdog-footer-list>p {
    color: #000;
    text-align: center
}

.hotdog-footer-list>ul {
    display: -webkit-box;
    display: flex;
    padding: 106px 10%;
    -webkit-box-pack: center;
    justify-content: center
}

.hotdog-footer-list>ul li {
    -webkit-box-flex: 1;
    flex: 1;
    text-align: center;
    max-width: 400px
}

.hotdog-footer-list>ul li>a {
    display: inline-block;
    margin-bottom: 50px
}

.hotdog-footer-list>ul li>a img {
    position: relative;
    width: 80%
}

.hotdog-footer-list>ul li>p {
    text-align: center;
    color: #000
}

@media screen and (max-width: 735px) {
    .hotdog-footer-list {
        padding-top:70px
    }

    .hotdog-footer-list>ul {
        padding: 65px 0 72px
    }

    .hotdog-footer-list>ul li>a {
        margin-bottom: 30px
    }

    .hotdog-footer-list>ul li>a img {
        width: 100%
    }
}

.hotdog-footer-link {
    margin-top: 20px
}

.hotdog-footer-link ul {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    box-sizing: border-box;
    width: 100%;
    -webkit-box-pack: center;
    justify-content: center;
    margin-bottom: 0
}

.hotdog-footer-link ul li {
    position: relative;
    display: list-item;
    width: 50%;
    max-width: 1270px;
    box-sizing: border-box;
    margin-bottom: 10px;
    padding: 0 5px
}

.hotdog-footer-link ul li a {
    position: relative;
    display: block;
    height: 100%;
    overflow: hidden
}

.hotdog-footer-link ul li a div {
    width: 100%;
    height: 500px;
    -webkit-transition: -webkit-transform .6s cubic-bezier(.77,0,.175,1);
    transition: -webkit-transform .6s cubic-bezier(.77,0,.175,1);
    transition: transform .6s cubic-bezier(.77,0,.175,1);
    transition: transform .6s cubic-bezier(.77,0,.175,1),-webkit-transform .6s cubic-bezier(.77,0,.175,1);
    -webkit-transform: scale(1);
    transform: scale(1);
    overflow: hidden;
    background: 50% no-repeat;
    background-size: cover
}

@media screen and (max-width: 1200px) and (min-width:737px) {
    .hotdog-footer-link ul li a div {
        height:350px
    }
}

@media screen and (max-width: 737px) {
    .hotdog-footer-link ul li a div {
        height:200px
    }
}

.hotdog-footer-link ul li a>p {
    position: absolute;
    top: 50px;
    left: 50px;
    color: #fff
}

@media screen and (max-width: 1200px) {
    .hotdog-footer-link ul li a>p {
        top:25px;
        left: 25px
    }
}

.hotdog-footer-link ul li a>p span {
    display: block;
    padding-bottom: 15px
}

.hotdog-footer-link ul li a>p .link-wrap {
    position: relative
}

.hotdog-footer-link ul li a>p .link-wrap:after {
    display: inline-block;
    content: " ";
    height: 8px;
    width: 8px;
    border-color: #fff;
    border-style: solid;
    border-width: 2px 2px 0 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-left: 5px;
    -webkit-transition: margin-left .3s ease-in .1ms;
    transition: margin-left .3s ease-in .1ms
}

.hotdog-footer-link ul li a:hover div {
    -webkit-transform: scale(1.1);
    transform: scale(1.1)
}

.hotdog-footer-link ul li a:hover>p .link-wrap {
    opacity: .7;
    text-decoration: underline
}

.hotdog-footer-link ul li a:hover>p .link-wrap:after {
    margin-left: 10px;
    opacity: .7
}

.hotdog-footer-link ul li:nth-child(2n) {
    padding-right: 0
}

.hotdog-footer-link ul li:nth-child(2n-1) {
    padding-left: 0
}

.hotdog-footer-link ul li:first-child a p span {
    color: #000
}

.hotdog-footer-link ul li:first-child a p .link-wrap:after {
    border-color: #000
}

@media screen and (max-width: 735px) {
    .hotdog-footer-link ul {
        display:block;
        padding: 0
    }

    .hotdog-footer-link ul li {
        width: 100%;
        padding: 0;
        margin-bottom: 10px
    }
}

.footnote-container {
    display: none;
    color: rgba(0,0,0,.4)
}

@media screen and (max-width: 735px) {
    .footnote-container {
        padding-left:15px;
        padding-right: 15px
    }
}

.footnote-container.show {
    display: block
}

.footnote-container ol {
    padding-left: 1em
}

.footnote-container ol li {
    list-style: decimal
}

.footnote-container.en ol {
    padding-left: 5px
}

.footnote-container.en ol li {
    list-style: none
}