*{margin:0;padding:0;border:0;}
html,body{width:100%;height:100%;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0px;-moz-osx-font-smoothing:grayscale}
ul,ol,li{list-style:none}
a{text-decoration:none; display: inline-block;}
img{width:100%;display:block;}
.home{overflow:hidden;}

.swiper{width:1920px;height:100%;transform-origin:0 0;position:relative;overflow:hidden; z-index: 1}
.swiper .main-slide{width:100%;height:100%;position:relative;overflow:hidden; background-size: cover;}

.part_1{ background-image:url(img/pc_01.jpg); background-position:center center; }
.part_2{ background-image:url(img/pc_02.jpg); background-position:center center; }
.part_3{ background-image:url(img/pc_03.jpg); background-position:center center; }
.part_4{ background-image:url(img/pc_04.jpg); background-position:center center; }
.part_5{ background-image:url(img/pc_05.jpg); background-position:center center; }
.part_6{ background-image:url(img/pc_06.jpg); background-position:center center; }
.part_7{ background-image:url(img/pc_07.jpg); background-position:center center; }
.part_8{ background-image:url(img/pc_08.jpg); background-position:center center; }

.float{ width:170px; height:100%; position: absolute; top: 0; left: 0; z-index: 2; background-image: url(img/nav_bg.jpg); background-position: top; background-repeat: no-repeat;}
.float .logo{ width:140px; margin:0 auto; }
.float .float_nav{ width:140px; position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.float .float_nav a{ font-size:16px; color:#666; line-height:22px; display:block; text-align: center; margin:18px 0; position: relative; }
.float .float_nav a:nth-child(1){ font-size:22px; color:#333; margin-bottom:100px; }
.float .float_nav a:nth-child(1):before{ content:""; display:block; width:100%; height:7px; background-image: url(img/line.png); background-size: 100% 100%; position: absolute; top: 48px; left:0; }
/*.float .float_nav a:nth-child(2):before{ content:"이벤트"; color: #333; font-size: 22px; display:block; width:100%; text-align: center; position: absolute; top: -50px; left:0; }*/
.float .float_nav a:nth-child(2):before{ content:"게임 소개"; color: #333; font-size: 22px; display:block; width:100%; text-align: center; position: absolute; top: -50px; left:0; }
.float .float_nav a:nth-child(5){ margin-top:100px; }
.float .float_nav a:nth-child(5):before{ content:""; display:block; width:100%; height:7px; background-image: url(img/line.png); background-size: 100% 100%; position: absolute; top: -70px; left:0; }
.float .float_nav a:nth-child(5):after{ content:"게임 소개"; color: #333; font-size: 22px; display:block; width:100%; text-align: center; position: absolute; top: -48px; left:0; }
.float .float_nav a:hover{ color: #cb7e2a; }
.float .float_nav a.cur{ color: #cb7e2a; }
.float .soc{ width:112px; position: absolute; bottom:20px; left:50%; margin-left: -56px; text-align: center;}
.float .soc a{ width:46px; height:46px; display:block; float: left; margin: 5px; background-image:url(img/ico_soc.png); background-size: 300% 100%; filter: grayscale(100%) brightness(1.3); transition: .5s}
.float .soc a:hover{ filter:grayscale(0) brightness(1.0); }
.float .soc a:nth-child(1){ background-position:0 0 }
.float .soc a:nth-child(2){ background-position:50% 0 }
.float .soc a:nth-child(3){ background-position:100% 0 }

.copyright{ width:120px; height:36px; line-height:36px; border-radius:36px; background-color:rgba(255, 255, 255, .6); border:1px #fff solid; position: absolute; bottom:20px; right:20px; z-index:3; text-align: center; font-size:14px; color:#8c7350; cursor: pointer;}

.part_1 .t{ width:545px; display:block; position: absolute; top:50%; left:50%; transform:translate(-110%,130%); transition:.5s }

.part_1 .btn{ width:431px; display:block; position: absolute; top:50%; left:50%; transform:translate(-30%,95%); transition:.5s }
.part_1 .btn:hover{ transform:translate(-30%,92%); }

.part_1 .download{ width:100%; text-align: center; position: absolute; top:50%; left:50%; transform:translate(-50%,390%); text-indent: 160px}
.part_1 .download a{ width:220px; display:inline-block; margin:0 10px; transition: .5s}
.part_1 .download a:hover{ transform:translateY(-3px); }

.part_2 .reg_box{position: absolute; width: 520px; left: 50%; margin-left: -490px;top: 50%; margin-top: -200px; box-sizing: border-box; z-index: 3}
.part_2 .reg_box .choose_box{ text-align:center; }
.part_2 .reg_box .choose_box label{display: inline-block; font-size: 22px; color: #333; margin: 0 20px}
.part_2 .reg_box .choose_box label input{ display:inline-block; width:18px; height:18px; vertical-align:middle; margin:-3px 10px 0 0 }
.part_2 .reg_box .user_phone{height: 50px; margin-top: 25px; line-height: 50px;}
.part_2 .reg_box .user_phone b{ font-size:22px; color:#cb7e2a; display:block; float:left; }
.part_2 .reg_box .phone_box{ width: 415px; height:48px; border:1px #c0d0d6 solid; background:#fffdfa; float: left; margin-left: 15px}
.part_2 .reg_box .phone_box span{ font-size:22px; color:#77b2af; display:block; float:left; width:80px; position: relative; text-align: center;}
.part_2 .reg_box .phone_box span:after{ content:""; display:block; width:1px; height:23px; background-color:#c0d0d6; position: absolute; top:12px; right:0; }
.part_2 .reg_box .phone{width: 300px;height: 48px;line-height: 48px;font-size: 18px;color: #333; border: 0; display: block; float: left; padding-left: 20px; background-color: transparent; outline: none;}
.part_2 .reg_box .checkbox_box{font-size: 16px;color: #556162;margin: 15px 0 10px 0;}
.part_2 .reg_box .checkbox_box div{ height:35px; line-height:35px; }
.part_2 .reg_box .checkbox_box input{ width:15px; height:15px; margin: 9px 5px 0 0; display:block; float:left; }
.part_2 .reg_box .checkbox_box label{ float:left; }
.part_2 .reg_box .checkbox_box .detail{display: block; float: right; color: #cb7e2a;text-align: center;width: 86px;height: 22px;line-height: 22px;font-size: 14px; border: 1px #cb7e2a solid; border-radius: 5px; margin-top: 5px; transition: .5s}
.part_2 .reg_box .checkbox_box .detail:hover{ transform:translateY(-2px); }
.part_2 .reg_box .reg_finish{display: block;width: 500px; margin: 20px auto 0; transition: .5s}
.part_2 .reg_box .reg_finish:hover{ transform:translateY(-2px); }

.part_3 .yuyue_awards{ width:1200px; height:520px; position: absolute; top:50%; left: 50%; transform:translate(-500px,-36%); }
.part_3 .yuyue_awards ul li{ width:167px; height:460px; float:left; position: relative; }
.part_3 .yuyue_awards ul li.cur:before{content: ""; display: block; width: 200px; height: 131px; background-image: url(img/yy_cur.png); position: absolute; top: -100px; left: 50%; transform: translateX(-56%);}
.part_3 .yuyue_awards ul li:nth-child(5).cur:before{ top:-120px }
.part_3 .yuyue_awards ul li:nth-child(1){ margin-left: 60px; margin-right:57px; margin-top:60px; }
.part_3 .yuyue_awards ul li:nth-child(2){ margin-right:50px; margin-top: 50px; }
.part_3 .yuyue_awards ul li:nth-child(3){ margin-right:55px; margin-top: 60px; }
.part_3 .yuyue_awards ul li:nth-child(4){ margin-right:50px; margin-top: 50px; }
.part_3 .yuyue_awards ul li:nth-child(5){ width: 196px; margin-top: 45px; height: 553px}
.part_3 .btn_rule{ position: absolute; top: 50%; left: 50%; font-size:18px; color:#666; text-decoration:underline; transform: translate(20px,400px); transition: .5s}
.part_3 .btn_rule:hover{ color:#cb7e2a }


.part_4 .box{ width: 396px; position: absolute; top:50%; left:50%; transform:translate(-93%,150%); text-align: center;}
.part_4 .box .btn_detail{ width:100%; display:block; transition:.5s }
.part_4 .box .btn_detail:hover{ transform:translateY(-3px); }
.part_4 .box .btn_rule{ font-size:22px; color:#cb7e2a; margin-top:15px; text-decoration:underline; transition: .5s}
.part_4 .box .btn_rule:hover{ color:#c9a27b }

.part_5 .share_box{ width:520px; position: absolute; top:50%; left:50%; transform:translate(27%,88%); }
.part_5 .share_box .input_box{ width:100%; height:60px; line-height:60px; background-color:#fff; border-radius:10px; overflow:hidden; position: relative; border:1px #a68659 solid; }
.part_5 .share_box .input_box input{ width:340px; height:60px; float:left; font-size:22px; color:#333; text-align:center; outline: none;}
.part_5 .share_box .input_box a{ width:160px; height:60px; line-height: 60px; float:right; background-color:#d56546; border-radius: 10px; display: block; text-align: center; color: #fff; font-size: 22px; transition: .5s}
.part_5 .share_box .input_box a:hover{ background-color:#de7052 }
.part_5 .share_box .btn{ width:100%; text-align: center; margin-top: 20px; font-size: 0}
.part_5 .share_box .btn a{ width:240px; display:inline-block; margin: 0 10px; transition: .5s}
.part_5 .share_box .btn a:hover{ transform:translateY(-3px); }

.part_5 .btn_rule{ width: 150px; display: block; font-size:20px; color:#cb7e2a; margin:15px auto 0; text-decoration:underline; transition: .5s}
.part_5 .btn_rule:hover{ color:#c9a27b }


.part_6 .zySwiper{ width:100%; height:100%; position: absolute; top:0; left:0; }
.part_6 .zySwiper .swiper-slide{width:100%; height:100%; position: relative;}

.zySwiper .name{ position: absolute; top:50%; left:50%; transform:translate(-320px,-230px); width:170px }
.zySwiper .name img{ width:100%; display:block; position: relative; z-index: 2}
.zySwiper .name:before{ content:""; display:block; width:494px; height:374px; background-image:url(img/name_bg.png); position: absolute; top:-70px; left:-165px; z-index:1 }
.zySwiper .zy_img{ width:850px; height: 700px; position: absolute; top:50%; left:50%; transform:translate(-20%,-47%); z-index: 1;}
.zySwiper .zy_img img{ display:none; position: absolute; top:0; left:0;}
.zySwiper .zy_img img.female{ display:block; }

.part_6 .zy_tab{ width:100px; position: absolute; top:50%; left:50%; transform:translate(-480px,-150px); z-index:2 }
.part_6 .zy_tab a{ width: 84px; height:98px; background-image:url(img/zhiye/zy_tab.png); margin: 10px 0; cursor: pointer;}
.part_6 .zy_tab a:nth-child(1){ margin-left:30px; background-position: 33.33% 0;}
.part_6 .zy_tab a:nth-child(2){ background-position: 66.66% 0; }
.part_6 .zy_tab a:nth-child(3){ background-position: 100% 0; }
.part_6 .zy_tab a:nth-child(4){ margin-left:30px; background-position: 0 0;}

.part_6 .zy_tab a:nth-child(1).cur{ background-position: 33.33% 100%;}
.part_6 .zy_tab a:nth-child(2).cur{ background-position: 66.66% 100%; }
.part_6 .zy_tab a:nth-child(3).cur{ background-position: 100% 100%; }
.part_6 .zy_tab a:nth-child(4).cur{ background-position: 0 100%;}

.part_6 .zy_tab a:nth-child(1):hover{ background-position: 33.33% 100%;}
.part_6 .zy_tab a:nth-child(2):hover{ background-position: 66.66% 100%; }
.part_6 .zy_tab a:nth-child(3):hover{ background-position: 100% 100%; }
.part_6 .zy_tab a:nth-child(4):hover{ background-position: 0 100%;}


.part_6 .zy_sexy{ width:220px; position: absolute; top:50%; left:50%; transform:translate(400px,-235px); z-index:3 }
.part_6 .zy_sexy a{ width:63px; height:63px; display:block; background-image:url(img/sexy_tab.png); transition: transform .5s}
.part_6 .zy_sexy a:nth-child(1){ background-position:top left; }
.part_6 .zy_sexy a:nth-child(2){ background-position:top right; margin-left:65px; margin-top: -15px}
.part_6 .zy_sexy a:nth-child(1).cur{ background-position:bottom left; }
.part_6 .zy_sexy a:nth-child(2).cur{ background-position:bottom right; }
.part_6 .zy_sexy a:nth-child(1):hover{ background-position:bottom left; }
.part_6 .zy_sexy a:nth-child(2):hover{ background-position:bottom right; }




.szSwiper .name{ position: absolute; top:50%; left:50%; transform:translate(-400px,-180px); width:95px }
.szSwiper .sz_img{ width:750px; height: 1000px; position: absolute; top:50%; left:50%; transform:translate(-37%,-36%); z-index: 1;}
.szSwiper .sz_img img{ display:none; position: absolute; top:0; left:0;}
.szSwiper .sz_img img.female{ display:block; }

.part_7 .sz_sexy{ width:220px; position: absolute; top:50%; left:50%; transform:translate(260px,-180px); z-index:3 }
.part_7 .sz_sexy a{ width:63px; height:63px; display:block; background-image:url(img/sexy_tab.png); transition: transform .5s}
.part_7 .sz_sexy a:nth-child(1){ background-position:top left; }
.part_7 .sz_sexy a:nth-child(2){ background-position:top right; margin-left:50px; margin-top: -10px}
.part_7 .sz_sexy a:nth-child(1).cur{ background-position:bottom left; }
.part_7 .sz_sexy a:nth-child(2).cur{ background-position:bottom right; }
.part_7 .sz_sexy a:nth-child(1):hover{ background-position:bottom left; }
.part_7 .sz_sexy a:nth-child(2):hover{ background-position:bottom right; }

.part_7 .sz_tab{ position: absolute; top:50%; right:30px; transform:translateY(-50%); z-index:3 }
.part_7 .sz_tab:before{ content:""; display:block; width:18px; height:677px; background-image:url(img/sz_line.png); position: absolute; top: -30px; right:25px; z-index:0; }
.part_7 .sz_tab ul li{ width:240px; margin: 20px 0; height: 84px; cursor: pointer; position: relative; z-index: 2}
.part_7 .sz_tab ul li .cover{ width:70px; height:70px; border-radius:70px; background-image: linear-gradient(to bottom,#fffbd8,#fff 50%); float:right; position: relative; border: 4px #fff solid; box-shadow: 0 0 10px rgba(0, 0, 0, .2);}
.part_7 .sz_tab ul li .cover img{ width:100%; border:1px #c5946f solid; border-radius:70px; position: relative; z-index: 1; box-sizing: border-box;}
.part_7 .sz_tab ul li span{ float:right; line-height:84px; font-size:14px; color:#333; padding-right:25px; }
.part_7 .sz_tab ul li:hover .cover img{ border:2px #c5946f solid; }
.part_7 .sz_tab ul li.cur .cover{ border:4px #c5946f solid; }
.part_7 .sz_tab ul li.cur .cover img{ border:2px #fff solid; }
.part_7 .sz_tab ul li.cur .cover:before{content: ""; display: block; width: 110px; height: 110px; background-image: url(img/sz_cur.png); background-size: 100% 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

.part_7 .sz-pagination{ width:240px; height: 10px; position: absolute; top:50%; left:50%; bottom: initial; margin: 285px -472px; text-align: center;}
.part_7 .sz-pagination .swiper-pagination-bullet{ width:12px; height:12px; border-radius: 3px; background-color:#fff; border: 1px #f7d6dc solid; box-sizing: border-box; transform: rotate(45deg); opacity: 1; margin: 0 10px; position: relative; z-index: 3}
.part_7 .sz-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1;}
.part_7 .sz-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before{content: ""; display: block; width: 6px; height: 6px; background-color: #eaa7b2; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

.part_7 .sz-button-prev{ width: 52px; height:51px; border-radius:54px; left:50%; margin-top:270px; margin-left: -520px; background-image: url(img/arrow.png); background-size: 200% 100%; background-position: right; box-sizing: border-box;}
.part_7 .sz-button-next{ width: 52px; height:51px; border-radius:54px; left:50%; margin-top:270px; margin-left: -230px; background-image: url(img/arrow.png); background-size: 200% 100%; background-position: right; transform: rotate(180deg); box-sizing: border-box;}
.part_7 .sz-button-prev:hover{ background-position:left; }
.part_7 .sz-button-next:hover{ background-position:left; }

.tsSwiper{width:2664px;height:650px;position:absolute; top: 50%; left:50%; transform: translate(-45.5%,-35%); padding: 70px 0}
.tsSwiper .swiper-slide{width:888px;height:500px;z-index:1;position:relative;transform:scale(.8);transition:.5s; overflow: inherit;filter: brightness(0.7);}
.tsSwiper .swiper-slide img{width:888px; height: 500px; display:block; box-sizing: border-box;transition:.5s; position: relative; z-index: 2}
.tsSwiper .swiper-slide:before{content: ""; display: block; width: 922px; height: 534px; background-image: url(img/ts_box.png); background-size: 100% 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1}
.tsSwiper .swiper-slide-active{transform:translateX(0) scale(1)!important;z-index:2;filter: brightness(1.0);}
.tsSwiper .swiper-slide-prev{transform:translateX(600px) scale(.8);}
.tsSwiper .swiper-slide-next{transform:translateX(-600px) scale(.8);}


.part_8 .ts-pagination{ width: 340px; height: 20px; position: absolute; text-align: center; bottom: initial; top: 50%; margin-top: 220px; left: 50%; margin-left: -170px;}
.part_8 .ts-pagination:before{ content:""; display:block; width:100%; height:1px; border-bottom:1px #ddd dashed; position:absolute; top:8px; }
.part_8 .ts-pagination .swiper-pagination-bullet{ width:14px; height:14px; border-radius: 3px; background-color:#fff; border: 1px #f7d6dc solid; box-sizing: border-box; transform: rotate(45deg); opacity: 1; margin: 0 18px; position: relative; z-index: 3}
.part_8 .ts-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1;}
.part_8 .ts-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before{content: ""; display: block; width: 8px; height: 8px; background-color: #cb7e2a; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.part_8 .ts-pagination .swiper-pagination-bullet:first-child:after{ content:""; display:block; width:5px; height:5px; background-color:#fff; border:1px #c0d4cd solid; position: absolute; top:37px; left:-31px; }
.part_8 .ts-pagination .swiper-pagination-bullet:last-child:after{ content:""; display:block; width:5px; height:5px; background-color:#fff; border:1px #c0d4cd solid; position: absolute; top:-32px; right:-31px; }

.part_8 .ts-button-prev{ width: 54px; height:54px; border-radius:54px; margin-top: -90px; background-image: url(img/arrow.png); background-position: right; background-size: 200% 100%; box-sizing: border-box; left: 50%; margin-left: -580px;}
.part_8 .ts-button-next{ width: 54px; height:54px; border-radius:54px; margin-top: -90px; background-image: url(img/arrow.png); background-position: right; transform: rotate(180deg); background-size: 200% 100%; box-sizing: border-box; right: 50%; margin-right: -580px;}
.part_8 .ts-button-prev:hover{ background-position: left}
.part_8 .ts-button-next:hover{ background-position:left }


.pop{ width:100%; height:100%; position: absolute; top:0; left:0; z-index:9; background-color:rgba(0, 0, 0, .8); display: none}
.pop .inner{ width: 540px; background-color: #fff6e6; background-size: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 10px; padding:  25px 0}
.pop .inner:before{content: ""; display: block; width: calc(100% - 14px); height: calc(100% - 14px); border: 1px #9c886c solid; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none;}
.pop .close{ width:37px; height: 37px; background-image: url(img/close.png); display:block; position:absolute; bottom:-50px; left:50%; margin-left:-18px; transition:.5s }
.pop .close:hover{ transform:rotate(90deg); }
.pop .box_yy{ height:200px; padding:30px 0 }
.pop .box_yy p{ font-size:24px; color:#cb7e2a; text-align: center; }
.pop .box_yy b{ font-size:40px; color:#cb7e2a; text-align: center; display:block; font-weight:normal; line-height:80px; }
.pop .btn{ width:100%; text-align: center; }
.pop .btn a{ display:inline-block; margin:0 5px; transition: .5s}
.pop .btn a:hover{ transform:translateY(-3px); }

.pop .box_tips{ padding:60px; text-align: center; font-size: 24px; line-height: 40px; color: #cb7e2a;}
.pop .box_xy{ padding:0 30px 10px 30px; }
.pop .box_xy .t{ font-size: 24px; color:#cb7e2a; text-align: center; width:100%; border-bottom:1px #d8cab8 solid; position: relative; box-sizing:border-box; padding:0 30px 13px 30px; }
.pop .box_xy .t:before{ content:""; display:block; width:14px; height:14px; background-image:url(img/star.png); position: absolute; top: 11px; left:0 }
.pop .box_xy .t:after{ content:""; display:block; width:14px; height:14px; background-image:url(img/star.png); position: absolute; top: 11px; right:0  }
.pop .box_xy .rule{ padding-top: 15px; font-size:14px; color:#333; line-height:25px; }
.pop .box_xy .rule p{ color:#cb7e2a; }
.pop .box_xy .box{ box-sizing:border-box; padding:10px; background-color:rgba(140, 115, 80, .05); border:1px #e3d9c8 solid; border-radius:5px; margin: 10px 0;}

.pop .pop_t{ text-align: center; width:100%;  font-size: 24px; color:#cb7e2a;}
.pop .pop_t:before{content: ""; display: inline-block; width: 129px; height: 14px; background-image: url(img/t_line.png); vertical-align: middle; margin: -3px 10px 0 0}
.pop .pop_t:after{content: ""; display: inline-block; width: 129px; height: 14px; background-image: url(img/t_line.png); vertical-align: middle; margin: -3px 0 0 10px; transform: rotate(180deg);}

.pop .box_xy .rule_1{ padding-top: 15px; font-size:16px; color:#333; line-height:30px; padding-bottom:20px; }
.pop .box_xy .rule_1 span{color: #d76176; font-weight: bold;}

.pop .awards{ width:1256px; height:780px; background-image:url(img/pop_awards.png); position: absolute; top: 50%; left: 50%; transform: translate(-55%,-50%); }
.pop .awards .close{ bottom:-10px; margin-left:35px }
.pop .awards_btn{ width:100%; text-align: center; padding-top:600px; padding-left:50px; }
.pop .awards_btn a{ display:inline-block; margin:0 30px; transition: .5s; }
.pop .awards_btn a:hover{ transform:translateY(-3px); }

.footer{position:absolute;bottom:0;left:0;z-index:3;background-color:#20131c;width:100%;text-align:center;color:#fff;font-size:12px;line-height:22px;padding:20px 0;transition:.5s;transform:translateY(100%);text-align: center;}

.footer .age{ display:inline-block; width:55px; }
.footer .age img{ width:100% }
.footer .info{ display:inline-block; text-align: left}

.footer a{color:#fff;margin:0 5px;display:inline-block;vertical-align:middle;}
.footer a:hover{color:#9addff}
.footer p span{margin:0 5px;display:inline-block;white-space:nowrap;}
.footer p span a{ margin-top: -3px;}
.footer img{width:120px;transform:translateY(3px); display: inline-block;}