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/main-nav.jpg) 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/car251030.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/role251016.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/map250821.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/item251030.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/pet251023.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

}