@import url('common.css');

html , body { width:100%; height:100%;background:#ebebeb ; min-width:640px}
#Wrap {width:100%;position:relative;height:100% }
#popBanner {display: none;}
/* top */
#GNB , #GNB_Sub ,br.n  {display:none} 
#GNB_M {display:block;position:fixed; z-index:100;width:55%;background:#ebebeb;min-width:250px;border-right:1px solid #d3d3d3;} 

#GNB_M span {position:absolute; left:100%;padding:8%;background:#fdb813}

#GNB_M h1 {  padding:8%;height:41px;overflow:hidden;background:#231f20}

#GNB_M h1 a {color:#fff; padding-top:8px;font-size:24px;display:block ;background:url(../images/m_h1_bg.gif) no-repeat right 10px}

#GNB_M ul>li {overflow:hidden;border-top:1px solid #d3d3d3;font-weight:bold}
#GNB_M ul>li a {color:#231f20;padding:30px 8%;font-size:20px;display:block ;background:url(../images/m_gnb_bg.gif) no-repeat 92% center}

#GNB_M ol {display:none}
#GNB_M ol>li {overflow:hidden;border-top:1px solid #d3d3d3;font-weight:normal}
#GNB_M ol>li a {color:#717171;padding:25px 12%;font-size:18px;display:block ;background:none }

#GNB_M p {background:#fdb813}
#GNB_M p:after{clear:both;content:"";display:block}
#GNB_M p a {float:left;width:33%;padding:20px 0;text-align:center;}
#GNB_M p a:nth-of-type(2) {border-left:1px solid #dda115 ; border-right:1px solid #dda115}
/* main */

#mainTop {height:100%;overflow:hidden;width:100%;position:relative; background:#fff  url(../neople/img/loader_bg.gif) no-repeat center center ;}
#mainTop .wrap {width:100%;height:100%; }

#mainTop .wrap p { height:100%; width:100%;position:absolute; display:none; top:0;left:100%}
#mainTop .wrap p:nth-of-type(1) {display:block;left:0}

#mainTop h2 {position:absolute; z-index:5;top:125px;left:40px; text-indent:-100000px;
	background:url(../images/main/main_title_M.png) no-repeat ;background-size:contain; width:55% ; height:55%}

#mainTop h2.en {position:absolute; z-index:5;top:125px;left:7%; text-indent:-100000px;
	background:url(../images/main/main_title_en_M.png) no-repeat ;background-size:contain; width:85% ; height:55%}

#mainTop .wrap p { height:100% ;float:left ;}
#mainTop p.span {position:absolute; z-index:5; right:0;top:0;padding:30px}
#mainTop p.span img {cursor:pointer ; margin-left:10px;width:22px;height:22px}

#Neople  {height:100%; min-height:800px;overflow:hidden;width:100%;position:relative;background:url(../images/main/neople_bg.jpg) center bottom ; background-size:cover}
#Neople h2 {margin:15% auto 0 ;background:url(../images/main/neople_title_m.png)  no-repeat  center top;background-size:contain; width:47% ; height:25%; text-indent:-100000px;}
#Neople h2.en {margin:15% auto 0 ;background:url(../images/main/neople_title_en_m.png)  no-repeat  center top;background-size:contain; width:73% ; height:70%; text-indent:-100000px;}
#Neople ul {width:75%;margin:0 auto}
#Neople ul li {width:42%;padding:4%;float:left;text-align:center}
#Neople ul li img {width:100%;height:100%}
#Neople p.en_btn_M {text-align:center}
#Neople p.en_btn_M  img {width:75%}

#Neople ul.normal , p.en_btn , #mainTop .mTcont {display:none}


#Game  {height:100%;overflow:hidden;width:100%;position:relative; background:#000}  
#Game .game_wrap {height:100%;}
#Game div.games {height:100%;float:right;font-family:Comic Sans MS ,나눔고딕, 'NanumGothic', 'NanumGothicWeb',sans-serif;color:#fff;position:relative;  }
#Game div.games  p.title {display:none} 
#Game div.games  p.video_m { padding-left:10%;height:100px ;font-size:1.2em;position:absolute;bottom:17%}
#Game div.games  p.video_m a {color:#fff;font-size:1.8em;font-family:Calibri}
#Game div.games  p.video_m img {width:10%}
#Game div.games  p.detail {display:none}
#Game div.games  p.mSite { padding-left:10% ;position:absolute;bottom:7%;}
#Game div.games  p.mSite img {width:80%}
#Game p.span {position:absolute; z-index:5; right:0;top:0;padding:30px}
#Game p.span img {cursor:pointer ; margin-left:10px;width:22px;height:22px}

