@charset "utf-8";

body, html {overflow:hidden;}
body {background:url('/2020_dnworks/img/main/bg.jpg') no-repeat 20% top; }
@media all and (max-width:1023px){
  body {background-position:center top;}
}

#forcecentered { opacity:0; position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; }
#forcecentered.on { transition: all 0.5s ease 0.5s; opacity:1;}

.clearfix { position:absolute; top:50%; margin-top:-210px; overflow:hidden; }
.clearfix a { display:block; float: left; padding:0 30px; transition: all 0.5s ease 0.5s; }
.clearfix a.noLink {cursor:default;}
.clearfix a img { border-radius:20px; box-shadow:7px 7px 7px rgba(0,0,0,0.2); opacity:0.8; }
.clearfix a.active img {opacity:1; transition: all 0.5s ease 0.5s; }
.clearfix a dl { margin-top:30px; }
.clearfix a dt { font-weight:600; font-size:15px; margin-bottom:10px; }
.clearfix a dd { color:#555; font-size:17px;}
@media all and (max-width:600px){
  .clearfix { margin-top:-160px;}
  .clearfix a {width:400px;}
  .clearfix a dt {font-size:14px;}
  .clearfix a dd {font-size:15px;}
}
@media all and (max-width:480px){
  .clearfix { margin-top:-143px; }
  .clearfix a {width:350px;}
}

.scrollbar { position:fixed; bottom:0; width:100%; height:3px; background: #ccc; }
.scrollbar .handle { height: 100%; background: #2e5dd4; cursor: pointer; }
.scrollbar .handle .mousearea { position: absolute; top: -9px; left: 0; width: 100%; height: 20px; }

.wheelImg { display:none; position:fixed; top:50%; left:50%; margin:-46px 0 0 -37px; text-align:center; }
.wheelImg .wheelDot {position:absolute; left:44px; top:30px; transition: all 0.5s ease 0.5s;}
.wheelImg.on .wheelDot {top:10px;}
.wheelImg span {display:block; font-weight:600; font-size:12px; margin-top:10px; color:#555; }

#address { position:fixed; left:0; bottom:80px; width:100%;}
#address ul {margin-top:5px;}
#address li {float:left; margin-right:20px; font-size:14px;}
@media all and (max-width:480px){
  #address {bottom:70px;}
  #address .wrap > strong {display:none;}
}

/*레이어팝업*/
.layerPop {position:absolute; padding: 10px; box-sizing:border-box; background:rgba(0,0,0,0.7); z-index:200;}
.layerPop img { vertical-align:top; width:100%;}
.layerPop form { position:relative; color:#fff; padding: 10px 10px 0;}
.layerPop form a { position:absolute; color:#fff; font-weight:bold; right: 10px; top: 10px;}
@media all and (max-width:768px) {
  .layerPop {width:90% !important; margin:0 5%; right:auto !important; left:auto !important; top:150px !important; }
  .layerPop img {width:100%;}
}
/*레이어팝업 위치*/
#pop2 {left: 3%; top: 151px;}