@charset "utf-8";

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


/*=============================================================
							공통
=============================================================*/

h2 {font-size:61px;}
h3 {font-size:51px;}
h4 {font-size:41px;}
h5 {font-size:31px;}
h6 {font-size:21px;}

@media screen and (max-width: 1200px) {
	h2 {font-size:53px;}
	h3 {font-size:41px;}
	h4 {font-size:33px;}
	h5 {font-size:21px;}
	h6 {font-size:19px;}
}

@media screen and (max-width: 980px) {
	h2 {font-size:43px;}
	h3 {font-size:33px;}
	h4 {font-size:27px;}
	h5 {font-size:23px;}
}


#wrapper {background: #000;}


/*=============================================================
							헤더
=============================================================*/
#header {position: fixed; top: 0; left: 0; z-index: 999; width: 100%; border-bottom: 1px solid rgba(255,255,255,.2); transition: .3s;}
#header .headBox {position: relative;  margin: 0 auto; overflow: hidden;}
#header h1.logo {position: absolute; top: 50%; margin-top: -38px; left: 0; width:160px; height: 65px; z-index: 999;}
#header h1.logo a {display: block; width: 100%; height: 100%;}
#header h1.logo a img {width: 100%}
#header.scroll {background:#363533; border-bottom: 0;}


#gnb {}
#gnb ul {width: 100%; text-align: center; font-size: 0;}
#gnb ul li {display: inline-block; font-size: 18px; margin:0 35px; position: relative;}
#gnb ul li a {color: #fff; padding: 35px 0; display: block; transition: .3s;}
#gnb ul li::before, #gnb ul li::after{ position: absolute; bottom: 0; width: 0; height: 2px; background-color: #977456; will-change: width; -webkit-transition: width .1s ease-out; transition: width .1s ease-out; content:'';}
#gnb ul li::before {left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
#gnb ul li::after {right: 50%; -webkit-transform: translateX(50%); transform: translateX(50%); }
#gnb ul li:hover::before, #gnb ul li:hover::after {width: 100%; -webkit-transition-duration: .2s; transition-duration: .2s;}
#gnb ul li:hover a {color:#977456}


#sns_wrap {position: absolute; right: 0; top: 50%; margin-top: -12px;}
#sns_wrap a {padding: 0 10px;}
#sns_wrap a.facebook img {width: 15px;}
#sns_wrap a.instagram img {width: 16px;}



.burger-container {
	display: none;
  position: absolute;
	top: 50%; margin-top: -27px; right: -10px;
  
  height: 50px;
  width: 50px;
  cursor: pointer;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-tap-highlight-color: transparent;
	z-index: 999;
}
.burger-container #burger {
  width: 18px;
  height: 8px;
  position: relative;
  display: block;
  margin: -4px auto 0;
  top: 50%;
}
.burger-container #burger .bar {
  width: 100%;
  height: 1px;
  display: block;
  position: relative;
  background: #FFF;
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.burger-container #burger .bar.topBar {
  -webkit-transform: translateY(0px) rotate(0deg);
          transform: translateY(0px) rotate(0deg);
}
.burger-container #burger .bar.btmBar {
  -webkit-transform: translateY(6px) rotate(0deg);
          transform: translateY(6px) rotate(0deg);
}


#header.menu-opened {
  height: 100%;
  background-color: #000;
  -webkit-transition: all 0.3s ease-in, background 0.5s ease-in;
  transition: all 0.3s ease-in, background 0.5s ease-in;
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}


#header.menu-opened .burger-container {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
#header.menu-opened .burger-container #burger .bar {
  -webkit-transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
#header.menu-opened .burger-container #burger .bar.topBar {
  -webkit-transform: translateY(4px) rotate(45deg);
          transform: translateY(4px) rotate(45deg);
}
#header.menu-opened .burger-container #burger .bar.btmBar {
  -webkit-transform: translateY(3px) rotate(-45deg);
          transform: translateY(3px) rotate(-45deg);
}

/*전체메뉴*/
#gnbM {width:70%; height:100%; position:fixed; top:0px; right:-500%; background-color:#f8f8f8; 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;}

