@charset "utf-8";

/************************************************************************ 공통 ************************************************************************/
body {
  position: relative;
  padding: 80px 0 40px 0;
  background: #ddd;
  -webkit-text-size-adjust: none;
  overflow-y: scroll;
}

.coverDisplay {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: none;
  text-indent: -9999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5)
}

.coverDisplay.on {
  display: block;
}

/************************************************************************ 레이아웃 ************************************************************************/
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
  width: 100%;
  height: 50px;
  /* border-bottom:2px solid #9e1a1d; */
  /* background-image:-webkit-linear-gradient(top, #404040 0%, #333333 100%); */
  /* chrome, safari */
  /* background-image:   -moz-linear-gradient(top, #404040 0%, #333333 100%); */
  /* ff */
  /* background-image:    -ms-linear-gradient(top, #404040 0%, #333333 100%); */
  /* ie10 */
  /* background-image:     -o-linear-gradient(top, #404040 0%, #333333 100%); */
  /*opera */
  /* background-image:        linear-gradient(top, #404040 0%, #333333 100%); */
  /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#404040, endColorstr=#333333, gradienttype=0); */
  /* ie9 이하 버전 */
  background: #fff;
}

header h1 {
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

header h1 a {
  display: block;
}

header h1 a img {
  display: block;
  height: 28px;
}

header .btnMenu {
  position: absolute;
  left: 10px;
  top: 6px;
}

header .btnMenu img {
  display: block;
  width: 34px;
  height: 30px;
}

header .btnSrch {
  position: absolute;
  right: 10px;
  top: 6px;
}

header .btnSrch img {
  display: block;
  width: 34px;
  height: 30px;
}

footer {
  width: 100%;
  padding-bottom: 10px;
  border-top: 2px solid #ccc;
  background: #333;
}

footer .pcVersion {
  display: block;
  width: 70px;
  height: 1.5em;
  margin: 10px auto 0 auto;
  font: normal 1em/1.5em sans-serif;
  color: 333;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
  :
}

footer .copyright {
  padding-top: 8px;
  text-align: center;
  color: #fff;
  font-size: 0.8em;
}

footer .powered {
  display: block;
  padding-top: 3px;
  text-align: center;
}

footer .powered img {
  width: 110px;
  height: 15px;
}

#container:after {
  content: "";
  display: block;
  clear: both;
}

#container section {
  margin: 10px;
  box-shadow: 0 0 2px #999;
  background: #fff;
}

#container section>article {
  border-top: 1px solid #ccc;
}

#container section>article:first-child {
  border-top: none;
}

#container section>article>h1 {
  padding: 10px;
  font: bold 1em/1em "Malgun Gothic", sans-serif;
  letter-spacing: -1px;
}

#container section>article>h1.titleList {
  color: #5d3308;
  border-bottom: 1px solid #ccc;
  background: #f6f6f6;
}

#container section>article>h1.titleSkin {
  color: #5d3308;
  border-top: 2px solid #f18a1e;
  border-bottom: 1px solid #ccc;
}

#container section>article .title {
  font: bold 1em "Malgun Gothic", sans-serif;
  letter-spacing: -1px;
}

/* Mobile */
@media all and (max-width:639px) {
  #container .contents {
    width: 100%;
  }

  #container .aside {
    width: 100%;
  }
}

/* Pc */
@media all and (min-width:640px) {
  #container .contents {
    float: left;
    width: 60%;
  }

  #container .aside {
    float: right;
    width: 40%;
  }

  #container .aside section {
    margin-left: 0;
  }
}

/************************************************************************ 메뉴 ************************************************************************/
#menu {
  position: fixed;
  top: 50px;
  /* left:-300px;top:100px;z-index:1002; */
  width: 100%;
  /* height:100%; */
  box-shadow: 2px 0 2px #333;
  background: url(/m/img/B2/bg_menuline.gif) 0 100% repeat-x #333;
  z-index: 1;
}

#menu .titleWrap {
  padding: 10px;
  background: #9e1a1d;
  display: none;
}

#menu .titleWrap:after {
  content: "";
  display: block;
  clear: both;
}

