@charset "UTF-8";
/* reset */
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select {
  margin: 0;
  padding: 0;
}

body, input, textarea, select, button, table, em {
  font-family: Microsoft Yahei, "Malgun Gothic", sans-serif;
  font-weight: normal;
  font-size: 16px;
}

img, fieldset {
  border: 0;
  vertical-align: top;
}

ul, ol {
  list-style: none;
}

em, address {
  font-style: normal;
}

a {
  text-decoration: none;
}

a:hover, a:active, a:focus {
  text-decoration: none;
}

html {
  background-color: #111110;
}

.blind, legend {
  position: absolute;
  left: -1000%;
  top: 0;
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -10000px;
}

button {
  border: 0;
  cursor: pointer;
  vertical-align: top;
  background: transparent;
}

button:focus {
  outline: none;
}

/* common */
.gnbWrapper {
  min-width: 1280px !important;
}

#wrapper {
  position: relative;
  width: 100%;
  min-width: 1280px;
  max-width: 2560px;
  min-height: 800px;
  margin: 0 auto;
  overflow: hidden;
  opacity: 0;
  background:#203c63 url("../images/bg_event.png") center bottom no-repeat;
}

#header h1 a, #header .util a, #header .util button{
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url("../images/spr_common.png");
  background-repeat: no-repeat;
}

#header {
  z-index: 200;
}
#header h1 {
  position: absolute;
  top: 50px;
  left: 66px;
  z-index: 10;
}
#header h1 a {
  width: 180px;
  height: 100px;
  background-position: 0 0;
}
#header .util {
  position: absolute;
  right: 0;
  top: 50px;
  width: 350px;
  overflow: hidden;
  z-index: 10;
}
#header .util li {
  position: relative;
  float: left;
  margin-left: 6px;
}
#header .util a {
  position: relative;
  display: block;
  width: 74px;
  height: 86px;
  text-indent: -9999px;
}
#header .util button:hover, #header .util a:hover {
  background-position-y: -106px;
}
#header .btn_u1 a {
  background-position: -396px 0;
}
#header .btn_u2 a {
  background-position: -478px 0;
}
#header .btn_u3 a {
  background-position: -560px 0;
}
#header .btn_u4 a {
  background-position: -642px 0;
}

.copyRight{ padding: 0 0 20px 0 !important;}

#footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 78px;
  z-index: 100;text-indent: -100000px;
  background: url("../images/bg_footer.png") center top no-repeat;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
  
}
.quick{position: fixed;width: 100px;right: 0;top: 50%;margin-top: -140px;z-index: 10;}
.quick a{display: block;width: 100%;height: 58px;background: url("../images/spr_quick.png") no-repeat;text-indent: -100000px;overflow: hidden;}
.quick a:hover,
.quick .active a{background-position-x: 100%;}
.quick .q1 a{height: 63px;}
.quick .q2 a{background-position-y: -63px;}
.quick .q3 a{background-position-y: -121px;}
.quick .q4 a{height: 56px;background-position-y: -179px;}
.quick .top a{height: 30px;background-position-y: 100%;}
#back{position: absolute;width: 100%;height: 100%;}
.back{position: absolute;width: 2560px;height: 1440px;}
.cover{position: absolute;width: 2560px;height: 1440px;background: url("../images/pattern.png") repeat}
.bg1{position: absolute;width: 100%;height: 1349px;left: 0;top: 756px;background: url("../images/cover.png") center 0 no-repeat}
.bg2{position: absolute;width: 100%;height: 1686px;left: 0;bottom: 5250px;background: url("../images/cover2.png") center 0 no-repeat}
.bg3{position: absolute;width: 100%;height: 2600px;left: 0;top: 3045px;background:#111110 url("../images/bg_slide.png") center 600px no-repeat}
.bg4{position: absolute;width: 100%;height: 1258px;left: 0;bottom: 1428px;background: url("../images/bg_skill.png") center 0 no-repeat}
.char1{position: absolute;width: 2560px;height: 2154px;left: 50%;margin-left: -1280px;top: 145px;background: url("../images/char_main.png") no-repeat}
.char2{position: absolute;width: 1584px;height: 1520px;left: 50%;margin-left: -1280px;top: 1495px;background: url("../images/char_1.png") no-repeat}
.char3{position: absolute;width: 734px;height: 2050px;left: 50%;margin-left: -1226px;top: 3440px;background: url("../images/char_2.png") no-repeat}
.char4{position: absolute;width: 751px;height: 2103px;right: 50%;margin-right: -1280px;top: 3444px;background: url("../images/char_3.png") no-repeat}
.char5{position: absolute;width: 874px;height: 1177px;left: 50%;margin-left: -1150px;bottom: 50px;background: url("../images/char_4.png") no-repeat}
.char6{position: absolute;width: 966px;height: 1310px;right: 50%;margin-right: -1280px;bottom: 0;background: url("../images/char_5.png") no-repeat}
.line1{position: absolute;width: 2560px;height: 895px;right: 50%;margin-right: -1280px;top: 87px;background: url("../images/touch3.png") no-repeat}
.line2{position: absolute;width: 1853px;height: 1121px;right: 50%;margin-right: -1280px;top: 0;background: url("../images/touch2.png") no-repeat}
.line3{position: absolute;width: 1284px;height: 745px;right: 50%;margin-right: -1280px;top: 690px;background: url("../images/touch1.png") no-repeat}
.diamond{position: absolute;width: 1686px;height: 1763px;left: 50%;margin-left: -843px;top: -345px;background: url("../images/diamond.png") no-repeat}
.photo1{position: absolute;width: 1205px;height: 784px;left: 50%;margin-left: -1157px;top: 1184px;background: url("../images/photo.png") no-repeat}
.photo2{position: absolute;width: 964px;height: 706px;left: 50%;margin-left: -619px;top: 1583px;background: url("../images/photo.png") 0 -846px no-repeat}
.photo3{position: absolute;width: 1037px;height: 743px;left: 50%;margin-left: 192px;top: 2057px;background: url("../images/photo.png") 0 100% no-repeat}
.band1{position: absolute;width: 1948px;height: 178px;left: 50%;margin-left: -1476px;top: 2003px;background: url("../images/band_left.png") no-repeat}
.band2{position: absolute;width: 1868px;height: 178px;right: 50%;margin-right: -1280px;top: 3149px;background: url("../images/band_right.png") no-repeat}
.band3{position: absolute;width: 1948px;height: 178px;left: 50%;margin-left: -1280px;top: 5760px;background: url("../images/band_left.png") no-repeat}
.spark{position: absolute;width: 1700px;height: 1550px;right: 50%;margin-right: -1280px;bottom: 5255px;}
.spark span {
  display: block;
  position: absolute;
  background: url("../images/spark.png") 0 0 no-repeat;
  width: 32px;
  height: 28px;
}
.spark .f2, .spark .f7, .spark .f8 {
  width: 29px;
  height: 27px;
  background-position-y: -50px;
}
.spark .f3, .spark .f10, .spark .f11, .spark .f12 {
  width: 43px;
  height: 36px;
  background-position-y: -94px;
}
.spark .f4, .spark .f13 {
  width: 29px;
  height: 27px;
  background-position-y: 100%;
}


.section {
  position: relative;
  width: 100%;
  text-align: center;
}


#section0 {height: 1848px;}
#section1 {height: 1130px;}
#section2 {height: 2616px;}
#section3 {height: 1258px;}
#section4 {height: 1444px;}

#section0 .btn_mov1{position: absolute;width: 318px;height: 316px;left: 50%;top: 635px;margin-left: -157px;background: url("../images/btn_play.png") no-repeat;text-indent: -100000px;overflow: hidden;}
#section0 .btn_mov1:hover{background-position-x: 100%;}

#section1 .txt{position: absolute;width: 652px;height: 726px;left: 50%;margin-left: -174px;top: 110px;background: url("../images/txt1.png") no-repeat}
#section1 .btn_area{position: absolute;width: 512px;height: 97px;left: 50%;margin-left: -174px;bottom: 140px;font-size: 0;}
#section1 .btn_area button,
#section1 .btn_area a{display: inline-block;width: 246px;height: 100%;text-indent: -100000px;background: url("../images/spr_btn.png") 100% 0 no-repeat}
#section1 .btn_area button:hover,
#section1 .btn_area a:hover{background-position-y: 100%;}
#section1 .btn_area .btn_mov2{background-position-x: 0;margin-right: 20px;}

#section2 .txt,
#section2 .h3_1,
#section2 .desc1,
#section2 .h3_2,
#section2 .desc2{position: absolute;width: 900px;left: 50%;margin-left: -450px;background: url("../images/txt2.png") no-repeat;text-indent: -10000px;}
#section2 .txt{height: 142px;top: 127px;}
#section2 .h3_1{height: 118px;top: 350px;background-position-y: -231px;}
#section2 .desc1{height: 115px;top: 500px;background-position-y: -381px;}
#section2 .h3_2{height: 241px;top: 1376px;background-position-y: -632px;}
#section2 .desc2{height: 115px;top: 1650px;background-position-y: 100%;}
#section2 #slide1{position: absolute;width: 1920px;height: 790px;left: 50%;margin-left: -960px;top: 620px;}
#section2 #slide2{position: absolute;width: 900px;height: 660px;left: 50%;margin-left: -450px;bottom: 148px;}
#section2 .swiper-pagination{bottom: 125px;}
#section2 #slide2 .swiper-pagination{bottom: -63px;}

.swiper-pagination span{width: 23px;height: 23px;border: 2px solid #8a8a89;background: transparent;margin: 0 10px;box-sizing: border-box;}
.swiper-pagination .swiper-pagination-bullet-active{background: #e47377;border: 2px solid #e47377;}
#slide1 .swiper-slide {opacity: 0 !important;}
#slide1 .swiper-slide-active{opacity: 1 !important;}
.swiper-button-prev{width: 89px;height: 89px;background: url("../images/spr_slide.png") no-repeat;left: 435px}
.swiper-button-next{width: 89px;height: 89px;background: url("../images/spr_slide.png") 100% 0 no-repeat;right: 435px}
.swiper-button-prev:hover,
.swiper-button-next:hover{background-position-y: 100%;}
#slide1 .swiper-button-prev,
#slide1 .swiper-button-next{margin-top: -100px}
#slide2 .swiper-button-prev{left: -80px}
#slide2 .swiper-button-next{right: -80px}
#section3 .txt{position: absolute;width: 475px;height: 142px;left: 50%;margin-left: -238px;top: 120px;background: url("../images/txt3.png") no-repeat;}
#section3 .swiper_cont{position: absolute;width: 1000px;height: 858px;left: 50%;margin-left: -500px;bottom: 89px;overflow: hidden;}
#section3 .swiper_cont .strokes{position: absolute;width: 1196px;height: 231px;left: 50%;margin-left: -588px;background: url("../images/strokes.png") no-repeat;top: 152px}
#section3 .swiper-pagination{top: 0;height: 147px;bottom: auto;}
#section3 .swiper-pagination-bullets{font-size: 0;}
#section3 .swiper-pagination-bullets span{width: 206px;height: 100%;margin: 0 12px;display: inline-block;background: url("../images/slide_btn.png") 0 19px no-repeat;border-radius: 0;opacity: 1;border: 0}
#section3 .swiper-pagination-bullets span:nth-child(2){background-position-x: -230px;}
#section3 .swiper-pagination-bullets span:nth-child(3){background-position-x: -460px;}
#section3 .swiper-pagination-bullets span:nth-child(4){background-position-x: -690px;}
#section3 .swiper-pagination-bullets span:hover,
#section3 .swiper-pagination-bullets .swiper-pagination-bullet-active{background-position-y: 100%;}
#section3 .swiper_cont .video-container{width: 100%;height: 563px;position: absolute;bottom: 0;left: 0;background: url("../images/bg-vd.jpg") no-repeat;}
#section3 .swiper_cont .video-container img{ cursor: pointer;}
#section3 .swiper_cont iframe{display: block;width: 100%;height: 100%;border: 0;}
#section3 .swiper-slide p{position: absolute;top: 187px;width: 958px;height: 90px;left: 50%;margin-left: -479px;background: url("../images/slide_txt.png") 0 16px no-repeat;text-indent: -100000px;}
#section3 .swiper-slide .t2{background-position-y: -155px;}
#section3 .swiper-slide .t3{background-position-y: -339px;}
#section3 .swiper-slide .t4{background-position-y: -496px;}

#section4 .txt{position: absolute;width: 873px;height: 322px;left: 50%;margin-left: -436px;top: 110px;background: url("../images/txt4.png") no-repeat}
#section4 .banner{position: absolute;width: 920px;height: 502px;left: 50%;margin-left: -460px;top: 410px;background: url("../images/eventbanner_1.png") no-repeat;transition: all .3s ease-out;}
#section4 .banner:hover{margin-top: -5px;}
#section4 .banner.b2{top: 783px;background: url("../images/eventbanner_2.png") no-repeat}
#section4 .banner a{display: block;width: 100%;height: 100%;text-indent: -100000px;overflow: hidden;}
#section4 .btn_event{position: absolute;width: 560px;height: 103px;left: 50%;margin-left: -280px;bottom: 126px;text-indent: -100000px;background: url("../images/btn_event.png") no-repeat}
#section4 .btn_event:hover{background-position-y: 100%;}
#back .title {
  position: absolute;
  width: 856px;
  height: 597px;
  left: 50%;
  top: 97px;
  margin-left: -478px;
  z-index: 1;
}
#back .title span {
  display: block;
  position: absolute;
  background: url("../images/spr_title.png") 0 0 no-repeat;
}
#back .title .st,
#back .title .date,
#back .title .ot {
  background: url("../images/title.png") 0 0 no-repeat;
}
#back .title .st1 {
  width: 135px;
  height: 34px;
  left: 326px;
  top: 0;
  background-position-x: -326px;
}
#back .title .st2 {
  width: 136px;
  height: 34px;
  left: 471px;
  top: 0;
  background-position-x: -471px;
}
#back .title .st3 {
  width: 472px;
  height: 60px;
  left: 230px;
  top: 46px;
  background-position:-230px -57px;
}
#back .title .mt1 {
  width: 149px;
  height: 50px;
  left: 296px;
  top: 152px;
  background-position: -19px -16px;
}
#back .title .mt2 {
  width: 25px;
  height: 77px;
  left: 314px;
  top: 141px;
  background-position: -193px -16px;
}
#back .title .mt3 {
  width: 63px;
  height: 74px;
  left: 370px;
  top: 134px;
  background-position: -224px -16px;
}
#back .title .mt4 {
  width: 133px;
  height: 42px;
  left: 293px;
  top: 204px;
  background-position: -297px -16px;
}
#back .title .mt5 {
  width: 38px;
  height: 28px;
  left: 302px;
  top: 252px;
  background-position: -454px -16px;
}
#back .title .mt6 {
  width: 56px;
  height: 43px;
  left: 362px;
  top: 232px;
  background-position: -507px -16px;
}
#back .title .mt7 {
  width: 179px;
  height: 47px;
  left: 256px;
  top: 272px;
  background-position: -593px -16px;
}
#back .title .mt8 {
  width: 36px;
  height: 198px;
  left: 340px;
  top: 186px;
  background-position: -792px -16px;
}
#back .title .mt9 {
  width: 100px;
  height: 87px;
  left: 256px;
  top: 296px;
  background-position: -26px -127px;
}
#back .title .mt10 {
  width: 106px;
  height: 56px;
  left: 339px;
  top: 302px;
  background-position: -153px -127px;
}
#back .title .mt11 {
  width: 122px;
  height: 177px;
  left: 465px;
  top: 185px;
  background-position: -18px -239px;
}
#back .title .mt12 {
  width: 49px;
  height: 72px;
  left: 570px;
  top: 180px;
  background-position: -175px -239px;
}
#back .title .mt13 {
  width: 64px;
  height: 81px;
  left: 583px;
  top: 175px;
  background-position: -258px -239px;
}
#back .title .mt14 {
  width: 29px;
  height: 39px;
  left: 586px;
  top: 209px;
  background-position: -362px -239px;
}
#back .title .mt15 {
  width: 53px;
  height: 24px;
  left: 581px;
  top: 241px;
  background-position: -430px -239px;
}
#back .title .mt16 {
  width: 101px;
  height: 46px;
  left: 531px;
  top: 255px;
  background-position: -484px -239px;
}
#back .title .mt17 {
  width: 27px;
  height: 80px;
  left: 610px;
  top: 260px;
  background-position: -624px -239px;
}
#back .title .mt18 {
  width: 26px;
  height: 18px;
  left: 635px;
  top: 277px;
  background-position: -685px -239px;
}
#back .title .mt19 {
  width: 68px;
  height: 68px;
  left: 530px;
  top: 288px;
  background-position: -724px -239px;
}
#back .title .mt20 {
  width: 120px;
  height: 38px;
  left: 555px;
  top: 313px;
  background-position: -829px -239px;
}

