body {
    min-width: 1200px;
    background-color: #eee
}

.main-header {
    width: 100%;
    height: 40px;
    overflow: hidden
}

.footer {
    width: 100%
}

.icons {
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/sprite.png) no-repeat 0 0;
    display: block
}

.icons.icon-game {
    background-position: 0 -120px;
    height: 20px;
    width: 49px
}

.icons.icon-event {
    background-position: 0 -144px;
    height: 20px;
    width: 49px
}

.icons.icon-system {
    background-position: 0 -168px;
    height: 20px;
    width: 49px
}

.icons.icon-race {
    background-position: 0 -192px;
    height: 20px;
    width: 49px
}

.icons.icon-scroll {
    background-position: -125px -185px;
    width: 63px;
    height: 73px;
    animation: slide 2s infinite forwards
}

.icons.icon-hot {
    background-position: -72px -120px;
    width: 56px;
    height: 56px;
    text-indent: -999em
}

.icons.icon-title-1 {
    background-position: -220px 0;
    width: 40px;
    height: 40px
}

.icons.icon-title-2 {
    background-position: -260px 0;
    width: 40px;
    height: 40px
}

.icons.icon-title-3 {
    background-position: -300px 0;
    width: 40px;
    height: 40px
}

.icons.icon-title-4 {
    background-position: -340px 0;
    width: 40px;
    height: 40px
}

.icons.icon-title-5 {
    background-position: -380px 0;
    width: 40px;
    height: 40px
}

.icons.icon-goLeft-1 {
    background-position: 0 -75px;
    width: 21px;
    height: 36px
}

.icons.icon-goRight-1 {
    background-position: -25px -75px;
    width: 21px;
    height: 36px
}

.icons.icon-goLeft-2 {
    background-position: -50px -75px;
    width: 17px;
    height: 23px
}

.icons.icon-goRight-2 {
    background-position: -72px -75px;
    width: 17px;
    height: 23px
}

.icons.icon-connect {
    background-position: -213px -76px;
    width: 35px;
    height: 35px
}

.icons.icon-service {
    background-position: -253px -76px;
    width: 35px;
    height: 35px
}

.icons.icon-interact {
    background-position: -292px -76px;
    width: 35px;
    height: 35px
}

.icons.icon-qrcode {
    background-position: -320px -125px;
    width: 110px;
    height: 120px
}

@keyframes slide {

    0%,
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    50% {
        -webkit-transform: translateY(-50px);
        transform: translateY(-50px)
    }
}

.main {
    width: 100%
}

.main .section {
    width: 100%
}

.main .section .con {
    width: 1200px;
    margin: 0 auto;
    display: flex
}

.main .section.sect-head {
    height: 940px;
    transition: height .8s
}

.main .section.sect-head .gg-mask {
    pointer-events: none;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 138px;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/bg-mask.png) repeat-x 0 0;
    background-size: contain
}

.main .section.sect-head .gg-header {
    width: 100%;
    height: 100%;
    background-color: #d9d9d9;
    z-index: 1;
    overflow: hidden
}

.main .section.sect-head .gg-header a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 940px;
    display: block;
cursor:default;
}

.main .section.sect-head .gg-header a img {
    position: absolute;
    width: 1920px;
    height: 940px;
    left: 50%;
    top: 0;
    margin-left: -960px
}

.main .section.sect-head .gg-header a.gg-img-big {
    opacity: 1;
    z-index: 1
}

.main .section.sect-head .gg-header a.gg-img-small {
    opacity: 0;
    z-index: 2;
    height: 490px
}

.main .section.sect-head .gg-header a.gg-img-small img {
    height: 490px
}

.main .section.sect-head .icon-scroll {
    position: absolute;
    z-index: 3;
    bottom: 100px;
    left: 50%;
    margin-left: -31px
}

.main .section.sect-head.short-header {
    height: 490px
}

