﻿body.overflow{overflow:hidden !important}.body{position:relative}.body .section1{width:50%;margin:0 auto;padding:20rem 0 0 0;text-align:center}.body .section1 .t{color:#000;font-size:3.2vw;font-weight:600}.body .section1 .tags{display:flex;justify-content:center;margin:2vw 0}.body .section1 .tags p{display:inline-block;padding:5px 30px;background:#C9FF85;color:#000;font-size:.8vw;border-radius:30px;margin:0 5px}.body .section1 .t2{color:#000;font-size:1.4vw;font-weight:600}.body .section1 .des{margin:2vw 0}.body .section1 .des p{color:#000;font-size:.9vw;line-height:1.8}.body .section1 .store{display:inline-block}.body .section1 .store svg{margin-left:10px}.body .section2{position:relative}.body .section2 .circle{position:absolute;right:5%;top:-7.5vw}.body .section2 .circle .st{display:flex;align-items:center;justify-content:center;margin:8px 0}.body .section2 .circle .st p{font-size:1vw;text-transform:capitalize;font-weight:200}.body .section2 .bg img{width:100%}.body .section3{padding:2.5vw}.body .section3 .pic{width:100%;overflow:hidden}.body .section3 .pic img{width:100%;transition:all 4s}.body .section3 .pic:hover img{transform:scale(1.05)}.body .section4{width:100%;text-align:center;margin:4vw 0}.body .section4 .medium .flex-col{justify-content:center}.body .section4 .medium .flex-col p{color:#000;font-size:.9vw}.body .section4 .medium .flex-col h2{color:#000;font-size:2.5vw;font-weight:600;margin:3vw 0;transition:all 0.5s cubic-bezier(0.7, 0, 0.3, 1)}.body .section4 .medium .tile-image-wrap{width:calc(clamp(40em, 27.5vw, 25em) * .9);position:absolute;left:50%;bottom:0;background:transparent;transform:translateX(-50%);overflow:hidden}.body .section4 .medium .tile-image-wrap:hover .tile-image{transform:translateY(0)}.body .section4 .medium .tile-image-wrap::before{display:block;content:"";padding-bottom:50%}.body .section4 .medium .tile-image-wrap .tile-image{width:100%;position:absolute;top:0;left:0;transform:translateY(24%);transition:all 0.5s cubic-bezier(0.7, 0, 0.3, 1)}.body .section4 .medium .tile-image-wrap .tile-image::before{content:"";display:block;padding-bottom:85%}.body .section4 .medium .tile-image-wrap .overlay{position:absolute;top:0;left:0;height:100%;width:100%;background-color:#b1a994;background-position:center center;background-repeat:no-repeat;background-size:cover;transform:matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 25, 0, 1);background-image:url("../image/thumbnail-atypikal.jpg")}.body .section4 .medium .stripe{display:block;width:100%;height:1px;background-color:#000}.body .section4 .medium .btn-click{width:20vw;border:1px solid #000;background:transparent;display:block;text-align:center;color:#000;font-size:1vw;transition:all 600ms;border-radius:0;height:auto;padding:1.2vw 0}.body .dialog{position:fixed;left:0;top:0;width:100%;height:100vh;z-index:100;display:none}.body .dialog .mask{position:absolute;width:100%;height:100%;top:0;left:0;z-index:-1;background:rgba(0,0,0,0.5);cursor:pointer}.body .dialog .box{width:60%;height:80vh;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);background-color:white;padding:0 3vw;overflow-y:scroll}.body .dialog .box .t1{display:flex;border-bottom:1px solid #000;padding:2vw 0}.body .dialog .box .t1 .p1{color:#000;font-size:1.4vw;font-weight:600}.body .dialog .box .t1 .tags{display:flex;align-items:flex-end;margin-left:2vw}.body .dialog .box .t1 .tags p{display:inline-block;padding:5px 30px;background:#C9FF85;color:#000;font-size:.8vw;border-radius:30px;margin:0 5px}.body .dialog .box .content{display:flex;justify-content:space-between;margin-top:1.5vw}.body .dialog .box .content .lb{width:70%}.body .dialog .box .content .lb .item{margin-bottom:20px}.body .dialog .box .content .lb .item .p1{color:#000;font-size:.9vw;font-weight:600}.body .dialog .box .content .lb .item .des{margin-left:2vw;color:#000;font-size:.9vw;font-weight:300;line-height:1.8;margin-top:10px}.body .dialog .box .content .rb{width:23%}.body .dialog .box .content .rb .item{margin-bottom:20px}.body .dialog .box .content .rb .item .p1{color:#000;font-size:.9vw;font-weight:600}.body .dialog .box .content .rb .item .des{margin-left:2vw;color:#000;font-size:.9vw;font-weight:300;line-height:1.8;margin-top:10px}.body .dialog .box .content .rb .leaf{text-align:center}.body .dialog .box .content .rb .leaf svg path{stroke-dasharray:0, 1000px;animation:line 2s forwards linear}@keyframes line{from{stroke-dasharray:0, 1000px}to{stroke-dasharray:1000px, 0px}}.body .btns{position:fixed;left:0;bottom:1.3vw;width:100%;display:flex;justify-content:center;z-index:9999;opacity:0;transition:.7s;pointer-events:none}.body .btns .btn-click{width:18vw;border:1px solid #FFF;background:#000;display:block;text-align:center;font-size:1.3em;transition:all 600ms;margin-top:2vw;border-radius:0;height:3.6em;margin:0 20px}.body .btns .btn-click:first-child{border:1px solid #000;background:#C9FF85}.body .btns.on{pointer-events:auto;opacity:1}@media screen and (max-width: 1024px){.body .section1{width:90%;padding:80px 0 20px 0}.body .section1 .t{font-size:24px}.body .section1 .tags{margin:15px 0}.body .section1 .tags p{font-size:14px;padding:5px 20px}.body .section1 .t2{font-size:18px}.body .section1 .des{margin:15px 0}.body .section1 .des p{font-size:14px}.body .section2 .circle .st p{font-size:16px}.body .section3{padding:0}.body .section4{margin:60px auto}.body .section4 .medium .flex-col p{font-size:18px}.body .section4 .medium .flex-col h2{font-size:22px}.body .section4 .medium .tile-image-wrap{width:calc(clamp(15em, 27.5vw, 25em) * .9)}.body .section4 .medium .btn-click{width:100%;font-size:16px;padding:20px 0}.body .section4 .medium .row:nth-child(2){padding-bottom:40px}.body .section4 .tile-image{transform:translateY(0)}.body .dialog .box{width:100%;top:0;transform:translate(0);left:0;padding:0 5%}.body .dialog .box .t1{flex-direction:column;padding-bottom:30px}.body .dialog .box .t1 .p1{font-size:24px;padding:40px 0 15px 0}.body .dialog .box .t1 .tags{margin-left:0}.body .dialog .box .t1 .tags p{font-size:14px}.body .dialog .box .content{flex-direction:column;margin-top:30px}.body .dialog .box .content .lb,.body .dialog .box .content .rb{width:100%}.body .dialog .box .content .lb .item .p1,.body .dialog .box .content .rb .item .p1{font-size:18px}.body .dialog .box .content .lb .item .des,.body .dialog .box .content .rb .item .des{font-size:14px;margin:15px 0}.body .dialog .box .content .rb .leaf{text-align:right}.body .btns{justify-content:space-evenly}.body .btns .btn-click{width:45%;font-size:14px;margin:0;padding:15px 0}}.btns .btn-click svg path{transition:.6s}.btns .btn-click:hover svg path{fill:#fff}.btns .count-nr{color:#fff;transform:translate(46px, -18%)}.body .btns2 .btn-click:first-child{background:#000;border:1px solid #fff;color:#fff}.body .btns2 .btn-click:first-child span{color:#fff !important}.body .btns2 .btn-click:first-child svg path{fill:#fff !important}
