/* BASIC css start */
/* 11 */
button, input, select, textarea, a {
    vertical-align: middle;
    background-color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    color: #686868;}
    
/* 22*/
.dropbtn {
  background-color: #ffffff;
  color: #545454;
  padding: 1px;
  font-size: 15px;
  border: none;
  transition: color .2s ease-in-out;
  font-weight: 700;
}

.dropdown {
  position: relative;
  display: inline-block;     
  top: 196px;
    right: -530px;
   transition: color .2s ease-in-out;
   
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  
}

.dropdown-content a {
      color: #242424;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: color .2s ease-in-out;
    font-size: 12px;
    font-weight: 100;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}
transition: all 0.1s ease-in-out;

.dropdown:hover .dropbtn {background-color: #ededed;}
#hdWrap { margin-bottom: 30px; }
#hdWrap #header { position: relative; width: 1200px; margin-left: auto; margin-right: auto; }
#hdWrap #header .hd-logo { margin: 25px 0 10px 0; text-align: center; }
#hdWrap #header .hd-link { zoom: 1; overflow: hidden; padding: 10px 20px 10px 300px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
#hdWrap #header .hd-menu { float: left; }
#hdWrap #header .hd-menu li { float: left; padding: 0 20px; border-right: 1px solid #ddd; }
#hdWrap #header .hd-menu li.last { border-right: 0; }
#hdWrap #header .hd-menu li a { display: inline-block; height: 16px; line-height: 18px; color: #aaa; font-size: 11px; letter-spacing: -1px; }
#hdWrap #header .hd-menu li a:hover { color: #333; }
#hdWrap #header .hd-search { float: right; width: 140px; }
#hdWrap #header .hd-search .input-keyword { width: 120px; background-color: #fafafa; border: 1px solid #ddd; }

#headerWrap {width:1200px; margin:0 auto;}
#headerWrap .logo_wrap{ text-align: center; padding-top: 79px;
    padding-bottom: 22px;}
#headerWrap .topWrap {overflow:hidden;}
#headerWrap .topWrap h1 {float:left; width:150px;}
#headerWrap .topWrap .utillMenu { text-align: center; margin-top:20px;}
#headerWrap .topWrap .utillMenu ul {overflow:hidden; }
#headerWrap .topWrap .utillMenu > ul > li {display: inline-block; vertical-align: top; margin: 0 10px;}
#headerWrap .topWrap .utillMenu > ul > li.hd-search{    
    margin-left: 40px;
    top: 0px;
    right: 331px;
    position: absolute;
    width: 248px;
    background-color: #ffffff;
    padding: 0.5rem;
    line-height: 1rem;
    border-radius: -1.5rem;
    outline: 1px solid #d3d2d2;}
#headerWrap .topWrap .utillMenu ul li .hd-search {margin-left: 25px;padding:0; margin:0;border-bottom: 0px solid #cfdde3;}
#headerWrap .topWrap .utillMenu ul li a input {width:14px; height:16px;}
#headerWrap .topWrap .utillMenu ul li span,
#headerWrap .topWrap .utillMenu ul li a {color: #a6abaf;font-size: 12px; }
#headerWrap .topWrap .utillMenu ul li .sch_btn{  padding-bottom: 5px; display: inline-block;}
#headerWrap .topWrap .utillMenu ul li .MS_search_word{width:165px; border:0;}
#headerWrap .topWrap .utillMenu ul.hd-cate{ margin-bottom: 20px;
    position: absolute;
    top: -1px;
    right: 0px;
    line-height: 37px;
    width: 128%;
    border-bottom: 1px solid #d3d2d2;}
#headerWrap .topWrap .utillMenu ul.hd-cate li a{color: #545454; font-size:11.5px;font-weight: 100;}



#headerWrap .topWrap .utillMenu > ul > li.hd-cate-wrap a{ padding-bottom: 10px; display: block;}
#headerWrap .topWrap .utillMenu > ul > li.hd-cate-wrap:hover .hd-cate{ opacity: 1;}
#headerWrap .topWrap .utillMenu > ul > li.hd-cate-wrap .hd-cate{transition: all 0.3s; -webkit-transition: all 0.3s; opacity: 0; position: absolute; z-index: 9; background: #fff; border: solid 1px #ccc;  padding: 10px 15px 5px; width: auto;}
#headerWrap .topWrap .utillMenu > ul > li.hd-cate-wrap .hd-cate li{line-height: 24px;}
#headerWrap .topWrap .utillMenu > ul > li.hd-cate-wrap .hd-cate li a{font-size: 12px;}
#headerWrap .topWrap .utillMenu > ul > li.hd-cate-wrap .hd-cate li a:hover{ transition: all 0.3s; -webkit-transition: all 0.3s; opacity: 0.5;}

#content {margin-top:20px;}

/* 사이드 메뉴 */
#scroll-right {position: fixed;
    z-index: 80;
    top: 0;
    right: 0px;
    background: #fff;
    height: 100%;
    width: 173px;
    padding: 14px;
    border-left: solid 1px #e6e6e6;
    padding-top: 60px;}