.main .section.sect-head.short-header .icon-scroll {
    display: none
}

.main .section.sect-head.short-header .gg-mask {
    height: 80px
}

.main .section.sect-head.short-header .gg-header .gg-img-small {
    opacity: 1;
    transition: all 1.5s
}

.main .section.sect-head .con {
    padding-top: 0
}

.main .section.sect-news {
    height: 425px;
    padding-top: 85px;
    background-color: #fff
}

.main .section.sect-news .con {
    justify-content: space-between
}

.main .section.sect-news .sub-nav {
    width: 230px;
    height: 375px;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/navbtn.png) no-repeat 0 0;
}

.main .section.sect-news .sub-nav .tips {
    top: -30px;
    left: 0;
    text-align: center;
    width: 230px;
    /* height: ; */
    color: #b5b5b5;
    font-size: 12px;
    line-height: 24px;
    height: 24px;
    background: #ececec;
    border-radius: 12px
}

.main .section.sect-news .sub-nav a {
    width: 50%;
    display: block;
    float: left;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/left-nav.jpg?v1) no-repeat 230px 0;
    opacity: 0;
    transition: all .3s
}

.main .section.sect-news .sub-nav a:hover {
    opacity: 1
}

.main .section.sect-news .sub-nav .sub-nav-btn-download-off {
    width: 229px;
    opacity: 1;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/dwonbtnA.png)0px 0px;
    height: 95px;
    margin-top: .5px;
}
.main .section.sect-news .sub-nav .sub-nav-btn-download-on {
    position: absolute;
    width: 229px;
    opacity: 1;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/dwonbtnA.png)-230px 0px;
    height: 95px;
    opacity: 0;
    top: 0px;
    margin-top: .5px;
}
.main .section.sect-news .sub-nav .sub-nav-btn-download-on:hover {
    width: 229px;
    opacity: 1;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/dwonbtnA.png)-230px 0px;
    height: 95px;
    opacity: 1;
    top: 0px;
    margin-top: .5px;
}


.main .section.sect-news .sub-nav a.sub-nav-btn-register {
    height: 68px;
    background-position: -230px -135px
}

.main .section.sect-news .sub-nav a.sub-nav-btn-charge {
    height: 68px;
    background-position: -345px -135px
}

.main .section.sect-news .sub-nav a.sub-nav-btn-guide {
    height: 68px;
    background-position: -230px -203px;
    margin-top: -3px;
    /* border: 1px solid red; */
}

.main .section.sect-news .sub-nav a.sub-nav-btn-race {
    height: 68px;
    background-position: -345px -203px;
    margin-top: -2px;
    width: 114px;
}

.main .section.sect-news .sub-nav a.sub-nav-btn-gift {
    height: 52px;
    background-position: -230px -271px
}

.main .section.sect-news .sub-nav a.sub-nav-btn-connect {
    height: 52px;
    background-position: -345px -271px;
    width: 114px;
}

.main .section.sect-news .sub-nav a.sub-nav-btn-search {
    height: 52px;
    background-position: -230px -323px;
    margin-top: -1px;

}

.main .section.sect-news .sub-nav a.sub-nav-btn-security {
    height: 52px;
    background-position: -345px -323px;
    margin-top: -1px;
    width: 114px;
}
.main .section.sect-news .sub-nav .sub-nav-btn-zone-off {
    position: absolute;
    width: 229px;
    opacity: 1;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/zone.png?kart)0px 0px;
    height: 45px;
    border-top: 1px solid #d2d1d1;
    bottom: 0px;
}
.main .section.sect-news .sub-nav .sub-nav-btn-zone-on {
    width: 229px;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/zone.png?kart)-230px 0px;
    height: 45px;
    border-top: 1px solid #d2d1d1;
    position: absolute;
    bottom: 0px;
    opacity: 0;
}


.main .section.sect-news .gg-bar {
    width: 595px;
    height: 370px;
    margin-top: .5px;
}

