@charset "utf-8";

/*본문바로가기*/
#skipBtn a {display: block; width:100%; position:absolute; left:-9999px; top:-9999px; }
#skipBtn a:focus,
#skipBtn a:hover,
#skipBtn a:active {position:relative; left:0; top:0; padding:10px 0; background: #333; color: #fff; text-align:center; z-index:300;}

/*wrap*/
.wrap {max-width:1440px; margin:0 auto;}
@media all and (max-width:1440px) {
	.wrap {max-width:98%; margin:0 1%;}
}
@media all and (max-width:640px) {
	.wrap {max-width:96%; margin:0 2%;}
}

/*헤더*/
#header {position:absolute; left:0; top:0; width:100%; z-index:100;}
/*#header::before {content: ''; display: block; position: absolute; right: 0; top: 0; width:33.683%; height: 100%; background:#f6f6f6;}*/
#header .wrap {position:relative; max-width:1903px !important; margin:0 2%;}
#header h1 { position:absolute; left:0%; top:20px; width:380px; height:60px;}
#header h1 a {display:block; width:100%; height:100%; background-image:url('/Main/Images/section/newtech/layout/newtech_logo.png'); background-repeat:no-repeat; background-position: center top; background-size:100%; text-indent:-9999px;}
#header .rightArea {position:absolute; width:200px; right:0%; padding-top:25px;}
#header .rightArea .btnWrap {float:left; position:relative; margin-top:12px;}
#header .rightArea .btnWrap > a ,
#header .rightArea .btnWrap > div > a {display:inline-block; width:50px; height:50px; position:relative; text-indent:-9999px;}
#header .rightArea .btnWrap > a::after,
#header .rightArea .btnWrap > div > a::after {content:''; display:block; background:url('/Main/Images/section/newtech/layout/btnWrap.png') ; position: absolute; top:5px ; left:5px; width:40px; height:40px;}
#header .rightArea .btnWrap > a.sitemap::after{background-position:0 0;}
#header .rightArea .btnWrap #mnbBtn  {display:none;}
#header .rightArea .btnWrap .mLogin {display:block;}
#header .rightArea .btnWrap {margin-top:0px;}
#header .rightArea .btnWrap > a {display:block; float:left; margin-right:20px;}
#header .rightArea .btnWrap > div > a.logIn::after {background-position:-80px 0;}
#header .rightArea .btnWrap > div > a.logOut::after {background-position:-40px 0;}
.mLogin {background:#ccc; border-radius:35px;}
@media all and (max-width:1600px) {
	#header h1 {width:310px; height:49px;}
}
@media all and (max-width:1300px) {
	#header .rightArea {width:150px;}
	#header h1 {width:230px; height:36px; top:28px;}
}
@media all and (max-width:1023px){
	#header h1 {left:50%; top:23px; width:250px; margin-left:-125px; z-index:10;}
	#header .rightArea {width:100%; padding-top:17px;}
	#header .rightArea .btnWrap {float:none;}
	#header .rightArea .btnWrap > a,
	#header .rightArea .btnWrap > div > a{width:45px; height:45px;}
	#header .rightArea .btnWrap #mnbBtn,
	#header .rightArea .btnWrap .mLogin {display:block;}
	#header .rightArea .btnWrap .mLogin {position:absolute; right:50px;}
	.sitemap {display:none !important;}
	#header .rightArea .btnWrap > a::after,
	#header .rightArea .btnWrap > div > a::after {top:3px; left:3px;} 
}
@media all and (max-width:480px){
	#header h1 {top:19px; width:260px; height:41px; margin-left:-130px;}
	#header h1 a {background-image:url('/Main/Images/section/newtech/layout/newtech_logo.png');}
}
@media all and (max-width:414px) {
	#header h1 {top:24px; width:200px; height:32px; margin-left:-100px;}
}

/*로그인*/
/*.logInWrap {float:right;}*/
.logInWrap .logIn > p {display:none;}
.logInWrap > p {display:none;}
.logInWrap label[for="loginForm"] {float:left; width:130px; font-size:30px; font-weight:500; color:#94a1b6; padding-top:10px;}
.logInWrap form {float:left;}
.logInWrap form > div {display:inline-block; vertical-align:top;}
.logInWrap form .idpw {overflow:hidden; position: relative;}
.logInWrap form .idpw:nth-of-type(2) {margin-top:2px;}
.logInWrap form .idpw label {float:left; width:40px; position: absolute; top:8px; left:10px; font-size:12px; font-weight:500; color:#ccc;}
.logInWrap form .idpw input {width:210px; float:right; box-sizing: border-box; padding:4px 4px 4px 40px !important; height:34px !important; font-size:16px; margin-right:0; border-radius:0;}
.logInWrap form .idpw input:focus {border-color:#464c5c;}
.logInWrap form .login_btn {overflow:hidden;}
.logInWrap form .login_btn a {display:block; width:90px; height:70px; float:left; margin-left:10px; background:#464c5c; box-sizing: border-box; border:3px solid #464c5c; text-align:center; color:#fff; padding-top:20px; font-weight:400;}
.logInWrap form .login_btn a:nth-of-type(1) {background:#fff; color:#333;}
.logInWrap_m {display:none;}
.logInWrap .logOut {padding-top:15px; margin-right:150px;}
.logInWrap .logOut p,
.logInWrap .logOut a {display:inline-block;}
.logInWrap .logOut a {padding:5px 20px; border-radius:20px; background:#464c5c; border:2px solid #464c5c; box-sizing:border-box; color:#fff; font-weight:400; margin-left:20px;}
.logInWrap .logOut a:hover {border:2px solid #464c5c; color:#464c5c; background:#fff;}
.window .logInWrap .logOut {margin-right:0; text-align:center; border:1px solid #ddd; padding:125px 2%;}
.window .logInWrap .logOut p {margin-bottom:20px;}
.window .logInWrap .logOut p span {font-weight:400; color:#464c5c;}
@media all and (max-width:1800px) {
	.rightArea .logInWrap,
	.logInWrap {display:none !important;}
	.window .logInWrap,
	.logInWrap_m {width:100%; display:block !important; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.3); box-sizing:border-box;}
	.logInWrap .logIn > p {display:block;} 
}
@media all and (max-width:1023px){
	.logInWrap_m p,
	.logInWrap_m span {color:#fff;}
	.logInWrap_m p {float:left;}
	.logInWrap_m span {display:inline-block; float:right;}
}

/*검색*/
.search { display: block; position: absolute; right: -60px; top: 0px; z-index:10;}
.search .close { background: transparent; border-radius: 40px; display: none; height: 31px; position: absolute; right: 3px; text-indent: -99999px; top: 3px; width: 45px; z-index: 99999999999; }
.search .close:hover { cursor: pointer; }
.search .close.active { display: block; }
.search-icon { border: 3px solid #333; border-radius: 40px; cursor: pointer; display: inline-block; height: 30px; transition: all 350ms ease-in-out; width: 30px; }
.search-icon span { background: #333; border-radius: 0 0 2px 2px; display: block; height: 15px; position: absolute; right: 0; top: 25px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: 350ms 200ms ease-in-out, rotate 300ms ease-in-out; width: 3px; }
.search-icon span:after { background: #fff; border-radius: 2px; content: ''; display: block; height: 20px; opacity: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); transition: 350ms 200ms ease-in-out, rotate 300ms ease-in-out; visibility: hidden; width: 4px; }
.search-icon span:before { background: #fff; border-radius: 2px; content: ''; display: block; height: 10px; opacity: 0; position: absolute; transition: 350ms 200ms ease-in-out, rotate 300ms ease-in-out; visibility: hidden; width: 4px; }
.search-icon.active { background: #fff; border-radius: 40px; box-sizing: border-box; height: 50px; margin-top: 0; width: 280px; }
.search-icon.active span { background: #333; border-radius: 2px; height: 20px; right: 22px; top: 15px; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: 350ms 200ms ease-in-out, rotate 300ms ease-in-out; width: 4px; }
.search-icon.active span:after { background: #333; opacity: 1; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transition: 350ms 200ms ease-in-out, rotate 300ms ease-in-out; visibility: visible; }
.search-icon.active span.ready { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); }
.search-icon.active span.ready:after { height: 10px; position: absolute; right: -3px; top: 11px; -webkit-transform: rotate(-135deg); transform: rotate(-135deg); transition: 350ms 200ms ease-in-out, rotate 300ms ease-in-out; }
.search-icon.active span.ready:before { background: #333; opacity: 1; right: 3px; top: 11px; -webkit-transform: rotate(135deg); transform: rotate(135deg); transition: 350ms 200ms ease-in-out, rotate 300ms ease-in-out; visibility: visible; }
.search-icon.active input { border: 0; box-sizing: border-box; clip: auto; display: block; height: 39px; margin: 0 0 0 20px; padding: 0; vertical-align: top; width: calc(100% - 65px); }
.search-icon.active input:focus { outline: none; }
.search input { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
@media all and (max-width:1023px) {
	.search {float:none; top:0; right:5px;}
	.search-icon {margin-top:5px; width:25px; height:25px;}
	.search-icon span {top:23px;}
}
@media all and (max-width:480px) {
	.search  {right:10px;}
}

/*네비게이션*/
#gnb {text-align:center; background:#fff; line-height:1;}
#gnb::before {content:''; position: absolute; width:100%; height:1px; display:block; background:#ddd; top:96px;left:0;}
#gnb .dept1 {display:inline-block; width:50%;}
#gnb .dept1 > li {float:left; width:20%;}
#gnb .dept1 > li > a { display:block; padding:36px 2%; border-bottom:4px solid #fff;}
#gnb .dept1 > li > a span {display:block; font-size:20px; font-weight:500;}
#gnb .dept1 > li.on > a {border-bottom:4px solid #464c5c; color:#0069b3}
#gnb .dept2 { display:none; height:250px; box-sizing:border-box; padding:10px 3% 30px 15px; border-left:1px solid #ddd;}
#gnb .dept1 li:first-child .dept2 {border-left:none;}
#gnb li.on .dept2 {background:#f8f8f8;}
#gnb .dept2 li a { display:block; font-size:15px; color:#666; padding:7px 0; line-height:1.3; text-align:left;}
#gnb .dept2 li a:hover span {color:#464c5c; font-weight:400;}
#mnbBtn, #mnb {display:none;}
#mnbBtn, #mnb {display:none;}
@media all and (max-width:1200px){
	#gnb .dept1 {width:55%;}
}
@media all and (max-width:1023px) {
	#gnb {display:none;}
	#mnb { display:block; position: fixed; overflow: visible; left: -1000px; top: 0; height: 100%; width: 80%; background:#545d73; z-index: 100; }
	#mnb .wrap {max-width:100% !important; height:100%; margin:0; overflow-y:auto; }
	#mnb .wrap .top {background:#fff; height:80px; box-sizing:border-box; padding:15px 0 0 20px;}
	#mnb .wrap .top img {width:200px;}
	#mnb .blankBtn {display:block; background:#333; color:#fff; padding:13px 0; text-align:center; font-size:16px; }
	#mnb .dept1 {clear:both;}
	#mnb .dept1 > li { position:relative; border-bottom:1px solid rgba(255,255,255,0.1);}
	#mnb .dept1 > li > a { display:block; padding:15px 20px;}
	#mnb .dept1 > li > a span {color:#fff; font-weight:300;}
	#mnb .dept1 > li > a::after {content:''; display:block; width:13px; height:13px; position:absolute; right:20px; top:20px; background:url('/Main/Images/section/newtech/layout/linkControl.gif') no-repeat; }
	#mnb .dept1 > li > a[target="_blank"]::after {background:url('/Main/Images/section/newtech/layout/blankW.gif') no-repeat;}
	#mnb .dept1 > li.on > a {background:#464c5c;}
	#mnb .dept1 > li.on > a span { color:#fff; font-weight:400;}
	#mnb .dept1 > li.on > a::after {background-position:right 0;}
	#mnb .dept2 {display:none;}
	#mnb .dept2 > li {background:#fff; border-bottom:1px solid #eee;}
	#mnb .dept2 > li > a { position:relative; display:block; padding:10px 5%;}
	#mnb .dept2 > li.on > a {background:#666; color:#fff;}
	#mnb .dept2 > li > a[target="_blank"] {background:url('/Main/Images/section/newtech/layout/blankB.gif') no-repeat 98% center; padding-right:18px;}
	#mnb .dept2 > li > a::before {content:''; position:absolute; display:block; width:4px; height:4px; border-radius:2px; position:absolute; left:3%; top:20px; background:#ccc;}
	#mnbBg { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1; }
	.mnbClose {position:absolute; display:block; width:45px; height:45px; text-indent:-9999px; top:20px; right:0; background: url('/Main/Images/section/newtech/layout/closeIcon.png') no-repeat center; }
}

/*푸터*/
footer {}
.f_top  {border-top:1px solid #ccc; border-bottom:1px solid #ccc; background: #ececec; line-height:1;}
.f_top .f_link,
.f_top .linklist {display:inline-block;}
.f_top .f_link {padding-left:10px;}
.f_top .f_link li {float:left; margin-right:15px; padding:17px 0;}
.f_top .f_link li::after {content:'|'; padding-left:20px; font-size:13px; color:#ccc; }
.f_top .f_link li:last-child::after {display:none;}
.f_top .linklist {float:right; width:50%; border-left:1px solid #ccc;}
.f_top .linklist ul {width:100%; }
.f_top .linklist > ul li {position:relative; float:left; width:50%; border-right:1px solid #ccc;}
.f_top .linklist > ul > li::after {content:'▲'; font-size:12px; display:block; position: absolute; right:20px; top:20px;}
.f_top .linklist ul li a {display:block; padding:18px 15px; }
.linklist .list { display:none; position:absolute; bottom:0px; left:0px; width:100%; background:#f5f5f5; border:1px solid #555; z-index:10;}
.linklist .list > a { display:block; background:#015eaa; color:#fff; padding:10px; }
.linklist .list > a::after {content:'▼'; font-size:12px; display:block; position: absolute; right:30px; top:20px;}
.linklist .list ul { height:150px; background:#fff; overflow-y:scroll;}
.linklist .list ul li {width:100%; border-right:0; border-bottom:1px solid #ddd;}
.linklist .list ul li a {display:block; padding:18px 3%; font-size:14px;}
.f_bottom {padding:40px 0 40px 400px; background:url('/Main/Images/section/newtech/layout/newtech_logo_footer.png') no-repeat left center;}
.f_bottom li {clear:both; margin-bottom:10px;}
.f_bottom li span {display:inline-block; margin-right:20px;}
.f_bottom li span:first-child {display:block;}
.f_bottom li span strong {font-weight:400; padding-right:10px;}
.f_bottom li:last-child {font-weight:100; font-size:15px; letter-spacing:0.05em;}
@media all and (max-width:1440px) {
	.f_top .wrap {max-width:100%; margin:0;}
}
@media all and (max-width:1023px) {
	.f_top .f_link {width:100%; text-align:center;}
	.f_top .f_link li {float:none; display:inline-block; margin-right:5px;}
	.f_top .f_link li::after {padding-left:10px;}
	.f_top .linklist {float:none; width:100%; border-top:1px solid #ccc; border-left:none;}
	.f_bottom {background:none; padding:30px 2%;}
}
@media all and (max-width:480px) {
	.f_top .linklist > ul li {width:100%;}
	.f_top .linklist > ul li:last-child {border-top:1px solid #ccc;}
	.f_top .f_link li {padding:10px 0;}
}

/*로그인레이어팝업*/
.mask {z-index:600; position:fixed; left:0; top:0; background-color:#000; display:none; clear:both; }
.window {z-index:610; position:fixed; box-sizing:border-box;  width:50%; /* height:400px;*/ border-radius:6px; background:#fff; left:50%; margin-left:-25%; top:120px; display: none; padding:30px 2%;}
.mLoginWrap {float:left;}
.window .close {position:absolute; display:block; cursor:pointer; top:-40px; right:10px; border:none; text-indent:-9999px; text-align:center; width:25px; height:25px;}
.window .close span {display:block; cursor:pointer; position:absolute; top:0px; left:50%; background: #fff; border-radius: 2px; height: 30px; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: 350ms 200ms ease-in-out, rotate 300ms ease-in-out; width: 4px; }
.window .close span::after {background: #fff; opacity: 1; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); transition: 350ms 200ms ease-in-out, rotate 300ms ease-in-out; visibility: visible; border-radius:2px; content:''; display:block; height:30px; width:4px;}
.window .logInWrap p {display:block; text-align:center;}
.window .logInWrap .logIn > div {overflow:hidden; width:600px; margin:0 auto; box-sizing:border-box; padding:40px 25px; background:#f6f6f6}
.window .logInWrap .logIn p {text-align:center; width:600px; box-sizing:border-box; margin:0 auto;}
.window .logInWrap .logIn p:nth-of-type(1) {margin-top:10px; margin-bottom:30px;}
.window .logInWrap .logIn p:nth-of-type(2) {border:2px solid #94a1b6; margin-top:10px; padding:20px 5%;}
@media all and (max-width:1280px) {
	.window  {width:80%; margin-left:-40%;}
}
@media all and (max-width:800px) {
	.window {/*height:500px;*/}
	.window .logInWrap label[for="loginForm"] {float:none; display:block; width:100%;text-align:center;}
	.window .logInWrap .logIn p {width:100%;}
	.window .logInWrap .logIn > div {width:100%; padding:0 5% 40px;}
	.window .logInWrap form {float:none; text-align:center;}
	.window .logInWrap form .idpw input {width:100%;}
	.window .logInWrap form > div {width:100%;}
	.window .logInWrap form .idpw {margin-top:5px;}
	.window .logInWrap form .login_btn {margin-top:10px;}
	.window .logInWrap form .login_btn a {margin-left:1%;width:49.5%; height:45px; padding-top:6px;}
	.window .logInWrap form .login_btn a:nth-of-type(1) { margin-left:0;}
	.window .logInWrap form .idpw input[type="text"],
	.window .logInWrap form .idpw input[type="password"] {padding: 10px 4px 10px 50px;}
	.window .logInWrap form .idpw label {top:15px;}
}
@media all and (max-width:480px) {
	.window {width:90%; margin-left:-45%; padding:30px 3%;}
	.window .logInWrap label[for="loginForm"] {padding-top:0;}
	.window > p:nth-of-type(2) {font-size:14px;}
}


/*상단으로이동*/
.fixedTop {visibility: hidden; position:fixed; right:10px; bottom:0px; width:44px; height:44px; z-index:10;}
.fixedTop a {display:block; position:relative; width:44px; height:44px; color:#fff; font-weight:300; display:block; background:rgba(0,0,0,0.3); box-sizing:border-box; padding-top:17px; text-align:center;}
.fixedTop a::after{content:'▲'; position:absolute; display:block; width:10px; height: 10px; left:17px; top:8px; color:#fff; font-size:8px;}
.shown {visibility: visible;}