.mop-section{border: 2px solid #ccc; line-height: normal}
.mop-section *{box-sizing: border-box}
.mop-section .section-1{padding: 15px 0}
.mop-section .mop-content{width: 50%; display: table-cell; padding: 30px 50px; border-left: 1px solid #ccc}
.mop-section .mop-content:first-child{border: 0}
.mop-section .mop-content .content-1{float: left; width: 111px}
.mop-section .mop-content .content-1 .action{margin-top: 25px}
.mop-section .mop-content .content-1 .link-button{padding: 5px 10px; background: #0072bc; color: #fff; font-size: 18px; font-weight: 700; white-space: nowrap}
.mop-section .mop-content .content-2{float: left; width: calc(100% - 111px); padding-left: 50px}
.mop-section .mop-content .content-2 h3{font-size: 32px; font-weight: 400}
.mop-section .mop-content .content-2 .des-1{font-size: 18px; margin-top: 20px}
.mop-section .mop-content .content-2 .des-2{font-size: 14px; margin-top: 20px}
.mop-section .section-2{}
.mop-section .mop-video{width: 50%; float: left; position: relative}
.mop-section .mop-video .des-text{position: absolute; width: 100%; bottom: 0; left: 0; text-align: center; font-size: 30px; font-weight: 700; padding: 20px; background: rgba(0, 0, 0, .5); color: #fff}
.mop-section .section-3{padding: 15px 0}
.mop-section .mop-icon-content{width: 33.33%; display: table-cell; padding: 15px 30px; border-left: 1px solid #ccc}
.mop-section .mop-icon-content:first-child{border: 0}
.mop-section .mop-icon-content figure{float: left; width: 66px}
.mop-section .mop-icon-content .des-text{float: left; width: calc(100% - 66px); font-size: 24px; padding: 0 20px; margin-top: 10px}
.mop-section .mop-icon-content .action{text-align: right; margin-top: 5px}
.mop-section .mop-icon-content .action a{font-size: 18px; margin-left: 50px; color: #0072bc}
.mop-section .mop-icon-content .action a:first-child{margin-left: 0}
.mop-section .section-4{background: #f3f3f3}
.mop-section .mop-whatnew-content{width: 33.33%; display: table-cell; background: #f3f3f3; padding: 30px; border-left: 2px solid #fff}
.mop-section .mop-whatnew-content:first-child{border: 0}
.mop-section .mop-whatnew-content .title{font-size: 30px}
.mop-section .mop-whatnew-content .des-text{font-size: 14px; margin-top: 15px}
.mop-section .mop-whatnew-content .action{text-align: right; margin-top: 15px}
.mop-section .mop-whatnew-content .action a{font-size: 18px; color: #0072bc}
.mop-section .mop-caret{width: 11px; height: 14px; display: inline-block; background: url(mop_img/icon-caret.png) no-repeat center}

.mop-section .mop-video .mop-video-container{width: 100%}
.mop-video-container{position: relative; display: inline-block}
.mop-video-container .fancybox-media{position: absolute; width: 86px; height: 86px; text-align: center; top: 50%; left: 50%; margin-top: -43px; margin-left: -43px; opacity: .7}
.mop-video-container .fancybox-media:hover{opacity: 1}

/* ----------- Medium ----------- */
@media (max-width: 1199px){
.mop-section .mop-icon-content{padding: 10px 20px}
.mop-section .mop-icon-content .des-text{font-size: 18px}
.mop-section .mop-icon-content .action a{margin-left: 10px}
}
/* ----------- Small ----------- */
@media (max-width: 991px){

}

@media (max-width: 991px){
.mop-section .mop-content .content-1{float: none}
.mop-section .mop-content .content-2{float: none; width: auto; padding-left: 0; margin-top: 20px}
.mop-section .mop-icon-content{padding: 10px}
.mop-section .mop-icon-content figure{float: none}
.mop-section .mop-icon-content .des-text{float: none; width: auto; padding: 0}
.mop-section .mop-video .des-text{font-size: 18px; padding: 10px}
}
/* ----------- Extra Small ----------- */
@media (max-width: 767px){
.mop-section .mop-content,
.mop-section .mop-icon-content,
.mop-section .mop-whatnew-content{display: block; width: 100%; border: 0; border-top: 1px solid #ccc}
.mop-section .mop-content{padding: 20px}
.mop-section .mop-video{float: none; border: 0; width: 100%}
}

@media (max-width: 479px){

}