#gnb_head {}
#gnb_head #log_condition {width: 100%; padding: 30px 0; background: #fff;}
#gnb_head #log_condition p {text-align: center; color: #f6678a; font-size: 15px;}
#gnb_head ul {width: 100%; overflow: hidden; border: 1px solid #ddd; border-width: 1px 0; background: #f8f8f8;}
#gnb_head ul li {position: relative; width: 50%; float: left; font-size: 13px; text-align: center;}
#gnb_head ul li::after {position: absolute; top: 50%; margin-top: -8px; left: 0; width: 1px; height: 16px; background: #e1e1e1; content: '';}
#gnb_head ul li:first-of-type::after {display: none;}
#gnb_head ul li a {color: #626262; padding: 8px 0; display: block;}

#gnbNavigation {width: 100%; background: #fff;}
#gnbNavigation > ul {width:100%; overflow:hidden; box-sizing: border-box; margin: 0 auto;}
#gnbNavigation > ul > li {position:relative; box-sizing:border-box; font-size:15px; color:#111; font-weight:500; border-bottom: 1px solid #ddd; padding: 15px 20px; line-height: 1; background: url("../_img/utility/nomal-arrow-down-g.png") no-repeat top 17px right 15px; background-size: 12px;}
#gnbNavigation > ul > li.active {background: url("../_img/utility/nomal-arrow-up-g.png") no-repeat top 17px right 15px; background-size: 12px;}
#gnbNavigation > ul > li.gnb2 {background: none;}
#gnbNavigation > ul > li > span {display: block;}
#gnbNavigation > ul > li .gnb-2dep {overflow:hidden; margin-top: 10px; margin-left: 5px; display: none;}
#gnbNavigation > ul > li .gnb-2dep li {font-size:15px; padding: 6px 0; font-weight: 400;}
#gnbNavigation > ul > li .gnb-2dep li a {color:#6a6a6a; transition: .3s; text-decoration: none; position: relative;}

#gnb_tail {width: 100%; box-sizing: border-box; padding: 10px 15px;}
#gnb_tail .another_board {position: relative; width:100%; background:#e1e1e1; box-sizing: border-box; padding: 8px 0; text-align: left; margin: 5px 0;}
#gnb_tail .another_board a {display: block; width: 100%; height: 100%; color: #222; font-size: 13px; background: url("../_img/utility/triangle-next-g.png") no-repeat center right 15px; background-size: 8px; box-sizing: border-box; padding: 0 15px;}


#gnbMenuBg{position:fixed; top:0px; left:0px; width:100%; height:100%; cursor:pointer; background-color:#000; background-color:rgba(0,0,0,0.6); z-index:9998; display: none;}

#gnbM.open{right:0;}
#gnbM.open #gnbNavigation> ul > li {animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);}


