.selectBox{text-align:center}
.selectBox select{width:15%;margin:0 auto 40px;-webkit-appearance:none;background:url(/images/40/arrow.png) no-repeat scroll 98% center #ffffff;background-repeat:no-repeat;background-position:98% 50%}
.cols{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center}
.col{width:calc((100%/3) - 4rem);margin:2rem;cursor:pointer}
.container{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1000px;perspective:1000px}
.front,.back{background-size:cover;background-position:center;-webkit-transition:-webkit-transform .7s cubic-bezier(0.4,0.2,0.2,1);transition:-webkit-transform .7s cubic-bezier(0.4,0.2,0.2,1);-o-transition:transform .7s cubic-bezier(0.4,0.2,0.2,1);transition:transform .7s cubic-bezier(0.4,0.2,0.2,1);transition:transform .7s cubic-bezier(0.4,0.2,0.2,1),-webkit-transform .7s cubic-bezier(0.4,0.2,0.2,1);-webkit-backface-visibility:hidden;backface-visibility:hidden;text-align:center;height:auto;color:#fff}
.back{background:#ffffff;border:1px solid #ddd;border-radius:35px}
.col[data-type="2"] .front,.col[data-type="2"] .back{-webkit-transition:-webkit-transform .7s cubic-bezier(0.4,0.2,0.2,1);transition:-webkit-transform .7s cubic-bezier(0.4,0.2,0.2,1);-o-transition:transform .7s cubic-bezier(0.4,0.2,0.2,1);transition:transform .7s cubic-bezier(0.4,0.2,0.2,1);transition:transform .7s cubic-bezier(0.4,0.2,0.2,1),-webkit-transform .7s cubic-bezier(0.4,0.2,0.2,1)}
.back{position:absolute;top:0;left:0;width:100%;height:100%}
.back .inner{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.inner{left:0;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;outline:1px solid transparent;-webkit-perspective:inherit;perspective:inherit;z-index:2;text-align:center}
.inner .info{padding:30px}
.inner .info .tt a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;border-bottom:1px dashed #d9d9d9;padding-bottom:10px;margin-bottom:10px}
.inner .info .tt a:last-child{border-bottom:0}
.inner .info .tt a img{width:130px;height:130px;object-fit:contain}
.inner .info .tt a p{width:calc(100% - 150px);font-size:22px;font-weight:500;color:var(--primary);line-height:140%}
.inner .info .tt a p b{display:block;font-size:14px;font-weight:400;margin-top:5px}
.inner .photo{height: 550px;border-radius:35px;overflow:hidden;position: relative;}
.inner .photo img{width:100%;height:100%;object-fit:cover;object-position: 20% 0;}
.inner .tt h3{font-size:18px;margin-bottom:10px}
.inner .tt p{font-size:16px;line-height:170%;font-weight:300;margin-bottom:20px}
.container .back{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.container .back .backbg{position:absolute;width:100%;height:100%}
.container .back .backbg img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.container .front{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;background:#fff}
.col[data-type="2"] .back{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;height:100%}
.col[data-type="2"] .front{-webkit-transform:rotateY(-180deg);transform:rotateY(-180deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.front .inner h2{font-size:18px;margin-top:15px;position:relative;font-weight:300;line-height:170%;padding:0 30px;text-align:center}
.front .inner p:after{content:'';width:2rem;height:1px;background:var(--primary);display:block;margin:10px auto 0}
.front .inner p{font-weight:400;font-size:23px;line-height:170%;padding:0 30px;margin-bottom:50px;overflow:hidden;text-align:center;margin-top: 20px;}
.front .inner p b{font-weight:400;font-size:20px;margin-left:10px}
.inner .more{padding: 10px 0;position: absolute;display:flex;align-items:center;justify-content:center;bottom: 0;width: 100%;background: #3a6ab3;color: #fff;}
.inner .more span{display:flex;margin-left:10px;-webkit-transition-duration:.2s;transition-duration:.2s;align-items:center;justify-content:center}
.inner .more span svg{width:14px;height:14px;fill: #fff;}
.inner .more:hover span{right:15px}

@media screen and (max-width:64rem){
	.col{width: calc(50% - 4rem);}
}
@media screen and (max-width:48rem){
	.col{width: calc(50% - 2rem);margin: 1rem;}
	.selectBox select{width:35%}
	.inner .photo{height: 450px;}
}
@media screen and (max-width:32rem){
	.col{width:100%;margin:0 0 2rem 0}
	.selectBox select{width:80%}
}
@media screen and (max-width:1024px){
	.front,.back{min-height:550px}
	.front .inner span{font-size:16px}
}