#menu .titleWrap h2 {
  float: left;
  width: 180px;
  font: bold 1.2em "Malgun Gothic", sans-serif;
  letter-spacing: -1px;
  color: #fff;
  text-shadow: 0 1px 1px #333, 0 -1px 1px #333, 1px 0 1px #333, -1px 0 1px #333;
}

#menu .titleWrap .closeMenu {
  float: right;
  border-left: 1px solid #000;
}

#menu .titleWrap .closeMenu img {
  display: block;
  width: 16px;
  height: 16px;
  padding: 2px 2px 2px 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  margin: 0 auto;
}

/*
#gnb{background:#999;}
#gnb a{display:block;padding:10px;font:bold 1em/1.2em "Malgun Gothic",sans-serif;letter-spacing:-1px;color:#fff;}
#gnb>li>a{border-bottom:1px solid #000;background:#333;}
#gnb>li:first-child>a{border-top:1px solid #000;}
#gnb>li>ul:after{content:"";display:block;clear:both;}
#gnb>li>ul>li{width:50%;}
#gnb>li>ul>li>a{text-align:center;border-right:1px solid #000;border-bottom:1px solid #000;background:#666;}
#gnb>li>ul>li:nth-child(2n)>a{border-right:none;}
*/
#gnb {
  background: #777;
}

#gnb:after {
  content: '';
  display: block;
  clear: both;
}

#gnb.no-js li {
  float: left;
}

@media screen and (max-width:980px) {
  #gnb.no-js li {
    width: 33.3332%;
  }

  #gnb.no-js li:nth-child(n+4) {
    display: none;
  }
}

#gnb>li>a {
  display: block;
  height: 30px;
  line-height: 30px;
  color: #fff;
  text-align: center;
  background: #9e1a1d;
}

#gnb ul {
  display: none;
}

#gnb .owl-item>li>a {
  display: block;
  height: 30px;
  line-height: 30px;
  font-family: "Malgun Gothic";
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  background: #f18a1e;
}

#gnb .owl-item>li>ul {
  padding: 10px 0;
}

#gnb .owl-item>li>ul>li>a {
  display: block;
  padding: 3px 0;
  text-align: center;
  font-family: "Malgun Gothic";
  font-size: 12px;
  color: #fff;
}

/************************************************************************ 검색창 ************************************************************************/
#srch {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 15px;
  /* box-shadow:0 2px 2px #999; */
  background: #f18a1e;
  z-index: 2;
}

#srch .searchFieldset {
  position: relative;
  padding: 2px 10px 5px 10px;
}

#srch .searchFieldset .text {
  display: block;
  width: 100%;
  height: 23px;
  border: none;
  border-radius: 0px;
}

#srch .searchFieldset .confirm {
  position: absolute;
  right: 15px;
  top: 4px;
  width: 20px;
  height: 20px;
}

/************************************************************************ 컨트롤러 ************************************************************************/
#controller {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 1001;
  width: 100%;
  background: #fff;
}

#controller.middle {
  bottom: 0;
  background: none;
}

#controller:after {
  content: "";
  display: block;
  clear: both;
}

#controller a {
  float: left;
  width: 20%;
  padding: 10px 0;
  border-top: 2px solid #a5a5a5;
}

#controller a img {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto;
}

#controller .urlWrap {
  width: 100%;
  display: none;
  background: #e5e5e5;
  border-top: 2px solid #a5a5a5;
}

#controller .urlWrap.on {
  display: block;
}

#controller .urlWrap p {
  padding: 10px;
  padding-bottom: 0;
}

#controller .urlWrap em {
  display: block;
  padding: 10px;
}

#controller .urlWrap em span {
  display: block;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  background: #fff;
}

#controller .urlWrap em span input[type="text"] {
  display: block;
  width: 100%;
  height: 2em;
  font: bold 1em/2em "Malgun Gothic", sans-serif;
  letter-spacing: -1px;
  border: none;
  border-radius: 0;
}

#controller .urlWrap em span input[type="text"]:focus {
  outline: none;
}