#back .title .date {
  width: 784px;
  height: 49px;
  top: 548px;
  right: -10px;
  background-position: -41px 100%;
}
#back .title .ot {
  width: 828px;
  height: 400px;
  top: 130px;
  right: 0; 
  background-position-y: -127px;
}


#loading{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background:#000; z-index:20; font-size: 18px; color: #cfd1cc; z-index: 101;}
#loading .box{ width: 100%; height: 1px; background: #414141; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); left: 0;}
#loading .box span{ height: 1px; background: #c4c4c4; position: relative; top: 0; left: 0; display: block;}
#loading .box p{ font-size: 16px; line-height: 30px; color: #c0c0c0; text-align: center;}








#header .rdgbox{ position: absolute; left: 50%; transform: translateX(-50%); top: 826px; width: 983px; height: 407px; overflow: hidden; z-index: 100; text-align: center; display: none;}

#header .rdgbox li{ width: 301px; height: 407px; float: left;}
#header .rdgbox li img{ margin: 100px 0 79px 0;}
#header .rdgbox li.regist{ background: url(../images/bg_com1.jpg) no-repeat;}
#header .rdgbox li.downbox{ background: url(../images/bg_com2.jpg) no-repeat; margin: 0 40px;}
#header .rdgbox li.giftsbox{ background: url(../images/bg_com3.jpg) no-repeat;}


