/* wrap */
.wrap{background:#efefef;padding-bottom: 80px;}
.workframe{width: 1220px;}

/* more */
p.more {display: flex;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}
p.more a{display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;width: 150px;height: 45px;font-size: 14px;font-weight: 600;letter-spacing: 1px;color: #1f1e1e;background: #fff;-webkit-transition: all 0.4s ease;-o-transition: all 0.4s ease;transition: all 0.4s ease;border-radius: 50px;}
p.more a:hover {}
p.more a span{margin-left: 17px;position: relative;display: inline-block;width: 17px;height: 17px;-webkit-animation: 2s antiBtn ease-out infinite;animation: 2s antiBtn ease-out infinite;opacity: 0;}
@keyframes antiBtn {0% {-webkit-transform: translateX(-5px);transform: translateX(-5px);opacity: 0;}80% {-webkit-transform: translateX(5px);transform: translateX(5px);opacity: 1;}100% {-webkit-transform: translateX(5px);transform: translateX(5px);opacity: 0;}}
p.more a span:before {content: "";position: absolute;top: 5px;right: 0;width: 17px;height: 7px;background-repeat: no-repeat;background-image: url(/images/02/arrow2.png);background-size: contain;}

/* banner */
#visul #banner{width: 100%;}
#banner .btn {width: 1000px;display: none;}

/* firstBox */
#firstBox{display: flex;flex-direction: row;flex-wrap: wrap;}
#firstBox .area{width: calc(100%/3);}
#firstBox .area .box{padding: 40px 0;position: relative;}
#firstBox .area .box:after{content:'';position:absolute;width: 1px;height: 60px;background: #e6e8e6;bottom: -30px;left: 50%;z-index: 1;}
#firstBox .area:nth-child(2) .box{background: #fafafa;}
#firstBox .area .box p{text-align: center;font-family: 'Lato', sans-serif !important;color: #c6c4c4;font-size: 14px;text-transform: uppercase;}
#firstBox .area .box h3{text-align: center;font-size: 26px;}
#firstBox .area .box h6{text-align: center;color: #0e0e0e;font-size: 18px;font-weight: 400;}
#firstBox .areaBox{position: relative;}
#firstBox .areaBox .photo{background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: relative;}
#firstBox .areaBox .photo:after{content:'';position:absolute;width: 100%;height: 100%;top: 0;left: 0;background: #181818;opacity: .75;}
#firstBox .areaBox .content{position: absolute;top: 0;height: calc(100% - 140px);color: #fff;padding: 70px 100px;width: calc(100% - 200px);}
#firstBox .areaBox .content h3{font-size: 26px;}
#firstBox .areaBox .content p{font-size: 16px;line-height: 180%;letter-spacing: 2px;overflow: hidden;height: 57px;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}

/* twoBox */
#twoBox{display: flex;justify-content: space-between;flex-wrap: wrap;padding: 60px 0 35px;}

/* bnanaBox */
#bnanaBox{position:relative;background-image: url(/userfiles/images/banner/20230107072157725.jpg);background-position: 100% 50%;}

/* newsBox */
#newsBox{width:48%;border-radius: 5px;background: #fefefe;overflow: hidden;}
#newsBox .titleBox .leftBox, #analysis .titleBox .leftBox{display:flex;background: linear-gradient(to left,#36b13a,#1d6a1c);justify-content: space-between;align-items: center;padding: 10px 30px 15px;}
#newsBox .bd{background: #ffffff;width: calc(90% - 70px);margin: -15px auto 30px;border-radius: 5px;box-shadow: 0 0 10px rgb(0 0 0 / 20%);padding: 35px 35px 5px;}
#newsBox .bd li{display:flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin-bottom: 30px;}
#newsBox .bd li .newPhoto{width: 43%;}
#newsBox .bd li .newPhoto .photo{position:relative;background-size: cover;background-position: 50% 50%;border-radius: 5px;}
#newsBox .bd li .newPhoto .photo img{width:100%;}
#newsBox .bd li .newPhoto .photo b{position:absolute;background: #36b13a;bottom: 5px;left: 5px;color: #fff;font-size: 14px;font-weight: 300;padding: 3px 15px;line-height: 150%;border-radius: 5px;}
#newsBox .bd li .info{width:50%;}
#newsBox .bd li .info p{font-family: 'Lato', sans-serif !important;font-size: 14px;background: #535353;display: inline-block;color: #fff;padding: 0 20px;border-radius: 5px;}
#newsBox .bd li .info h4{margin:10px 0;}
#newsBox .bd li .info h4 a{color:#151515;font-size: 18px;line-height: 140%;display: block;overflow: hidden;height: 47px;text-align: justify;}
#newsBox .bd li .info article{color:#777373;font-size: 14px;overflow: hidden;height: 60px;line-height: 150%;text-align: justify;}

/* analystBox */
#analystBox{width: 25%;position: absolute;right: 0px;z-index: 3;top: 0;background: #fefefe;height: 100%;display: none;}
#analystBox .titleBox, #analysis .titleBox{}
#analystBox .leftBox h4{height: 70px;line-height: 70px;text-align: center;background: linear-gradient(to right,#52068c,#01023b);font-size: 25px;color: #fff;}
#analystBox .leftBox h4 b, #analysis .titleBox h4 b{color: #33aa3c;}
#analystBox .leftBox h6, #analysis .titleBox h6{font-family: 'Lato', sans-serif !important;color: #c6c4c4;font-size: 14px;text-transform: uppercase;}
#analystBox p.more, #analysis p.more{margin: 0;}
#analystBox .slick-prev{left: 0;top: 50%;z-index:9;width:40px;height:40px;}
#analystBox .slick-next{right: 0;top: 50%;z-index:9;width:40px;height:40px;}
#analystBox .slick-prev:before{ content: url(/images/02/scrrow01.png);}
#analystBox .slick-next:before{ content: url(/images/02/scrrow02.png);}
#analystBox .slick-prev:before, #analystBox .slick-next:before{color:#91cec8;font-size:26px;}
#analystBox ul { margin: 38px 0;}
#analystBox li{display: flex;flex-direction: column;align-items: center;padding: 0 60px;justify-content: center;}
#analystBox li .newImg{width: 90%;border-radius: 50%;overflow: hidden;border: 10px solid #eeeeee;margin-bottom: 20px;}
#analystBox li .newImg .photo{background-position: 50% 50%;background-size: cover;}
#analystBox li .info{width: 90%;}
#analystBox li .info h3{line-height: 100%;text-align: center;}
#analystBox li .info h3 a{font-size: 35px;color: #333;line-height: 150%;display: block;text-align: center;}
#analystBox li .info h3 b{color: #969595;font-size: 16px;letter-spacing: 1px;font-weight: normal;display: block;line-height: 150%;}
#analystBox li .info article{overflow: hidden;height: 38px;line-height: 130%;color: #2a2929;font-size: 16px;text-align: center;}

/* rightBox */
#rightBox{width: 48%;position: relative;}
#rightBox .bottomBox{border-radius: 5px;overflow: hidden;position: absolute;bottom: 0;left: 0;}

/* analysis */
#analysis{border-radius: 5px;background: #fefefe;overflow: hidden;}
#analysis ul{background: #ffffff;width: calc(90% - 70px);margin: -15px auto 30px;border-radius: 5px;box-shadow: 0 0 10px rgb(0 0 0 / 20%);padding: 35px 35px 5px;}
#analysis .titleBox h4, #newsBox .titleBox h4{height: 70px;line-height: 70px;text-align: center;font-size: 25px;color: #fff;}
#analysis li{border-bottom:1px solid #eeeeee;display: flex;padding-bottom: 11.5px;margin-bottom: 11px;align-items: center;}
#analysis li:last-child{border:0;}
#analysis li b{font-family: 'Lato', sans-serif !important;color: #333333;font-size: 15px;width: 100px;font-weight: 700;}
#analysis li h3{width: calc(100% - 90px);position: relative;display: flex;align-items: center;}
#analysis li h3 a{font-size: 16px;color: #333333;font-family: 'Lato','cwTeXYen', serif !important;overflow: hidden;height: auto;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;width: 90%;}
#analysis li h3 i{color: #6f6f6f;position: absolute;right: 0;}

/* recommendBox */
#recommendBox{background:#eeeeee;padding: 65px 0;}
#recommendBox h4{font-size:26px;margin-bottom: 30px;}
#recommendBox h4 b{font-size:14px;margin-left:10px;color: #c6c4c4;font-family: 'Lato', sans-serif !important;text-transform: uppercase;font-weight: 500;}
#recommendBox .Boxx-topic{display:flex;}
#recommendBox .Boxx-topic .left{ width: 50%;}
#recommendBox .Boxx-topic .left .slick-slider{margin:0;}
#recommendBox .Boxx-topic .right{ width: 50%;}
#recommendBox .Boxx-topic .sp-slide{background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;position: relative;}
#recommendBox .Boxx-topic .sp-slide a.alink{position: absolute;width: 100%;height: 100%;display: block;top: 0;left: 0;z-index: 1;}
#recommendBox .Boxx-topic .sp-slide img.sp-image{width:100%;height: 361px;}
#recommendBox .Boxx-topic .cat{display: flex;position:absolute;bottom:0;left:0;width: calc(100% - 30px);background:rgb(0 0 0 / 0.7);padding: 15px;align-items: center;z-index: 2;}
#recommendBox .Boxx-topic .cat a{color:#fff;font-size: 16px;width: calc(100% - 75px);overflow: hidden;height: 30px;}
#recommendBox .Boxx-topic .cat a.category{background:#33a83d;font-size: 14px;width: 65px;text-align: center;border-radius: 50px;margin-right: 10px;line-height: 30px;}
#recommendBox #tbDiv .sp-thumbnail{border:1px #e0dfdf solid;}
#recommendBox #tbDiv .sp-thumbnail:nth-child(2), #recommendBox #tbDiv .sp-thumbnail:nth-child(3), #recommendBox #tbDiv .sp-thumbnail:nth-child(4), #recommendBox #tbDiv .sp-thumbnail:nth-child(5){margin-top:-1px}
#recommendBox #tbDiv .sp-thumbnail .sp-thumbnail-title{border-left: 10px solid #c2c0c0;position: relative;}
#recommendBox #tbDiv .sp-thumbnail .sp-thumbnail-title:after{content:'';position:absolute;transition: all linear 0.3s;width: 0;height: 100%;background: #e0dfdf;top: 0;left: 0;z-index: 0;}
#recommendBox #tbDiv .sp-thumbnail:hover .sp-thumbnail-title:after{width:100%;}
#recommendBox #tbDiv .sp-thumbnail .sp-thumbnail-title a{display: flex;padding: 20px;color: #111111;font-size: 16px;font-weight: bold;z-index: 2;position: relative;}
#recommendBox #tbDiv .sp-thumbnail .sp-thumbnail-title a b{overflow: hidden;height: 31px;display: inline-block;width: calc(100% - 75px);}
#recommendBox #tbDiv .sp-thumbnail .sp-thumbnail-title a b.category{background:#33a83d;color: #fff;border-radius: 50px;font-weight: 400;font-size: 13px;margin-right: 15px;width: 60px;text-align: center;}

/* liveBox */
#liveBox{border-radius: 5px;background: #fefefe;overflow: hidden;margin-bottom: 35px;display: none;}
#liveBox .titleBox{display: flex;justify-content: space-between;background: linear-gradient(to left,#36b13a,#1d6a1c);padding: 25px 30px;flex-wrap: wrap;align-items: center;}
#liveBox .titleBox h4{font-weight: bold;line-height: 100%;font-size: 25px;color: #fff;}
#liveBox .titleBox h6{font-family: 'Lato', sans-serif  !important;color: #c6c4c4;font-size: 14px;text-transform: uppercase;}
#liveBox .titleBox ul{display:flex;flex-wrap: nowrap;align-items: center;}
#liveBox .titleBox li{margin-left: 10px;}
#liveBox .titleBox li a{background: #fff;color: #333;display: inline-block;padding: 5px 25px;font-size: 15px;border-radius: 50px;font-weight: bold;font-family: 'Lato', 'cwTeXYen', serif !important;}
#liveBox .liveBottom{overflow:hidden;padding: 35px;}
#liveBox .liveBottom li{float: left;width: calc(25% - 20px);margin: 10px 25px 10px 0;position: relative;}
#liveBox .liveBottom li:nth-child(4n){margin: 10px 0 10px 0;}
#liveBox .liveBottom li .photo{border: 5px solid#eee;background-repeat: no-repeat;background-position: 50% 50%;background-size: cover;}
#liveBox .liveBottom li a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;}
#liveBox .liveBottom li p{text-align:center;font-size: 17px;font-weight: bold;margin-top: 10px;}

/* threeBox */
#threeBox{border-radius: 5px;background: #fefefe;overflow: hidden;margin-bottom: 35px;padding: 35px;display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;}
#threeBox .leftBox{width: 35%;}
#threeBox .rightBox{width: 40%;display: flex;}
#threeBox .rightBox .item{width: calc(100%/3);background: #ffffff;box-shadow: 0 0 10px rgb(0 0 0 / 10%);margin: 10px;padding: 25px 50px;display: flex;flex-wrap: wrap;justify-content: center;position: relative;align-items: center;}
#threeBox .rightBox .item:last-child{display:none;}
#threeBox .rightBox .item:hover{border-radius:50%}
#threeBox .rightBox .item a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;}
#threeBox .rightBox .item p{font-size: 20px;letter-spacing: 1px;font-weight: bold;margin-top: 10px;line-height: 100%;text-align: center;}

/* sportBox */
#sportBox{border-radius: 5px;background: #fefefe;overflow: hidden;margin-bottom: 35px;padding: 50px 60px;}
#sportBox:last-child{margin:0;display: none;}
#sportBox h3.h3title{font-size:25px;position: relative;display: flex;align-items: center;padding-left: 19px;margin-bottom: 20px;}
#sportBox h3.h3title:before{content:'';width:4px;height: 25px;background:#1fa63e;position: absolute;border-radius: 5px;left: 0;}
#sportBox .area{display:flex;justify-content: space-between;flex-wrap: wrap;}
#sportBox .areaBox{position:relative;}
#sportBox .areaBox:nth-child(2){margin: 0 30px;}
#sportBox .areaBox a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#sportBox .areaBox .imgBox{position:relative;overflow: hidden;}
#sportBox .areaBox .photo{background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;}
#sportBox .areaBox .photo img{width:100%;}
#sportBox .areaBox .imgBox p.introduce{position:absolute;bottom: -100%;background: rgb(0 0 0 / 50%);color: #fff;font-size: 15px;padding: 20px;transition: all linear 0.3s;line-height: 150%;}
#sportBox .areaBox:hover .imgBox p.introduce{bottom:0;}
#sportBox .areaBox .imgBox p.more{position:absolute;display: block;background: #fff;font-weight: bold;font-size: 16px;padding: 10px 40px;border-radius: 50px;top: -100%;left: calc(50% - 70px);}
#sportBox .areaBox:hover .imgBox p.more{top: 60px;}
#sportBox .areaBox .content h3{font-size:26px;text-align: center;}

@media screen and (min-width: 1281px) {
	header #main-menu {background: -webkit-linear-gradient(#34ab3d,#1b6519);z-index: 99999;position: relative;width: 100%;}
}
@media screen and (max-width: 1680px) {
	#firstBox .areaBox .photo img{padding: 25px 0;}
}
@media screen and (max-width: 1440px) {
	#firstBox .areaBox .photo img{padding: 50px 0;}
	#analystBox{right: 100px;width: 25%;}
}
@media screen and (max-width: 1280px) {
	#firstBox .areaBox .photo img{padding: 70px 0;}
	#analystBox{right: 0;}
	#bnanaBox{background-image:none;}
	.workframe{width:90%;}
}
@media screen and (max-width: 1024px) {
	#newsBox{margin-bottom:35px;}
	#newsBox, #rightBox{width:100%;}
	#newsBox .bd li .newPhoto{width:20%;}
	#newsBox .bd li .info{width:75%}
	#analystBox li .newImg{width: 80%;}
	#analystBox{width: 35%;}
	#sportBox .areaBox .imgBox p.introduce{display:none;}
	#rightBox .bottomBox{position:relative;margin-top:35px;}
	#rightBox .bottomBox img{width:100%;}
    #firstBox .areaBox .content p{display:none;}
    #firstBox .areaBox .content p.more{display:inline-block;margin-top: 20px;}
    #firstBox .areaBox .photo img{padding: 40px 0;}
    #firstBox .areaBox .content h3{text-align:center;}
    #firstBox .areaBox .content p.more a{width: 150px;}
    #firstBox .areaBox .content{padding: 70px;width: calc(100% - 140px);text-align: center;}
}
@media screen and (max-width: 768px) {
	#sportBox .areaBox, #sportBox .areaBox:nth-child(2){width:100%;margin: 10px 0;}
	#sportBox .areaBox:hover .imgBox p.more{top:45%}
	#threeBox .leftBox{width:100%;text-align: center;margin-bottom: 20px;}
	#threeBox .rightBox{width:100%;}
	#newsBox .bd li .newPhoto{width: 40%;}
	#newsBox .bd li .info{width: 55%;}
	#analystBox li{flex-direction: row;align-items: center;justify-content: space-between;margin: 30px;}
	#visul #banner{width:100%;}
	#analystBox li .newImg{width: 40%;margin: 0;}
	#analystBox li .info{width:45%}
	#analystBox li .info h3, #analystBox li .info article, #analystBox li .info h3 a{text-align:left;}
    #firstBox .area{width:100%;}
    #firstBox .area .box:after{display:none;}
    #firstBox .area{display:flex;flex-wrap: wrap;flex-direction: row;align-items: center;}
    #firstBox .area >div{width:50%;}
    #firstBox .areaBox .photo img{padding: 30px 0;}
    #twoBox{display:block;}
    #analystBox{width: 100%;margin-bottom:40px;position: relative;}
    .bottomBox img{width:100%;}
    #analysis{width:100%;}
    #recommendBox .Boxx-topic{display:block;}
    #recommendBox .Boxx-topic .left, #recommendBox .Boxx-topic .right{width:100%;}
    #recommendBox #tbDiv .sp-thumbnail .sp-thumbnail-title{border:0;}
    #liveBox .titleBox{display:block;}
    #liveBox .titleBox .leftBox{margin-bottom:20px;}

    #liveBox .titleBox h4, #liveBox .titleBox h6{text-align:center;}
    #liveBox .titleBox ul{flex-wrap: wrap;justify-content: center;}
    #liveBox .titleBox li{margin: 0 5px;}
    #liveBox .liveBottom li, #liveBox .liveBottom li:nth-child(2n){width: calc(50% - 30px);margin: 15px;}
}
@media screen and (max-width: 640px) {
	#analystBox ul { margin: 25px 0;}
    #analystBox{margin-bottom: 0px;}
	#sportBox{padding: 30px 30px;margin: 0;}
	#sportBox:nth-child(5){background: #f7f7f7;}
	#threeBox .rightBox .item p{font-size: 17px;}
	#threeBox .rightBox .item{padding: 20px;margin: 5px;}
	#threeBox .rightBox .item .circle{width: 70%;}
	#threeBox .leftBox img{width: 220px;}
	#threeBox{background: #f7f7f7;padding: 35px 10px;margin: 0;}
	#liveBox .liveBottom li p{font-size: 15px;line-height: 150%;}
	#liveBox .liveBottom li, #liveBox .liveBottom li:nth-child(2n){width: calc(50% - 10px);margin: 5px;}
	#liveBox .liveBottom{padding:10px;}
	#rightBox .bottomBox{margin: 10px auto 30px;width: 90%;}
	#liveBox{border-radius:0;}
	#analysis{border-radius:0;}
	.wrap{background:#fff;padding: 0;}
	#newsBox .bd li .newPhoto{width: 50%;}
	#newsBox .bd li .info{width: 45%;}
	#newsBox .bd li .info article{height: 40px;}
	#twoBox{padding:0;}
	#newsBox{border-radius:0;}
	.wrap .workframe{width:100%;}
	#newsBox .titleBox .leftBox, #analysis .titleBox .leftBox{padding:10px 30px}
	#newsBox .bd, #analysis ul{width: calc(100% - 40px);margin: 0;border-radius: 0;padding: 20px 20px 0;box-shadow: none;}
    #firstBox .area .box{padding: 40px 20px;width: calc(50% - 40px);}
    #firstBox .area .box p, #firstBox .area .box h3, #firstBox .area .box h6{text-align:left;}
    #firstBox .area .box h6{line-height: 100%;}
    #firstBox .areaBox .content{padding: 20px;width: calc(100% - 40px);height: calc(100% - 40px);}
    #firstBox .areaBox .photo img {padding: 50px 0;}
    #firstBox .areaBox .content h3{margin-top: 50px;}
    #firstBox .areaBox .content p.more{margin-top:5px;}
    #firstBox .areaBox .content p.more a{width: 130px;}
    #analystBox li .info h3 a{font-size:25px;}
    #analystBox li{margin: 0;}
    #analystBox li .newImg{width: 35%;margin-right: 5%;border: 5px solid #eeeeee;}
    #analystBox li .info{width:50%;}
    #analystBox p.more a, #analysis p.more a{width: 150px;}
    #analysis li h3 a{line-height: 120%;}
    #recommendBox .Boxx-topic .sp-slide img.sp-image{height: auto;}
    #liveBox .titleBox li{margin: 2.5px;width: calc((100%/3) - 5px);}
    #liveBox .titleBox li a{padding: 5px 0;display: block;text-align: center;}
}