@charset "utf-8";


/*=============================================================
							공통
=============================================================*/
#wrapper {position:relative; width:100%; overflow:hidden;}

h2,h3,h4,h5,h6 {line-height:1.5;}
h2 {font-size:65px;}
h3 {font-size:55px;}
h4 {font-size:40px;}
h5 {font-size:35px;}
h6 {font-size:25px;}

@media screen and (max-width: 980px) {
	h2 {font-size:42px;}
	h3 {font-size:34px;}
	h4 {font-size:32px;}
	h5 {font-size:27px;}
	h6 {font-size:22px;}
}

/*=============================================================
							헤더
=============================================================*/
#header {position: fixed; top: 0; left: 0; width: 100%; height: 100px; z-index: 9999999; box-sizing: border-box; padding: 0 100px 0 50px; transition: .3s; background: rgba(0,0,0,0.3);}
#header ul.gnb::after {background:#f8f8f8;}
#header h1.logo {float: left; width: 200px; padding:18px 0; box-sizing:border-box; overflow:hidden; }
#header h1.logo img { width:100%; }

#header h1.logo.sub_on, #header.on h1.logo.comm {display: none;}
#header.on h1.logo.sub_on{display: block;}
#header.on .hamburger span:before,#header.on .hamburger span:after {background-color: #000;}

#header .h_logo { display:none;}
#header .h_logo_c { display:block;}