#Game .game_over, #Game .video , #Game #game_video , #Game p.arrow {display:none}


#Recruit {height:100%;overflow:hidden;width:100%;position:relative; background-position: 40% }  
#Recruit div {background:url(../images/main/recruit_title_M.png) no-repeat left 55% ;height:100%; background-size:contain }
#Recruit div h2 {position:absolute;text-indent:-10000000px; width:100% ;top:30%;width:55%;height:45%}
#Recruit div a img {width:80%;position:absolute;bottom:5%;left:10%;}
#Recruit div a.normal {display:none}

/**/
#Gallery  {height:100%;overflow:hidden;width:100%;position:relative; background:url(../images/main/gallery_bg.jpg) center center ;background-size:cover }      

#Gallery .FixPic {width:1px;float:left }

#Gallery h2 {background:url(../images/main/gallery_title_m.png) no-repeat;width:50%;background-size:contain; height:100%;position:absolute; z-index:5;text-indent:-10000px}
#Gallery.en h2 {background:url(../images/main/gallery_title_en_m.png) no-repeat;width:50%;background-size:contain; height:100%;position:absolute; z-index:5;text-indent:-10000px}
 
#Gallery .FixPic a {display:none}

#Gallery .content {width:50%; height:100%;float:right;overflow:hidden;} 
#Gallery .content ul {width:100%; } 
#Gallery .content .mCSB_inside > .mCSB_container{ margin-right: 0; }
#Gallery .content .data { width:100%;overflow:hidden; cursor:pointer;position:relative; 
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.7);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.7);}  

#Gallery .content .data {display:block;background:#fff  url(../neople/img/loader_bg.gif) no-repeat center center ; } 
#Gallery p.arrow {  }
	#Gallery p.arrow img {position:absolute;left:75%;margin-left:-24px;z-index:10} 
	#Gallery p.arrow img.Up { top:-20px;display:none}  
	#Gallery p.arrow img.Down {	bottom:-20px;}  
	#Gallery p.arrow img.none {filter:alpha(opacity=0);opacity:0; cursor:default} 
 
#Gallery .opacity { position:absolute;z-index:5;background:#000;top:0;left:0;width:100%;height:100%; filter:alpha(opacity=80);opacity: 0.8;display:none } 
#Gallery .picFrame {width:80%;height:80%; position:absolute;z-index:5;left:50%;margin-left:-40%;top:50%;margin-top:-30%;text-align:center;display:none }
#Gallery .picFrame img { max-width:100%;max-height:100%;}



#Footer {padding:45px }
#Footer h1 {display:block}
#Footer ul {display:none}

#Footer .pright { margin-top:40px;position:relative;} 

#Footer .pright p.contact , #Footer .pright p.family ,#Footer .pright p.family_on ,#Footer .pright p.privacy  {padding:8px 20px;width:25% ; font-size:15px;
		border:1px solid #dfdfdf;-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;background:#fff;}
#Footer .pright p {position:absolute;}
#Footer .pright p.privacy {float:left ;text-align:center ; font-weight: bold;}
#Footer .pright p.contact {left:35% ;text-align:center ;}
#Footer .pright p.family {left:70%}

#Footer .pright p.family_on {left:35%;height:180px;top:-162px;display:none}
#Footer .pright p.family_on a {height:25px;display:inline-block;}
#Footer .pright p.family_on a.on {margin-top:12px;display:inline-block;width:100%;background:url(../images/family_arrow_on.gif) no-repeat right 6px }
#Footer .pright p.family a.off { display:inline-block;width:100%;background:url(../images/family_arrow_off.gif) no-repeat right 4px }

#Footer .pright a {color:#383838;}
#Footer .pright a:hover {text-decoration:none}
#Footer .pright p.copy { margin-top:50px;clear:both;letter-spacing:-1px;color:#616161;line-height:150%;padding-bottom:40px}
#Footer .pright p.copy span {color:#919191 ;letter-spacing:0;font-size:16px}

