@charset "utf-8";

.noScroll {overflow-y:hidden;}
.wrap {max-width:1200px; margin:0 auto;}
@media all and (max-width:1240px){
  .wrap {width:96%; margin:0 2%;}
}

#header {position:fixed; top:0; left:0; width:100%; z-index:100; padding:20px 0; }
#header.bg {background:rgba(255,255,255,0.8); transition: all 0.3s ease 0.3s;  }
#header .wrap {position:relative; text-align:center; }
#header h1 { display:inline-block; background:url('/2020_dnworks/img/common/logo.png') no-repeat center; width:140px; height:55px; text-indent:-9999px;}
#header h1 a {display:block;}
#header .right {position:absolute; right:0; top:13px; }
#header .right a { position:relative; display:inline-block; font-size:13.5px; padding:3px 30px 3px 0; font-weight:500; }
#header .right a::before { content:''; position:absolute; right:0; top:0; width:25px; height:25px; background:url('/2020_dnworks/img/common/topIcon.png') no-repeat -25px 0;}
#header .right a:first-child {margin-right:15px;}
#header .right a:first-child::before {background-position:0 0;}
@media all and (max-width:1023px){
  #header {top:0;}
}
@media all and (max-width:600px){
  #header .right {display:none;}
}

#gnbOpen { position:absolute; left:0; top:5px; background:url('/2020_dnworks/img/common/gnb.png') no-repeat center; width:40px; height:40px; text-indent:-9999px;}
#gnb { display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:200; }
#gnb .naviBg { position:absolute; left:0; top:0; width:100%; height:100%; background:#000; opacity:0.5; z-index:-1;}
#gnb .navi { position:absolute; left:-360px; top:0; width:360px; height:100%; background:#f4f4f4; overflow-y:scroll; transition: all 0.3s ease 0.3s; opacity:1; }
#gnb .navi.open {left:0; opacity:1;}
#gnb .navi::-webkit-scrollbar { width:6px; height:6px; }
#gnb .navi::-webkit-scrollbar-thumb { background: #bbb; border-radius:3px; }
#gnb .navi { scrollbar-arrow-color: #f4f4f4; scrollbar-Track-Color: #f4f4f4; scrollbar-Face-Color: #ddd; scrollbar-Shadow-Color: #ddd}
#gnb .navi > div { padding:40px 40px 90px 40px; }
#gnb .news { position:relative; background:#fff; margin:50px 0 40px; padding:20px 20px 20px 80px; }
#gnb .news strong { position:absolute; left:20px; top:19px; text-transform:uppercase; color:#ff4e00; }
#gnb .news a { display:block; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
#gnb .logo {text-align:center;}
#gnb .logo a {display:inline-block; background:url('/2020_dnworks/img/common/logo.png') no-repeat center; width:140px; height:55px; text-indent:-9999px;}
#gnb .menu {border-top:1px solid #444; border-bottom:1px solid #444; padding:20px 0; margin-bottom:60px; }
#gnb .menu a { display:block; padding:10px 0; font-size:20px; }
#gnb .menu a:hover {font-weight:600;}
#gnb .info {font-size:14px; color:#666; }
#gnb .info span {display:block; padding:4px 0;}
#gnb .info span.bold {color:#222; font-size:15px; }
#gnb .member { position:fixed; background:#444; bottom:0; width:360px; padding:7px 40px !important;}
#gnb .member a { position:relative; display:inline-block; color:#fff; font-size:14px; padding:10px 0 10px 40px; }
#gnb .member a::before {content:''; position:absolute; left:18px; top:18px; background:#fff; width:3px; height:3px; border-radius:50%; opacity:0.5; }
#gnb .member a:first-child {padding:10px 0;}
#gnb .member a:first-child::before {display:none;}
#naviClose {position:absolute; right:20px; top:20px; background:url('/2020_dnworks/img/common/closeBtn.gif') no-repeat center; width:30px; height:30px; text-indent:-9999px; }

/*
#header .bottom { position:fixed; bottom:3px; left:0; width:100%; background:#444; }
#header .bottom .left {float:left;}
#header .bottom .left a { position:relative; display:block; float:left; line-height:50px; font-size:12px; color:#fff; text-transform:uppercase; letter-spacing:0.5px; padding-right:20px; }
#header .bottom .left a::before {content:''; position:absolute; right:9px; top:19px; height:12px; width:1px; background:#7f7f7f;  }
#header .bottom .left a:last-child::before {display:none;}
#header .bottom .left a span {display:block; background:url('/2020_dnworks/img/common/home.png') no-repeat left center; padding-left:25px;}
#header .bottom .right {float:right;}
#header .bottom .right a { display:block; float:left; color:#fff; font-size:14px; line-height:50px; background:#5a5a5a; padding:0 20px; }
#header .bottom .right a span {display:block; background:url('/2020_dnworks/img/common/login.png') no-repeat right center; padding-right:30px; }
#header .bottom .right a:last-child {background:#4a82e8;}
#header .bottom .right a:last-child span { background:url('/2020_dnworks/img/common/arrow.png') no-repeat right center; }
*/

#footer {position:fixed; left:0; bottom:3px; width:100%; background:#444; line-height:50px; }
#footer .left {float:left;}
#footer .left a { position:relative; display:block; float:left; font-size:12px; color:#fff; text-transform:uppercase; letter-spacing:0.5px; padding-right:20px; }
#footer a::before {content:''; position:absolute; right:9px; top:19px; height:12px; width:1px; background:#7f7f7f;  }
#footer .left a:last-child::before {display:none;}
#footer .left a span {display:block; background:url('/2020_dnworks/img/common/home.png') no-repeat left center; padding-left:25px;}
#footer .right {float:right; color:#ccc; text-transform:uppercase; letter-spacing:0; font-size:12px; }
@media all and (max-width:600px){
  #footer .left { display:none; }
  #footer .right { width:100%; text-align:center; }
}




/*layerpopup start*/
html {font-size:1px;}
.layer_popup { position:fixed; top:0; left:0; display:flex; align-items:center; justify-content:center; width:100%; height:100%; margin:0 auto; z-index:300; }
.layer_popup::after {content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; z-index:-1; opacity:0.7; }
.layer_popup .wrap { display:flex; flex-direction:column-reverse; }
.layer_popup .wrap > a { display:block; border-radius:20rem; overflow:hidden;}
.layer_popup .wrap > a img {height:100%}
.layer_close form {display:flex; align-items:center; justify-content:flex-end; margin-bottom:10rem; color:#fff; }
.layer_close label {flex-grow:1; }
.layer_close input {margin-right:10rem; }
.layer_close a { position:relative; display:flex; align-items:center; justify-content:center; width:25rem; height:25rem; text-indent:-9999px; }
.layer_close a::before,
.layer_close a::after { content:''; position:absolute; left:50%; top:50%; width:3px; height:100%; background:#fff; transform: translate(-50%, -50%) rotate(45deg); }
.layer_close a::after { transform: translate(-50%, -50%) rotate(135deg); }
/*layerpopup end*/