@charset "utf-8";

/* ALL *******************************************************************************************/ 
html{font-size:62.5%}
body{font-size:16px;font-size:1.6rem;letter-spacing:-.02em;overflow-x:hidden;*overflow-x:inherit} /* 16px */
h1{font-size:24px;font-size:2.4rem} /* 24px */
h2{font-size:18px;font-size:1.8rem;text-transform:uppercase}/* 18px */
*:first-child+html h2{text-shadow:none;filter:none}
body, div, ul, li, dl, dt, dd, ol, p, h1, h2, h3, h4, h5, h6, form{margin:0;padding:0}
ul, ol, dl, li{list-style:none}
img{vertical-align:middle}
em{font-style:normal}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;margin:0;padding:0}
img{max-width:100%!important;width:auto\9!important;height:auto;border:0}
html, body{min-height:100%;height:100%}
a{cursor:pointer;text-decoration:none}
a, img{border:none;border:0;outline:none}
strong{font-weight: bold}
input{border:0}


 
/* HTML Reset */
@font-face{
 font-family:'Titillium Web';
 font-style:normal;
 font-weight:400;
 src:local('titillium-regular-webfont'), local('titillium-regular-webfont'), local('titillium-regular-webfont');
 src:url('https://gbs1.redprogamer.com/css/font/titillium-regular-webfont.eot'); 
 src:url('https://gbs1.redprogamer.com/css/font/titillium-regular-webfont.eot?#iefix') format('embedded-opentype'),  
 url('https://gbs1.redprogamer.com/css/font/titillium-regular-webfont.woff') format('woff'),  
 url('https://gbs1.redprogamer.com/css/font/titillium-regular-webfont.ttf') format('truetype'),
 url('https://gbs1.redprogamer.com/css/font/titillium-regular-webfont.svg#titillium') format('svg');
}

/* Font Family */
body,table,input,button,textarea,select,input{font-family:Titillium Web,Verdana, Geneva, sans-serif}

h2{font-size:1.8em;text-transform:uppercase;letter-spacing:-.02em}
*:first-child+html h2{text-shadow:none;filter:none}
/* text deco */
.align_l{text-align:left!important}
.align_r{text-align:right!important}
.align_c{text-align:center!important}
.clear{clear:both}

/* layout */
section{padding:0 1%;width:98%}
section>div, aside>div{max-width:1280px;margin:0 auto;z-index:1}
section>div{padding-bottom:40px}