/**/
ul.gnb {float: right;}
ul.gnb::after {width: 100%; height: 0; position: absolute; top: 100px; left: 0;  background: #fff; content: ''; transition: .3s; }
ul.gnb.on::after {height: 250px;}
ul.gnb.on li a{color: #000;}
ul.gnb li {}
ul.gnb li a {color:#fff;}
ul.gnb li.gnb-dep1 {position: relative; font-size:19px; padding:40px; float: left; z-index: 1;}
ul.gnb li.gnb-dep1 a { }
ul.gnb ul.gnb-dep2 {position: absolute; top: 90px; left: 40px; height: 0; overflow: hidden;padding-top: 10px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
ul.gnb ul.gnb-dep2 li {font-size: 15px; padding:10px 0;}
ul.gnb ul.gnb-dep2 li a { font-weight:400; }
ul.gnb ul.gnb-dep2.on {height:220px; display:block; padding:25px 0;}



/*스크롤*/
#header.on, #header.scroll.on {background: #fff; }
#header.on .h_logo_c { display:none;}
#header.on .h_logo { display:block;}
#header.on > .language_select>span {color: #222; background-image: url(../_img/icon/arrow-down-b.png);}
#header.scroll {background: rgba(0,0,0,0.3); }

ul.gnb.scroll::after {background: rgba(0,0,0,0.7);}


/*menu-toggle*/
.menu-toggle {position:absolute; top:50%; margin-top:-18px; right:50px; flex:0 0 auto; cursor:pointer; width:25px; height:25px; box-sizing:border-box; border-radius:1px; z-index:5}
.hamburger,.cross{position:absolute; top:10px; left:0; width:25px; height:25px;}
.cross {margin-top:5px;}
.hamburger span {display:block;	width:25px;	height:2px;	margin-bottom:6px; overflow:hidden; position:relative;}
.hamburger span:last-child {margin:0;}
.hamburger span:before,.hamburger span:after {content:""; position:absolute; width:100%; height:100%; background-color:#fff; transform:translateX(-200%); transition:transform ease 300ms;}
.hamburger span:after{transform:translateX(0);}
.hamburger span:nth-child(2):before,.hamburger span:nth-child(2):after{transition-delay:75ms;}
.hamburger span:last-child:before,.hamburger span:last-child:after{transition-delay:150ms;}
.menu-toggle:hover .hamburger span:before{transform:translateX(0);}
.menu-toggle:hover .hamburger span:after{transform:translateX(200%);}
.menu-toggle.active .hamburger span:before{transform:translateX(100%);}
.menu-toggle.active .hamburger span:after{transform:translateX(200%);}
.cross span{display:block; width:15px; height:2px; background:#fff; transform:translateY(50%) rotate(45deg) scaleX(0); transition:transform ease 200ms;}
.cross span:last-child{	transform:translateY(-50%) rotate(-45deg) scaleX(0);}
.menu-toggle.active .cross span{transition-delay:450ms;	transform:translateY(50%) rotate(45deg) scaleX(1);}
.menu-toggle.active .hamburger::after {display:none;}
.menu-toggle.active .cross::after {display:block;}
.menu-toggle.active .cross span:last-child{transform:translateY(-50%) rotate(-45deg) scaleX(1);}

/*all_menuArea*/
.menu_close {position: absolute;right: 0;top: 0;width: 8.5rem;height: 8.5rem;text-align: center; cursor:pointer;}
.menu_close span {display:inline-block;position:relative;margin-top: 28%;width: 3.2rem; height: 3.2rem;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);}

.vertical_wrapper {display:table-cell; vertical-align:middle; width:100%; height:100%;}


/*전체메뉴*/
#gnbM {position:fixed; top:0; right:-1000%; width:50%; height:100%; background:#383d53; z-index:9999999999; overflow-y:auto;
	-webkit-transition:all 0.7s;-moz-transition:all 0.7s;-o-transition:all 0.7s;-ms-transition:all 0.7s;transition:all 0.7s; box-sizing:border-box; overflow:hidden; display:table;}
#gnbM.open{ right:0; }

#gnbM h1  {position:absolute; top:20px; left:50px; width:100px;}
#gnbM h1 img {width:100%;}
#gnbNavigation > ul {width:100%; overflow:hidden; box-sizing: border-box; padding: 0 70px;}
#gnbNavigation > ul > li {position:relative; float:left; width:100%; box-sizing:border-box;  padding: 40px 0; border-top:1px solid rgba(255,255,255,0.3); padding-left: 150px;}
#gnbNavigation > ul > li:first-of-type {border-top: 0;}
#gnbNavigation > ul > li > a {position:absolute; left: 0; top: 40px; display:block; color:#fff; font-size:25px; font-weight:600; text-decoration:none; line-height:1;}
#gnbNavigation > ul > li .gnb-2dep {float:left; overflow:hidden; padding: 5px 0}
#gnbNavigation > ul > li .gnb-2dep li {float:left;  margin:5px 25px; text-align:center;}
#gnbNavigation > ul > li .gnb-2dep li a {display:block; color:#fff; font-size:19px; opacity:.8}
#gnbM.open  #gnbNavigation> ul > li {animation: inFromRight 0.6s both cubic-bezier(0.7, 0, 0.3, 1);}
#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.5); z-index:99998}


/*=============================================================
						서브헤더
=============================================================*/
#header.sub_header.on {background: #fff !important;}
#header.sub_header ul.gnb::after {background:#f8f8f8;}
#header.sub_header ul.gnb.on li a {color: #212121;}
#header.sub_header ul.gnb ul.gnb-dep2 li a {color:#212121;}
#header.sub_header.on .language_select>span {color: #222; background-image: url(../_img/icon/arrow-down-b.png);}
#header.sub_header.on .hamburger span:before,#header.sub_header.on .hamburger span:after {background-color: #000;}
#header.sub_header.on h1.logo.sub_on {display: block;}
#header.sub_header.on h1.logo.comm {display: none;}

@media screen and (max-width: 1300px) {
	
	ul.gnb { display:none; }

}

@media screen and (max-width: 1200px) {
	#header {padding-left:20px; padding-right: 160px;}
	ul.gnb li.gnb-dep1 {font-size: 16px; padding-left:35px; padding-right: 35px;}	
	ul.gnb ul.gnb-dep2 {left: 35px;}
	ul.gnb ul.gnb-dep2 li {font-size: 14px; padding: 10px 0;}
	
	.menu-toggle {right: 30px;}
	.language_select {right: 80px;}
	
	#gnbM {width: 80%;}
}


@media screen and (max-width: 990px) {
	#header {padding: 0 15px; height: 70px;}
	#header h1.logo {width: 140px; padding-top:15px; }
	
	.menu-toggle {right: 20px;}
	.language_select {right: 60px;}
	
	ul.gnb {display: none;}	
	
	.vertical_wrapper {display: block;}
	#gnbM {overflow:initial; width: 100%; padding-top:110px; }
	#gnbNavigation > ul {margin:0; padding:0 30px; box-sizing:border-box;}
	#gnbNavigation > ul > li {width:100%; text-align:left; padding:25px 0;}
	#gnbNavigation > ul > li > a {font-size:25px; min-width: auto; float: none; position: relative; top: auto; left: auto;}
	#gnbNavigation > ul > li.gnb1 {border:0;}
	#gnbNavigation > ul > li .gnb-2dep {display:none; float: none;}
	#gnbNavigation > ul > li .gnb-2dep li {text-align:left; width: 100%; padding:5px 0}
	#gnbNavigation > ul > li .gnb-2dep li a {font-size: 16px;}
}



/*=============================================================
							콘텐츠
=============================================================*/
#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;}

#footer {width:100%; overflow:hidden; border-top:1px solid #e5e5e5; }
#footer .footBox {position:relative; width:1200px; margin:0 auto; box-sizing:border-box;}

/**/
#fnb_list {width:100%; height:75px; border-bottom:1px solid #e5e5e5; box-sizing:border-box; padding:28px 0; box-sizing:border-box; overflow:hidden; }
#fnb_list h1 { position:absolute; top:-15px; left:0; }
ul.fnb { float:left; overflow:hidden; padding-left:200px;  }
ul.fnb li {position:relative; float:left; padding:0 15px; font-size:13px;}
ul.fnb li::before {position:absolute; top:2px; left:0; width:1px; height:15px; background:#ddd; content:'';}
ul.fnb li:first-of-type::before {display:none;}
ul.fnb li a {color:#222;}

ul.ft_sns { float: right;}
ul.ft_sns li { float: left; height: 22px;  margin-left: 20px;}
ul.ft_sns li img {height: 100%;}
ul.ft_sns li:first-child { margin-left: 0;}

.family-site {position:relative; float:right; width:190px; height:30px; border:1px solid #ddd; box-sizing:border-box; padding:3px 10px; color:#222; font-size:12px; background:url(../_img/icon/arrow_down-point.png) no-repeat right 10px top 11px, #f8f8f8; background-size:10px; cursor:pointer;}
.family-site ul {display:none; position:absolute; top:28px; left:-1px; width:100%; border:1px solid #ddd;}
.family-site ul li {width:100%; background:#333; border-bottom:1p solid #ddd;}
.family-site ul li a {display:block; width:100%; color:#fff; font-size:13px; padding:10px; box-sizing:border-box;}

/**/
#foot_info .footBox {padding:30px 0; }
#foot_info p {font-size:13px; color:#555;}
#foot_info p span {position:relative; padding:0 10px;}
#foot_info p span::before {position:absolute; top:5px; left:0; width:1px; height:10px; background:#ddd; content:'';}
#foot_info p span:first-of-type::before {display:none;}
#foot_info p span:first-of-type {padding-left:0;}
#foot_info p.copy {color:#aeaeae; font-weight: 700;}