.main .section.sect-news .gg-bar .gg-switch {
    width: 96px;
    height: 20px;
    top: 0;
    right: 0;
    z-index: 3;
    display: none
}

.main .section.sect-news .gg-bar .gg-switch .gg-switch-btn {
    color: #fff;
    text-align: center;
    float: left;
    background: #0899EC;
    width: 48px;
    height: 20px;
    line-height: 20px
}

.main .section.sect-news .gg-bar .gg-switch .gg-switch-btn.on {
    background: #092845
}

.main .section.sect-news .gg-bar .gg-container {
    top: 0;
    left: 0;
    width: 595px;
    height: 375px;
    overflow: hidden;
    display: none
}

.main .section.sect-news .gg-bar .gg-container.active {
    display: block
}

.main .section.sect-news .gg-bar .gg-container .adPic {
    width: 595px;
    height: 370px
}

.main .section.sect-news .gg-bar .gg-container .adPic a {
    width: 595px;
    height: 370px;
    display: block;
    background: #000
}

.main .section.sect-news .gg-bar .gg-container .adPic a img {
    width: 100%;
    height: 370px
}

.main .section.sect-news .gg-bar .gg-container .adBtn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    text-align: center;
    overflow: hidden;
    display: flex;
    background: #dbe6ff
}

.main .section.sect-news .gg-bar .gg-container .adBtn a {
    flex: 1;
    width: auto;
    height: 5px;
    text-indent: -999em;
    transition: all .3s
}

.main .section.sect-news .gg-bar .gg-container .adBtn a.on {
    background-color: #4f83ff
}

.main .section.sect-news .gg-bar .gg-container .prevBtn {
    z-index: 3;
    text-indent: -999em;
    width: 28px;
    height: 370px;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    transition: all .3s
}

.main .section.sect-news .gg-bar .gg-container .prevBtn::before {
    content: '';
    width: 21px;
    height: 36px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -18px;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/sprite.png) no-repeat 0 -75px
}

.main .section.sect-news .gg-bar .gg-container .prevBtn:hover {
    opacity: 1
}

.main .section.sect-news .gg-bar .gg-container .nextBtn {
    z-index: 3;
    text-indent: -999em;
    width: 28px;
    height: 370px;
    top: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    transition: all .3s
}

.main .section.sect-news .gg-bar .gg-container .nextBtn::before {
    content: '';
    width: 21px;
    height: 36px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -18px;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/sprite.png) no-repeat -25px -75px
}

.main .section.sect-news .gg-bar .gg-container .nextBtn:hover {
    opacity: 1
}

.main .section.sect-news .gg-bar .gg-container:hover .prevBtn,
.main .section.sect-news .gg-bar .gg-container:hover .nextBtn {
    opacity: 1
}

.main .section.sect-news .news-bar {
    width: 360px;
    height: 375px;
    margin-top: .5px;
}

.main .section.sect-news .news-bar .news-nav {
    width: 100%;
    height: 50px;
    font-size: 14px;
    overflow: hidden
}

.main .section.sect-news .news-bar .news-nav li {
    vertical-align: top;
    float: left;
    text-align: center;
    background: #4f83ff;
    color: #fff;
    width: 20%;
    height: 50px
}

.main .section.sect-news .news-bar .news-nav li a {
    display: block;
    color: inherit;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 16px
}

.main .section.sect-news .news-bar .news-nav li.on,
.main .section.sect-news .news-bar .news-nav li:hover {
    background-color: #dbe6ff;
    color: #4f83ff
}

.main .section.sect-news .news-bar .news-list {
    width: 350px;
    height: 260px;
    padding: 15px 5px 10px;
    display: none
}

.main .section.sect-news .news-bar .news-list.on {
    display: block
}

.main .section.sect-news .news-bar .news-list li {
    width: 360px;
    height: 42px
}

