.home .banner { width: 100%; position: relative; }
.home .banner img { width: 100%; display: block; object-fit: cover; }
.home .banner .text { position: absolute; left: 0; bottom: -20px; width: 100%; color: white; text-align: center; }
.home .banner .text .p1 { font-size: 40px; }
.home .banner .text .p2 { font-weight: lighter; font-size: 20px; margin: 40px 0 15px 0; }
.home .banner .text .line { width: 1px; height: 240px; background: rgba(242, 242, 242, 0.2); margin: 0 auto; position: relative; overflow: hidden; }
.home .banner .text .line::before { content: ""; display: block; width: 1px; height: 25px; background: #F2F2F2; position: absolute; left: 0; top: 0; animation: down 4s infinite linear; }
@keyframes down {
 from {
 top: 0;
}
 to {
 top: 100%;
}
}
.home .main { width: 80%; margin: 80px auto; }
.home .main .d1 { border-bottom: 1px solid rgba(38, 51, 70, 0.2); padding-bottom: 30px; display: flex; justify-content: space-between; align-items: center; }
.home .main .d1 .title { color: #111010; font-size: 34px; font-weight: bolder; }
.home .main .d1 .chose { transform: translateY(10px); }
.home .main .d1 .chose select { padding: 5px 0; }
.home .main .allItems { width: 100%; display: flex; flex-wrap: wrap; margin: 60px 0; }
.home .main .allItems a { display: block; width: 25%; margin-bottom: 40px; text-align: center; }
.home .main .allItems a .pic img { width: 100%; display: block; object-fit: contain; height: 300px; transition: all 600ms; }
.home .main .allItems a p { color: #333333; font-size: 18px; margin-top: 20px; transition: all 600ms; }
.home .main .allItems a:hover .pic img { transform: scale(1.05); }
.home .main .allItems a:hover p { color: #0C4AB0; }
.home .main .pager { width: 100%; display: flex; justify-content: center; }
.home .main .pager a { width: 32px; height: 32px; background: #EFEFEF; display: flex; align-items: center; justify-content: center; margin: 0 5px; position: relative; transition: all 600ms; color: #666666; font-size: 18px; }
.home .main .pager a img { transition: all 600ms; }
.home .main .pager a img:nth-child(2) { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; }
.home .main .pager a:hover { background: #0C4AB0; color: white; }
.home .main .pager a:hover img:nth-child(1) { opacity: 0; }
.home .main .pager a:hover img:nth-child(2) { opacity: 1; }
.home .main .pager .active { background: #0C4AB0; color: white; }
.home .main .pager .prev img:nth-child(2) { transform: translate(-50%, -50%) rotateY(180deg); }
.home .main .pager .next { transform: rotateY(180deg); }
.home .main .pager .next img:nth-child(2) { transform: translate(-50%, -50%) rotateY(180deg); }
.mySelect { float: left; position: relative; height: 60px; line-height: 60px; font-size: 18px; color: #58575d; color: rgba(88, 87, 93, .8); z-index: 100; margin-right: 30px; width: 380px; }
.mySelect .show { z-index: 1; position: relative; padding-left: 30px; width: 100%; height: 60px; line-height: 60px; cursor: pointer; transition-duration: .4s; border: 2px solid #f0f0f0; color: #6d5647; box-sizing: border-box; }
.mySelect .show:after { content: ''; position: absolute; top: -2px; right: 0; width: 77px; height: 60px; background: #f0f0f0; transition-duration: .5s; -webkit-transition-duration: .5s; }
.mySelect .drapList { display: none; position: absolute; top: 70px; left: 0; padding: 10px 0; overflow: auto; width: 100%; background-color: #fff; border: 2px solid #0075C3; }
.mySelect .drapList ul { overflow: hidden; overflow-y: auto; max-height: 160px; }
.mySelect .drapList li { padding: 0 30px; line-height: 40px; cursor: pointer; }
.mySelect .drapList li a { color: #333; display: block; }
.mySelect .drapList li a:hover { color: #0075C3; }
.mySelect .drapList li:hover { background-color: #f1f1f1; }
.mySelect .show:before { content: ''; position: absolute; top: 50%; right: 28px; z-index: 2; margin-top: -6px; width: 20px; height: 11px; background: url(arrow_down_white.png); transition-duration: .5s; -webkit-transition-duration: .5s; }
.mySelect .show.on, .mySelect .show:hover { border-color: #0075C3; }
.mySelect .show.on:after, .mySelect .show:hover:after { background-color: #0075C3; }
.mySelect .show.on:before, .mySelect .show:hover:before { background: url(arrow_down_white_on.png); }

@media screen and (max-width: 1200px) {
.home .banner img { height: 320px; }
.home .banner .text .p1 { font-size: 24px; }
.home .banner .text .p2 { margin: 15px 0; }
.home .banner .text .line { height: 100px; }
.home .main { width: 90%; margin: 30px auto; }
.home .main .d1 { flex-direction: column; }
.home .main .d1 .title { font-size: 34px; margin-bottom:20px; }
.home .main .allItems { margin: 30px 0; justify-content: space-between; }
.home .main .allItems a { width: 49%; margin-left: 0; margin-bottom: 20px; }
.home .main .allItems a .pic img { }
.home .main .allItems a p { font-size: 16px; }
}

/*# sourceMappingURL=magazine.css.map */