#header .rdgbox .btnlink{ width:180px; height:44px; line-height:44px; text-align:center; font-size:20px; display:block; margin:0 auto; background:#ffc0c6; background: linear-gradient(#fefefe,#ff8e99); font-weight:bold; color:#5d1f1b; cursor:pointer; border-radius:2px; text-decoration: none;}



.popdiv{ display:none; background:#23426f; text-align:center; font-size:16px; color:#fff; border: 2px solid #ffb4bb; background: url(../images/bg-pop.jpg) no-repeat;}
#popdiv1,#popdiv{ width:415px; height:343px;}
.popdiv .close{ width:36px; height:36px; background:url(../images/bg_close.png) no-repeat; position:absolute; right:-41px; top:0; cursor:pointer; text-indent:-9999px;}
.popdiv .pop h2{ height:60px; line-height:60px; font-size:30px; margin-top:30px; color: #fff;}
.popdiv .pop p{ height:25px; line-height:25px; }
.popdiv .pop p.p1{ margin: 60px 0 60px 0;}
.popdiv .pop span{ margin-bottom: 10px; display: block;}
.popdiv .pop .btn{  width:180px; height:44px; line-height:44px; text-align:center; font-size:20px; display:block; margin:0 auto; text-decoration: none; background:#ffc0c6; background: linear-gradient(#fefefe,#ff8e99);font-weight:bold; color:#5d1f1b; cursor:pointer; border-radius:2px; margin-top:20px;}



#video{ width: 700px; height: 462px; background: #000; display: none; font-size: 16px;}
#video .close{ position: absolute; top: 0; display: block; text-indent: -9999px; cursor: pointer; width: 48px; height: 48px; right: -50px; background: url(https://image.tiancity.com/player/images/close_btn.jpg) no-repeat;}
#video .popbox{ width: 700px; height: 462px; overflow: hidden;}	




.lettyad #header .rdgbox{ display: block;}
.lettyad #header .util{ display: none;}
.lettyad #section0 .btn_mov1{ transform: scale(0.7) !important; transform-origin: center top;}
.lettyad #back .title .date{ top: 537px;}