@charset "utf-8";
/*****section1*****/
#section1 { margin: 0 auto; position: relative; }
#section1 .arrow { width: 100%; position: absolute; bottom: 7.8rem; left: 0; cursor: pointer; z-index: 100; opacity: 1; animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite; -webkit-animation: arrow 3s cubic-bezier(0.5, 0, 0.1, 1) infinite; }
#section1 .arrow a { width: 124px; display: block; margin: 0 auto; }
#section1 .arrow a dt { width: 19px; height: 19px; background-image: url(../images/ioc3.png); background-repeat: no-repeat; background-size: 100%; display: block; margin: 0 auto; }
#section1 .arrow a dd { width: 100%; text-align: center; padding-top: 10px; color: #FFF; }
#section1 .arrow a:hover { animation-play-state: paused; -webkit-animation-play-state: paused; }
@keyframes arrow { %0, %100 {
 bottom:9rem;
 opacity: 1;
}
 50% {
 bottom:9rem;
 opacity: .5
}
}
 @-webkit-keyframes arrow { %0, %100 {
bottom:7.8rem;
 opacity: 1;
}
 50% {
 bottom:9rem;
 opacity: .5;
}
}
/*****section2*****/
#section2, #section4 { position: relative; margin: 0 auto; padding: 3vw 0; line-height: normal; }
.cplb { width: 48.69%; overflow: hidden; position: relative; margin-bottom: 30px; }
.cplb:nth-of-type(odd) { float: left; }
.cplb:nth-of-type(even) { float: right; }
.cplb a { display: block; color: #FFF; }
.cplb a dt { width: 100%; overflow: hidden; position: relative; background: #000; }
.cplb a dt img { opacity: 0.8; -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale3d(1.05, 1.05, 1); transform: scale3d(1.05, 1.05, 1); }
.cplb a dt i::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 10; background: rgba(255,255,255,0.5); content: ''; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0); }
.cplb a:hover dt img { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
.cplb a:hover dt i::before { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0); }
.cplb a dd { width: 100%; overflow: hidden; position: absolute; bottom: 0; left: 0; z-index: 10; }
.cplb a dd span { display: block; margin-left: 9%; float: left; height:3.8vw; line-height:3.8vw; font-weight: bolder; margin-right: 9%; }
.cplb a dd i { width:3.8vw; height:3.8vw; line-height:3.8vw; display: block; background:rgba(0, 0, 0, .4); float: right; color: #FFF; text-align:center; }
.cplb a:hover { color: #FFF; }
.cplb a:hover dd i { background: #d40e25; }
@media screen and (max-width: 1700px) and (min-width:1025px) {
.cplb { margin-bottom: 20px; }
}
@media screen and (max-width: 1024px) and (min-width: 0px) {
.cplb { width: 49%; margin-bottom: 15px; }
.cplb a dt i { display: none; }
.cplb a dd span{ margin-left:5%; margin-right: 5%;}
}

@media screen and (max-width:768px) and (min-width: 0px) {

.cplb a dd span { height:50px; line-height:50px; }
.cplb a dd i { width:50px; height:50px; line-height:50px;}
}

@media screen and (max-width:420px) and (min-width: 0px) {

.cplb a dd span { height:30px; line-height:30px; }
.cplb a dd i { width:30px; height:30px; line-height:30px;}
}


/*****section3*****/
#section3 { position: relative; margin: 0 auto; padding: 3vw 0; line-height: normal; background: #f3f3f3; }
.titg a { color: #d9253a; }