@charset "UTF-8";
.activity { width:100%; margin:150px 0 300px; text-align:center; }
.activity>.title { font-family:"Mulish"; font-size:40px; font-weight:500; color:#a2a2a2; }
.activity>.title-sub { font-size:40px; font-weight:500; letter-spacing:-0.3px; }
.activity .top-txt { margin-top:150px; font-size:50px; font-weight:500; line-height:1.5; letter-spacing:-0.3px; color:#136DE8; }
.activity .vertical { width:2px; height:70px; margin:50px auto; background:#136DE8; }
.activity .cont { width:1170px; margin:50px auto 0; display:flex; justify-content:space-between; align-items:center; }
.activity .cont span { font-size:70px; }
.activity .cont-2 { width:1170px; height:580px; margin:150px auto 0; display:flex; justify-content:space-between; }
.activity .cont-2 .case { width:380px; height:100%; position:relative; background-position:top center; background-repeat:no-repeat; background-size:cover; }
.activity .cont-2 .case .wrap { width:330px; height:300px; position:absolute; bottom:0; left:0; background:#fff; }
.activity .cont-2 .case .wrap-en { height:390px; }
.activity .cont-2 .case .wrap .txt { padding:30px 15px; text-align:left; letter-spacing:-0.3px  }
.activity .cont-2 .case .wrap .txt h3 { display:inline-block; position:relative; font-size:28px; font-weight:700; color:#136DE8; }
.activity .cont-2 .case .wrap .txt h3:before { content:''; width:100%; height:2px; display:block; position:absolute; bottom:-10px; left:0; right:0; background:#136DE8; }
.activity .cont-2 .case .wrap .txt ul { margin-top:50px; }
.activity .cont-2 .case .wrap .txt ul li { margin:10px 0 0 12px; position:relative; font-size:18px; font-weight:400; }
.activity .cont-2 .case .wrap .txt ul li:before { content:''; width:6px; height:6px; display:block; position: absolute; top:12px; left:-10px; border-radius:50%; background:#136DE8; }
.activity .cont-3 { width:1170px; margin:150px auto 0; text-align:left; }
.activity .cont-3::after { content:''; display:block; clear:both; }
.activity .cont-3 .head { width:100%; padding:10px 0; display:flex; flex-direction:row-reverse; border-bottom:2px solid #777; color:#333; }
.activity .cont-3 .head select { width:150px; margin-right:10px; padding:2px 10px; border:1px solid #ccc; font-size:16px; font-weight:400; letter-spacing:-0.3px; }
.activity .cont-3 .head .search { width:300px; height:30px; position:relative; border:1px solid #ccc; font-size:16px; font-weight:400; letter-spacing:-0.3px; padding:2px 0; }
.activity .cont-3 .head .search input { width:85%; margin-left:10px; border:0; outline:none; }
.activity .cont-3 .head .search .btn-srch { width:30px; height:30px; position:absolute; top:2px; bottom:0; right:0; display:flex; align-items:center; cursor:pointer; }
.activity .cont-3 .head .search .btn-srch img {width:16px;}
.activity .cont-3 .body { width:calc(100% + 12px); margin:30px 0 0 -6px; }
.activity .cont-3 .body .column { width:360px; height:430px; margin:17px; float:left; box-shadow:0 0 5px 3px rgba(33,33,33,0.2); }
.activity .cont-3 .body .column .img { width:100%; height:230px; position:relative; overflow:hidden; }
.activity .cont-3 .body .column .img img { width:100%; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); transition:0.3s all; }
.activity .cont-3 .body .column .img img.extend { width:120% !important; }
.activity .cont-3 .body .column .txt { padding:30px 20px; text-align:left; letter-spacing:-0.3px; }
.activity .cont-3 .body .column .txt .col-title { font-size:18px; font-weight:500; }
.activity .cont-3 .body .column .txt .col-desc { height:40px; overflow:hidden; font-size:14px; font-weight:300; }
.activity .cont-3 .body .column .txt .foot { margin-top:40px; display:flex; justify-content:space-between; }
.activity .cont-3 .body .column .txt .foot .btn-more { font-family:"Mulish"; font-size:18px; font-weight:800; cursor:pointer; color:#136DE8; }
.activity .cont-3 .body .column .txt .foot .date { font-family:"Mulish"; font-size:15px; font-weight:400; color:#A19F9F; }
.activity .cont-4 { max-width:1170px; margin:100px auto 0; border-top:3px solid #333; text-align:left; }
.activity .cont-4 .head { position:relative; }
.activity .cont-4 .head p { max-width:1000px; padding:30px; font-size:50px; font-weight:500; letter-spacing:-0.3px; color:333; }
.activity .cont-4 .head span { position:absolute; bottom:30px; right:0; font-family:"Mulish"; font-size:20px; color:#A19F9F; }
.activity .cont-4 .body { min-height:600px; border-top:1px solid #999; padding:30px; overflow:hidden; }
.activity .cont-4 .body img { max-width:1000px; }
.activity .cont-4 .foot { border-top:1px solid #999; border-bottom:1px solid #999; padding:20px 0; display:flex; justify-content:space-between; align-items:center; font-weight:500; letter-spacing:-0.3px; }
.activity .cont-4 .foot>div { cursor:pointer; }
.activity .cont-4 .foot .btn-list { border-radius:15px; padding:3px 25px; background:#136DE8; color:#fff; }

@media (max-width:1600px) {
    .activity { margin:150px 0 250px; }
    .activity>.title { font-size:38px; }
    .activity>.title-sub { font-size:38px; }
    .activity .top-txt { margin-top:150px; font-size:56px; }
    .activity .vertical { height:65px; }
}

@media (max-width:1400px) {
    .activity>.title { font-size:36px; }
    .activity>.title-sub { font-size:36px; }
    .activity .top-txt { margin-top:150px; font-size:42px; }
    .activity .vertical { height:60px; }
}

@media (max-width:1200px) {
    .activity { margin:120px 0 230px; }
    .activity>.title { font-size:32px; }
    .activity>.title-sub { font-size:32px; }
    .activity .top-txt { margin-top:120px; font-size:36px; }
    .activity .vertical { height:50px; margin:30px auto; }
    .activity .cont { width:970px; margin:50px auto 0; }
    .activity .cont img { width:250px; }
    .activity .cont span { font-size:60px; }
    .activity .cont-2 { width:970px; height:473px; }
    .activity .cont-2 .case { width:310px; height:100%; }
    .activity .cont-2 .case .wrap { width:268px; height:243px; }
    .activity .cont-2 .case .wrap-en { height:305px; }
    .activity .cont-2 .case .wrap .txt { padding:20px 10px; }
    .activity .cont-2 .case .wrap .txt h3 { font-size:22px; }
    .activity .cont-2 .case .wrap .txt h3:before { height:2px; bottom:-10px; }
    .activity .cont-2 .case .wrap .txt ul { margin-top:30px; }
    .activity .cont-2 .case .wrap .txt ul li { margin:10px 0 0 12px; font-size:15px; }
    .activity .cont-2 .case .wrap .txt ul li:before { width:6px; height:6px; top:8px; left:-10px; }
    .activity .cont-3 { width:970px; margin:150px auto 0; }
    .activity .cont-3 .head { width:100%; padding:10px 0; }
    .activity .cont-3 .head select { width:120px; margin-right:10px; padding:2px 7px; font-size:16px; }
    .activity .cont-3 .head .search { width:250px; height:30px; padding:2px 0; font-size:16px; }
    .activity .cont-3 .head .search input { width:85%; margin-left:10px; }
    .activity .cont-3 .head .search .btn-srch { width:30px; height:30px; top:2px; }
    .activity .cont-3 .head .search .btn-srch img {width:16px;}
    .activity .cont-3 .body { width:calc(100% + 20px); margin:30px 0 0 -10px; }
    .activity .cont-3 .body .column { width:310px; height:375px; margin:10px; }
    .activity .cont-3 .body .column .img { height:200px; }
    .activity .cont-3 .body .column .txt { padding:20px 15px; }
    .activity .cont-3 .body .column .txt .col-title { font-size:16px; }
    .activity .cont-3 .body .column .txt .col-desc { height:40px; font-size:12px; }
    .activity .cont-3 .body .column .txt .foot { margin-top:40px; }
    .activity .cont-3 .body .column .txt .foot .btn-more { font-size:16px; }
    .activity .cont-3 .body .column .txt .foot .date { font-size:13px; }
    .activity .cont-4 { max-width:970px; margin:100px auto 0; }
    .activity .cont-4 .head p { max-width:850px; padding:25px; font-size:36px; }
    .activity .cont-4 .head span { bottom:25px; font-size:16px; }
    .activity .cont-4 .body { min-height:500px; padding:25px; }
    .activity .cont-4 .body p { font-size:14px; }
    .activity .cont-4 .body img { max-width:850px; }
    .activity .cont-4 .foot { padding:15px 0; font-size:14px; }
    .activity .cont-4 .foot .btn-list { padding:3px 20px; }
}

@media (max-width:1000px) {
    .activity>.title { font-size:28px; }
    .activity>.title-sub { font-size:28px; }
    .activity .top-txt { margin-top:100px; font-size:28px; }
    .activity .cont { width:740px; margin:50px auto 0; }
    .activity .cont img { width:200px; }
    .activity .cont span { font-size:50px; }
    .activity .cont-2 { width:740px; height:331px; }
    .activity .cont-2 .case { width:240px; height:100%; }
    .activity .cont-2 .case .wrap { width:217px; height:178px; }
    .activity .cont-2 .case .wrap-en { height:240px; }
    .activity .cont-2 .case .wrap .txt { padding:20px 10px; }
    .activity .cont-2 .case .wrap .txt h3 { font-size:16px; }
    .activity .cont-2 .case .wrap .txt h3:before { height:1px; bottom:-5px; }
    .activity .cont-2 .case .wrap .txt ul { margin-top:20px; }
    .activity .cont-2 .case .wrap .txt ul li { margin:7px 0 0 10px; font-size:12px; }
    .activity .cont-2 .case .wrap .txt ul li:before { width:4px; height:4px; top:7px; left:-8px; }
    .activity .cont-3 { width:740px; margin:150px auto 0; }
    .activity .cont-3 .head { padding:7px 0; }
    .activity .cont-3 .head select { width:100px; margin-right:10px; padding:2px 7px; font-size:14px; }
    .activity .cont-3 .head .search { width:210px; height:24px; padding:2px 0; font-size:14px; }
    .activity .cont-3 .head .search input { width:85%; margin-left:10px; }
    .activity .cont-3 .head .search .btn-srch { width:24px; height:24px; top:2px; }
    .activity .cont-3 .head .search .btn-srch img {width:14px;}
    .activity .cont-3 .body { width:calc(100% + 20px); margin:30px 0 0 -10px; }
    .activity .cont-3 .body .column { width:360px; height:435px; margin:10px; }
    .activity .cont-3 .body .column .img { height:235px; }
    .activity .cont-3 .body .column .txt { padding:20px 15px; }
    .activity .cont-3 .body .column .txt .col-title { font-size:18px; }
    .activity .cont-3 .body .column .txt .col-desc { margin-top:20px; height:60px; font-size:14px; }
    .activity .cont-3 .body .column .txt .foot { margin-top:31px; }
    .activity .cont-3 .body .column .txt .foot .btn-more { font-size:18px; }
    .activity .cont-3 .body .column .txt .foot .date { font-size:15px; }
    .activity .cont-4 { max-width:740px; margin:80px auto 0; }
    .activity .cont-4 .head p { max-width:650px; padding:20px; font-size:32px; }
    .activity .cont-4 .head span { bottom:20px; font-size:14px; }
    .activity .cont-4 .body { min-height:500px; padding:20px; }
    .activity .cont-4 .body p { font-size:13px; }
    .activity .cont-4 .body img { max-width:650px; }
    .activity .cont-4 .foot { padding:15px 0; font-size:13px; }
    .activity .cont-4 .foot .btn-list { padding:3px 18px; }
}

@media (max-width:768px) {
    .activity { margin:100px 0 150px; }
    .activity>.title { font-size:18px; }
    .activity>.title-sub { font-size:18px; }
    .activity .top-txt { margin-top:80px; font-size:18px; }
    .activity .vertical { height:45px; }
    .activity .cont { width:360px; margin:50px auto 0; }
    .activity .cont img { width:100px; }
    .activity .cont span { font-size:20px; }
    .activity .cont-2 { width:240px; height:1083px; margin:100px auto 0; flex-wrap:wrap; }
    .activity .cont-2 .case { height:331px; margin-top:30px; }
    .activity .cont-3 { width:360px; margin:150px auto 0; }
    .activity .cont-3 .head { padding:7px 0; border-bottom:1px solid #777; }
    .activity .cont-3 .head select { width:100px; margin-right:10px; padding:2px 7px; font-size:14px; }
    .activity .cont-3 .head .search { width:210px; height:24px; padding:2px 0; font-size:14px; }
    .activity .cont-3 .head .search input { width:85%; margin-left:10px; }
    .activity .cont-3 .head .search .btn-srch { width:24px; height:24px; top:2px; }
    .activity .cont-3 .head .search .btn-srch img {width:14px;}
    .activity .cont-3 .body { width:100%; margin:0; }
    .activity .cont-3 .body .column { width:340px; height:415px; margin:20px 0 20px 10px; }
    .activity .cont-3 .body .column .img { height:215px; }
    .activity .cont-3 .body .column .txt .col-title { height:52px; }
    .activity .cont-3 .body .column .txt .col-desc { height:40px; }
    .activity .cont-4 { max-width:360px; margin:50px auto 0; }
    .activity .cont-4 .head p { max-width:280px; padding:10px; font-size:20px; }
    .activity .cont-4 .head span { bottom:10px; font-size:12px; }
    .activity .cont-4 .body { min-height:400px; padding:10px; }
    .activity .cont-4 .body p { font-size:12px; }
    .activity .cont-4 .body img { max-width:300px; }
    .activity .cont-4 .foot { padding:10px 0; font-size:12px; }
    .activity .cont-4 .foot .btn-list { padding:3px 15px; }
}



/****************************** Animation ******************************/
.title, .cont img, .case
/* , .cont, .cont-2, .cont-3, .cont-4  */
{ opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease; transition:all 600ms ease; }
.title-sub, .top-txt, .top-txt-2, .vertical { opacity:0; -webkit-transform:translateY(70px);transform:translateY(70px); -webkit-transition:all 600ms ease 100ms; transition:all 600ms ease 100ms; }

.title.ani-visible, .title-sub.ani-visible, .top-txt.ani-visible, .vertical.ani-visible, .top-txt-2.ani-visible
/* , .cont.ani-visible, .cont-2.ani-visible, .cont-3.ani-visible, .cont-4.ani-visible  */
, .cont img.ani-visible, .case.ani-visible { opacity:1; -webkit-transform:translateY(0);transform:translateY(0); }