html,body{height:100%}body{margin:0}#app,.swiper-container{width:100%;height:100%}.swiper-slide{overflow:hidden}.d-flex{display:-webkit-box;display:-ms-flexbox;display:flex}.filter{margin:0 auto;min-width:768px;padding:15px;font-size:16px;font-family:Arial, Helvetica, sans-serif}.filter .deer{width:25vw;height:23.29102vw;min-width:calc(320px + 5em);min-height:calc((320px + 5em) / 1024 * 954);margin-bottom:15px}.filter .input-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.filter .input-item .label{margin-right:1em;width:4em;line-height:2;text-align-last:justify;font-weight:700}.filter .input-item input{margin:0;width:calc(25vw - 5em);min-width:320px;font-size:16px}.filter .input-item input[type='range'],.filter .input-item input[type='color'],.filter .input-item input[type='number']::-webkit-inner-spin-button{cursor:pointer}.filter .input-item input[type='range']::-webkit-slider-thumb{cursor:-webkit-grab;cursor:grab}.filter .input-item input[type='range']:active::-webkit-slider-thumb{cursor:-webkit-grabbing;cursor:grabbing}.filter .input-item .code{margin-left:1em;padding:0.25em 0.75em;border-radius:0.25em;line-height:1.5;color:#ffffff;font-size:12px;letter-spacing:1px;background-color:#282c34}.filter .drop-shadow .params{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:calc(25vw - 5em);min-width:320px}.filter .drop-shadow .params>*{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.filter .drop-shadow .params .param{margin-right:0.3em;font-size:14px}.filter .drop-shadow .params input{width:3vw;min-width:48px;font-size:12px}.filter .drop-shadow .params .drop-shadow-color input{margin-right:0}.blend-mode{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin:0 auto;padding:15px;font-size:16px;font-family:Arial, Helvetica, sans-serif}.blend-mode .img-group{display:-webkit-box;display:-ms-flexbox;display:flex;margin-bottom:30px}.blend-mode .img-group .img{position:relative;width:25vw;height:23.29102vw;min-width:calc(320px + 5em);min-height:calc((320px + 5em) / 1024 * 954);margin-bottom:15px}.blend-mode .img-group .img img{position:absolute;top:50%;left:50%;-webkit-transform:translate3d(-50%, -50%, 0);transform:translate3d(-50%, -50%, 0);width:auto;max-height:100%}.blend-mode .img-group .background-blend-mode .img{background-image:url("./img/deer.jpg"),url("./img//bg.png");background-size:100% auto, auto 100%;background-position:center center, center center;background-repeat:no-repeat, no-repeat}.blend-mode .img-group .mix-blend-mode{margin-right:15px}.blend-mode .img-group .code{display:inline-block;padding:0.25em 0.75em;border-radius:0.25em;line-height:1.5;color:#ffffff;font-size:14px;letter-spacing:1px;background-color:#282c34}.blend-mode .input-group{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:calc(50vw + 15px);min-width:calc(640px + 10em + 15px)}.blend-mode .input-group .input-item{margin-right:1em;margin-bottom:1em;height:2em;border-radius:1em;letter-spacing:1px;cursor:pointer;overflow:hidden}.blend-mode .input-group .input-item input{display:none}.blend-mode .input-group .input-item .label{width:100%;height:100%}.blend-mode .input-group .input-item .label::before{content:attr(data-label);-webkit-box-sizing:border-box;box-sizing:border-box;display:block;padding-right:1em;padding-left:1em;height:2em;line-height:calc(2em - 2px);text-align:center;border:1px solid #ccc;border-radius:1em}.blend-mode .input-group .input-item .label::after{content:attr(data-label);position:relative;z-index:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:-1em;margin-left:50%;padding-top:0;padding-bottom:0;width:0;height:0;line-height:0;border-radius:50%;white-space:nowrap;color:#fff;background-color:#0075ff;overflow:hidden;-webkit-transition:margin-top .2s,margin-left .2s,padding-top .2s,padding-bottom .2s,width .2s;transition:margin-top .2s,margin-left .2s,padding-top .2s,padding-bottom .2s,width .2s}.blend-mode .input-group .input-item input:checked ~ .label::after{margin-top:calc(-50% - 1em);margin-left:0;padding-top:50%;padding-bottom:50%;width:100%}.art{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-grid;display:grid;grid-template-areas:'normal pencil color-pencil'
 'chalk color-chalk relief';-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);-ms-grid-rows:(calc(50% - 15px))[2];grid-template-rows:repeat(2, calc(50% - 15px));grid-gap:30px;gap:30px;padding:30px}.art .deer{width:100%;height:100%;background-size:contain;background-position:center center;background-repeat:no-repeat}.art .normal{-ms-grid-row:1;-ms-grid-column:1;grid-area:normal;background-image:url("./img/deer.jpg")}.art .pencil{-ms-grid-row:1;-ms-grid-column:2;grid-area:pencil;background-image:url("./img/deer.jpg"),url("./img/deer.jpg");background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px);background-blend-mode:difference;-webkit-filter:brightness(2) invert(1) grayscale(1);filter:brightness(2) invert(1) grayscale(1)}.art .color-pencil{-ms-grid-row:1;-ms-grid-column:3;grid-area:color-pencil;position:relative}.art .color-pencil::before,.art .color-pencil::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-size:contain;background-position:center center;background-repeat:no-repeat}.art .color-pencil::before{background-image:url("./img/deer.jpg"),url("./img/deer.jpg");background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px);background-blend-mode:difference;-webkit-filter:brightness(2) invert(1) grayscale(1);filter:brightness(2) invert(1) grayscale(1)}.art .color-pencil::after{background-image:url("./img/deer.jpg");mix-blend-mode:color}.art .chalk{-ms-grid-row:2;-ms-grid-column:1;grid-area:chalk;background-image:url("./img/deer.jpg"),url("./img/deer.jpg");background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px);background-blend-mode:difference;-webkit-filter:brightness(2) grayscale(1);filter:brightness(2) grayscale(1)}.art .color-chalk{-ms-grid-row:2;-ms-grid-column:2;grid-area:color-chalk;background-image:url("./img/deer.jpg"),url("./img/deer.jpg"),url("./img/deer.jpg");background-position:center center,calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px);background-blend-mode:color, difference;-webkit-filter:brightness(2);filter:brightness(2)}.art .relief{-ms-grid-row:2;-ms-grid-column:3;grid-area:relief;background-image:url("./img/deer.jpg"),url("./img/deer.jpg"),url("./img/deer.jpg");background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px),center center;background-blend-mode:difference, screen;-webkit-filter:brightness(2) invert(1) grayscale(1);filter:brightness(2) invert(1) grayscale(1)}.shuimo .img{position:relative;margin:auto;width:50vw;height:33.3vw}.shuimo .img .layer{position:absolute;top:0;left:0;width:100%;height:100%}.shuimo .img .layer-1{background-image:url("./img/shuimo.jpg"),url("./img/shuimo.jpg");background-size:100% 100%, 100% 100%;background-position:calc(50% - 1px) calc(50% - 1px),calc(50% + 1px) calc(50% + 1px);background-blend-mode:difference;-webkit-filter:brightness(8) invert(1) grayscale(1) contrast(0.5) blur(1px);filter:brightness(8) invert(1) grayscale(1) contrast(0.5) blur(1px)}.shuimo .img .layer-2{background-image:url("./img/shuimo.jpg");background-size:100% 100%;background-position:center center;mix-blend-mode:overlay;-webkit-filter:brightness(1.7) contrast(1.2) saturate(0.2) sepia(0.2) blur(1px);filter:brightness(1.7) contrast(1.2) saturate(0.2) sepia(0.2) blur(1px)}.shuimo .img .layer-3{background-image:url("./img/tree.jpg");background-size:50% 50%;background-position:102% -15%;background-repeat:no-repeat;mix-blend-mode:multiply;-webkit-filter:contrast(2) brightness(1.5) grayscale(1) sepia(0.2) blur(1px);filter:contrast(2) brightness(1.5) grayscale(1) sepia(0.2) blur(1px);-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.shuimo .img .layer-4{background-image:url("./img/boat.jpg");background-size:8% 8%;background-position:2% 50%;background-repeat:no-repeat;mix-blend-mode:multiply;-webkit-filter:contrast(2) brightness(2) grayscale(1) sepia(0.2) blur(1px);filter:contrast(2) brightness(2) grayscale(1) sepia(0.2) blur(1px);-webkit-transform-origin:2% 50%;transform-origin:2% 50%;-webkit-transform:rotate(10deg);transform:rotate(10deg)}.shuimo .img .layer-5{background-image:url("./img/jiangnan.jpg");background-size:40% 40%;background-position:-10% 100%;background-repeat:no-repeat;mix-blend-mode:multiply;-webkit-filter:contrast(2) saturate(0.7) sepia(0.2) blur(1px);filter:contrast(2) saturate(0.7) sepia(0.2) blur(1px)}