.main .section.sect-news .news-bar .news-list li a {
    display: flex;
    width: 350px;
    height: 42px;
    line-height: 42px;
    color: #000;
    font-size: 14px;
    overflow: hidden;
    align-items: center
}

.main .section.sect-news .news-bar .news-list li a span {
    height: 42px;
    line-height: 42px;
    text-align: left
}

.main .section.sect-news .news-bar .news-list li a span.details {
    flex: 1;
    overflow: hidden;
    padding: 0 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.main .section.sect-news .news-bar .news-list li a span.date {
    width: 40px;
    color: #999
}

.main .section.sect-news .news-bar .news-list li a:hover {
    color: #4f83ff
}

.main .section.sect-news .news-bar .news-list li.top_news {
    height: 56px
}

.main .section.sect-news .news-bar .news-list li.top_news a {
    line-height: 56px;
    font-size: 16px;
    font-weight: 700;
    padding: 0;
    width: 100%;
    text-align: center;
    height: 56px
}

.main .section.sect-news .news-bar .btn-more {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: block;
    color: #333;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/sprite.png) no-repeat 0 -270px;
    text-align: center
}

.main .section.sect-news .news-bar .btn-more span {
    letter-spacing: -2px
}

.main .section.sect-media {
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/bg-grey.jpg) no-repeat 50% 0;
    height: 754px;
    padding-top: 45px
}

.main .section.sect-media .con {
    justify-content: space-between
}

.main .section.sect-media .con.con-1 {
    height: 440px
}

.main .section.sect-media .con .title {
    width: 100%;
    height: 41px;
    margin-bottom: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.main .section.sect-media .con .title b {
    display: block;
    height: 40px;
    font-size: 20px;
    font-weight: 700;
    padding: 0 30px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center
}

.main .section.sect-media .con .title b i {
    width: 40px;
    height: 40px;
    display: block;
    padding-right: 5px
}

.main .section.sect-media .con .title a {
    float: right;
    line-height: 40px;
    height: 40px
}

.main .section.sect-media .con .title a span {
    letter-spacing: -2px
}

.main .section.sect-media .con .event-box .title {
    border-bottom: 1px solid #4f83ff
}

.main .section.sect-media .con .event-box .title b {
    background-color: #4f83ff
}

.main .section.sect-media .con .event-box .title a {
    color: #4f83ff
}

.main .section.sect-media .con .event-box .event-con {
    display: flex;
    justify-content: space-between;
    width: 780px
}

.main .section.sect-media .con .event-box .event-con .hot-event {
    width: 270px;
    height: 280px;
    position: relative
}

.main .section.sect-media .con .event-box .event-con .hot-event b.icon-hot {
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px
}

.main .section.sect-media .con .event-box .event-con .hot-event span {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 24px;
    line-height: 24px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    width: 100%;
    background: #000;
    background: rgba(0, 0, 0, .4)
}

.main .section.sect-media .con .event-box .event-con .event-list {
    width: 480px;
    height: 280px
}

.main .section.sect-media .con .event-box .event-con .event-list li {
    width: 100%;
    height: 35px
}

.main .section.sect-media .con .event-box .event-con .event-list li a {
    display: flex;
    width: 100%;
    height: 35px;
    line-height: 35px;
    color: #000
}

.main .section.sect-media .con .event-box .event-con .event-list li a:hover {
    color: #4f83ff
}

.main .section.sect-media .con .event-box .event-con .event-list li a .details {
    flex: 1;
    overflow: hidden;
    padding-right: 10px;
    text-overflow: ellipsis;
    white-space: nowrap
}

.main .section.sect-media .con .event-box .event-con .event-list li a .date {
    width: 90px;
    color: #999
}

.main .section.sect-media .con .online-box {
    width: 390px
}

.main .section.sect-media .con .online-box .title {
    border-bottom: 1px solid #48b025
}

.main .section.sect-media .con .online-box .title b {
    background-color: #48b025
}

.main .section.sect-media .con .online-box .title a {
    color: #48b025
}

.main .section.sect-media .con .online-box .online-con .online-bar {
    width: 390px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden
}

.main .section.sect-media .con .online-box .online-con .online-bar li {
    width: 189px;
    height: 300px;
    float: left;
    padding: 0 3px
}

.main .section.sect-media .con .online-box .online-con .online-bar li .btn-online {
    position: relative;
    width: 190px;
    height: 135px;
    margin-bottom: 15px;
    display: block
}

.main .section.sect-media .con .online-box .online-con .online-bar li .btn-online img {
    width: 190px;
    height: 105px;
    display: block;
    background-color: #d9d9d9
}

.main .section.sect-media .con .online-box .online-con .online-bar li .btn-online .online-title {
    color: #000;
    width: 100%;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.main .section.sect-media .con .online-box .online-con .online-bar li .btn-online .btn-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 190px;
    height: 105px
}

.main .section.sect-media .con .online-box .online-con .online-bar li .btn-online .btn-play::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 72px;
    width: 45px;
    height: 45px;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/sprite.png) no-repeat -225px -149px;
    opacity: 0
}

