#x-treme-series-t-frame{background-color:#f5f5f7}#x-treme-series-t-frame .header{padding-top:200rem;text-align:center}#x-treme-series-t-frame .header .header-tit{font-family:var(--new-font-family);font-weight:600;font-size:40rem;color:#111;line-height:28rem}#x-treme-series-t-frame .header .header-ctn{font-family:var(--new-font-family);font-weight:400;font-size:18rem;color:#5a5a5a;line-height:26rem;max-width:748rem;margin:40rem auto 72rem}#x-treme-series-t-frame .header .header-ctn strong{color:#111}#x-treme-series-t-frame .container{position:relative;width:100%;height:900rem}#x-treme-series-t-frame .container video,#x-treme-series-t-frame .container img{width:100%;height:100%;object-fit:cover}#x-treme-series-t-frame .container .point-box{display:none;position:absolute;top:0;left:0;width:100%;height:100%}#x-treme-series-t-frame .container .point-box .item-circle-box{position:absolute;padding:16rem 20rem;cursor:pointer}#x-treme-series-t-frame .container .point-box .item-circle{position:relative;display:inline-block;width:8rem;height:8rem;background:#a5a5a5;border-radius:50%}#x-treme-series-t-frame .container .point-box .item-circle:before{content:"";width:1rem;height:0;background-color:#5a5a5a;transition:1s height ease-in-out;will-change:height}#x-treme-series-t-frame .container .point-box .item-circle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1rem solid #A5A5A5;background:transparent;width:0;height:0;animation:breatheAni 1s ease-in-out infinite}#x-treme-series-t-frame .container .point-box .item-ctn .ctn-1,#x-treme-series-t-frame .container .point-box .item-ctn .ctn-2{opacity:0;transform:translateY(10rem);will-change:opacity,transform;height:24rem;width:154rem;line-height:24rem;text-align:center}#x-treme-series-t-frame .container .point-box .item-ctn .ctn-1{background-color:#434344;font-family:var(--new-font-family);font-weight:500;font-size:12rem;color:#f5f5f7;transition:.5s all ease-in-out}#x-treme-series-t-frame .container .point-box .item-ctn .ctn-2{display:flex;align-items:center;justify-content:space-between;transition:1s all ease-in-out;margin-top:8rem}#x-treme-series-t-frame .container .point-box .item-ctn .ctn-2 span{line-height:1;font-family:var(--new-font-family);font-weight:600;font-size:14rem;color:#111}#x-treme-series-t-frame .container .point-box .item-ctn .ctn-2 i{font-style:normal;font-weight:400;font-size:16rem;color:#434344}#x-treme-series-t-frame .container .point-box .point-item-1{position:absolute;top:110rem;left:624rem;height:180rem}#x-treme-series-t-frame .container .point-box .point-item-1 .item-circle-box{bottom:-16rem;left:-20rem}#x-treme-series-t-frame .container .point-box .point-item-1 .item-circle:before{position:absolute;bottom:8rem;left:50%;transform:translate(-50%)}#x-treme-series-t-frame .container .point-box .point-item-1 .item-ctn{position:relative;margin-left:18rem}#x-treme-series-t-frame .container .point-box .point-item-2{position:absolute;top:246rem;left:466rem;height:136rem}#x-treme-series-t-frame .container .point-box .point-item-2 .item-circle-box{top:-16rem;left:-20rem}#x-treme-series-t-frame .container .point-box .point-item-2 .item-circle:before{position:absolute;top:8rem;left:50%;transform:translate(-50%)}#x-treme-series-t-frame .container .point-box .point-item-2 .item-ctn{position:absolute;bottom:-44rem;margin-right:18rem;right:0}#x-treme-series-t-frame .container .point-box .point-item-3{position:absolute;top:478rem;left:1398rem;height:56rem;width:248rem}#x-treme-series-t-frame .container .point-box .point-item-3 .item-circle-box{top:-16rem;left:-20rem}#x-treme-series-t-frame .container .point-box .point-item-3 .item-circle:before{position:absolute;top:50%;transform:translateY(50%);left:10rem;width:0;height:1rem;background-color:#5a5a5a;transition:1s width ease-in-out;will-change:width}#x-treme-series-t-frame .container .point-box .point-item-3 .item-ctn{position:absolute;bottom:0;margin-left:18rem;right:0}#x-treme-series-t-frame .container .point-box .point-item-4{position:absolute;top:720rem;right:208rem;height:56rem;width:248rem}#x-treme-series-t-frame .container .point-box .point-item-4 .item-circle-box{top:-16rem;left:-20rem}#x-treme-series-t-frame .container .point-box .point-item-4 .item-circle:before{content:"";position:absolute;top:50%;transform:translateY(50%);left:10rem;width:0;height:1rem;background-color:#5a5a5a;transition:1s width ease-in-out;will-change:width}#x-treme-series-t-frame .container .point-box .point-item-4 .item-ctn{position:absolute;bottom:0;margin-left:18rem;right:0}#x-treme-series-t-frame .container .point-box .point-item-1.active .item-circle:before{height:132rem}#x-treme-series-t-frame .container .point-box .point-item-1.active .ctn-1,#x-treme-series-t-frame .container .point-box .point-item-1.active .ctn-2{opacity:1;transform:translateY(0)}#x-treme-series-t-frame .container .point-box .point-item-2.active .item-circle:before{height:132rem}#x-treme-series-t-frame .container .point-box .point-item-2.active .ctn-1,#x-treme-series-t-frame .container .point-box .point-item-2.active .ctn-2{opacity:1;transform:translateY(0)}#x-treme-series-t-frame .container .point-box .point-item-3.active .item-circle:before{width:64rem}#x-treme-series-t-frame .container .point-box .point-item-3.active .ctn-1,#x-treme-series-t-frame .container .point-box .point-item-3.active .ctn-2{opacity:1;transform:translateY(0)}#x-treme-series-t-frame .container .point-box .point-item-4.active .item-circle:before{width:64rem}#x-treme-series-t-frame .container .point-box .point-item-4.active .ctn-1,#x-treme-series-t-frame .container .point-box .point-item-4.active .ctn-2{opacity:1;transform:translateY(0)}@keyframes breatheAni{0%{width:0;height:0}to{width:14rem;height:14rem}}@media(max-width:768px){#x-treme-series-t-frame .header{padding:96rem 24rem 32rem;text-align:left}#x-treme-series-t-frame .header .header-tit{font-size:24rem;max-width:220rem}#x-treme-series-t-frame .header .header-ctn{font-size:16rem;line-height:22rem;max-width:290rem;margin:34rem 0 0}#x-treme-series-t-frame .container{position:relative;width:100%;height:430rem}#x-treme-series-t-frame .container video,#x-treme-series-t-frame .container img{width:100%;height:100%;object-fit:cover}#x-treme-series-t-frame .container .point-box{display:block;position:absolute;top:0;left:0;width:100%;height:100%}#x-treme-series-t-frame .container .point-box .item-circle-box{position:absolute;padding:16rem 20rem;cursor:pointer}#x-treme-series-t-frame .container .point-box .item-circle{position:relative;display:inline-block;width:8rem;height:8rem;background:#a5a5a5;border-radius:50%}#x-treme-series-t-frame .container .point-box .item-circle:before{content:"";width:1rem;height:0;background-color:#5a5a5a;transition:1s height ease-in-out;will-change:height}#x-treme-series-t-frame .container .point-box .item-circle:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1rem solid #A5A5A5;background:transparent;width:0;height:0;animation:breatheAni 1s ease-in-out infinite}#x-treme-series-t-frame .container .point-box .item-ctn .ctn-1,#x-treme-series-t-frame .container .point-box .item-ctn .ctn-2{opacity:0;transform:translateY(10rem);will-change:opacity,transform;height:auto;width:100rem;line-height:14rem;text-align:left}#x-treme-series-t-frame .container .point-box .item-ctn .ctn-1{background-color:#434344;font-family:var(--new-font-family);font-weight:500;font-size:10rem;color:#f5f5f7;transition:.5s all ease-in-out;padding:8rem}#x-treme-series-t-frame .container .point-box .item-ctn .ctn-2{display:flex;align-items:center;justify-content:space-between;transition:1s all ease-in-out;margin-top:8rem}#x-treme-series-t-frame .container .point-box .item-ctn .ctn-2 span{line-height:1;font-family:var(--new-font-family);font-weight:600;font-size:12rem;color:#111}#x-treme-series-t-frame .container .point-box .point-item-1{position:absolute;top:68rem;left:120rem;height:unset}#x-treme-series-t-frame .container .point-box .point-item-1 .item-circle-box{bottom:unset;left:-20rem;top:-16rem}#x-treme-series-t-frame .container .point-box .point-item-1 .item-circle:before{position:absolute;bottom:unset;top:8rem;left:50%;transform:translate(-50%)}#x-treme-series-t-frame .container .point-box .point-item-1 .item-ctn{position:absolute;margin-left:0;bottom:unset;top:56rem;left:50%;transform:translate(-50%)}#x-treme-series-t-frame .container .point-box .point-item-2{position:absolute;top:62rem;left:unset;height:unset;right:126rem}#x-treme-series-t-frame .container .point-box .point-item-2 .item-circle:before{position:absolute;top:8rem;left:50%;transform:translate(-50%)}#x-treme-series-t-frame .container .point-box .point-item-2 .item-ctn{position:absolute;top:24rem;bottom:unset;margin-right:0;right:unset;left:10rem}#x-treme-series-t-frame .container .point-box .point-item-3{position:absolute;top:238rem;left:210rem;height:auto;width:auto}#x-treme-series-t-frame .container .point-box .point-item-3 .item-circle:before{position:absolute;top:50%;transform:translateY(50%);left:unset;right:10rem;width:0;height:1rem;background-color:#5a5a5a;transition:1s width ease-in-out;will-change:width}#x-treme-series-t-frame .container .point-box .point-item-3 .item-ctn{position:absolute;bottom:unset;margin-left:0;right:unset;left:-150rem}#x-treme-series-t-frame .container .point-box .point-item-4{position:absolute;top:336rem;right:134rem;height:auto;width:auto}#x-treme-series-t-frame .container .point-box .point-item-4 .item-circle:before{content:"";position:absolute;top:50%;transform:translateY(50%);left:10rem;width:0;height:1rem;background-color:#5a5a5a;transition:1s width ease-in-out;will-change:width}#x-treme-series-t-frame .container .point-box .point-item-4 .item-ctn{position:absolute;bottom:unset;margin-left:0;right:unset;left:30rem}#x-treme-series-t-frame .container .point-box .point-item-1.active .item-circle:before{height:34rem}#x-treme-series-t-frame .container .point-box .point-item-2.active .item-circle:before{height:28rem}#x-treme-series-t-frame .container .point-box .point-item-3.active .item-circle:before{width:38rem}#x-treme-series-t-frame .container .point-box .point-item-4.active .item-circle:before{width:12rem}}
/*# sourceMappingURL=/cdn/shop/t/153/assets/x-treme-series-t-frame.scss.css.map */