@charset "UTF-8";
/*******

BSJ CSS RESET
전체 공통 css파일 및 header 안에 들어가는 스타일 css입니다.

*******/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
@font-face {
    font-family:'Nanum Gothic';
    src: url('../../font/NanumGothic.eot');
    src: url('../../font/NanumGothic.eot?#iefix') format('embedded-opentype'),
         url('../../font/NanumGothic.woff') format('woff'),
         url('../../font/NanumGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'NanumGothicBold';
    src: url('../../font/NanumGothicBold.eot');
    src: url('../../font/NanumGothicBold.eot?#iefix') format('embedded-opentype'),
         url('../../font/NanumGothicBold.woff') format('woff'),
         url('../../font/NanumGothicBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'NanumBarunGothic';
    src: url('../../font/NanumBarunGothic.eot');
    src: url('../../font/NanumBarunGothic.eot?#iefix') format('embedded-opentype'),
         url('../../font/NanumBarunGothic.woff') format('woff'),
         url('../../font/NanumBarunGothic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'NanumBarunGothicBold';
    src: url('../../font/NanumBarunGothicBold.eot');
    src: url('../../font/NanumBarunGothicBold.eot?#iefix') format('embedded-opentype'),
         url('../../font/NanumBarunGothicBold.woff') format('woff'),
         url('../../font/NanumBarunGothicBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family:'NanumGothicExtraBold';
    src: url('../../font/NanumGothicExtraBold.eot');
    src: url('../../font/NanumGothicExtraBold.eot?#iefix') format('embedded-opentype'),
         url('../../font/NanumGothicExtraBold.woff') format('woff'),
         url('../../font/NanumGothicExtraBold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select {margin:0;padding:0;vertical-align:top;font-family:'Nanum Gothic','Open Sans','맑은 고딕','malgun gothic','AppleSDGothcNeo','AppleGothic'; }
html, body { height: 100%; line-height: 1; font-size: 14px; color: #666; }
th,td {border-spacing:0;}
img,fieldset,iframe {border:0;}
img {max-width: 100%;height:auto !important;vertical-align:top;}
ul,ol,li {list-style:none;}
a {text-decoration:none;}
.blind {visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;}
.tac {text-align:center;} .tal {text-align:left;} .tar {text-align:right;} .ls0 {letter-spacing:0;}
strong {font-weight:600;}
.hidden { position: absolute; top: -99999px; left: -99999px; }
p { line-height: 1.6; }
fieldset { border: 0; }
input[type=text],
select,
textarea { color: #333 !important; }
fieldset { border: 0; }
input[type=checkbox] { border: 0; }
table { table-layout: fixed; border-collapse: collapse; }
table th, 
table td { text-align: center; }
legend, 
caption { position: absolute; top: -99999px; left: -99999px; width: 0; height: 0; overflow: hidden; }
em, strong { font-style: normal; }

input[type=submit],
input[type=image], 
input[type=button] { cursor: pointer; }
button { cursor: pointer; border: 0; }

.clear { overflow: hidden; }
.clear:after { content: ''; display: block; clear: both; }

span.left { float: left; }
span.right { float: right; }
span.block { display: block; }
.ngb { font-family: "NanumGothicBold" !important; }
.nbg { font-family: "NanumBarunGothic" !important; }
.nbgb { font-family: "NanumBarunGothicBold" !important; }
.ngeb { font-family: "NanumGothicExtraBold" !important; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }        
.ellipsis2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-wrap:break-word; } 
.sub_warp .inner { max-width: 1100px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.arrow_bg1 { width: 278px; height: 158px; line-height: 144px; margin:0 auto 40px; background: url(../../images/ad/admon/arrow_bg1.png) no-repeat; color: #2361bd; font-size: 21px; }
.arrow_bg2 { width: 278px; height: 171px; margin:0 auto 17px; background: url(../../images/ad/admon/arrow_bg2.png) no-repeat; }
h4 { font-family: "NanumGothicBold"; }



#lay_wrap {position:relative; overflow: hidden; height: 100%; font-size:14px;color:#666; letter-spacing:0px;}
#lay_wrap > .inner { position: relative; width: 200%; height: 100%; }
#lay_wrap > .inner.on { margin-left: -100%; }
#one_page { position: relative; float: left; overflow-x: hidden; overflow-y: scroll; width: 50%; height: 100%; padding-right: 108px;box-sizing: border-box; }
#second_page { position: relative; float: left; overflow-x: hidden; overflow-y: scroll; width: 50%; height: 100%; padding-left: 110px;box-sizing: border-box; }





	/*header*/
	.lay_header { position:fixed;top:0px; width: calc(100% - 110px); height: 70px;  z-index:9999; background: #FFF; box-sizing: border-box; border-bottom:#CCC solid 1px;  }
	.lay_header1 { width: calc(100% - 126px); }
	.header_area { overflow: hidden; width: 100%; max-width: 1100px;  margin: 0 auto; }
	.header_area:after { content: ''; display: block; clera: both; }
	.header_area2 { max-width:1100px; width: 100%; height: 90px; margin:0 auto; }

	


	.lay_header.on { height: 70px; padding-top: 0px; background: #fff; transition: background 1s; z-index: 99999; }
	.lay_header.on .menu_list li a { color: #000; transition: color 2s; }

	.lay_header.on .logo { width: 140px; }
	.lay_header.on .logo img { width: 100%; }
	.lay_header.on .m_menuicon { height: 31.42px; background: url(../../images/common/portfolio_btn2-1.png) center 12px no-repeat; background-size: 100%; }
	.lay_header.on .m_menuicon img { /* display: none; */ }

	.logo { position: relative; float: left; width: 140px; height: 90px;}
	.logo img { position: absolute; top: 50%; margin-top: -28px; width: 100%;  } 
	.MainMenu {float: right;}
	.MainMenu ul li { float: left; padding-left: 40px; }
	.MainMenu ul li a { display: block; width: 100%; height: 100%; line-height: 70px; color:#000; font-size:16px; font-family: "NanumGothic"; text-align: center; letter-spacing: -0.02em;}
	.MainMenu ul li a:hover {color:#d86a6c;}

	.sub_warp { position: relative; }
	

	/*mobild*/
	#m_menu { max-width: 1100px; width: 100%; margin: 0 auto; display: none; }
	#m_menu .mobile_menu { background: rgba(255,255,255,0.9); }
	#m_menu .mobile_menu .m_menuicon { max-width: 40px; width: 100%; float: right; padding: 15px 0; position:relative; z-index: 9999; }
	#m_menu .mobile_menu .m_menuicon img { width: 100%; }
	
	#m_menu .m_menu_list { width: 100%; overflow: hidden; clear: both; display: none; }
	#m_menu .m_menu_list li { width: 50%; text-align: center; float: left; background: rgba(255,255,255,0.9); border-top:1px solid #d4d4d4; cursor: pointer; line-height: 2.5; }
	#m_menu .m_menu_list li:nth-child(odd) { border-right:1px solid #9e9e9e; box-sizing: border-box; }
	#m_menu .m_menu_list li a { font-size: 15px; line-height: 2; color:#000; font-family: "NanumGothicBold"; }
	#m_menu .m_menu_list li.btm_line,.btm_line_1 { border-bottom:1px solid #9e9e9e;}

	
	/* m_top */
	.m_top { position: fixed; bottom: 40px; right: 20px; z-index: 9999; display: none; }

/* 대메뉴 간격 */
@media screen and (max-width: 1320px){
	.MainMenu ul li { float: left; padding: 0 10px; }
}

/* 테블릿가로 */
@media screen and (max-width: 1024px){
	.lay_header { width:100%; height: 60px;}
	.lay_header .logo { height: 60px; margin-left: 20px; }
	.lay_header .logo img { padding-top:10px; }
	.lay_header1 { padding-right: 0; }
	.lay_header.on { height: 60px; }
	.lay_header.on .logo { height: 60px; }
	.MainMenu { display: none; }

	/*mobild*/
	#m_menu { display: block; }
	#m_menu .mobile_menu .m_menuicon { margin-right: 20px; }
	



}
/* 테블릿세로 */
@media screen and (max-width: 768px){
	/*mobild*/
	#m_menu { max-width: 768px; margin: auto; }





}
/* 모바일가로 */
@media screen and (max-width: 640px){
	.logo { width: 135px; height: 60px; }
	.logo a img{ width: 100%; }
	
	.lay_header.on .logo { width: 135px; }


	/*mobild*/
	#m_menu { max-width: 640px; margin: auto; }

	#m_menu .mobile_menu .m_menuicon { max-width: 30px; }
	
	#m_menu .m_menu_list li { width: 100%; }
	#m_menu .m_menu_list li a { font-size: 13px; line-height: 2.5; }
	#m_menu .m_menu_list li:nth-child(odd) { border-right:0; }
	#m_menu .m_menu_list li.btm_line_1 { border-bottom:none;}



	
}
/*모바일세로*/
@media screen and (max-width: 417px){
	.logo { width: 120px; height: 60px; }
	.logo a img{ width: 100%; }

	.lay_header.on .logo { width: 120px; }


}