@charset "utf-8";

/* =========================== skip네비게이션 ====================================== */
#skip a{position:absolute;top:0px;left:-9999px;z-index:100;}
#skip a:focus, #skip a:active{left:0px;width:100%;text-align:center;padding:10px 0px;background:#004c80;color:#fff;font-weight:bold;}

/* =========================== 공통 레이아웃 ============================= */
div#wrap{position: relative;width:100%;height: 100%;max-width: 1900px;word-break: keep-all;line-height: 1;}
div#wrap header{position: fixed;overflow:visible;width: 450px;height: 100%;padding: 30px;min-width: 450px;}
#container{position:relative;margin-left:450px;}
div#wrap footer{position: fixed;left: 15px;bottom: 15px;}

header h1{margin-bottom: 35px;}
header h1 a{display:block; width:220px; height:50px; background:url('../images/common/logo.png') no-repeat; }

header .topTel{position:relative;width:100%;background:#1e3639;padding: 40px 40px 60px;margin-bottom: 30px;}
.topTel h2{font-size:35px;color:#9baeb1;}
.topTel .telNo{font-size: 42px;color: #fff;margin: 10px 0 25px;}
.topTel .stxt{font-size: 18px;color: #6f868a;font-weight: 500;margin-bottom: 10px;}
.topTel .stxtmail{font-size: 20px; color: #9baeb1;}
.topTel .btn_online{position: absolute; bottom:20px; right:-30px; display:inline-block; }
.topTel .btn_online a{display:inline-block; padding: 15px 30px; border-radius:30px; background:#9b785c; color:#fff; font-size: 15px; }
.-spring_y {
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    animation-name: spring_y;
    animation-duration: 3.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: normal;
    -webkit-animation-name: spring_y;
    -webkit-animation-duration: 3.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
-webkit-animation-direction: normal;}
 @keyframes spring_y{0%{transform:translate(0px,0px) }80%{transform:translate(0px,0px) }85%{transform:translate(0px,6px) }90%{transform:translate(0px,0px) }95%{transform:translate(0px,6px) }100%{transform:translate(0px,0px) }}
 @-webkit-keyframes spring_y{0%{transform:translate(0px,0px) }80%{transform:translate(0px,0px) }85%{transform:translate(0px,6px) }90%{transform:translate(0px,0px) }95%{transform:translate(0px,6px) }100%{transform:translate(0px,0px) }}

nav.gnb{position: relative;width: 100%;padding-top: 30px;}
nav.gnb ul{float: right;margin: 15px 40px 15px 0;}
.gnb li{float:left;margin: 0 30px;}
.gnb li a{display: block;font-size:18px;color:#000;line-height: 25px;border-bottom:2px solid #f5f6f9;transition-duration:0.5s;padding: 0 3px;}
.gnb li a:hover{color:#1e3639;border-bottom:2px solid #1e3639;}

.mainInner{position: relative;margin: 30px 4% 0;background:#fff;webkit-box-shadow: 8px 8px 15px 0px rgba(0, 0, 0, 0.3);-moz-box-shadow: 8px 8px 15px 0px rgba(0, 0, 0, 0.3);box-shadow: 8px 8px 20px 0px rgba(0, 0, 0, 0.3);}

footer{}
footer h1{ font-size: 16px; color: #000; font-weight: 400;}
footer address{font-size: 14px; line-height: 22px; margin: 5px 0 15px;}
footer .copyright{ display: inline-block;  background: #000;  padding: 10px 40px 10px 20px;  border-radius: 30px; font-size: 14px;  color: #fff;}


.nav_m .nav-icon:after,
.nav_m .nav-icon:before,
.nav_m .nav-icon div {
  background-color: #1D1D1B;  content: '';  display: block;  height: 2px;  margin: 4px 0;
  -moz-transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;}
.nav_m .nav-icon:before {margin-top:0;}
.nav_m .nav-icon:after {margin-bottom:0;}
.nav_m .nav-icon.active:before {
  transform: translateY(7px) rotate(135deg);
  -moz-transform: translateY(7px) rotate(135deg);
  -webkit-transform: translateY(7px) rotate(135deg);
}
.nav_m .nav-icon.active:after {
  transform: translateY(-5px) rotate(-135deg);
  -moz-transform: translateY(-5px) rotate(-135deg);
  -webkit-transform: translateY(-5px) rotate(-135deg);
}
.nav_m .nav-icon.active div {
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}

.nav_m .nav-icon {display:inline-block;	width: 24px;cursor:pointer;	position:absolute;top: 20px;right: 0;z-index:100;
transform: translateY(-50%); -webkit-transform: translateY(-50%);	}
.nav_m .nav-icon { width: 18px; }
.nav_m .nav-icon div { width: 12px; position: relative; right: -6px;}





 /*  팝업시작업추가  */
.btn-r{
	position: absolute;
    right: -35px;
    top: 0;
    background: #222;
}
a.btn-layerClose {
  display: block;
  width: 35px;
  height: 35px;
  background: url('../images/common/popClose_s.png') 50% 50%  no-repeat;
}

 .layer {
    position: fixed;
    /* width: 40%; */
    left: 50%;
    margin-left: -250px; half of width
    height: 300px;
    top: 50%;
    margin-top: -350px; half of height
    overflow: auto;

    decoration
    border: 1px solid #000;
    background-color: #FFFFFF;
    /* padding: 1em; */
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .layer {
        top: 20px;
        width: 80%;
        margin-left: -40%;
        margin-top: 0;
    }
    
    .btn-r{right: 0; top: auto;}
}