/*//////////////*/ body { padding: 0; margin: 0; background-color: #000000; } .bg_banner { width: 100%; height: 700px; background: no-repeat; background-position: top center; background-color: #000000; position: absolute; z-index: 0; } .wrapper_main_menu_top { width: 100%; height: 94px; background-color: rgba(0, 0, 0, 0.4); position: relative; z-index: 10; } .block_menu_top { width: 1000px; height: auto; margin: 0 auto; } @media (max-width: 1080px) { .block_menu_top { width: 930px; } } .logo_game { float: left; height: 94px; } .logo_game img { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .block_menu_social_top { min-width: 219px; width: auto; height: 48px; float: right; position: relative; top: 23px; } .menu_social_01 { background: url(../images/menu_social.png) no-repeat; width: 50px; height: 48px; display: block; background-position: 0px 0px; float: left; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .menu_social_01:hover { background: url(../images/menu_social.png) no-repeat; background-position: 0px -56px; } .menu_social_02 { background: url(../images/menu_social.png) no-repeat; width: 50px; height: 48px; display: block; background-position: -57px 0px; float: left; margin-left: 7px; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .menu_social_02:hover { background: url(../images/menu_social.png) no-repeat; background-position: -57px -56px; } .menu_social_03 { background: url(../images/menu_social.png) no-repeat; width: 50px; height: 48px; display: block; background-position: -114px 0px; float: left; margin-left: 7px; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .menu_social_03:hover { background: url(../images/menu_social.png) no-repeat; background-position: -114px -56px; } .menu_social_04 { background: url(../images/menu_social.png) no-repeat; width: 50px; height: 48px; display: block; background-position: -171px 0px; float: left; margin-left: 7px; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .menu_social_04:hover { background: url(../images/menu_social.png) no-repeat; background-position: -171px -56px; } /*//////////////////////////////////////////////////////////////////////////*/ /*//////////////////////////////////////////////////////////////////////////*/ /*//////////////////////////////////////////////////////////////////////////*/ /*///////// wrapper_menu_content_center_and_btn_banner ////////////*/ /*//////////////////////////////////////////////////////////////////////////*/ /*//////////////////////////////////////////////////////////////////////////*/ .wrapper_menu_content_center_and_btn_banner { width: 1000px; height: auto; margin: 0 auto; } @media (max-width: 1080px) { .wrapper_menu_content_center_and_btn_banner { width: 930px; } } .menu_content_center_and_btn_banner { width: 100%; height: auto; margin-top: 425px; } .menu_content_center_01 { background: url(../images/bg_menu.png) no-repeat; width: 939px; height: 72px; position: relative; } @media (max-width: 1080px) { .menu_content_center_01 { width: 930px; background-size: 900px auto; } } .menu_menu_01 { background: url(../images/btn_menu_menu.png) no-repeat; width: 157px; height: 66px; float: left; position: relative; margin-top: 3px; margin-left: 3px; display: block; overflow: hidden; } @media (max-width: 1080px) { .menu_menu_01 { width: 150px; } } .menu_menu_02 { background: url(../images/btn_menu_menu.png) no-repeat; width: 157px; height: 66px; background-size: 157px 66px; float: left; position: relative; margin-top: 3px; margin-left: 0px; display: block; } @media (max-width: 1080px) { .menu_menu_02 { width: 150px; } } .menu_menu_03 { background: url(../images/btn_menu_menu.png) no-repeat; width: 157px; height: 66px; background-size: 157px 66px; float: left; position: relative; margin-top: 3px; margin-left: 0px; display: block; } @media (max-width: 1080px) { .menu_menu_03 { width: 150px; } } .menu_menu_04 { background: url(../images/btn_menu_menu.png) no-repeat; width: 157px; height: 66px; background-size: 157px 66px; float: left; position: relative; margin-top: 3px; margin-left: 0px; display: block; overflow: hidden; } @media (max-width: 1080px) { .menu_menu_04 { width: 150px; } } .menu_menu_05 { background: url(../images/btn_menu_menu.png) no-repeat; width: 157px; height: 66px; background-size: 157px 66px; float: left; position: relative; margin-top: 3px; margin-left: 0px; display: block; overflow: hidden; } @media (max-width: 1080px) { .menu_menu_05 { width: 150px; } } /*menu1*/ .menu_menu_01_1 { background: url(../images/txt_menu_center.png) no-repeat; width: 157px; height: 66px; background-position: 0px 0px; float: left; position: relative; } .menu_menu_01_1 .text_inmenu_01 { background: url(../images/txt_menu_center.png) no-repeat; width: 157px; height: 66px; background-position: 0px 0px; float: left; opacity: 0; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); display: block; } .menu_menu_01_1 .text_inmenu_01:hover { background: url(../images/txt_menu_center_hover.png) no-repeat; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); background-position: 0px 0px; } /*menu2*/ .menu_menu_01_2 { background: url(../images/txt_menu_center.png) no-repeat; width: 157px; height: 66px; background-position: -157px 0px; float: left; position: relative; left: 0PX; } .menu_menu_01_2 .text_inmenu_02 { background: url(../images/txt_menu_center.png) no-repeat; width: 157px; height: 66px; background-position: -157px 0px; float: left; opacity: 0; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); display: block; } .menu_menu_01_2 .text_inmenu_02:hover { background: url(../images/txt_menu_center_hover.png) no-repeat; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); background-position: -157px 0px; } /*menu3*/ .menu_menu_01_3 { background: url(../images/txt_menu_center.png) no-repeat; width: 157px; height: 66px; background-position: -315px 0px; float: left; position: relative; left: 0px; } .menu_menu_01_3 .text_inmenu_03 { background: url(../images/txt_menu_center.png) no-repeat; width: 157px; height: 66px; background-position: -315px 0px; float: left; opacity: 0; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); display: block; } .menu_menu_01_3 .text_inmenu_03:hover { background: url(../images/txt_menu_center_hover.png) no-repeat; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); background-position: -315px 0px; } /*menu4*/ .menu_menu_01_4 { background: url(../images/txt_menu_center.png) no-repeat; width: 157px; height: 66px; background-position: -472px 0px; float: left; position: relative; left: 0px; } .menu_menu_01_4 .text_inmenu_04 { background: url(../images/txt_menu_center.png) no-repeat; width: 157px; height: 66px; background-position: -472px 0px; float: left; opacity: 0; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); display: block; } .menu_menu_01_4 .text_inmenu_04:hover { background: url(../images/txt_menu_center_hover.png) no-repeat; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); background-position: -472px 0px; } /*menu5*/ .menu_menu_01_5 { background: url(../images/txt_menu_center.png) no-repeat; width: 157px; height: 66px; background-position: -630px 0px; float: left; position: relative; left: 0px; } .menu_menu_01_5 .text_inmenu_05 { background: url(../images/txt_menu_center.png) no-repeat; width: 157px; height: 66px; background-position: -630px 0px; float: left; opacity: 0; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); display: block; } .menu_menu_01_5 .text_inmenu_05:hover { background: url(../images/txt_menu_center_hover.png) no-repeat; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); background-position: -630px 0px; } /*///////////////////////////////////////*/ .menu_enter_site { width: 217px; height: 153px; position: absolute; top: -50px; right: -88px; } @media (max-width: 1080px) { .menu_enter_site { right: -20px; } } .menu_enter_site_lv1 { background: url(../images/enter_site_l1.png) no-repeat; width: 217px; height: 153px; position: relative; z-index: 1; } .gif_animate_logo { background: url(../images/enter_site_l2.gif) no-repeat; width: 133px; height: 133px; position: absolute; z-index: 0; top: 10px; right: 43px; } .btn_enter_site { background: url(../images/enter_site_l2.png) no-repeat; width: 217px; height: 153px; position: absolute; display: block; z-index: 3; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); display: block; } .btn_enter_site:hover { background: url(../images/enter_site_l2-hover.png) no-repeat; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } /*///////////////////////////////////////*/ .menu_content_center_02 { width: 1000px; height: auto; margin: 0 auto; } @media (max-width: 1080px) { .menu_content_center_02 { width: 930px; } } .wrapper_banner { width: 835px; height: 159px; float: left; margin-top: 5px; } @media (max-width: 1080px) { .wrapper_banner { width: 766px; } } .wrapper_banner_menu { width: 159px; height: 156px; float: right; margin-top: 10px; } @media (max-width: 1080px) { .wrapper_banner_menu { margin-top: 0px; } } .wrapper_banner_menu_01 { background: url(../images/bg_btn_menu_banner.png) no-repeat; width: 159px; height: 73px; background-size: 159px 73px; margin-bottom: 5px; position: relative; } .btn_load_game { background: url(../images/btn_dow_game.png) no-repeat; width: 159px; height: 70px; background-size: 159px 73px; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); display: block; position: relative; z-index: 10; } .btn_load_game:hover { background: url(../images/btn_dow_game_hover.png) no-repeat; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); width: 159px; height: 60px; background-size: 159px 73px; } .btn_load_patch { background: url(../images/btn_dow_patch.png) no-repeat; width: 159px; height: 70px; background-size: 159px 73px; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -moz-transform: scale(0.9, 0.9); -ms-transform: scale(0.9, 0.9); -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); display: block; position: relative; z-index: 10; } .btn_load_patch:hover { background: url(../images/btn_dow_patch_hover.png) no-repeat; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 1; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); width: 159px; height: 60px; background-size: 159px 73px; } .text_download_game { font-family: 'TrueLight'; font-size: 16px; line-height: 14px; font-weight: bold; text-align: center; position: absolute; top: 36px; left: 0; right: 0; margin-left: auto; margin-right: auto; color: #898989; text-transform: uppercase; } .bg_banner_box { background: url(../images/bg_banner.png) no-repeat; width: 278px; height: 159px; float: left; } @media (max-width: 1080px) { .bg_banner_box { width: 255px; background-size: 255px 146px; } } .bg_banner_box_click { background: url(../images/bg_banner_over.png) no-repeat; width: 270px; height: 151px; margin: 0 auto; position: relative; left: -1px; top: 3px; overflow: hidden; } @media (max-width: 1080px) { .bg_banner_box_click { width: 249px; height: 140px; } } .bg_banner_box_click img { width: 270px; height: 151px; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; -moz-transform: scale(1.02, 1.02); -ms-transform: scale(1.02, 1.02); -webkit-transform: scale(1.02, 1.02); transform: scale(1.02, 1.02); } .bg_banner_box_click img:hover { -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; opacity: 0.9; -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } @media (max-width: 1080px) { .bg_banner_box_click img { width: 249px; height: 140px; } }