@import url('/css/animate.css');
#articleStyle21{display:flex;flex-direction:column;align-items:flex-end}
#articleStyle21 .Introduction{width:88%;margin-top:100px}
#articleStyle21 .Introduction:before{content:"";position:absolute;width:90px;margin-left:-36px;margin-top:-50px;aspect-ratio:1/1;background:url(/images/46/ceJarrow.png)}
p.linactice{font-size:max(1.4 * (1vw + 1vh) / 2,18px);text-align:center;padding:20px 0;border-top:#ffffff 1px solid;border-bottom:#ffffff 1px solid;margin-top:30px;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;color:#ffffff}
.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) - 3rem);margin:0rem;cursor:pointer;padding-right:0;padding-left:13px}
.container{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-perspective:1000px;perspective:1000px;padding-right:0;padding-left:0}
.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:#6f6f6f;border:1px solid #ddd;border-radius:0px 0px 40px 0px}
.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;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 .tt{display:flex;flex-direction:column}
.inner .info{padding:40px 30px;display:flex;flex-direction:column;height:100%;justify-content:space-between}
.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:0;overflow:hidden;position:relative}
.inner .photo img{width:100%;height:100%;object-fit:cover;object-position:20% 0}
.inner .tt h3{font-size:max(1.7 * (1vw + 1vh) / 2,18px);margin-bottom:10px;font-weight:600;color:#f1ea0c}
.inner .tt p{font-size:15px;line-height:170%;font-weight:200;margin-bottom:20px;color:#ffffff}
.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}
.container .front{-webkit-transform:rotateY(0deg);transform:rotateY(0deg);-webkit-transform-style:preserve-3d;transform-style:preserve-3d}
.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:max(1.7 * (1vw + 1vh) / 2,18px);line-height:170%;padding:0 0px;margin-bottom:50px;overflow:hidden;text-align:center;margin-top:20px}
.front .inner p b{font-weight:400;font-size:20px;margin-left:10px}
#articleStyle21 .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;-moz-transform:rotate(-90deg);-webkit-transform:rotate(-90deg);-o-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}
.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: 1470px) {
    #articleStyle21 .Introduction{width:93%}
	.inner .photo{height:400px}
	#articleStyle21 .Introduction:before{width:60px}
	.inner .info{height: 320px;overflow:hidden;overflow-y:scroll;margin-right: 20px;margin-top: 16px;}
	.inner .info::-webkit-scrollbar{width:3px;}
	.inner .info::-webkit-scrollbar-track{background:#a3a3a3}
	.inner .info::-webkit-scrollbar-thumb{background:#f1ea0c}
	.inner .info::-webkit-scrollbar-thumb:hover{background:#f1ea0c}

}

@media screen and (max-width: 1160px) {
    .cols{display:flex;flex-wrap:wrap}
	.col{width:47%;display:flex;flex-direction:column;-ms-flex-preferred-size:unset;flex-basis:unset;-ms-flex-positive:unset;flex-grow:unset}
	.inner .photo{height:auto}
}

@media screen and (max-width: 1024px) {
    .front,.back {min-height:550px;}
    .front .inner span {font-size: 16px;}
}
@media screen and (max-width: 980px){
    .col{width:90%;padding-left:0;margin:0 auto 20px}
	#articleStyle21 .Introduction:before{display:none}
	#articleStyle21 .Introduction{width:100%}
	.inner .photo{height:100%}
	.inner .info{height: 405px;overflow:hidden;overflow-y:scroll;margin-top: 30px;}
	.front .inner p{margin-bottom: 20px;}
}
@media screen and (max-width: 480px){
	.col[data-type="1"] .back{min-height: 0;height: 0;}
	.col[data-type="1"] .front{min-height: 420px;}
}