#scroll-right a{line-height: 35px;}

.side-menu .div-wrap{display: block; margin-bottom: 30px;}
.side-menu .board-btn a{display: block;}

.side-menu .tit{color: #242424; font-size: 20px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: solid 1px #d4d4d4;}
.side-menu .side-cs-center .tel{font-weight: 500; font-size: 15px; color: #000; padding-bottom: 3px;}
.side-menu .side-cs-center .cont{line-height: 19px;}
.side-menu .side-bank-info .cont{line-height: 19px;}

#side-menu-wrap .right-btn{ width: 16px;  position: absolute; top: 45%; right: 170px;margin-top: -8px; cursor: pointer; border: solid 1px #e6e6e6; background: #fff; display: inline-block; padding: 15px 10px;}
#side-menu-wrap .right-btn .fa{ font-size: 22px; transform: rotate(180deg);}
#side-menu-wrap .right-btn .fa.rotate{ transform: rotate(0deg);padding-left: 3px;}

#aside{display: none;}

/* CSS style sheet */

*{
    margin:0;
    padding:0;

}

input[id="icon"] {
    display:none;
} 

body{
    height:5000px;
}

input[id="icon"] + label{
    position: relative;
    display:block;
    width:37px;
    height:25px;
    cursor:pointer;
    left: 375px;
    top: -197px; /* 커서를 올려놓을 때 모양이 바뀐다. */
} 

input[id="icon"] + label > span {
    position: absolute;
    display:block;
    width:100%;
    height:5px;
    border-radius:30px;
    background:#000;
    transition: all 0.35s;  /* 진행되는 과정들을 천천히 보여줄 수 있다. 0.35초 동안 진행됨 */
    z-index:2;

}

input[id="icon"] + label > span:nth-child(1) {
    top:0px;
}

input[id="icon"] + label > span:nth-child(2) {
    top:50%;
    transform: translateY(-50%);  /* 엘리먼트를 변형할 때 쓴다. 비틀거나 구부리거나 돌릴 때 . 여러가지로 모양을 바꿀 때 */
}

input[id="icon"] + label > span:nth-child(3) {
    bottom:0px;
}


input[id="icon"]:checked + label > span:nth-child(1) {
    top:50%;
    transform:translateY(-50%) rotate(45deg);
}

input[id="icon"]:checked + label > span:nth-child(2) {
    opacity: 0;
}

input[id="icon"]:checked + label > span:nth-child(3) {
    bottom:50%;
    transform:translateY(50%) rotate(-45deg);
}

#icon + label + #header {
    position:fixed;  /* 스크롤을 내리더라도 같은 위치에서 붙어다닌다. */
    width:281px;
    height:100%;
    background:#e4e9f3;
    top:0px;
    padding:60px 25px 25px 25px;
    box-sizing:border-box;
    left:-300px;
    z-index:1;
    transition: all 0.35s;
}

#icon:checked + label + #header {
    left:0px;
}

#icon:checked + label + #header > ul > li > a {
    color: white; background: #e4e9f3;

}
/* BASIC css end */