#goTop {position:fixed;bottom:0;right:0;width:12%}
#goTop img {width:100%}


	@media all and (max-width:400px) {  
#Footer .pright p {position:relative; }
#Footer .pright p.contact {float:none;text-align:center ; width:60%}
#Footer .pright p.family_on , #Footer .pright p.family {left:0; width:60%;margin-bottom:10px}
#Footer .pright p.family_on {position:absolute}
#Footer .pright p.copy { margin-top:20px;font-size:14px}
#Footer .pright p.copy span {font-size:12px}
	}


.subWrap .en * {font-family:calibri}
	
/* neople */

#N_neople {background:#fff}
#N_neople .hi {color:#8b8b8b;text-align:center;font-size:26px;padding:120px 0;letter-spacing:-2px;}
	#N_neople .hi img {width:72%}
	#N_neople .hi p {padding-top:25px;}

.whats {background:#f1f1f1; color:#696969;text-align:center;}
	.whats p {line-height:170%; font-size:21px ; padding:0 10% 100px 10%;letter-spacing:-3px;word-break:keep-all; } 
	.whats p.en {letter-spacing:0;font-size:26px ;letter-spacing:-1px; }
	.whats p img {width:100%;margin:100px 0 60px 0}
	.whats p:nth-of-type(1) {background:url(../images/neople/whats_lineM.gif) no-repeat center bottom;background-size:contain;letter-spacing:-2px;}

	
.np_is {background:url(../images/neople/is_bg.gif) ;padding:0 15%; color:#595959; width:70%;padding-bottom:150px;}
	.np_is p {line-height:170%;padding:150px 0 0 0 ;font-size:26px ; letter-spacing:-3px;}
	.np_is p.en {letter-spacing:-1px;font-size:24px ; text-align:center}
	.np_is img {width:100%;margin-bottom:50px}
	.np_is img.en {width:120%;margin-bottom:50px;margin-left:-10%}

	
.CI {background:url(../images/neople/CI_bg.jpg ) 10% top ; background-size:cover ; padding:90px 0 } 
	.CI p.logo {padding-bottom:60px;width:75%;margin:0 auto}
	.CI p.logo img {width:100%}
	.CI p.text { width:75%;margin:0 auto; font-size:21px ; color:#1a1a1a;line-height:160%; letter-spacing:-3px;}
	.CI p.text_en {width:90%;margin:0 auto; font-size:21px ; color:#454545;line-height:160%; letter-spacing:0;}
	.CI p.text_en span , .CI p.text span {display:block;color:#1a1a1a;margin-bottom:25px;font-size:40px}

	
.CI_down {background:#f6f6f6 ; padding:85px 0 110px 0  ; text-align:center;}
	.CI_down p {color:#888;font-family:calibri;font-size:40px;margin-bottom:80px}
	.CI_down p img {width:70%;margin-bottom:40px}
.CI_down .normal {display:none}
	.CI_down .mobile img {width:100%}


#N_history {}
#N_history:after {clear:both;content:"";display:block}
#N_history .hi {background:#e1a31e ; padding:100px 0 70px 0;text-align:center;border-bottom:1px solid #d69b1c}
	#N_history .hi img {width:75%}
	#N_history .hi p{color:#fff;font-size:24px;letter-spacing:-2px;line-height:150%;margin-top:25px}
	
#history {background:#fff}
#history:after {clear:both;content:"";display:block}
	#history .year { background:#ebb022 ;overflow:hidden ; height:140px; width:100% ; padding:40px 0 ;text-align:left;position:relative;border-bottom:1px solid #d69b1c;}
	#history .year span { background:#ffc025 ;width:69px;position:absolute;top:0;height:220px ; }
	#history .year span.left {left:0}
	#history .year span.right {right:0}
	#history .year ul { width:5000px; height:140px ;display:block;float:left;padding-left:69px}
	#history .year li {background:url(../images/neople/history_year_bg1.gif) no-repeat ;background-size:contain; width:140px; height:140px ;overflow:hidden;margin-right:30px;float:left;
		font-weight:bold;font-familly:Trebuchet MS;color:#fff; font-size:28px;text-align:center;line-height:140px; }
	#history .year li.on {background:url(../images/neople/history_year_bg3.gif) no-repeat;background-size:contain; }

	#history .contents {width:75%;padding:60px 0;margin: 0 auto;overflow:hidden ;}
	#history .contents p {font-size:80px;font-weight:bold;font-familly:Trebuchet MS;color:#000;letter-spacing:-5px }
	#history .contents p img {width:22px;cursor:pointer}
	#history .contents p span {position:absolute}
	#history .contents p span.up {margin:20px 0 0 50px}
	#history .contents p span.down {margin:45px 0 0 50px}
	
	#history .contents dl {margin:0 0 50px 0; font-size:18px; color:#333}
	#history .contents dl dt {background:#ebebeb;padding:5px 0;text-align:center;width:70px ;
		-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;font-weight:bold;margin:30px 0 10px 0}
#N_News {background:#fff}
#N_News .hi {color:#8b8b8b;text-align:center;font-size:26px;padding:120px 0;letter-spacing:-2px;}
	#N_News .hi img {width:57%}
	#N_News .hi p {padding-top:25px} 

#news_bbs {width:95%;margin:0 auto;padding-bottom:120px}
	#news_bbs .search {text-align:right;padding-bottom:10px}
	#news_bbs .search select {background:#f5f5f5;border:1px solid #dfdfdf;height:55px;font-size:22px;padding-right:10px;
								-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
	#news_bbs .search input[type=text] {background:#f5f5f5;border:1px solid #dfdfdf;height:53px;padding:0 10px;font-size:22px;
								-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
	#news_bbs .search input[type=image] {width:102px;border:0;padding:0}

	#news_bbs table {width:100%;border-top:2px solid #231f20;}
	#news_bbs th {background:#ffc025;height:90px;font-size:30px;color:#231f20;letter-spacing:-2px}
	#news_bbs th:nth-of-type(1) { -moz-border-bottom-left-radius: 8px; -webkit-border-bottom-left-radius: 8px; border-bottom-left-radius: 8px; }
		
	#news_bbs th:nth-of-type(3) { -moz-border-bottom-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; border-bottom-right-radius: 8px; }

	#news_bbs td {font-size:20px;color:#3e3e3e;height:90px;border-bottom:1px solid #efefef;text-align:center;letter-spacing:-1px;overflow:hidden ;} 
	#news_bbs td p {text-align:left;width:90%;max-width:400px;margin:0 auto;
		display:inline-block;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal ;
		max-height:54px;display:block;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
	#news_bbs td p a {font-size:30px;color:#3e3e3e; }

#news_view {width:95%;margin:0 auto;padding-bottom:120px}
	#news_view table {width:100%;border-top:2px solid #231f20;font-size:30px;color:#231f20;letter-spacing:-2px}
	#news_view * {word-break:break-all}
	#news_view th { background:#fbfbfb;border-bottom:1px solid #efefef;text-align:center;width:150px; color:#3e3e3e;font-weight:bold;padding:25px 0 ;vertical-align:top}
	#news_view td { border-bottom:1px solid #efefef;  color:#3e3e3e;padding:25px 0 25px 15px}
	#news_view tr.normal th, #news_view tr.normal td {display:none}
	#news_view td img {max-width:450px}
	#news_view td.normal {display:none}

#news_view p.btns {padding-top:10px;text-align:right}
#news_view p.btns img {width:28%}

.pagelist {text-align:center;padding-top:35px;;font-size:20px;}
.pagelist * {vertical-align:bottom}
.pagelist a {border:1px solid #efefef;color:#868686;display:inline-block;padding:6px 10px ;
	-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
.pagelist a.on {background:#231f20;color:#fff;border:1px solid #231f20;font-weight:bold}


#N_games {background:#fff}
#N_games .hi {color:#8b8b8b;text-align:center;padding:115px 0;letter-spacing:-2px;}
	#N_games .hi img {width:81%}
	#N_games .hi p {padding-top:20px;font-size:30px; letter-spacing:0px;}
	 
.game_list {background-position:50% top;background-size:cover;height:670px;position:relative}
	.game_list p {text-align:center}
	.game_list p.title {font-family:Comic Sans MS ,나눔고딕, 'NanumGothic', 'NanumGothicWeb',sans-serif;color:#fff; font-size:60px;line-height:100%;padding:200px 0 55px 0 ;
		background:url(../images/game/title_bar.gif) no-repeat center bottom ;position:relative;z-index:3}
	.game_list p.title_kr {font-size:22px;color:#fff; padding-top:40px;  opacity:0.8 ;position:relative;z-index:3}
	.game_list p.opacity  {  opacity:0.8;position:absolute;top:0;left:0;width:100%;height:670px;background:#000}
.game_view {position:absolute;width:1px;height:1px;margin-left:-200000px}



#N_recruit {background:#fff}
#N_recruit .hi {color:#8b8b8b;text-align:center;font-size:26px;padding:115px 0;letter-spacing:-2px;}
	#N_recruit .hi img {width:86%}
	#N_recruit .hi p {padding-top:20px}

.want { background-size:cover;text-align:center} 
	.want p {padding:110px 0 60px 0;font-size:20px;color:#3e3e3e; }
	.want p img {width:79%;margin-bottom:20px;}
	.want ol {padding-bottom:60px}
	.want ol li { font-size:30px;color:#232323;padding:74px 0 }
	.want ol li img{width:60%;margin-bottom:35px;}
	
.process {background:url(../images/neople/is_bg.gif) ; text-align:center;padding-bottom:85px ; }
	.process p {padding:85px 0 60px 0;font-size:20px;color:#3e3e3e; }
	.process p img {width:63%;margin-bottom:25px;}
	.process span { width:89% ;display:block;margin:0 auto; }
	.process span img {width:100%}
	
.people { background-size:cover;height:655px ;text-align:center;background-size:cover; }
.go_site {text-align:center;padding:70px 0 80px}
.go_site img {width:78%}



#N_contact {background:#302f2a;}
#N_contact .hi {color:#8b8b8b;text-align:center;font-size:26px;padding:115px 0;}
	#N_contact .hi img {width:62.5%}
	#N_contact .hi p {padding-top:20px;letter-spacing:-2px;}
	#N_contact .hi p.en {padding-top:20px;letter-spacing:0px;}

	#N_contact span.X {position:absolute;right:15px;top:15px;width:9%;}
	#N_contact span.X img {width:100%}


	#npMap {width:100%; overflow:hidden;height:570px;}
	.location {background:#fff; position:relative}
	.location .infomation {background:#fff; position:relative;z-index:2}
		.location .infomation { margin-bottom:60px}
		.location .infomation .tabs {padding:25px 0 75px 0 ; width:90%;margin:0 auto}
		.location .infomation .tabs img {width:50%;cursor:pointer}
	.location h2 {font-size:52px;font-weight:bold;color:#ffc025;line-height:120%;margin-bottom:50px;text-align:center;letter-spacing:-2px}
	.location h2 br  , .location h2 span {display:none}
	
	.location dl {font-size:26px;text-align:center}
	.location dt {color:#231f20;font-weight:bold}
	.location dd {color:#989898 ; margin-bottom:25px}


	.location div.photo  { height:570px;width:100%; } 
		.location div.photo p.p1 {background:url(../images/contact/location_1.jpg) right top ; height:570px; }
		.location div.photo p.p2 {background:url(../images/contact/location_2.jpg) right top ; height:570px; }

	#contact_us {background:#fff}
	#contact_us p.title { padding:90px 0;text-align:center;color:#787878;font-size:18px;line-height:130%;letter-spacing:-1px}
	#contact_us p.title img {margin-bottom:25px;width:67%;}
	#contact_us .normal {display:none}
	#contact_us table {width:90%;margin:0 auto;color:#5a5a5a;font-size:20px;} 
	#contact_us table td {vertical-align:top;padding-bottom:12px; }
	#contact_us table td b {font-size:25px}
	#contact_us table td p { padding-top:16px } 
	#contact_us table td p input {}
	#contact_us input[type=text], #contact_us textarea {background:#f3f3f3;font-size:1.6em;padding:13px 5px;border:0;margin:8px 0 12px 0;width:95%; 
		-moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
	#contact_us input.r {width:90%}
	#contact_us p.ask_btn {padding:50px 0;text-align:center}
	#contact_us p.ask_btn img {width:70%}