@charset "utf-8";
/* ALL *******************************************************************************************/ 
html{font-size:62.5%}
body{font-size:24px;font-size:2.4rem;letter-spacing:-.02em;overflow-x:hidden;*overflow-x:inherit;background:#FFF;color:#CCC} /* 18px */
h1{font-size:60px;font-size:6rem} /* 60px */
h2{font-size:60px;font-size:6rem;text-transform:uppercase}/* 60px */
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:top}
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(//web.softnyx.com/font/titillium-regular-webfont.eot);
 src:url(//web.softnyx.com/font/titillium-regular-webfont.eot?#iefix) format('embedded-opentype'),url(//web.softnyx.com/font/titillium-regular-webfont.woff) format('woff'),url(//web.softnyx.com/font/titillium-regular-webfont.ttf) format('truetype')}
@font-face{
 font-family:'Titillium Web';
 font-style:normal;
 font-weight:700;
 src:local('titillium-Bold-webfont'),local('titillium-Bold-webfont'),local('titillium-Bold-webfont');
 src:url(//web.softnyx.com/font/titillium-Bold-webfont.eot);
 src:url(//web.softnyx.com/font/titillium-Bold-webfont.eot?#iefix) format('embedded-opentype'),url(//web.softnyx.com/font/titillium-Bold-webfont.woff) format('woff'),url(//web.softnyx.com/font/titillium-Bold-webfont.ttf) format('truetype')}

/* Font Family */
body,table,input,button,textarea,select,input{font-family:Titillium Web,Verdana,Geneva,sans-serif}
#wrap h2{font-size:60px;font-size:6rem;text-transform:uppercase;margin-bottom:50px}
#wrap h3{font-size:18px;font-size:1.8em;text-transform:uppercase;color:#669900;padding-top:30px}
#wrap em{color:#FC0;font-weight:bold}
.txt_point{color:#FC0}

/* design */
.area01>div,.area02>div,.area03>div{max-width:1200px;margin:0 auto;*min-width:996px;min-width:996px \0}
.area01{background:#333 url(http://web02.softnyx.com/1/gbcom/2016/gb.jpg) no-repeat center top;height:600px}
.area02,
.area03{background:#FFF;max-height:600px}

.btn_video{margin-top:50px}
.btn_video a{display:inline-block;zoom:1;*display:inline;padding:10px 20px;border:#FC0 3px solid;border-radius:5px;color:#FC0;width:220px;text-align:left;
 background:#333 url(http://web02.softnyx.com/1/gbcom/2016/icon-arrow.png) no-repeat 230px 20px}

.txt_area{position:relative; z-index:99;text-align:center}
.txt_area h1{position:absolute;margin-top:20px;left:50%;margin-left:-97px;display:inline-block;zoom:1;*display:inline;z-index:1000;
 background:url(http://img.softnyx.com/3/gb2015/gunbound_logo.png) no-repeat top center;background-size:100%;width:195px;height:132px;z-index:999}
.txt_area h1>a{display:inline-block;zoom:1;*display:inline;width:195px;height:132px}

.txt_area h2{padding-top:200px}


/* Video Area */
#video_area{position:relative;z-index:0;min-height:1200px;*min-height:850px;min-height:850px \0;overflow:hidden;color:#EEE;background:url(http://web02.softnyx.com/1/gbcom/2016/gb.jpg) no-repeat center top;*min-width:996px;min-width:996px \0;margin-bottom:-28px;*margin-bottom:0;margin-bottom:0 \0} 
.dotBg{position:absolute;background:url(http://web02.softnyx.com/1/gbcom/2016/dot.png) center top;width:100%;height:100%;z-index:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";/* IE 8 */
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60);/* IE 7 and olders */
opacity:.6}
*:first-child+html .dotBg{display:none}/* ie7 HACK */

#video_area a{opacity:1;filter:alpha(opacity=100) /* For IE8 and earlier */}
#video_area a:hover{opacity:.7;filter:alpha(opacity=70)}

#video_area .mvBG{width:1800px;height:1000px;margin-top:-2000px;margin-left:-320px;z-index:0}
body:first-of-type #video_area .mvBG{width:1800px;height:1000px;margin-top:-2000px;margin-left:-320px;z-index:0}

#video_area .mvBG{visibility:hidden}

/* Service Area */
.service{max-width:1200px;margin:0 auto;height:auto;padding-top:40px;position:relative}

.thumbnail_container{position:relative;width:100%;padding-bottom:100%;*width:50%;*padding-bottom:50%;width:50% \0;padding-bottom:50% \0;float:left}
.service_container{position:relative;width:100%;padding-bottom:100%;*width:25%;*padding-bottom:25%;width:25% \0;padding-bottom:25% \0;float:left}

.thumbnail{position:absolute;width:100%;height:100%;background:red;text-align:center}

.thumbnail img,.thumbnail a{position:absolute;top:45%;bottom:0;left:0;right:0;margin:auto;color:#000;z-index:999;cursor:pointer}
.thumbnail span{position:absolute;top:60%;bottom:0;left:0;right:0;margin:auto;color:#000;z-index:999}
.blue{background:blue}
.vcenter-ext{background:orange}
.center-int{background:purple}

.service1{background:url(http://web02.softnyx.com/1/gbcom/2016/bg_service1.jpg) no-repeat;background-size:100% 100%}
.service2{background:url(http://web02.softnyx.com/1/gbcom/2016/bg_service2.jpg) no-repeat;background-size:100% 100%}
.service3{background:url(http://web02.softnyx.com/1/gbcom/2016/bg_service3.jpg) no-repeat;background-size:100% 100%}
.service4{background:url(http://web02.softnyx.com/1/gbcom/2016/bg_service4.jpg) no-repeat;background-size:100% 100%}

.service_container .thumbnail a{background:url(http://web02.softnyx.com/1/gbcom/2016/icon-map.png) no-repeat center 30%}
/* IMG */
.img_left{background:url(http://web02.softnyx.com/1/gbcom/2016/bg_left.jpg) no-repeat;background-size:100% 100%}
.img_right{background:url(http://web02.softnyx.com/1/gbcom/2016/bg_right.jpg) no-repeat;background-size:100% 100%}

.area02 h1{position:absolute;margin-top:20%;left:50%;margin-left:-97px;display:inline-block;zoom:1;*display:inline;z-index:1000;
 background:url(http://img.softnyx.com/3/gb2015/gunbound_logo.png) no-repeat top center;background-size:100%;width:195px;height:132px;z-index:999}
.area02 h1>a{display:inline-block;zoom:1;*display:inline;width:195px;height:132px}

/* SNS */
.area03 .thumbnail_container{width:100%;padding-bottom:70%;*width:50%;*padding-bottom:35%;width:50% \0;padding-bottom:35% \0}
.area02:after, .area03:after{content:"";display:block;clear:both} /* float를 해제하는 방법 */

.facebook{background:url(http://web02.softnyx.com/1/gbcom/2016/bg_facebook_ov.jpg) no-repeat;background-size:100% 100%;font-size:2.5em}
.twitter{background:url(http://web02.softnyx.com/1/gbcom/2016/bg_twitter_ov.jpg) no-repeat;background-size:100% 100%;font-size:2.5em}
.facebook:hover{background:url(http://web02.softnyx.com/1/gbcom/2016/bg_facebook.jpg) no-repeat;background-size:100% 100%;}
.twitter:hover{background:url(http://web02.softnyx.com/1/gbcom/2016/bg_twitter.jpg) no-repeat;background-size:100% 100%}

.facebook a,.twitter a{color:#FFF;line-height:3em;background-color:rgba(0, 0, 0, 0.4)}
.facebook:hover a,.twitter:hover a{color:#FC0;background-color:rgba(0, 0, 0, 0.6)}
/* Footter */
footer{clear:both;height:100px;font-size:16px;font-size:1.6rem;text-align:center;color:#333;font-weight:bold}
footer p{padding:70px 0;max-width:1200px;margin:0 auto;*min-width:996px;min-width:996px \0;background:url(http://web02.softnyx.com/1/gbcom/2016/softnyx.png) no-repeat center 160px;*background-position:right 50%;background-position:right 50% \0}
footer span{padding:20px 0 0;font-weight:normal;font-size:14px;font-size:1.4rem} 


/* iPad 가로+세로 */
@media only screen and (min-width : 640px) {
#video_area .mvBG{visibility:hidden}

.service_container{width:50%;padding-bottom:50%}
.area02 .thumbnail_container{width:50%;padding-bottom:50%}


footer p{background:url(http://web02.softnyx.com/1/gbcom/2016/softnyx.png) no-repeat center 120px}
}

/* 데스크탑 브라우저 가로 */
@media only screen and (min-width : 1224px) {
#video_area{height:850px;min-height:850px;margin-bottom:0}

#video_area .mvBG{visibility:visible;width:100%;height:720px;margin-top:0px;margin-left:0px;z-index:0}
#video_area .mvBG{width:1800px;height:1400px;margin-top:-1000px;margin-left:0;z-index:0}
body:first-of-type #video_area .mvBG{width:1800px;height:1400px;margin-top:-1000px;margin-left:0;z-index:0}


#video_area .service{position:inherit;bottom:0;width:100%;z-index:999}
.service_container{width:25%;padding-bottom:25%}
.area03 .thumbnail_container{width:50%;padding-bottom:35%}

footer p{background:url(http://web02.softnyx.com/1/gbcom/2016/softnyx.png) no-repeat right 50%}
}

/* 큰 모니터 */
@media only screen and (min-width : 1824px) {
#video_area{height:850px;min-height:850px;margin-bottom:0}

#video_area .mvBG{visibility:visible;width:2600px;height:1680px;margin-top:-1200px;margin-left:-350px;z-index:0}
body:first-of-type #video_area .mvBG{width:2600px;height:1680px;margin-top:-1200px;margin-left:-350px;z-index:0}

.thumbnail_container{width:50%;padding-bottom:50%}
.area02 .thumbnail_container{width:50%;padding-bottom:50%}
#video_area .service_container{width:25%;padding-bottom:25%}
.area03 .thumbnail_container{width:50%;padding-bottom:35%}


footer p{background:url(http://web02.softnyx.com/1/gbcom/2016/softnyx.png) no-repeat right 50%}
}