@charset "utf-8";

/****************************************/ 
/* Name: DESIGN WAVE
/* PART: LAYOUT STYLE
/* Version: 1.0
/* Author: Kim Bo Reum
/****************************************/

#wrapper {width:100%; overflow:hidden; min-width:1260px;}

.ori-pic {display:block;}
.res-pic {display:none;}


/*============* header *============*/
#header {position:fixed; top:0; left:0; width:100%; height:auto; background:rgba(0,0,0,0.9); box-sizing:border-box; border-bottom:1px solid rgba(255,255,255,0.25); z-index:15; transition:.3s ease;}
#header .headBox {position:relative; width:1260px; height:100%; margin:0 auto;}
#header h1 {float:left; width:220px; padding-top:13px;}
#header h1 img {width:100%;}
#header h1 img.white_logo {display:block}
#header h1 img.color_logo {display:none;}

/*globList*/
#globList {width:100%; height:40px; overflow:hidden; border-bottom:1px solid rgba(255,255,255,0.3); box-sizing:border-box;}

ul.glob {float:right;}
ul.glob li {position:relative; float:left; font-size:13px; padding:0 15px; line-height:40px;}
ul.glob li::before {position:absolute; top:14px; left:0; width:1px; height:13px; background:rgba(255,255,255,0.4); content:'';}
ul.glob li:first-of-type::before {display:none;}
ul.glob li a {color:#fff;}
ul.glob li:last-of-type {padding-right:0;}
ul.glob.on li a {color:#212121;}
ul.glob.on li::before {background:#ddd;}

/*gnbList*/
#gnbList {width:100%; height:80px;}

ul.gnb {float:left; margin-left:40px;}
ul.gnb>li {position:relative; float:left; padding:30px 25px; font-size:17px;}
ul.gnb>li>a {color:#fff;}
ul.gnb li ul {display:none; position:absolute; top:77px; left:50%; margin-left:-90px; width:180px; overflow:hidden; border:1px solid #ddd; border-top:3px solid #7ac043; box-sizing:border-box;}
ul.gnb li ul li {width:100%; box-sizing:border-box; background:#fff; text-align:center;}
ul.gnb li ul li a {display:block; width:100%; height:auto; padding:13px 0; box-sizing:border-box; color:#1e1e1e; text-decoration:none;}
ul.gnb li ul li a:hover {background:#7ac043; color:#fff;}

.top_search {position:absolute; top:50%; margin-top:-20px; right:0; overflow:hidden; width:200px; height:40px;}
.top_search input[type='text'] {display:block; width:100%; height:100%; box-sizing:border-box; border:0; border-bottom:1px solid #fff; padding-right:50px; padding-left:5px; font-size:15px; background:none; color:#fff;}
.top_search button {display:block; position:absolute; top:0; right:0; width:40px;  height:100%; background:none; text-indent:-9999px; border:0;}
.top_search button::before {position:absolute; top:50%; left:50%; margin-left:-12px; margin-top:-12px; width:24px; height:24px; background-image:url(../_img/icon/ico_search.png); background-repeat:no-repeat; background-position:0 0; content:'';}
.top_search button.black::before {background-position:-24px 0;}

.res-search {display:none; position:absolute; top:50%; margin-top:-12px; left:13px; width:24px; height:24px; background-image:url(../_img/icon/ico_search.png); background-position:-24px 0; background-repeat:no-repeat; text-indent:-999999px;}



/*  헤더 :: GNB MOBILE */
#gnbM{/* width:86%; */ width:70%; height:100%; position:fixed; top:0px; right:-100%; max-width:550px; background-color:#fff; z-index:99999; overflow-y:auto;
	-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s;}
	
.gnbM_header {position:relative; width:100%; height:80px; overflow:hidden; box-sizing:border-box; background:#fff; padding:0 15px;}
.gnbM_header a {display:block; width:160px; padding-top:20px;}
.gnbM_header a img {width:100%;} 
	
#gnbM.open{right:0px;}

ul.res-glob {width:100%; overflow:hidden; background:#7ac043;}
ul.res-glob li {position:relative; float:left; width:33.3%; text-align:center; font-size:15px;}
ul.res-glob li::before {position:absolute; top:17px; left:0; width:1px; height:13px; background:rgba(255,255,255,0.5); content:''}
ul.res-glob li:first-of-type::before {display:none;}
ul.res-glob li a {display:block; width:100%; line-height:50px; color:#fff;}

#gnbNavigation {width:100%; overflow:hidden; box-sizing:border-box; padding:0 15px; border-top:1px solid #ddd;}
#gnbNavigation > ul{width:100%; overflow:hidden;}
#gnbNavigation > ul > li{position:relative; width:100%; border-bottom:1px solid #ddd; }
#gnbM.open  #gnbNavigation> ul > li{animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);}
#gnbNavigation > ul > li > a{position:relative; display:block;  height:48px; line-height:48px; color:#333; font-size:15px; font-weight:400; letter-spacing:-0.25px; text-decoration:none;}
#gnbNavigation > ul > li .gnb-2dep{display:none; padding:13px 0; background-color:#fafafa; border-top:1px solid #ddd;}
#gnbNavigation > ul > li .gnb-2dep li{}
#gnbNavigation > ul > li .gnb-2dep li a{display:block; color:#1e1e1e; font-size:14px; padding:12px 7%;}
#gnbNavigation > ul > li .gnb-2dep li a:hover {background:#7ac043; color:#fff;}
#gnbMenuBg{display:none; position:fixed; top:0px; left:0px; width:100%; height:100%; cursor:pointer; background-color:#000; background-color:rgba(0,0,0,0.83); z-index:99998}



/*menu*/
.menu {display:none;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  overflow: hidden;
  padding: 15px 0;
  cursor: pointer;
  z-index:9999999999;
}

.menu.active:before {
  -webkit-animation: slideLeft 0.2s 0.05s ease-out forwards;
          animation: slideLeft 0.2s 0.05s ease-out forwards;
}
.menu.active:after {
  -webkit-animation: slideRight 0.2s 0.05s ease-out forwards;
          animation: slideRight 0.2s 0.05s ease-out forwards;
}
.menu.active .bar {
  -webkit-animation: rotate45 0.2s ease-out forwards;
          animation: rotate45 0.2s ease-out forwards;
}
.menu.active .bar:last-child {
  -webkit-animation: rotate135 0.2s 0.2s ease-out forwards;
          animation: rotate135 0.2s 0.2s ease-out forwards;
}
.menu.back:before {
  -webkit-transform: translateX(-120%);
          transform: translateX(-120%);
  -webkit-animation: slideBack 0.2s 0.05s ease-out forwards;
          animation: slideBack 0.2s 0.05s ease-out forwards;
}
.menu.back:after {
  -webkit-transform: translateX(120%);
          transform: translateX(120%);
  -webkit-animation: slideBack 0.2s 0.05s ease-out forwards;
          animation: slideBack 0.2s 0.05s ease-out forwards;
}
.menu.back .bar {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  -webkit-animation: rotateBack 0.2s ease-out forwards;
          animation: rotateBack 0.2s ease-out forwards;
}
.menu.back .bar:last-child {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
  -webkit-animation: rotateBack 0.2s 0.2s ease-out forwards;
          animation: rotateBack 0.2s 0.2s ease-out forwards;
}
.menu:before {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: #000;
}
.menu:after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: #000;
}
.menu .bar {
  display: block;
  width: 22px;
  height: 2px;
  background: #000;
  margin: 5px 0;
}
.menu .bar:last-child {
  opacity: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  position: absolute;
  top: 17px;
}
@-webkit-keyframes rotate135 {
  form {
    opacity: 1;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
}
@keyframes rotate135 {
  form {
    opacity: 1;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  to {
    opacity: 1;
    -webkit-transform: rotate(-135deg);
            transform: rotate(-135deg);
  }
}
@-webkit-keyframes rotate45 {
  to {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}
@keyframes rotate45 {
  to {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
}
@-webkit-keyframes rotateBack {
  to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes rotateBack {
  to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@-webkit-keyframes slideRight {
  to {
    -webkit-transform: translateX(122%);
            transform: translateX(122%);
  }
}
@keyframes slideRight {
  to {
    -webkit-transform: translateX(122%);
            transform: translateX(122%);
  }
}
@-webkit-keyframes slideLeft {
  to {
    -webkit-transform: translateX(-122%);
            transform: translateX(-122%);
  }
}
@keyframes slideLeft {
  to {
    -webkit-transform: translateX(-122%);
            transform: translateX(-122%);
  }
}
@-webkit-keyframes slideBack {
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slideBack {
  to {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.github {
  width: 40px;
  height: 40px;
  background: url(http://alikinvv.github.io/github.svg) no-repeat center;
  position: fixed;
  bottom: 40px;
  right: 40px;
  -webkit-animation: github 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s infinite;
          animation: github 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s infinite;
}
@-webkit-keyframes github {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes github {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

/*============* container *============*/
#container {width:100%; overflow:hidden;}
#container .contents {position:relative; width:1260px; height:100%; overflow:hidden; margin:0 auto;}

.main_section {width:100%;}
.main_section h4 {font-size:33px;}
.main_section h5 {font-size:27px;}
.main_section h6 {font-size:21px;}
.main_section .bannerBox {position:relative; float:left; width:50%; height:100%; box-sizing:border-box; overflow:hidden; padding:50px 40px;}
.main_section .bannerBox p {font-size:14px; line-height:22px;}


#subContainer {width:100%; overflow:hidden; padding-top:140px;}
#subContainer .contents {position:relative; width:1200px; height:100%; /*overflow:hidden;*/ margin:0 auto; z-index:10;}

#sub_contents {width:100%; overflow:hidden; padding:90px 0; transition:.3s;}
#sub_contents #page_subject {display:none; width:100%; overflow:hidden; padding-bottom:60px; text-align:center; font-size:0;}
#sub_contents #page_subject h3 {position:relative; text-align:center; font-size:41px; color:#212121; padding:10px 0 30px 0; font-weight:600;}
#sub_contents #page_subject h3::after {position:absolute; bottom:0; left:50%; margin-left:-15px; width:30px; height:4px; background:#f9202b; content:'';}
#sub_contents #page_subject a.inner_ctr {display:inline-block; width:145px; height:50px; box-sizing:border-box; background:#fafafa; border:1px solid #e9e9e9; text-align:center; line-height:48px; color:#555; font-size:15px; margin:30px 5px}
#sub_contents #page_subject a.inner_ctr.view {background:#333; color:#fff;}
#sub_contents #page_subject a.inner_ctr.like {background-image:url(../_img/icon/ico_like.png); background-position:center left 17px; background-repeat:no-repeat; padding-left:20px;}
#sub_contents #page_subject a.inner_ctr.like.on {background-image:url(../_img/icon/ico_like_on.png);}

#sub_contents #page_subject.detail_page {text-align:left;}
#sub_contents #page_subject.detail_page a.inner_ctr {width:32%; margin-right:0; margin-left:2%;}
#sub_contents #page_subject.detail_page a.inner_ctr.view {margin-left:0;}

#sub_contents #page_subject.detail_page .place_pdt {float:left; width:600px; height:400px; box-sizing:border-box; border:1px solid #e9e9e9; text-align:center; overflow:hidden;}
#sub_contents #page_subject.detail_page .place_pdt img {position:relative; /*top:50%; left:50%;*/ width:auto; height:100%; /*transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%);*/}
#sub_contents #page_subject.detail_page .place_info {float:left; width:600px; height:400px; box-sizing:border-box; padding:30px 70px; padding-right:0; overflow:hidden;}
#sub_contents #page_subject.detail_page .place_info h3 {text-align:left;}
#sub_contents #page_subject.detail_page .place_info h3::after {left:20px;}
#sub_contents #page_subject.detail_page .place_info dl {width:100%; overflow:hidden; margin-top:20px;}
#sub_contents #page_subject.detail_page .place_info dl dt, #sub_contents #page_subject.detail_page .place_info dl dd {float:left; line-height:70px; border-bottom:1px solid #e9e9e9; font-size:17px; text-align:left;}
#sub_contents #page_subject.detail_page .place_info dl dt {width:20%; color:#212121; clear:both;}
#sub_contents #page_subject.detail_page .place_info dl dd {width:80%; color:#555;}

#sub_contents #sub_mainCont {position:relative; width:100%; overflow:hidden;}
#sub_contents #sub_mainCont.how_water {}
#sub_contents #sub_mainCont.how_water::after {position:absolute; top:340px; left:0; width:100%; height:1700px; background:#fafafa; content:'';}



/*==================== footer ====================*/
#footer {width:100%; overflow:hidden; padding:40px 0; background:#3a3a3a;}
#footer .footBox {position:relative; width:1200px; height:100%; overflow:hidden; margin:0 auto; padding-left:315px; box-sizing:border-box;}
#footer h1 {position:absolute; top:50%; left:0; margin-top:-40px;}
#footer p {font-size:14px; color:#979797; padding:1px 0;}
#footer p span {position:relative; padding:0 10px;}
#footer p span:first-of-type {padding-left:0;}
#footer p span::after {position:absolute; top:6px; left:0; width:1px; height:11px; background:#666; content:'';}
#footer p span:first-of-type::after {display:none;}
#footer p.copy {color:#616161; padding-top:20px;}

ul.fnb {width:100%; overflow:hidden; margin-bottom:20px;}
ul.fnb li {position:relative; float:left; padding:0 10px; font-size:16px; }
ul.fnb li a {color:#bfbfbf;}
ul.fnb li::after {position:absolute; top:5px; left:0; width:1px; height:13px; background:#bfbfbf; content:'';}
ul.fnb li:first-of-type::after {display:none;}
ul.fnb li:first-of-type {padding-left:0;}