/*should be set up body style in every secene CSS*/ body { margin: 0; padding: 0; background:white ; font-family: "Arial", arial, sans-serif; font-size: 1.5vw; font-weight: normal; color: black;} /* ################### GNB ################### */ #GNB { position: absolute; left:0; top:0; width:100%; background-color: black; z-index: 1001} #gmenu_left { position: absolute; width: 40%; height:40%; left: 0%; top:40%; text-align: right; cursor: pointer; } #gmenu_right { position: absolute; width: 40%; height:40%; left: 60%; top:40%; text-align: left; cursor: pointer; } .g_menu { display:inline-block; width: 25%; height:100%; vertical-align: top; text-align: center; font-family: Verdana, Geneva, sans-serif; font-size: 1.1vw; font-weight: normal; color: white; } #gamelistmenu img {display:inline-block; width: 8%; margin-left: 9%} .box_contents a:link, .box_contents a:visited {text-decoration: none; color:black; font-weight: bold} .box_contents a:active {text-decoration: none; color:orange; } .box_contents a:hover {text-decoration: none; color:white; } #dlogo { position:absolute; left:46.5%; top: 15%; width: 7%; } #lang { position:absolute; padding-top:0.1%; width:5.5%; height:22%; right:1%; top: 40%; background-color: #111; border-radius:25px; overflow:hidden; font-family: Verdana, Geneva, sans-serif; font-size: 1vw; font-weight: normal; color: #b9a25e; text-align: center; cursor: pointer; } /* ################### Main ################### */ #fbevent_canvas {position: absolute; left:0; top:0; width: 100%; height:100%; background: url("../susun/news/images/bg.jpg") no-repeat center center; background-size: 100% 180%;} #fbevent_tag {position: absolute; left:0; top:1.5%; height: 30%} #fe_title {position: absolute; left:25%; width: 50%; top:2.5%} #fe_gift {position: absolute; width: 60%; left:20%; top:42.5%;} #fe_mainimg {position: absolute; left:37.5%; width: 18.5%; bottom:0%} #symbol_susun {position: absolute; height:15%; right:2.5%; top: 5%} #fb_achievment {position: absolute; width:65%; height:20%; left:20%; top:8%; border-radius: 0.5em; background-color:#001748; display: none} #_fb_img {position: absolute; width: 9%; left:1%; top:6%;} #_fb_title {position: absolute; width: 60%; height:15%; left:12%; top:18%; font-size: 2vw; color:yellow;} #_fb_desc {position: absolute; width: 90%; height:35%; left:12%; top:60%; font-size: 1.25vw; color:white;} #_fb_rewards {position: absolute; width: 40%; height:15%; right:5%; top:10%; text-align: right; font-size: 1.25vw; color: white} #_fb_rewards img{width: 6%; vertical-align: bottom;} #btn-close-fbachieve {position: absolute; width: 2.5%; right:1%; top:8%; cursor: pointer;} #index_main { position: relative; margin-top:6%; width: 100%; background-color: #191b1e; overflow: hidden;} #susun_main { position: relative; margin-top:6%; width: 100%; background: url('../images/susun_home_bg.png') bottom center no-repeat; background-size: 100% 100%; } #big2_main { position: relative; margin-top:6%; width: 100%; /*background: url('../images/b2_bg.png') bottom left no-repeat; background-size: 74%; */ background-color: #04273d; overflow: hidden; } #qq_main { position: relative; margin-top:6%; width: 100%; background-color: #a05601; overflow: hidden; } .mainstory_bg {position: absolute; width: 100%; height: 100%;} #mainstory_img1 {position: absolute; width: 70%; left:0; bottom: 0;} #susun_img {position: absolute; width: 35%; left:34.5%; top: 30%;} #susun_dragon_img {position: absolute; width: 35%; left:36.5%; top: 2%;} #qq_main_img {position: absolute; width: 100%; top:1.5%;} #big2_img {position: absolute; width: 35%; left:34.5%; top: 18%;} #b2_img_tour {position: absolute; width: 12%; left:59%; top: 61%;} #susun_logo {position: absolute; width: 9%; left:76%; top:34%;} #newbig2_logo_main {position: absolute; width:10%; left:76%; top:38%;} #newbig2_logo {position: absolute; width: 8%; right:2%; top:5.5%;} #vipgirl { position: absolute; width: 35%; left:45%; bottom: 0;} #tourna_bg {position: absolute; width: 50%; left:5%; top:-8%; opacity: 0.75} #b2_tourna { position: absolute; width: 25%; left:44%; bottom: 12%;} #btitle { position: absolute; left: 71%; top: 53.5%; font-family: "Arial", arial, sans-serif; font-size: 1.5vw; font-weight: normal; color: white; } #bdesc { position: absolute; left: 71%; top: 57%; font-family: "Arial", arial, sans-serif; font-size: 2.5vw; font-weight: normal; color:rgba(255,255,255,0.85); } #mtitle { position: absolute; left: 73%; top: 53.5%; font-family: "Arial", arial, sans-serif; font-size: 1.5vw; font-weight: normal; color: white; } #mdesc { position: absolute; left: 73%; top: 57%; font-family: "Arial", arial, sans-serif; font-size: 2.5vw; font-weight: normal; color:rgba(255,255,255,0.85); } #stitle { position: absolute; right: 3%; top: 45%; text-align:right; font-family: "Helvetica Neue", helvetica neue, sans-serif; font-size: 2.5vw; font-weight: bold; color: white; } #pdesc { position: absolute; right: 1.5%; top: 56.5%; text-align:right; font-family: "Arial", arial, sans-serif; font-size: 2vw; font-weight: normal; color: yellow; } #sm_title { position: absolute; left: 73.5%; top: 22.5%; font-family: "Arial", arial, sans-serif; font-size: 1.5vw; font-weight: normal; color: white; } #sm_desc { position: absolute; left: 73%; top: 27%; font-family: "Arial", arial, sans-serif; font-size: 2vw; font-weight: normal; color:yellow } /* Domino QQ update */ #pm_img {position: absolute; width: 37.5%; left:34.5%; top: 15%;} #pm_logo {position: absolute; width: 13%; left:85%; top:7.5%;} ._go_txt3 {position: absolute; width: 70%; left:23%; top:12%; color:#ffb900; font-size: 2.25vw; font-family: Verdana, Geneva, sans-serif;} ._go_desc3 {position: absolute; width: 70%; left:25%; top:63%; color:#ffb900; font-size: 1vw; font-family: Verdana, Geneva, sans-serif; } #qtitle { position: absolute; left: 65.5%; top: 54.5%; font-family: "Arial", arial, sans-serif; font-size: 1.5vw; font-weight: normal; color: white; } #qdesc { position: absolute; left: 65.5%; top: 56.5%; font-family: "Arial", arial, sans-serif; font-size: 2.25vw; font-weight: normal; color:rgba(255,255,255,0.85); } #qtitle2 { position: absolute; left: 72.5%; top: 54.5%; font-family: "Arial", arial, sans-serif; font-size: 1.5vw; font-weight: normal; color: white; } #qdesc2 { position: absolute; left: 72.5%; top: 56.5%; font-family: "Arial", arial, sans-serif; font-size: 2.25vw; font-weight: normal; color:rgba(255,255,255,0.85); } .story_desc { position: absolute; width:70%; right: 0%; bottom: 12%; font-family: "Arial", arial, sans-serif; font-size: 1.5vw; font-weight: normal; color: white;} #susun_story1 { position: absolute; width:70%; left: 17%; bottom: 3.5%; font-family: "Arial", arial, sans-serif; font-size: 1.15vw; font-weight: normal; color: white; opacity: 0.5} #l_quo { left: 5%; top: 40%; width: 0.75em; margin: 0; vertical-align: top;} #r_quo { left: 39%; top: 51.5%; width: 0.75em; margin: 0; vertical-align: top; /* Rotate div */ -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); } #susun_cards {position: absolute; width: 19%; left:69%; top:44%} #susun_logo2 {position: absolute; width: 7%; right:2%; top:5%;} #qq_logo2 {position: absolute; width: 12.5%; left:2%; top:1%;} /*#big2_sicon {position: absolute; left:-10%; top:0%; width: 24%; } */ #qq_desc {position: absolute; width: 40%; height:25%; left:15%; top:1.25%; font-size: 3vw; font-weight: normal; color:white;} #play_big2_s {position: absolute; left:10%; bottom:7.5%; width: 24%; height:14%; border-radius: 5em; background-color: black; cursor: pointer;} #play_susun_s {position: absolute; left:40%; bottom:10%; width: 24%; height:14%; border-radius: 5em; background-color: black} ._splayimg {position: absolute; width: 25%; right:2%; top:2%;} ._s_label {position: absolute; left:8%; top:8%; font-size: 1.5vw; font-style:italic; color:white;} ._s_play {position: absolute; left:6.5%; top:35%; font-size: 2vw; color:orange} #play_big2_desc {position: absolute; font-size:1.25vw; font-style: italic; left: 5%; width:150%; bottom: -22.5%; color: yellow} #download { position: absolute; left:2%; top: 51%; width:12%; height:35%; } #download img {width : 100%; margin-top: 5%; cursor: pointer;} #play_big2, #play_susun, #play_pm {position: absolute; width: 20%; right:5%; bottom:10%; cursor: pointer;} #pn1 {position: absolute; left:10%; padding-top:7%; font-family: "Arial", arial, sans-serif; font-size: 3vw; font-weight: bold; color: white;} #pn2 {position: absolute; left:10%; padding-top:20%; font-family: "Arial", arial, sans-serif; font-size: 1.5vw; font-weight: normal; color: orange;} #vipgirl_info { position: absolute; padding:1%; right:10%; bottom: 1%; font-family: "Times New Roman", Georgia, Serif; font-size: 1.2vw; font-weight: normal; font-style:italic; color: white; } #nindy_info { position: absolute; padding:1%; right:10%; bottom: 1%; font-family: "Times New Roman", Georgia, Serif; font-size: 1.2vw; font-weight: normal; font-style:italic; color: white; } #nindy { position: absolute; width: 57%; right:0; bottom: 0;} {position: absolute; left:0; bottom:0; width:100%; height: 100%; display: none} #story101, #story102, #story103 {position: absolute; left:0; bottom:0; width:100%; height: 100%; display: none} #story2, #story3 {position: absolute; left:0; bottom:0; width:100%; height: 100%; display: none} #story1 {position: absolute; left:0; bottom:0; width:100%; height: 100%; } #s_story2, #s_story3 {position: absolute; left:0; bottom:0; width:100%; height: 100%; display: none} #s_story1, #q_story1 {position: absolute; left:0; bottom:0; width:100%; height: 100%; } #fb_inv_event {width: 100%; height: 100%; border: 0} .girl_img {position: absolute; width:30%; left:20%; bottom: 0%;} .girl_img2 {position: absolute; width:25%; left:15%; top: 5%;} #quickplay {position: absolute; width: 10%; height:50%; left:2.5%; top:110%; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; background-color: rgba(0,0,0,0.75);} #_q_label {position: absolute; left:5%; top:2.5%; width: 90%; height:10%; border-radius: 0.75em; background-color: rgba(255,255,255,0.25); font-size:1.25vw; font-style: italic; color: black; text-align: center; padding-top: 1%;} #_q_susun {position: absolute; left:5%; top:17%; width: 90%; height:26.5%; border-radius: 0.5em; cursor: pointer } #_q_newbig2 {position: absolute; left:5%; top:44%; width: 90%; height:26.5%; border-radius: 0.5em; cursor: pointer} #_q_pm {position: absolute; left:5%; top:71%; width: 90%; height:26.5%; border-radius: 0.5em; cursor: pointer} #_q_susun img, #_q_newbig2 img, #_q_pm img {position: absolute; left:2.5%; top: 5%; width: 43.5%;} ._q_gname {position: absolute; left:52%; top: 15%; width: 40%; height:70%; font-size:1.15vw; color: white; } ._gobutton {position: absolute; left:72%; top:77%; width: 20%; height:15%; border-radius: 25em; background-color: black} ._go_txt {position: absolute; width: 70%; left:23%; top:12%; color:#fe6901; font-size: 2.25vw; font-family: Verdana, Geneva, sans-serif;} ._go_desc {position: absolute; width: 70%; left:25%; top:63%; color:#fe6901; font-size: 1vw; font-family: Verdana, Geneva, sans-serif; } ._go_txt2 {position: absolute; width: 70%; left:23%; top:12%; color:#55cdff; font-size: 2.25vw; font-family: Verdana, Geneva, sans-serif;} ._go_desc2 {position: absolute; width: 70%; left:25%; top:63%; color:#55cdff; font-size: 1vw; font-family: Verdana, Geneva, sans-serif; } ._gobutton img {position: absolute; width: 5.5%; left:85.5%; top:36%; } /* ################### features ################### */ #features {margin-left:15%; margin-right:5%; margin-top: 2%; width: 80%; } #main_features {margin-left:5%; margin-right:5%; margin-top: 5%; width: 90%; } #features p, #main_features p {margin-top:2%; font-family: "Times New Roman", Georgia, Serif; font-size: 1.5vw; font-weight: normal; font-style: italic; color: #777; } #f_title, #f_interview { margin-top:2%; font-family: "Helvetica Neue", helvetica neue, sans-serif; font-size: 2vw; font-weight: bold; color: black;} .f_icon { width: 4%; vertical-align: bottom;} #screenshots { position: relative; width: 75%; margin-left:3%; padding:0.75%; background-color: #ccc; border-radius: 5px; } #prevpan {position: absolute; left:-4.2%; top:45%; width: 5%; z-index: 1010; opacity: 0.2; cursor: pointer;} #nextpan {position: absolute; right:-4.2%; top:45%; width: 5%; z-index: 1010; opacity: 0.7; cursor: pointer; /* Rotate div */ -ms-transform: rotate(180deg); /* IE 9 */ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ transform: rotate(180deg); } #nextpanimg, #prevpanimg {width: 100%;} .nav_tablecircle {cursor: pointer} #canvas_slide { width: 100%; overflow: hidden;} /*수순 스크린샷 */ #susun_slide { position: relative; width: 500%; margin: 0; padding: 0; } /*should be changed depends on the numbers of images */ .susun_shot { float: left; width: 20%; cursor: pointer;} /*Big2 스크린샷 */ #big2_slide { position: relative; width: 500%; margin: 0; padding: 0; } /*should be changed depends on the numbers of images */ .big2_shot { float: left; width: 20%; cursor: pointer;} #dotnav { width:80%; text-align: center; margin-top: 2%;} #dotnav img {width:2%; opacity: 0.2} /* ######### Footer ######### */ #footer { margin-top: 10%; width: 96%; padding-left: 2%; padding-top: 0.5%; font-family: "Times New Roman", Georgia, Serif; font-size: 1.2vw; font-weight: normal; font-style:italic; color: #555555; } /* #### popup Menu ######### */ #gamelist { position: absolute; width: 9%; height:180%; left:30%; top:30%; z-index: 1001; display: none; background: url('../images/game_menu_down_bg.png') center bottom no-repeat; background-size: 100% 80%; } #newbig2 { position: absolute; width:100%; height:12.5%; left:0%; top:45%; padding-top:10%; font-family: Verdana, Geneva, sans-serif; font-size: 1.1vw; font-weight: normal; color: white; text-align: center; cursor: pointer;} #susun { position: absolute; width:100%; height:12.5%; left:0%; top:26%; padding-top:10%; font-family: Verdana, Geneva, sans-serif; font-size: 1.1vw; font-weight: normal; color: white; text-align: center; cursor: pointer;} /* Domino Update */ #pm { position: absolute; width:100%; height:12.5%; left:0%; top:26%; padding-top:10%; font-family: Verdana, Geneva, sans-serif; font-size: 1vw; font-weight: normal; color: white; text-align: center; cursor: pointer;} #language_select { position:absolute; padding:0.5%; width:5%; right:1%; top: 20%; background-color: #292929; border-radius:5px; overflow:hidden; text-align: left; cursor: pointer; z-index: 1002; display: none;} .ls_s { font-family: "Arial", arial, sans-serif; font-size: 1vw; font-weight: normal; color: #d7d7d7; vertical-align: center; margin-bottom:10%; padding-left:10%; } #login_box, #log_info { position: absolute; width: 20%; top:3.5%; right:14.5%; padding:0%; text-align: center; z-index: 1005; display: none;} #box_arr img { width: 7.5%; margin: 0%;} .box_contents { position: absolute; top:45% ; margin: 0%; padding:5%; width: 100%; background-color: black; border-radius: 0.5em; font-family: "Arial", arial, sans-serif; font-size: 1.1vw; font-weight: normal; color: white; text-align: left} #fb_login {width: 85%; cursor: pointer;} #box_contents span { font-family: "Arial", arial, sans-serif; font-size: 1.1vw; font-weight: normal; color: #7da7d9; text-align: left} .btn-close {position: absolute; width: 8.5%; right:-7%; top:65%; z-index: 1007; opacity: 0.5; cursor: pointer;} #uid, #uemail { font-family: "Arial", arial, sans-serif; font-size: 1.25vw; font-weight: normal; color: #7da7d9; } /* 유저 코멘트 */ .user_comment { display:inline-block; width: 90%; } .u1 {float:left; width: 15%; font-family: "Arial", arial, sans-serif; font-size: 1.25vw; font-weight: normal; font-style: italic; color: #555; text-align: center; } .u2 {float:left; width: 75%; padding:2%; background-color: #eee; font-family: "Arial", arial, sans-serif; font-size: 1.25vw; font-weight: normal; font-style: italic; color: #555; border-radius: 0.5em;} .u_porfile {width: 55%;} #gocomment {text-align: right; text-decoration: none} #gocomment img {width: 1.5%; opacity: 0.5; -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ transform: rotate(90deg); } #letsign {background-color: #f7941d; padding:2%; border-radius: 0.35em; text-align: center; color:orange;} /* 뉴스 */ #news_pan {width: 70%; left:10%;} .news_box {display: inline-block; padding:1%; margin-top: 2%; width: 100%; height:5%; background-color: #eee; border-radius: 0.5em} .news_title {font-family: "Arial", arial, sans-serif; font-size: 1.5vw; font-weight: bold; color: #2e3192; } .news_date {font-family: "Arial", arial, sans-serif; font-size: 1.15vw; font-weight: normal; font-style: italic; color: #555; } .news_content {font-family: "Arial", arial, sans-serif; font-size: 1.25vw; font-weight: normal; color: #555; } #support_area {width: 100%; text-align: left;} .sp_d {display: inline-block; width:18%; vertical-align: top; text-align: center; font-family: "Arial", arial, sans-serif; font-size: 1.1vw; font-weight: normal; color: #555; } .sp_d img {width: 27%; } /*사인업 Panel */ #signup_pan {width: 80%; margin-left: 17.5%; text-align: left;} #span_l {display: inline-block; width: 22%; vertical-align: top;} #span_r {display: inline-block; width: 70%; vertical-align: top;} .slabel {line-height:2.7em; font-family: "Arial", arial, sans-serif; font-size: 1.75vw; font-weight: normal; color: #555;} #register img, #change_pw img {width: 6%; vertical-align: middle;} #register span, #change_pw span {color: #555} #signup_sns {text-align: center;} .sns_s {width: 30%; margin-bottom: 1%; cursor: pointer;} #dia_desc {font-family: "Arial", arial, sans-serif; font-size: 1.1vw; font-weight: normal; color: #aaa;} #currentbalance {position: absolute; width: 25%; right:5%; top:5%; padding: 0.5%; background-color:#ccc; border-radius: 0.5em; text-align: center; font-family: "Arial", arial, sans-serif; font-size: 1.1vw; font-weight: normal; color: #555; } #input_gvoucher {text-align: center; } #gvoucher_rate {display:inline-block; padding:2%; width: 60%; background-color: #eee; border-radius: 0.5em; text-align: left; font-family: "Arial", arial, sans-serif; font-size: 1.25vw; font-weight: normal; color: #555;} #gvoucher_rate img {float: left; margin-right: 4%; width: 25%;} #gvoucher_rate ul {font-family: "Arial", arial, sans-serif; font-size: 1.25vw; font-weight: normal; color: #0054a6} /* ######## 메세지 팝업 ########### */ #message_popup {position: absolute; padding:2%; width: 50%; left: 25%; top:15%; text-align: center; background-color: #333; border-radius: 0.5em; display: none; z-index: 2002;} #message_popup p { font-family: "Arial", arial, sans-serif; font-size: 1.75vw; font-weight: bold; color: orange; } #message_popup span { font-family: "Arial", arial, sans-serif; font-size: 1.5vw; font-weight: normal; color: white; } #btn-mclose {position: absolute; width: 3%; right:1%; top:3%; z-index: 1008; opacity: 0.5; cursor: pointer;} /* ##### Standard Input form design ######## */ input[type="checkbox"] { display: none; } input[type="checkbox"] + label { cursor: pointer; font-size: 1.5vw; font-weight: normal; color: white; } input[type="checkbox"] + label:before { border: 0; background: #999; border-radius: 0.2em; overflow:hidden; display: inline-block; font-size: 1.5vw; margin-right: 1%; width: 0.9em; height: 0.9em; content: "\00a0"; vertical-align: middle;} input[type="checkbox"]:checked + label:before { background: #999; color: white; content: "\2713"; text-align: center; } input[type="checkbox"]:checked + label:after { font-weight: bold } #save_id_txt {font-size: 1.15vw; color:#aaa;} input[type="text"], input[type="password"] { width: 80%; padding: 2%; margin-bottom: 2.5%; font-size:1.25vw; border: solid 0px #c9c9c9; background-color: #555555 } #register input[type="text"], #register input[type="password"], #change_pw input[type="text"], #change_pw input[type="password"] { width: 50%; padding: 2%; margin-bottom: 2.5%; font-size:1.25vw; border: solid 0px #c9c9c9; background-color: #555555 } input[type="button"], input[type="submit"] { background: #5B74A8; background: -moz-linear-gradient(top,#5B74A8 0%,#5B74A8 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#5B74A8), color-stop(100%,#5B74A8)); background: -webkit-linear-gradient(top,#5B74A8 0%,#5B74A8 100%); background: -o-linear-gradient(top,#5B74A8 0%,#5B74A8 100%); background: -ms-linear-gradient(top,#5B74A8 0%,#5B74A8 100%); background: linear-gradient(top,#5B74A8 0%,#5B74A8 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5B74A8',endColorstr='#5B74A8',GradientType=0); padding:2px 6px; color:#fff; font-family:'Helvetica',sans-serif; font-size:1.25vw; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; border:1px solid #1A356E; } #message_ok { background: #aaaaaa; background: -moz-linear-gradient(top, #aaaaaa 0%, #aaaaaa 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0%, #aaaaaa), color-stop(100%, #aaaaaa)); background: -webkit-linear-gradient(top, #aaaaaa 0%,#aaaaaa 100%); background: -o-linear-gradient(top,#aaaaaa 0%,#aaaaaa 100%); background: -ms-linear-gradient(top,#aaaaaa 0%,#aaaaaa 100%); background: linear-gradient(top,#aaaaaa 0%,#aaaaaa 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa',endColorstr='#aaaaaa',GradientType=0); padding:2px 6px; color:#000; font-family:'Helvetica',sans-serif; font-size:1.25vw; border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; border:1px solid #1A356E; } #input_gvoucher input[type="text"] { width: 5%; padding: 0.5%; margin-bottom: 2.5%; font-size:1.25vw; border: solid 0px #c9c9c9; background-color: #555555 } /* ######## Loading Circle ########## */ #circularG {position:absolute; left:43.5%; top: 60%; width:5.5%; display: none;} #circularG img {position:absolute; width:100%;} #topupwin {position: absolute; left:0%; top:0%; width: 100%; height:100%; background-color: rgba(0,0,0,0.75); z-index: 1500} #_topup {position: absolute; padding:0; border:0px; left:15%; top:15%; width: 70%; height: 50%; } #btn-close-topup {position:absolute; left:83.5%; top:15%; width: 3%; cursor: pointer;}