.main .section.sect-media .con .online-box .online-con .online-bar li .btn-online .btn-play:hover {
    background: rgba(0, 0, 0, .6);
    transition: all .3s
}

.main .section.sect-media .con .online-box .online-con .online-bar li .btn-online .btn-play:hover::before {
    opacity: 1;
    transition: all .3s
}

.main .section.sect-media .con .online-box .online-con .online-control {
    bottom: -20px;
    right: 0;
    z-index: 5;
    transition: all .3s;
    opacity: .8
}

.main .section.sect-media .con .online-box .online-con .online-control.icon-goLeft-2 {
    right: 22px
}

.main .section.sect-media .con .online-box .online-con .online-control:hover {
    opacity: 1
}

.main .section.sect-media .con .race-box {
    width: 585px
}

.main .section.sect-media .con .race-box .title {
    border-bottom: 1px solid #ffaf02
}

.main .section.sect-media .con .race-box .title b {
    background-color: #ffaf02
}

.main .section.sect-media .con .race-box .title a {
    color: #ffaf02
}

.main .section.sect-media .con .race-box .race-con {
    height: 150px;
    display: flex;
    justify-content: space-between
}

.main .section.sect-media .con .race-box .race-con .gg-container {
    top: 0;
    left: 0;
    width: 585px;
    height: 150px;
    overflow: hidden;
    display: none
}

.main .section.sect-media .con .race-box .race-con .gg-container.active {
    display: block
}

.main .section.sect-media .con .race-box .race-con .gg-container .adPic {
    width: 585px;
    height: 150px
}

.main .section.sect-media .con .race-box .race-con .gg-container .adPic a {
    width: 585px;
    height: 150px;
    display: block
}

.main .section.sect-media .con .race-box .race-con .gg-container .adPic a img {
    width: 100%;
    height: 150px
}

.main .section.sect-media .con .race-box .race-con .gg-container .prevBtn {
    z-index: 3;
    text-indent: -999em;
    width: 28px;
    height: 150px;
    top: 0;
    left: 0;
    position: absolute;
    opacity: 0;
    transition: all .3s
}

.main .section.sect-media .con .race-box .race-con .gg-container .prevBtn::before {
    content: '';
    width: 21px;
    height: 36px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -18px;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/sprite.png) no-repeat -100px -75px
}

.main .section.sect-media .con .race-box .race-con .gg-container .nextBtn {
    z-index: 3;
    text-indent: -999em;
    width: 28px;
    height: 150px;
    top: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    transition: all .3s
}

.main .section.sect-media .con .race-box .race-con .gg-container .nextBtn::before {
    content: '';
    width: 21px;
    height: 36px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -18px;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/sprite.png) no-repeat -125px -75px
}

