@charset "utf-8";
body{max-width: 1920px;margin: 0 auto;}
.commPad{padding: 80px 8.5vw;}
.commMargin{margin-top: 0;}
.header{width: 100%; padding-top: 32px;background: #fff;margin: 0 auto;padding-bottom: 0;box-shadow: 0px 8px 16px 0px rgba(222,228,246,0.4);}
.header .top{display: flex;justify-content: flex-end;} 
.header .top .logo{display: none;}
.header .menuBtn{width: 60px;height: 60px;cursor: pointer;background-image: url(../images/btn.png);background-repeat: no-repeat;background-position: center;background-size: 28px auto;display: none;}
.header .searchIcon{width: 60px;height: 60px;cursor: pointer;background-image: url(../images/search.png);background-repeat: no-repeat;background-position: center;background-size: 24px auto;margin-left: 10px;display: none;}
.header .search{display: flex;align-items: center;}
.header .search form {display: flex;align-items: center;width: 100%;}
.header .search .input{position: relative;}
.header .search input{width: 330px;height: 44px;border-radius: 5px; border: 1px solid #CCCCCC; font-size: 18px;color: #333;line-height: 44px;padding: 0 20px;}
.header .search .input img{display: block;width: 20px;height: 20px;position: absolute;left: 16px;top: 12px;}
.header .search .searchImg{display: block;width: 20px;height: 20px;margin: 0 30px 0 20px;cursor: pointer;}
.header .search .tj{width: 44px;height: 44px;background-color: transparent; background-image: url(../images/search2.png);background-repeat: no-repeat;background-position: center;background-size: 24px auto;margin: 0 20px 0 10px;cursor: pointer;}
.header .top .lx{width: 116px;height: 44px;background: #0C5195;border-radius: 5px;font-size: 18px;color: #fff;line-height: 44px;text-align: center;display: block;margin-left: 16px;}
.header .top .lx:hover{background: #0c457c;}
.header .language {position: relative;z-index: 3;margin-left: 32px;}
.header .language .lanBox{display: flex;align-items: center;font-size: 18px;color: #292D32;line-height: 40px;cursor: pointer;}
.header .language .lanBox img{display: block;width: 22px;height: 22px;}
.header .language .lanBox .img1{margin-right: 6px;}
.header .language .lxUl{ width: 100px; position: absolute; left: 50%; top: 50px; background: #004990; margin-left: -50px; opacity: 0;visibility: hidden;  transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; z-index: 2; }
.header .language .lxUl::before{content: '';border-bottom: 8px solid #004990;border-left: 8px solid transparent;border-right: 8px solid transparent;position: absolute;top: -8px;left: 50%;margin-left: -8px;}
.header .language .lxUl a{display: block;font-size: 16px;color: #fff;line-height: 38px;text-align: center;}
.header .language.active .lxUl{opacity: 1;visibility: visible;}
.header .nav{display: flex;align-items: center;justify-content: space-between;}
.header .nav .logo{display: block;width: 134px;}
.header .nav .logo img{display: block;width: 100%;}
.header .nav ul{display: flex;}
.header .nav ul li{position: relative;z-index: 1;}
.header .nav ul .a1{font-size: 18px;color: #1A151A;display: block;position: relative;padding: 26px 2.2vw 40px;}
.header .nav ul .a1::after{ content: ''; width: 0; height: 4px; background: #004990; border-radius: 2px; position: absolute; left: 0; right: 0; bottom: 20px; margin: 0 auto; opacity: 0; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; }
.header .nav ul li.active .a1::after,.header .nav ul li:hover .a1::after{opacity: 1;width: 44px;}
.header .nav ul li.active .a1,.header .nav ul li:hover .a1{color: #004990;font-weight: bold;}
.header .nav .down{width: 1040px;max-height: calc(100vh - 116px); background: #F6F7FA;position: absolute;left: 50%;top:100%;margin-left: -520px;z-index: 9;padding: 30px 36px;display: none;box-shadow: inset 0px 8px 16px 0px rgba(222,228,246,0.4);overflow-y: auto; }
.header .nav .down .item{width: 33.33%;}
.header .nav .down .item h3{font-size: 20px;color: #0C5195;line-height: 30px;margin-bottom: 20px;}
.header .nav .down .item a{ font-size: 20px; color: #696969; line-height: 30px; display: block; margin: 10px 0; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease; }
.header .nav .down .item a:hover{ color: #004990; transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px); }   
.header .nav ul li:hover .down{display: flex;}
.header .nav ul li .down.active{display: flex;}
.header .nav .close{width: 60px;height: 60px;cursor: pointer;background-image: url(../images/close2.png);background-repeat: no-repeat;background-position: center;background-size: 24px auto;position: fixed;right: 0;top: 0;z-index: 1;display: none;}
.header .nav ul li dl{width: 190px; position: absolute;left: 50%;top: 100%;margin-left: -80px;display: none;padding: 20px 0;background: #F6F7FA;}
.header .nav ul li dl a{display: block;font-size: 20px; color: #696969; line-height: 30px;padding: 5px 20px;text-align: center;transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease;}
.header .nav ul li dl a:hover{color: #004990;transform: translateX(10px); -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px); -o-transform: translateX(10px);}
.header .nav ul li:hover dl{display: block;}


.more{ width: 160px; height: 54px; background: #FF6633; border-radius: 5px; display: block; font-size: 20px; color: #ffffff; line-height: 54px; padding: 0 42px 0 30px; background-image: url(../images/more.png); background-repeat: no-repeat; background-position: 120px center; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease;margin-right: 16px;text-align: left; }
.more:hover{ transform: translateY(10px) ; -webkit-transform: translateY(10px) ; -moz-transform: translateY(10px) ; -ms-transform: translateY(10px) ; -o-transform: translateY(10px) ; }
.commTit {text-align: center;}
.commTit h3{font-size: 38px;color: #004990;line-height: 1;}
.commTit p{font-size: 18px;color: #696969;line-height: 24px;margin-top: 14px;}

.commTit2{display: flex;align-items: center;justify-content: space-between ;}
.commTit2 .tit h3{font-size: 48px;color: #004990;line-height: 1;white-space: nowrap;}
.commTit2 .tit span{font-size: 18px;color: #282328;line-height: 24px;display: block;margin-top: 16px;}
.commTit2 .tabTit{display: flex;align-items: center;margin-left: 30px;flex-wrap: wrap;}
.commTit2 .tabTit span{display: inline-block;font-size: 20px;color: #282328;line-height: 40px;padding: 0 28px;cursor: pointer;position: relative;margin-bottom: 10px;}
.commTit2 .tabTit span::after{content: '';width: 1px;height: 20px;background: #D8D8D8;position: absolute;right: 0;top: 50%;margin-top: -10px;}
.commTit2 .tabTit span.active,.commTit2 .tabTit span:hover{color: #004990;font-weight: bold;}
.commTit2 .tabTit span:last-child::after{display: none;}

.commTit2 .tabTit a{ display: inline-block; font-size: 20px; color: #282328; line-height: 40px; padding: 0 28px; cursor: pointer; position: relative; border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px;margin-left: 10px;margin-bottom: 10px; }
.commTit2 .tabTit a.active,.commTit2 .tabTit a:hover{color: #ffffff;background: #0C5195;}



.footer{background: #F6F2F2;}
.footer .top{display: flex;align-items: center;justify-content: space-between;padding: 60px 6vw 60px 5vw;}
.footer .top .logo{display: block;width: 134px;}
.footer .top .logo img{display: block;width: 100%;}
.footer .top ul {width: 58vw;text-align: right;}
.footer .top ul li{margin-left: 5vw;width: 126px;display: inline-block;vertical-align: middle;text-align: left;}
.footer .top ul li a{display: block;font-size: 22px;color: #282328;line-height: 40px;}
.footer .top ul li a:hover{color: #FF6633;}
.footer .bot{border-top: 1px solid #FF6633;text-align: center;display: flex;justify-content: flex-end;padding: 15px 7vw 15px 0;align-items: center;}
.footer .bot p{font-size: 18px;color: #737373;line-height: 30px;}
.footer .bot p a{color: #737373;display: inline-block;margin-right: 6vw;}
.footer .bot p span{display: inline-block;margin-left: 30px;}
.footer .bot .aBox{display: flex;align-items: center;margin-left: 6vw;}
.footer .bot .aBox .icon{display: block;width: 34px;height: 34px;background-repeat: no-repeat;background-position: center;background-size: 100%;margin-left: 24px;position: relative;}
.footer .bot .aBox .icon1{background-image: url(../images/icon1.png);}
.footer .bot .aBox .icon2{background-image: url(../images/icon2.png);}
.footer .bot .aBox .icon3{background-image: url(../images/icon3.png);}
.footer .bot .aBox .icon4{background-image: url(../images/icon4.png);}
.footer .bot .aBox .icon5{background-image: url(../images/icon5.png);}
.footer .bot .aBox .icon1:hover{background-image: url(../images/icon1_hover.png);}
.footer .bot .aBox .icon2:hover{background-image: url(../images/icon2_hover.png);}
.footer .bot .aBox .icon3:hover{background-image: url(../images/icon3_hover.png);}
.footer .bot .aBox .icon4:hover{background-image: url(../images/icon4_hover.png);}
.footer .bot .aBox .icon5:hover{background-image: url(../images/icon5_hover.png);}
.footer .bot .aBox .ewm{width: 120px;height: 120px;position: absolute;left: 50%;top:-140px; margin-left: -60px;z-index: 2;opacity: 0;visibility: hidden;}
.footer .bot .aBox .ewm img{display: block;width:  100%;height: 100%;}
.footer .bot .aBox .ewm:after{content: '';border-left: 10px solid transparent;border-right: 10px solid transparent;border-top: 10px solid #ffffff;position: absolute;bottom: -10px;left: 50%;margin-left: -10px;display: inline-block;}
.footer .bot .aBox .icon5:hover .ewm{opacity: 1;visibility: visible;}

.fiexRight{position: fixed;right: 12px;top: 30%;z-index: 99;}
.fiexRight .item{display: block;margin-bottom: 10px;border-radius: 5px;text-align: center;width: 72px;height: 72px; transition: all 500ms ease;-webkit-transition: all 500ms ease;-moz-transition: all 500ms ease;-ms-transition: all 500ms ease;position: relative;background: #FF6633;padding-top: 12px;}
.fiexRight a{color: #fff;}
.fiexRight .item img{display: block;width: 42px;height: 44px;margin: 0 auto;}
.fiexRight .ewmBox{position: absolute;top: 50%;left: -178px;margin-top: -74px;opacity: 0;visibility: hidden;transition: all 500ms ease;-webkit-transition: all 500ms ease;-moz-transition: all 500ms ease;-ms-transition: all 500ms ease;box-shadow: 0 5px 20px rgba(0,0,0,.1);font-size: 0;background: #ffffff;padding: 5px;}
.fiexRight .ewm{width: 140px;height:140px;display: inline-block;vertical-align: top;}
.fiexRight .ewm img{display: block;width: 100%;height: auto;}
.fiexRight .ewmBox:after{content: '';border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #ffffff;position: absolute;right: -10px;top: 50%;margin-top: -10px;display: inline-block;}
.fiexRight .item.active .ewmBox{opacity: 1;visibility: visible;}
.fiexRight .tel{width: 250px;position: absolute;top: 50%;left: -275px;margin-top: -28px;opacity: 0;visibility: hidden;transition: all 500ms ease;-webkit-transition: all 500ms ease;-moz-transition: all 500ms ease;-ms-transition: all 500ms ease;font-size: 24px;color: #ffffff;border-radius: 5px;background: #FF6633;padding: 15px 20px;box-shadow: 0 5px 20px rgba(0,0,0,.1);}
.fiexRight .tel:after{content: '';border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #FF6633;position: absolute;right: -10px;top: 50%;margin-top: -10px;display: inline-block;}
.fiexRight .item.active .tel{opacity: 1;visibility: visible;}
.fiexRight .con{width: 170px;position: absolute;top: 50%;left: -194px;margin-top: -28px;opacity: 0;visibility: hidden;transition: all 500ms ease;-webkit-transition: all 500ms ease;-moz-transition: all 500ms ease;-ms-transition: all 500ms ease;font-size: 24px;color: #ffffff;border-radius: 5px;background: #FF6633;padding: 12px 20px;box-shadow: 0 5px 20px rgba(0,0,0,.1);}
.fiexRight .con:after{content: '';border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-left: 10px solid #FF6633;position: absolute;right: -10px;top: 50%;margin-top: -10px;display: inline-block;}
.fiexRight .item.active .con{opacity: 1;visibility: visible;}


.banner{overflow: hidden;position: relative;}
.banner img{display: block;width: 100%;}
.banner h3{font-size: 80px;color: #fff;line-height: 1;position: absolute;left: 8.5vw;top: 35%;}

.videoTc{width: 100%;height: 100%;background: rgba(0,0,0,.7);position: fixed;top: 0;left: 0;z-index: 9999;display: none;}
.videoBox{width: 1156px;height:650px;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);position: fixed;left: 50%;top: 50%;display: none;z-index: 9999;}
.videoBox .video{width: 100%;height: 100%;overflow: hidden;}
.videoBox video{width: 100%;height: 100%;display: block;}
.videoBox .close{width: 36px;height: 36px;cursor: pointer;background-image: url(../images/close.png);background-repeat: no-repeat;background-position: center;background-size: 100%;position: absolute;right: -40px;top: -40px;transition: all 500ms ease;-webkit-transition: all 500ms ease;-moz-transition: all 500ms ease;-ms-transition: all 500ms ease;-o-transition: all 500ms ease;}

.pages{text-align: right;font-size: 0;margin-top: 40px;}
.pages a { width: 40px; height: 40px; display: inline-block; vertical-align: top; font-size: 18px; color: #222222;line-height: 40px; border: 1px solid #E5E7EB; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px;text-align: center;margin: 0 8px;}
.pages a.active,.pages a:hover{background: #0C5195;color: #fff;}
.pages .prev{width: 40px; height: 40px; display: inline-block; vertical-align: top;background-image: url(../images/jt.png);background-repeat: no-repeat;background-position: center;background-size: auto 16px;}
.pages .next{width: 40px; height: 40px; display: inline-block; vertical-align: top;background-image: url(../images/jt2.png);background-repeat: no-repeat;background-position: center;background-size: auto 16px;}
.pages .prev:hover{background-image: url(../images/jt_hover.png);background-repeat: no-repeat;background-position: center;background-size: auto 16px;}
.pages .next:hover{background-image: url(../images/jt2_hover.png);background-repeat: no-repeat;background-position: center;background-size: auto 16px;}

.crumbs{font-size: 20px;color: #696969;line-height: 30px;padding-top: 24px;padding-bottom: 24px;display: flex;align-items: center;}
.crumbs a{color: #696969;display: inline-block;vertical-align: middle;margin-right: 10px;}
.crumbs span{color: #696969;display: inline-block;vertical-align: middle;margin-left: 10px;}


@media screen and (max-width: 1600px){
    .header .nav ul .a1 {padding: 26px 1.6vw 40px;}
    .commTit2 .tabTit span{padding: 0 24px;}
    .banner h3{font-size: 70px;}
    .commTit2 .tabTit a{font-size: 18px;padding: 0 16px;line-height: 36px;}
}
@media screen and (max-width: 1440px){
    .commPad{padding: 66px 7.5vw;}
    .header{padding-top: 30px;padding-bottom: 0;}
    .header .search input{width: 350px;font-size: 16px;}
    .header .top .lx{font-size: 16px;}
    .header .language .lanBox{font-size: 16px;}
    .header .language .lxUl a{font-size: 14px;line-height: 36px;}
    .header .nav ul .a1{font-size: 16px;padding: 20px 1.6vw 30px;}
    .header .nav ul .a1::after{bottom: 14px;}
    .header .nav .down{max-height: calc(100vh - 147px);}
    .header .nav .down .item h3{font-size: 16px;margin-bottom: 15px;}
    .header .nav .down .item a{font-size: 16px;line-height: 24px;}
    .header .nav ul li dl a{font-size: 16px;line-height: 24px;}
    .more{width: 130px;height: 44px;font-size: 16px;line-height: 44px;padding: 0 24px 0 20px;background-position: 100px center;}
    .commTit h3{font-size: 32px;}
    .commTit p{font-size: 16px;}
    .commTit2 .tit h3{font-size: 40px;}
    .commTit2 .tit span{font-size: 16px;}
    .commTit2 .tabTit span{font-size: 16px;}
    .footer .top{padding: 50px 6vw 50px 5vw;;}
    .footer .top ul li{width: 110px;margin-left: 4vw;}
    .footer .top ul li a{font-size: 18px;}
    .footer .bot p{font-size: 16px;}
    .fiexRight .item{width: 66px;height: 66px;}
    .fiexRight .item img {width: 36px;height: 36px;}
    .fiexRight .ewm img{width: 100%;height: auto;}
    .fiexRight .tel{width: 210px;left: -232px;font-size: 22px;padding: 12px 15px;}
    .fiexRight .con{font-size: 22px;padding: 10px 15px;}
    .commTit2 .tabTit a{font-size: 16px;}
    .crumbs{padding-top: 20px;padding-bottom: 20px;font-size: 16px;}
    .banner h3{font-size: 54px;}
    .pages a{font-size: 16px;}
}
@media screen and (max-width: 1366px){
    
}
@media screen and (max-width: 1199px){
    .commPad{padding: 58px 6.5vw;}
    .header{padding-top: 30px;padding-bottom: 0;}
    .header .search input{width: 330px;font-size: 14px;height: 38px;line-height: 38px;}
    .header .search img{width: 18px;height: 18px;left: 12px;top: 10px;}
    .header .top .lx{width: 90px; height: 38px;font-size: 14px;line-height: 38px;}
    .header .nav ul .a1{padding: 20px 12px 30px;}
    .commTit h3{font-size: 28px;}
    .commTit p{font-size: 14px;}
    .more {width: 120px;height: 40px;font-size: 14px;line-height: 40px;padding: 0 24px 0 20px;background-position: 94px center;}
    .commTit2 .tit h3{font-size: 34px;}
    .commTit2 .tabTit span{font-size: 14px;padding: 0 15px;}
    .commTit2 .tit span{font-size: 14px;margin-top: 10px;}
    .footer .top ul li{width: 90px;}
    .footer .top ul li a{font-size: 16px;}
    .footer .top {padding: 38px 6vw 38px 5vw;}
    .footer .bot{display: block;padding: 15px 5vw;}
    .footer .bot p{font-size: 14px;line-height: 26px;}
    .footer .bot .aBox{margin-left: 0;text-align: center;justify-content: center;margin-top: 20px;}
    .commTit2 .tabTit a{font-size: 14px;padding: 0 12px;margin-left: 5px;}
    .crumbs{padding-top: 20px;padding-bottom: 20px;}
    .pages a{font-size: 14px;width: 36px;height: 36px;line-height: 36px;margin: 0 5px;}
    .videoBox{width: 900px;height:506px;}
}
@media screen and (max-width: 992px){
    .commPad{padding: 35px 15px;}
    .commMargin{margin-top: 60px;}
    .header{padding-top: 0;padding-bottom: 0;padding-right: 0;position: fixed;top: 0;left: 0;z-index: 9999;}
    .header .top{height: 60px;align-items: center;}
    .header .top .logo{display: block;width: 80px;}
    .header .top .logo img{display: block;width: 100%;}
    .header .searchIcon{display: block;}
    .header .search{position: absolute;left: 0;right: 0;top: 100%;margin:0 auto;background: #333;padding: 30px 0;display: none;}
    .header .search .input{width: 280px;margin: 0 auto;}
    .header .search input{width: 280px;}
    .header .search .tj{background-image: url(../images/search3.png);}
    .header .top{justify-content: space-between;}
    .header .top .lx{width: 80px;height: 34px;line-height: 34px;display: none;}
    .header .menuBtn{display: block;}
    .header .nav{ width: 100vw; height: 100vh;background: #fff; position: fixed; top: 0; left: -100%;  opacity: 0; visibility: hidden; transition: all 500ms ease; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; -o-transition: all 500ms ease;z-index: 99999;display: block; }
    .header .nav.active{left: 0;opacity: 1;visibility: visible;}
    .header .nav .logo{width: 100px;margin-top: 20px;margin-left: 30px;}
    .header .nav .close{display: block;}
    .header .nav ul{display: block;margin-top: 30px;height: calc(100vh - 70px);overflow-y: auto;}
    .header .nav ul .a1{display: block;padding: 0 30px;line-height: 50px;}
    .header .nav ul .a1::after{display: none;}
    .header .nav ul li:hover .down{display: none;}
    .header .nav .down{width: 100%;position: static;margin-left: 0;max-height:100%;}
    .header .nav .down .item{width: 100%;}
    .header .nav ul li:hover dl{display: none;}
    .header .nav ul li dl{width: 100%;position: static;margin: 0;padding: 15px 36px;}
    .header .nav ul li dl a{padding: 0;text-align: left;margin: 10px 0;}
    .header .language{margin-left: 10px;}
    .more {width: 104px;height: 36px;font-size: 14px;line-height: 36px;padding: 0 26px 0 16px;background-position: 80px center;margin-right: 10px;}
    .commTit h3{font-size: 26px;}
    .commTit2{display: block;}
    .commTit2 .tit{text-align: center;}
    .commTit2 .tit h3{font-size: 26px;}
    .commTit2 .tit span{margin-top: 6px;}
    .commTit2 .tabTit{display: block;margin-left: 0;overflow-x: auto;white-space: nowrap;margin-top: 10px;}
    .commTit2 .tabTit span{line-height: 30px;}
    .commTit2 .tabTit a{padding: 0 20px;line-height: 30px;}
    .fiexRight .item{width: 50px;height: 50px;}
    .fiexRight .item img {width: 26px;height: 26px;}
    .fiexRight .ewm img{width: 100%;height: auto;}
    .fiexRight .tel{width: 154px;left: -178px;font-size: 16px;padding: 12px 15px;}
    .fiexRight .con{font-size: 16px;padding: 10px 15px;width: 124px;left: -150px;}
    .footer .top{padding: 20px 15px;}
    .footer .top .logo{display: none;}
    .footer .top ul{width: 100%;text-align: left;font-size: 0;}
    .footer .top ul li{width: 25%;margin-left: 0;width: 33.33%;}
    .footer .top ul li a{line-height: 36px;}
    .footer .bot p a{display: block;margin-right: 0;}
    .footer .bot p span{margin-left: 0;display: block;}
    .footer .bot .aBox{margin-top: 10px;}
    .footer .bot .aBox .icon{width: 26px;height: 26px;}
    .footer .bot .aBox .ewm{opacity: 1;visibility: visible;display: none;}
    .banner img{ width: auto; height: 200px; position: relative; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); }
    .banner h3{font-size: 28px;}
    .crumbs{font-size: 14px;padding: 10px 15px;}
    .videoBox{width: 320px;height:180px;}
    .videoBox .close{background-size: 90%;right: 0;top: -54px;}
}