/* Mobile */
/* GB-GNB */ 
.gb-gnb{position:relative;margin:0;z-index:1;background:#151515;z-index:10}
.gb-gnb>div{min-width:230px;margin:0 auto}
.gb-gnb>div button{position:absolute;top:20px;right:10px;width:40px;height:30px;padding:0;background:#DDD;border-radius:3px;cursor:pointer;border:0}

.gb-gnb a{display:block;padding:7px 0 5px 0;margin:0 0 1px 0;color:#FFF;text-decoration:none;word-break:break-all;white-space:nowrap}
.gb-gnb a:hover,.gb-gnb a.active{color:#FC3}
.gb-gnb>div>ul{display:none} 
.gb-gnb>div>ul>li>a{text-transform:uppercase;font-weight:600;margin-top:1px;padding-left:15px;font-size:16px;font-size:1.6rem;background:#433165;text-align:left}

.gb-gnb li>ul{background:#333}
.gb-gnb li li{float:left;font-size:.8em;padding:5px 15px}
.gb-gnb li li>a{font-size:13px;font-size:1.3rem;word-break:break-all;white-space:nowrap}
.gb-gnb li ul:after{content:"";display:block;clear:both} /* float */

.gb-gnb>div>ul.active{display:block}

/* GB TOP */
.start-area{margin-top:20px}
.start-area a{display:inline-block;zoom:1;*display:inline;font-family:Impact, Charcoal, sans-serif;color:#333;background:#CCC;width:90%;height:33px;line-height:26px;border:3px solid #333;border-radius:30px;
	text-transform:uppercase;font-size:2.2rem;font-size:22px;line-height:1em;padding:14px 2% 6px;overflow:hidden;text-align:center;z-index:1;zoom:1}

.start-area .btn_gameStart{visibility:hidden} 
.start-area .btn_top{visibility:hidden}
.start-area .btn_signUp{display:inline-block;zoom:1;*display:inline}
.start-area .btn_facebook{background:#369;padding:14px 2% 6px;min-height:33px;color:#FFF}
.start-area .btn_top,.start-fixed .btn_top{visibility:hidden}

.after_login p.search{position:relative;display:inline-block;zoom:1;*display:inline;background:#FFF;width:90%;padding:4px 2% 6px;height:43px;border:3px solid #999;border-radius:30px;overflow:hidden;*margin-top:3px}
.after_login p.search .txt{float:left;border:0;width:180px;height:16px;font-size:16px;font-size:1.6rem;margin:-5px 0;padding:20px 0}
.after_login p.search .btn{ position:absolute;top:0;right:-2px;width:100px;height:60px;color:#FFF;background:#999;font-family:Impact,Charcoal,sans-serif;font-size:22px;font-size:2.2rem;text-transform:uppercase;margin:-5px 0}

/* aside Sitemap */
#aside{width:100%;clear:both;border-top:#d2181c solid 3px;display:block;height:500px;background:#333}
.sitemap{float:left;width:80%;max-width:700px;margin:0 auto;padding-top:50px}
.sitemap>li{display:inline-block;zoom:1;*display:inline;vertical-align:top;top:0;width:23%;*width:23%;padding-right:3.64%;*padding-right:2.8%;min-height:180px}
.sitemap>li {padding-right:0 !important}
.sitemap>li a{color:#fff;margin-bottom:10px}
.sitemap>li a:hover{color:#fff}
.sitemap>li>ul{margin-top:10px}
.sitemap ul li{font-size:15px;font-size:1.5rem;line-height:25px}
.sitemap ul li.upperMenu{color:#d2181c;font-size:17px;font-size:1.7rem;text-transform:uppercase}
.sitemap ul li a{color:#b6b6b6}
.sitemap ul li a:hover{color:#fff}

.aside-link{float:right;width:20%;max-width:150px;margin-top:20px}

.aside-link li{display:inline-block;zoom:1;*display:inline;width:62px;height:62px;background:#333 url(img/aside_link.gif) no-repeat 0 0;margin-right:10px;margin-bottom:10px}
.aside-link li a{display:inline-block;zoom:1;*display:inline;width:62px;height:62px}
.aside-link li.fb{background-position:0 0}
.aside-link li.tw{background-position:-82px 0;margin-top:30px}
.aside-link li.photo{background-position:0 -110px;margin-top:30px}
.aside-link li.forum{background-position:-82px -110px}
.aside-link li.gp{background-position:-82px -188px}

/* aside, sitemap */
#aside{display:none}
.moveTop{top:0;left:50%}

.common_progress{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:.8;filter:alpha(opacity=80);z-index:999 }
.common_progress img{position:absolute;top:50%;left:50%;width:66px;height:66px;margin:-33px 0 0 -33px;z-index:1000 }

/* wide Mobile *******************************************************************************************/
@media all and (min-width:640px){
.start-area a{width:115px}
.start-area .btn_facebook{padding:4px 2% 6px;height:43px}

}
/* Tablet & Deasktop *******************************************************************************************/
@media all and (min-width:768px){
/* layout */
.start-area a{margin-right:15px;max-width:150px}

.start-area{position:relative;margin-top:0;height:130px;z-index:1;visibility:visible;/* Permalink - use to edit and share this gradient:http://colorzilla.com/gradient-editor/#feffff+0,a8a8a8+100 */
	background:rgb(237,232,231);/* Old browsers */
	background:-moz-linear-gradient(top,rgba(252,252,252,1) 0%,rgba(237,232,231,1) 100%);/* FF3.6+ */
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(252,252,252,1)),color-stop(100%,rgba(237,232,231,1)));/* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top,rgba(252,252,252,1) 0%,rgba(237,232,231,1) 100%);/* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top,rgba(252,252,252,1) 0%,rgba(237,232,231,1) 100%);/* Opera 11.10+ */
	background:-ms-linear-gradient(top,rgba(252,252,252,1) 0%,rgba(237,232,231,1) 100%);/* IE10+ */
	background:linear-gradient(to bottom,rgba(252,252,252,1) 0%,rgba(237,232,231,1) 100%);/* W3C */
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc',endColorstr='#ede8e7',GradientType=0) /* IE6-9 */}

.start-area>div{position:relative}
.before_login,.after_login{display:none}

.before_login .btn_gameStart{display:block;position:absolute;right:0;top:-20px;z-index:5;zoom:1;cursor:pointer} 
.before_login p{float:left;min-width:780px;height:95px;margin-top:25px;padding-top:10px;text-align:left;background:url(img/sub_startBG.jpg) no-repeat right bottom}

.after_login{display:block}
.after_login{text-align:center;padding-top:40px;padding-bottom:40px}
.after_login a{display:inline-block;zoom:1;*display:inline;font-family:Impact,Charcoal,sans-serif;text-transform:uppercase;font-size:2.2rem;font-size:22px;line-height:1em;text-align:center;overflow:hidden;z-index:1;color:#333;background:#FFF;width:115px;padding:4px 2% 6px;height:43px;border:3px solid #333;border-radius:30px}
.after_login a:hover{color:#999}
.after_login p{float:left;float:left;min-width:460px;height:75px;padding-bottom:15px;text-align:left;background:url(img/sub_startBG.jpg) no-repeat right bottom}

.after_login p.search{float:right;position:relative;display:inline-block;zoom:1;*display:inline;background:#FFF;border:3px solid #999;border-radius:30px;overflow:hidden;width:300px;min-width:260px;padding:4px 2% 6px;height:43px;*margin-top:3px}
.after_login p.search .txt{float:left;border:0;width:180px;height:16px;font-size:16px;font-size:1.6rem;margin:-5px 0;padding:20px 0}
.after_login p.search .btn{position:absolute;top:0;right:-2px;width:100px;height:60px;color:#FFF;background:#999;font-family:Impact,Charcoal,sans-serif;font-size:22px;font-size:2.2rem;text-transform:uppercase;margin:-5px 0}

.start-fixed{_position:absolute;position:fixed;top:0;left:0;z-index:999;zoom:1;width:100%;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease}
.start-fixed>div{min-width:998px;max-width:1120px;margin:0 auto}
.start-fixed .btn_gameStart{top:0} 

.start-area:after{content:"";display:block;clear:both}


/* aside, sitemap */
#aside{display:block;width:100%;clear:both;border-top:#d2181c solid 3px;display:block;height:500px;background:#333}

}
/* Tablet *******************************************************************************************/
@media all and (min-width:768px) and (max-width:1023px){
.content{float:left;width:100%;margin-right:-220px}
.start-area .btn_facebook{min-height:42px}

}

/* 1024 *******************************************************************************************/
@media all and (min-width:1024px) and (max-width:1280px){
.gb-gnb>div ul>li{max-width:112px} 


}
/* Deasktop *******************************************************************************************/
@media all and (min-width:1024px){
::selection{background:#ee3042;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.5)}
::-moz-selection{background:#ee3042;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.5)}
a:hover{color:#FFF;-webkit-transition:color 0.3s;transition:color 0.3s}

/* Font */
h2{font-size:40px;font-size:4rem}
h2>em{color:#FFF;font-style:normal;text-shadow:1px 1px 1px rgba(0,0,0,0.5)}

section{text-align:inherit}
section>div{padding-bottom:0}
aside{display:block}

/* GNB */
.gb-gnb>div>button{display:none}
.gb-gnb{position:absolute;overflow:hidden;padding-top:70px;background:none;width:100%;z-index:10}
.gb-gnb:hover {
    padding-top: 40px;
    top: 0;
    height: 220px !important;
    background: rgb(0, 0, 0, 0.6); /* For IE 5.5 - 7*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 10;
}
.gb-gnb>div{max-width:1120px;*width:1120px;margin:0 auto;min-height:90px;*height:260px}

.gb-gnb h1{position:absolute;top:20px;left:50%;margin-left:-100px;display:inline-block;z-index:1000;background:url(img/gunbound_logo.png) no-repeat top center;width:200px;height:135px;z-index:999}
.gb-gnb h1>a{display:inline-block;width:200px;height:135px;padding:0;margin:0}

.gb-gnb>div>ul{display:block !important;border-radius:0;position:relative}
.gb-gnb>div>ul.gb-gnb-left{float:left}
.gb-gnb>div>ul.gb-gnb-right{float:right}

.gb-gnb ul{text-shadow:0 0 5px #000, 0 0 5px #000;/* For IE 8 */ zoom:1}
*:first-child+html .gb-gnb ul{text-shadow:none;filter:none} 

.gb-gnb>div>ul>li>a{font-size:20px;font-size:2rem;background:none}
.gb-gnb ul ul{position:absolute;top:32px;font-size:.825em;background:none;visibility:hidden}
.gb-gnb:hover ul ul{visibility:visible}
.gb-gnb li{float:left;padding:0}
.gb-gnb a{width:137px;margin-right:0}
.gb-gnb ul:after{content:"";display:block;clear:both} /* float를 해제하는 방법 */
.gb-gnb>div ul>li{margin:0 25px 0 0} 
.gb-gnb>div ul li.active>ul{display:block}
.gb-gnb>div>ul>li>a{background:none;padding:0;text-align:center}
.gb-gnb li li{float:none;padding:0}

.gb-gnb li{background:none;text-align:center;border:0}
.gb-gnb li li>a{background:none;word-break:break-all;white-space:normal}


/* GB TOP */
.start-area .btn_gameStart{position:absolute;visibility:visible;display:inline-block;zoom:1;*display:inline;top:-20px;right:0;cursor:pointer;
	background:url(img/btn_gameStart1.png) no-repeat center top;width:310px;height:137px;margin-left:70px;outline:none;} 
.start-area .btn_top{visibility:hidden}
.start-area .btn_signUp{visibility:visible;}
.start-area .btn_top,.start-fixed .btn_top{visibility:hidden}
.start-fixed .btn_gameStart{top:0} 



}