.main .section.sect-media .con .race-box .race-con .gg-container:hover .prevBtn,
.main .section.sect-media .con .race-box .race-con .gg-container:hover .nextBtn {
    opacity: 1
}

.main .section.sect-media .con .video-box {
    width: 585px
}

.main .section.sect-media .con .video-box .title {
    border-bottom: 1px solid #f975a6
}

.main .section.sect-media .con .video-box .title b {
    background-color: #f975a6
}

.main .section.sect-media .con .video-box .title a {
    color: #f975a6
}

.main .section.sect-media .con .video-box .video-con {
    height: 150px;
    display: flex;
    justify-content: space-between
}

.main .section.sect-media .con .video-box .video-con .btn-online {
    position: relative;
    width: 185px;
    height: 150px;
    display: block
}

.main .section.sect-media .con .video-box .video-con .btn-online img {
    width: 185px;
    height: 125px
}

.main .section.sect-media .con .video-box .video-con .btn-online .online-title {
    color: #000;
    width: 100%;
    line-height: 30px;
    height: 30px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.main .section.sect-media .con .video-box .video-con .btn-online .btn-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 185px;
    height: 125px
}

.main .section.sect-media .con .video-box .video-con .btn-online .btn-play::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 70px;
    width: 45px;
    height: 45px;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/sprite.png) no-repeat -225px -149px;
    opacity: 0
}

.main .section.sect-media .con .video-box .video-con .btn-online .btn-play:hover {
    background: rgba(0, 0, 0, .6);
    transition: all .3s
}

.main .section.sect-media .con .video-box .video-con .btn-online .btn-play:hover::before {
    opacity: 1;
    transition: all .3s
}

.main .section.sect-media .video-bar-title {
    text-indent: 32px;
    height: 48px;
    line-height: 48px;
    font-size: 20px;
    color: #434343;
    border-bottom: 2px solid #ADB5C2;
    margin-bottom: 20px
}

.main .section.sect-media .video-bar-title:after {
    content: "";
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/sprite.png) no-repeat;
    position: absolute;
    top: 12px;
    left: 0;
    background-position: 0 -31px;
    width: 26px;
    height: 24px
}

.main .section.sect-media .video-bar-title .more {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    line-height: 48px;
    height: 48px;
    color: #4d5a69;
    border-radius: 15px;
    text-align: center;
    font-size: 14px
}

.main .section.sect-media .video-bar {
    width: 420px;
    height: 140px;
    overflow: hidden
}

.main .section.sect-media .video-bar li {
    float: left;
    width: 206px;
    padding: 0 2px
}

.main .section.sect-media .video-bar li .btn-video {
    position: relative;
    width: 100%;
    height: 140px;
    background: #000
}

.main .section.sect-media .video-bar li .btn-video .video-info {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 140px;
    opacity: .9
}

.main .section.sect-media .video-bar li .btn-video .video-info img {
    width: 100%;
    height: 100%;
    opacity: .9
}

.main .section.sect-media .video-bar li .btn-video .video-info .video-tag {
    position: absolute;
    top: 6px;
    left: 0;
    background: #BFC6D2;
    color: #000;
    width: 74px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    display: none
}

.main .section.sect-media .video-bar li .btn-video .video-info .video-title {
    position: absolute;
    bottom: 0;
    text-align: center;
    overflow: hidden;
    font-size: 12px;
    color: #fff;
    height: 30px;
    line-height: 30px;
    width: 100%;
    z-index: 1;
    background: #1B1B1B
}

.main .section.sect-media .video-bar li .btn-video .video-info .icon-play {
    position: absolute;
    top: 39px;
    left: 50%;
    margin-left: -13px;
    transition: all .3s
}

.main .section.sect-media .video-bar li .btn-video .video-info:hover img {
    opacity: 1
}

.main .section.sect-media .video-bar li .btn-video .video-info:hover .icon-play {
    transform: scale(1.1)
}