/*메뉴닫기버튼*/
.menu_close {position: absolute;left:-65px;top: 10px; width: 55px;height: 55px;text-align: center; cursor:pointer; border-radius: 100%; background: #977456;}
.menu_close span {display:inline-block;position:relative;margin-top: 10px;width: 3.3rem; height: 3.3rem;color:#333;}
.menu_close span::before,
.menu_close span::after {content: '';display: block;position: absolute;left: 0;width: 100%;border-bottom: 0.1rem solid #fff;}
.menu_close span::before {top:50%;transform: rotate(-45deg);}
.menu_close span::after {bottom:50%;transform: rotate(45deg);}

@media screen and (min-width: 1500px) {
	#header .headBox {width: 1500px;}
}

@media screen and (max-width: 1500px) {
	#header {box-sizing: border-box; padding: 0 20px;}
	#header .headBox {width: 100%;}
	
	
}

@media screen and (max-width: 1200px) {
	#gnb {float: right; margin-right: 90px;}
	#gnb ul {width: auto;}
	#gnb ul li {margin: 0 25px; font-size: 16px;}
}

@media screen and (max-width: 980px) {
	#gnb {display: none;}
	.burger-container {display: block;}
	#sns_wrap {right: 40px;}
	#header h1.logo {position: relative; top: auto; left: auto; margin-top: 0; padding: 10px 0; width: 100px; height: auto;}
}


/*=============================================================
							콘텐츠
=============================================================*/
#main_container {width: 100%;}
.contents {position: relative; width: 1200px; overflow: hidden; margin: 0 auto;}

.hero_content {position: relative; justify-content: center; align-items: flex-end;}



#sub_mainContainer {position: relative; background: #fff; overflow: hidden;}
#sub_mainContainer .contents {/*overflow: auto !important;*/}
.sub_section {width: 100%; padding: 110px 0;}
.sub_section .sample {width: 100%}


@media screen and (max-width: 1200px) {
	.contents {width: 100%;}
	
	.sub_section {padding: 50px 0;}
}


/******** 서브 비주얼 ********/
#sub_visual {position: relative; width:100%; height:430px;}
#sub_visual .sub_visual_text {display:table; position: relative; z-index: 1; width: 100%; height: 100%; box-sizing: border-box; padding-top: 50px;}
#sub_visual .sub_visual_text .inner_wrap {display:table-cell; vertical-align:middle; width: 100%; height: 100%;}
#sub_visual .sub_visual_text .inner_wrap p {color:#fff; text-align:center; font-size:45px; font-weight:600;}

#sub_visual .sub_bg {position:absolute; left:0; top:0 ;bottom:0; width: 100%; overflow: hidden;}
#sub_visual .sub_bg img {width:100%; transform:scale(1.2); background-repeat: no-repeat; transition:2s; object-fit: cover; height: 100%;}
#sub_visual .sub_bg.on img  {transform:scale(1);}


ul.snb {width: 100%; text-align: center; font-size: 0; position:relative; z-index: 33;  margin-top: -35px; transition: .3s;}
ul.snb li {display: inline-block; width: 200px; height: 60px; font-size: 16px; margin: 0 10px;}
ul.snb li a {color: #fff; display: block; width: 100%; height: 100%; text-align: center; line-height: 60px; background:#202020}
ul.snb li.on a {background: #977456;}
ul.snb.scroll {background: #202020; position: fixed; top: 90px; left: 0; margin-top:0;}


@media screen and (max-width: 980px) {
	#sub_visual {height: 300px;}
	#sub_visual .sub_visual_text .inner_wrap p {font-size: 35px;}
	
	ul.snb li {height: 45px; font-size: 14px; width:32%; margin:0}
	ul.snb li a { line-height: 45px;}
	
	ul.snb.scroll {top: 66px}
}




/*=============================================================
						푸터
=============================================================*/

#footer {background: #363533; width: 100%; padding: 30px 0;}
#footer .footBox {position: relative; width: 1200px; margin: 0 auto; overflow: hidden;}
#footer ul.fnb { overflow: hidden; margin-bottom: 20px;}
#footer ul.fnb li {position: relative; padding: 0 15px; font-size: 15px; float: left;}
#footer ul.fnb li::after {position: absolute; top: 2px; left: 0; width: 1px; height: 13px; background: rgba(255,255,255,0.7); content: '';}
#footer ul.fnb li:first-of-type {padding-left: 0;}
#footer ul.fnb li:first-of-type::after {display: none;}
#footer ul.fnb li a {color: #fff;}
#footer p {font-size: 14px; color: #fff; opacity: .5;}
#footer p span {position: relative; padding: 0 10px;}
#footer p span:first-of-type {padding-left: 0;}
#footer p span:first-of-type::after {display: none;}
#footer p span::after {position: absolute; top: 2px; left: 0; width: 1px; height: 10px; background: rgba(255,255,255,0.5); content: '';}

#footer #sns_link {position: absolute; right: 0; top: 0;}
#footer #sns_link a {color: #fff; font-size: 15px; font-weight: 800; padding: 0 13px; position: relative;}
#footer #sns_link a::after {position: absolute; top: 2px; left: 0; width: 1px; height: 13px; background: rgba(255,255,255,0.7); content: '';}
#footer #sns_link a:first-of-type::after {display: none;}
#footer #sns_link a img {margin-right: 6px;}
#footer #sns_link a.facebook img {width: 10px;}
#footer #sns_link a.instagram img {width: 16px;}
#footer #sns_link a.blog img {width: 14px;}



@media screen and (max-width: 1200px) {
	#footer {padding-left: 15px; padding-right: 15px;}
	#footer .footBox {width: 100%; }
}

@media screen and (max-width: 980px) {
	#footer #sns_link {position: relative; top: auto; right: auto; text-align: center;}
	#footer #sns_link a {font-size: 13px; display: inline-block;}
	#footer #sns_link a.facebook img {width: 8px;}
	#footer #sns_link a.instagram img {width: 14px;}
	#footer #sns_link a.blog img {width: 12px;}
	
	#footer ul.fnb {text-align: center; margin-top: 15px;}
	#footer ul.fnb li {float: none; display: inline-block; font-size: 13px;}
	
	#footer p {font-size: 13px; text-align: center;}
}