*{box-sizing:border-box}body{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-image:url(../images/test/3-2.jpg);background-repeat:repeat;background-size:cover;background-color:rgba(255,255,255,0.5);background-blend-mode:lighten;height:100vh;font-family:'Montserrat', sans-serif}body::after{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background-color:#fff;z-index:99;pointer-events:none;opacity:0;-webkit-transition:opacity 1.2s ease-in;transition:opacity 1.2s ease-in}body.fadeout::after{opacity:1}.select-title{margin:10.5em 0 0 0;font-size:1.1em;font-family:'游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;color:#d1a871;font-weight:500;text-shadow:0 0 50px rgba(129,106,4,0.9)}.unit-block{margin:2em 0 0 0;display:grid;grid-gap:8px;grid-template-columns:repeat(4, 1fr);flex:1}.wrapper{display:flex;flex-flow:row wrap;justify-content:center}div[class^="card"]{width:50px;height:60px;margin:0.5em;perspective:1500px}div[class^="card"] .content{position:relative;transform-style:preserve-3d;transition:transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);width:50px;height:60px}div[id^="turn-over"]{opacity:0;-webkit-transform:translateY(-35%);-ms-transform:translateY(-35%);transform:translateY(-35%)}div[id^="turn-over"]:nth-child(1){-webkit-animation:example .1s ease .2s 1 forwards;animation:example .1s ease .2s 1 forwards}div[id^="turn-over"]:nth-child(2){-webkit-animation:example .1s ease .4s 1 forwards;animation:example .1s ease .4s 1 forwards}div[id^="turn-over"]:nth-child(3){-webkit-animation:example .1s ease .6s 1 forwards;animation:example .1s ease .6s 1 forwards}div[id^="turn-over"]:nth-child(4){-webkit-animation:example .1s ease .8s 1 forwards;animation:example .1s ease .8s 1 forwards}div[id^="turn-over"]:nth-child(5){-webkit-animation:example .1s ease 1s 1 forwards;animation:example .1s ease 1s 1 forwards}div[id^="turn-over"]:nth-child(6){-webkit-animation:example .1s ease 1.2s 1 forwards;animation:example .1s ease 1.2s 1 forwards}div[id^="turn-over"]:nth-child(7){-webkit-animation:example .1s ease 1.4s 1 forwards;animation:example .1s ease 1.4s 1 forwards}div[id^="turn-over"]:nth-child(8){-webkit-animation:example .1s ease 1.6s 1 forwards;animation:example .1s ease 1.6s 1 forwards}div[id^="turn-over"]:nth-child(9){-webkit-animation:example .1s ease 1.8s 1 forwards;animation:example .1s ease 1.8s 1 forwards}div[id^="turn-over"]:nth-child(10){-webkit-animation:example .1s ease 2s 1 forwards;animation:example .1s ease 2s 1 forwards}div[id^="turn-over"]:nth-child(11){-webkit-animation:example .1s ease 2.2s 1 forwards;animation:example .1s ease 2.2s 1 forwards}div[id^="turn-over"]:nth-child(12){-webkit-animation:example .1s ease 2.4s 1 forwards;animation:example .1s ease 2.4s 1 forwards}div[id^="turn-over"]:nth-child(13){-webkit-animation:example .1s ease 2.6s 1 forwards;animation:example .1s ease 2.6s 1 forwards}div[id^="turn-over"]:nth-child(14){-webkit-animation:example .1s ease 2.8s 1 forwards;animation:example .1s ease 2.8s 1 forwards}div[id^="turn-over"]:nth-child(15){-webkit-animation:example .1s ease 3s 1 forwards;animation:example .1s ease 3s 1 forwards}div[id^="turn-over"]:nth-child(16){-webkit-animation:example .1s ease 3.2s 1 forwards;animation:example .1s ease 3.2s 1 forwards}@keyframes example{100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.more{display:none}.more:checked ~ .content{transform:rotateY(180deg)}.front,.back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;transform-style:preserve-3d;border-radius:6px}.front .inner,.back .inner{height:100%;display:grid;transform:translateZ(20px) scale(0.94)}.front{background-image:url(../images/test/sebyoushi.jpg);background-color:#fff;background-size:cover;background-position:center center}.front:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;display:block;border-radius:6px;backface-visibility:hidden;background:linear-gradient(40deg, rgba(67,138,243,0.1), rgba(255,242,166,0.1))}.front .inner{justify-items:center}.front h2{grid-row:2;margin-bottom:0.3em;text-transform:uppercase;letter-spacing:3px;color:#fff;font-weight:500;text-shadow:0 0 6px rgba(0,0,0,0.1)}.front .id-tag{padding:0;font-size:8px}.front .rating{grid-row:3;color:rgba(255,255,255,0.8);font-size:10px;display:flex;flex-flow:row nowrap}.front .rating i{margin:0 1px}.back{transform:rotateY(180deg);background-color:#fff;border:2px solid #f0f0f0}.back .inner{grid-template-rows:1fr 2fr 1fr 2fr 14fr 1fr 1fr;grid-column-gap:0.8em;justify-items:center}.back .info{position:relative;display:flex;align-items:center;color:#355cc9;grid-row:3}.back .info:not(:first-of-type):before{content:'';position:absolute;left:-0.9em;height:18px;width:1px;background-color:#ccc}.back .info span{font-size:0.8em;font-weight:700}.back .info i{font-size:1.2em}.back .info i:before{background:linear-gradient(40deg, #355cc9, #438af3);-webkit-text-fill-color:transparent}.back .info .icon{margin-left:0.3em}.back .info .icon span{display:block;margin-top:-0.25em;font-size:0.8em;font-weight:600;white-space:nowrap}.back .description{grid-row:5;grid-column:1/-1;font-size:0.86em;border-radius:5px;font-weight:600;line-height:1.4em;overflow:auto;color:#355cc9;padding-right:10px}.back .location,.back .price{font-weight:600;color:#355cc9;grid-row:1;font-size:0.86em}.back .location{grid-column:1/3;justify-self:left}.back .price{grid-column:3/-1;justify-self:right}.back .button{grid-column:1/-1;justify-self:center}.button{grid-row:-1;text-transform:uppercase;letter-spacing:1px;font-weight:600;cursor:pointer;display:block;line-height:1.2em;background-color:transparent;color:#fff;border-radius:2px;text-align:center;left:50%;backface-visibility:hidden;transition:0.3s ease-in-out;font-size:8px}.button:hover{color:#355cc9}.button:after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:transparent}.button.return{line-height:3em;color:#355cc9;border-color:#355cc9;text-shadow:none}.button.return:hover{background-color:#355cc9;color:#fff;box-shadow:none}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#859ddf}::-webkit-scrollbar-thumb:hover{background:#355cc9}@media (min-width: 760px){.unit-block{margin:5em 0 0 0;display:grid;grid-gap:18px;grid-template-columns:repeat(4, 1fr)}div[class^="card"]{width:150px;height:180px;margin:0em;perspective:1500px}div[class^="card"] .content{position:relative;transform-style:preserve-3d;transition:transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);width:150px;height:180px}.select-title{margin:8em 0 0 0;font-size:1.5em}.front,.back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;transform-style:preserve-3d;border-radius:6px}.front .inner,.back .inner{height:100%;display:grid;padding:1.5em;transform:translateZ(80px) scale(0.94)}.front{background-image:url(../images/test/sebyoushi.jpg);background-color:#fff;background-size:cover;background-position:center center}.front:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;display:block;border-radius:6px;backface-visibility:hidden;background:linear-gradient(40deg, rgba(67,138,243,0.3), rgba(255,242,166,0.3))}.front .inner{justify-items:center}.front h2{grid-row:2;margin-bottom:0.3em;text-transform:uppercase;letter-spacing:3px;color:#fff;font-weight:500;text-shadow:0 0 6px rgba(0,0,0,0.1)}.front .id-tag{padding:0;font-size:14px}.front .rating{grid-row:3;color:rgba(255,255,255,0.8);font-size:10px;display:flex;flex-flow:row nowrap}.front .rating i{margin:0 1px}.button{text-transform:uppercase;letter-spacing:1px;font-weight:600;cursor:pointer;display:block;padding:0 1.5em;height:3em;line-height:2.9em;min-width:3em;background-color:transparent;border:solid 0px #fff;color:#fff;border-radius:4px;text-align:center;left:50%;backface-visibility:hidden;transition:0.3s ease-in-out;text-shadow:transparent;font-size:14px}.button:hover{background-color:transparent;box-shadow:none;text-shadow:transparent;color:#355cc9}.button:after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:transparent}.button.return{line-height:3em;color:#355cc9;border-color:#355cc9;text-shadow:none}.button.return:hover{background-color:#355cc9;color:#fff;box-shadow:none}}@media (min-width: 990px){.test-space{margin-top:41em}.select-title{margin:6em 0 0em 0;font-size:1.5em;color:#d1a871;font-weight:500;text-shadow:0 0 50px rgba(129,106,4,0.9)}.unit-block{margin:5em 0 0 0;display:grid;grid-gap:16px;grid-template-columns:repeat(4, 1fr)}div[class^="card"]{width:200px;height:240px;margin:1em;perspective:1500px}div[class^="card"] .content{position:relative;transform-style:preserve-3d;transition:transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);width:200px;height:240px}.front,.back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden;transform-style:preserve-3d;border-radius:6px}.front .inner,.back .inner{height:100%;display:grid;padding:1.5em;transform:translateZ(20px) scale(0.94)}.front{background-image:url(../images/test/sebyoushi.jpg);background-color:#fff;background-size:cover;background-repeat:no-repeat;background-position:center center}.front:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;display:block;border-radius:6px;backface-visibility:hidden;background:linear-gradient(40deg, rgba(67,138,243,0.1), rgba(255,242,166,0.1))}.front .inner{grid-template-rows:5fr 1fr 1fr 2fr 1fr;display:block;justify-items:center;padding:0}.front h2{grid-row:2;margin-bottom:0.3em;text-transform:uppercase;letter-spacing:3px;color:#fff;font-weight:500;text-shadow:0 0 6px rgba(0,0,0,0.1)}.front .id-tag{padding:0;font-size:18px}.front .rating{grid-row:3;color:rgba(255,255,255,0.8);font-size:10px;display:flex;flex-flow:row nowrap}.front .rating i{margin:0 1px}.button{grid-row:-1;text-transform:uppercase;letter-spacing:1px;font-weight:600;cursor:pointer;display:block;padding:0;height:240px;line-height:2.9em;min-width:200px;background-color:transparent;color:#fff;border-radius:4px;text-align:center;left:0%;backface-visibility:hidden;transition:0.3s ease-in-out;text-shadow:0 0 50px rgba(0,0,0,0.3);font-size:18px}.button:hover{background-color:rgba(255,255,255,0);box-shadow:0 0 30px rgba(221,71,11,0.7);text-shadow:transparent;color:#355cc9}.button:after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:auto;content:"";background-color:transparent}.button.return{line-height:3em;color:#355cc9;border-color:#355cc9;text-shadow:none}.button.return:hover{background-color:#355cc9;color:#fff;box-shadow:none}}