.main .section.sect-data {
    width: 100%;
    height: 430px;
    padding-bottom: 125px;
    margin: 0 auto
}

.main .section.sect-data .con {
    padding-top: 0;
    flex-direction: column
}

.main .section.sect-data .title {
    width: 100%;
    height: 40px;
    background: #4f83ff;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px
}

.main .section.sect-data .title b {
    display: flex;
    font-size: 20px;
    font-weight: 700;
    line-height: 40px;
    height: 40px;
    padding: 0 30px;
    float: left;
    color: #fff;
    text-indent: 5px
}

.main .section.sect-data .title .data-nav {
    width: 600px;
    height: 40px;
    margin-left: 45px;
    float: left
}

.main .section.sect-data .title .data-nav li {
    float: left;
    width: 115px;
    height: 40px
}

.main .section.sect-data .title .data-nav li a {
    padding-top: 0;
    display: block;
    color: #fff;
    font-size: 16px;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px
}

.main .section.sect-data .title .data-nav li.on,
.main .section.sect-data .title .data-nav li:hover {
    background: #dbe6ff
}

.main .section.sect-data .title .data-nav li.on a,
.main .section.sect-data .title .data-nav li:hover a {
    color: #4f83ff
}

.main .section.sect-data .data-bar {
    background: #fff;
    width: 1200px;
    height: 380px;
    position: relative;
    overflow: hidden
}

.main .section.sect-data .data-bar.on {
    display: block
}
.main .section.sect-data .data-bar.data-car li {
    background: url(../images/latestinformation/car250619.jpg) no-repeat 0 0
    /* background: url(../img/car241205.jpg) no-repeat 0 0 */
}
.main .section.sect-data .data-bar.data-role li {
    background: url(../images/latestinformation/role250508.jpg) no-repeat 0 0
    /* background: url(../img/role241128.jpg) no-repeat 0 0 */
}

.main .section.sect-data .data-bar.data-map li {
    background: url(../images/latestinformation/map250619.jpg) no-repeat 0 0
    /* background: url(../img/map241010.jpg) no-repeat 0 0 */
}

.main .section.sect-data .data-bar.data-item li {
    background: url(../images/latestinformation/item250619.jpg) no-repeat 0 0
    /* background: url(../img/item241205.jpg) no-repeat 0 0 */

}

.main .section.sect-data .data-bar.data-pet li {
    background: url(../images/latestinformation/pet250626.jpg) no-repeat 0 0
    /* background: url(../img/pet241128.jpg) no-repeat 0 0 */
}

.main .section.sect-data .data-bar ul {
    width: 1200px;
    height: 380px;
    background: #dbe6ff
}

.main .section.sect-data .data-bar ul li {
    float: left;
    width: 115px;
    height: 380px
}

.main .section.sect-data .data-bar ul li.data-list-1 {
    background-position: 0 0
}

.main .section.sect-data .data-bar ul li.data-list-2 {
    background-position: -115px 0
}

.main .section.sect-data .data-bar ul li.data-list-3 {
    background-position: -230px 0
}

.main .section.sect-data .data-bar ul li.data-list-4 {
    background-position: -345px 0
}

.main .section.sect-data .data-bar ul li.data-list-5 {
    background-position: -460px 0
}

.main .section.sect-data .data-bar ul li a {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    transition: all 1s;
    display: block;
    position: relative;
    box-sizing: border-box;
    overflow: hidden
}

.main .section.sect-data .data-bar ul li a .car {
    position: absolute;
    right: -100px;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    opacity: 0
}

.main .section.sect-data .data-bar ul li a .name {
    position: absolute;
    top: 0;
    left: -50px;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    opacity: 0
}

.main .section.sect-data .data-bar ul li a .desc {
    position: absolute;
    top: 85px;
    left: -10px;
    width: 330px;
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    opacity: 0
}

.main .section.sect-data .data-bar ul li a .func {
    position: absolute;
    top: 215px;
    left: -20px;
    height: 165px;
    width: 360px;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    opacity: 0
}

.main .section.sect-data .data-bar ul li.on {
    width: 740px;
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/bg-data.png) no-repeat 0 0, linear-gradient(130deg, #015eea, #00c0fa)
}

.main .section.sect-data .data-bar ul li.on .car {
    right: 0;
    opacity: 1;
    transition: all .5s
}

.main .section.sect-data .data-bar ul li.on .name {
    left: 0;
    opacity: 1;
    transition: all .5s
}

.main .section.sect-data .data-bar ul li.on .desc {
    left: 40px;
    opacity: 1;
    transition: all .5s .1s
}

.main .section.sect-data .data-bar ul li.on .func {
    opacity: 1;
    left: 40px;
    display: flex;
    transition: all .5s .2s
}

.main .section.sect-data .data-bar ul li.growup.on {
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/bg-data.png) no-repeat 0 0, linear-gradient(130deg, #3a5a1c, #20320e)
}
.main .section.sect-data .data-bar.data-car li .desc {
    width: 340px
}

.main .section.sect-data .data-bar.data-car li .func {
    transform: scale(0.9)
}

.main .section.sect-data .data-bar.data-car li.on .func {
    left: 30px
}

.main .section.sect-bottom {
    padding-bottom: 40px;
    width: 100%
}

.main .section.sect-bottom .con {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between
}

.main .section.sect-bottom .con .title {
    color: #0174ed;
    font-size: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 20px
}

.main .section.sect-bottom .con .links {
    height: 38px;
    width: 100%;
    margin-bottom: 20px
}

.main .section.sect-bottom .con .links .btn-link {
    background: url(https://img5.tiancitycdn.com/kr/homepage/images/sprite.png) no-repeat 0 -220px;
    width: 111px;
    height: 38px;
    line-height: 38px;
    color: #0174ed;
    font-size: 14px;
    display: block;
    text-align: center;
    float: left;
    margin-right: 10px;
    position: relative;
    overflow: hidden
}

.main .section.sect-bottom .con .links .btn-link i {
    position: absolute;
    top: -110px;
    left: 0;
    opacity: 0
}

.main .section.sect-bottom .con .links .btn-link:hover {
    background: #0174ed;
    border-radius: 5px;
    color: #fff;
    overflow: visible
}

.main .section.sect-bottom .con .links .btn-link:hover i {
    opacity: 1;
    top: -125px;
    transition: all .3s
}

.main .section.sect-bottom .con .service {
    width: 365px
}

.main .section.sect-bottom .con .contact {
    width: 245px
}

.main .section.sect-bottom .con .interact {
    width: 480px
}

.main .section.sect-bottom .con .interact .btn-link:last-child {
    margin-right: 0
}

.main .section.sect-bottom .con .tips-connect {
    width: 245px;
    color: #0174ed;
    font-size: 14px
}

.main .section.sect-bottom .con .tips-connect a {
    color: #0174ed
}

.main .section.sect-bottom .con .tips-rule {
    width: 900px;
    color: #a0a6ad;
    font-size: 14px
}

.main .section.sect-head2 {
    height: 410px
}

.main .section.sect-head2 .gg-header {
    width: 100%;
    height: 100%;
    background-color: #b7b7b7;
    z-index: 1;
    overflow: hidden
}

.main .section.sect-head2 .gg-header img {
    position: absolute;
    width: 1920px;
    height: 410px;
    left: 50%;
    top: 0;
    margin-left: -960px
}

.main .section.sect-inside .con {
    padding-top: 85px;
    width: 1200px;
    min-height: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between
}

.main .section.sect-inside .con .slide-bar {
    width: 230px
}

.main .section.sect-inside .con .main-wrap {
    width: 880px;
    padding: 0 30px
}