html, body {overflow-x: hidden !important;}
/*header*/
#header {
	width: 100%;
	height: 107px;
	position: relative;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: rgb(255,255,255);
}
#header:after {
	content: '';
	display: block;
	clear: both;
}

.logo {
	width: 314px;
	float: left;
	margin: 48px 0 0 8px;
}
.logo a {
	height: 39px;
	display: block;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../../resource/images/common/logo_osung_bl_314x39.png);
	background-size: 314px;
}
body._eng .logo a {background-image: url(../../resource/images/common/logo_osung_bl_314x39_eng.png);}
.gnb {
	float: right;
	margin: 55px 100px 0 0;
	padding: 0 0 14px;
}
.gnb:before {
	width: 100%;
	height: 0px;
	content: '';
	display: block;
	overflow: hidden;
	position: absolute;
	top: 107px;
	left: 0;
	z-index: -1;
	background-color: rgb(255,255,255);	
	box-sizing: border-box;
	-webkit-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}
.gnb:hover:before {
	height: 291px;
	border-top: 1px solid rgb(210,210,210);
	box-shadow: 0px 10px 10px 3px rgba(0,0,0,0.2);
}
.gnb > ul:after {
	content: '';
	display: block;
	clear: both;
}
.gnb > ul > li {
	/*width: 188px;*/
	width: 175px;
	float: left;
	position: relative;
	top: 0;
	left: 0;
	text-align: center;
}
body.v2 .gnb > ul > li {
	width: auto;
	padding: 0 45px;
	box-sizing: border-box;
}
/*body.v2:not(._eng) .gnb > ul > li {width: 175px;}*/
@media screen and (max-width: 1300px){
	body.v2 .gnb > ul > li {
		padding: 0 25px;
	}
}
.gnb > ul > li > a {
	display: block;
	font-weight: 500;
	font-size: 25px;
	color: rgb(0,0,0);
}

.gnb .depth2-box {
	width: 100%;
	height: 0;
	overflow: hidden;
	position: absolute;
	top: 77px;
	text-align: center;
	-webkit-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}
body.v2 .gnb .depth2-box {left: 0;}
.gnb:hover .depth2-box {height: 250px;}
.gnb .depth2-box ul li a {
	display: block;
	font-weight: 400;
	font-size: 20px;
	color: rgb(0,0,0);
	line-height: 50px;
}
body.v2 .gnb .depth2-box ul li a {
	white-space: nowrap;
}
body.v2 .gnb .depth2-box ul li a span {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.btn__menu {
	width: 76px;
	height: 65px;
	position: absolute;
	top: 42px;
	right: 0;
	z-index: 22;
}
.btn__menu span {
	width: 28px;
	height: 4px;
	display: block;
	position: absolute;
	left: 50%;
	text-indent: -9999px;
	background-color: rgb(0,0,0);
	-webkit-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}
.btn__menu span.top {
	top: 20px;
	-webkit-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
}
.btn__menu span.mid {
	top: 50%;	
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.btn__menu span.bot {
	top: calc(100% - 19px);
	-webkit-transform: translate(-50%, -100%);
	-ms-transform: translate(-50%, -100%);
	transform: translate(-50%, -100%);
}
body.gnb--open {
	width: 100%;
	position: fixed;
}
body.gnb--open .btn__menu span {background-color: rgb(255,255,255) !important;}
body.gnb--open .btn__menu span.top {
	top: 50%;
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	-ms-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
}
body.gnb--open .btn__menu span.mid {opacity: 0;}
body.gnb--open .btn__menu span.bot {
	top: 50%;
	-webkit-transform: translate(-50%, -50%) rotate(-45deg);
	-ms-transform: translate(-50%, -50%) rotate(-45deg);
	transform: translate(-50%, -50%) rotate(-45deg);
}

.layer__gnb {
	width: 1352px;
	height: 100%;
	overflow-y: auto;
	padding: 307px 0 0 200px;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 20;
	background-color: rgb(0,66,154);
	box-sizing: border-box;
	-webkit-transform: translateX(100%);
	-ms-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}
body.gnb--open .layer__gnb {
	-webkit-transform: translateX(0%);
	-ms-transform: translateX(0%);
	transform: translateX(0%);
}
.layer__gnb > ul > li {margin: 40px 0 0;}
.layer__gnb > ul > li:first-child {margin: 0;}
.layer__gnb > ul > li:after {
	content: '';
	display: block;
	clear: both;
}
.layer__gnb > ul > li > a {
	float: left;
	font-weight: 500;
	font-size: 40px;
	color: rgb(255,255,255);
}
.layer__gnb .depth2-box {
	float: left;
	margin: 0 0 0 70px;
}
.layer__gnb .depth2-box ul:after {
	content: '';
	display: block;
	clear: both;
}
.layer__gnb .depth2-box ul li {
	float: left;
	margin: 0 0 0 50px;
}
.layer__gnb .depth2-box ul li:first-child {margin: 0;}
.layer__gnb .depth2-box ul li a {
	display: block;
	font-weight: 400;
	font-size: 20px;
	color: rgb(255,255,255);
	line-height: 60px;
}

.bg-wrap {
	width: 100%;
	height: 100%;
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 18;
	background-color: rgba(0,0,0,0.5);
}
body.gnb--open .bg-wrap {display: block;}

.language-box {
	float: left;
	margin-left: 20px;
}
body.v2 .gnb > ul {float: left;}
.language-box a {
	float: left;
	margin: 11px 0 0 20px;
	font-weight: 400;
	font-size: 14px;
	color: rgb(123,123,123);

}
.language-box a.on {color: rgb(0,0,0);}
.language-box a:first-child {margin-left: 0;}
.language-box {}
.language-box {}

#footer {}

.contact-box {
	width: 100%;
	height: 403px;
	position: relative;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../../resource/images/common/bg_contact.jpg);
	background-size: cover;
}
.contact-box > .inner {
	width: 1200px;
	padding: 0 10px;
	position: absolute;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.contact-box .left .tit {
	font-weight: 400;
	font-size: 48px;
	color: rgb(255,255,255);
}
.contact-box .left .tit span {
	font-size: 56px;
	color: rgb(255,0,0);
}
.contact-box .left .txt {
	margin: 10px 0 0;
	font-weight: 400;
	font-size: 22px;
	color: rgb(255,255,255);
}
.contact-box .right {
	position: absolute;
	bottom: 0;
	right: 10px;
}
.contact-box .right a {
	display: inline-block;
	padding: 0 0 4px;
	font-weight: 500;
	font-size: 20px;
	color: rgb(255,255,255);
	letter-spacing: 1px;
	border-bottom: 1px solid rgb(255,255,255);
}

.addr-box {
	width: 100%;
	height: 120px;
	position: relative;
	top: 0;
	left: 0;
	background-color: rgb(35,35,37);
}
.addr-box > .inner {
	width: 1200px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.addr-box > .inner:after {
	content: '';
	display: block;
	clear: both;
}
.addr-box .f-logo {
	width: 159px;
	height: 30px;
	float: left;
	margin: 20px 0 0;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../../resource/images/common/logo_osung_gr_159x30.png);
}
.addr-box .addr {
	float: left;
	margin: 0 0 0 55px;
	font-weight: 400;
	font-size: 16px;
	color: rgb(230,230,230);
	line-height: 28px;
}
.addr-box .copyright {
	position: absolute;
	bottom: 0;
	right: 0;
	font-weight: 400;
	font-size: 11px;
	color: rgb(230,230,230);
}

.lang-box {margin-top: 30px;}
.lang-box ul:after {
	content: '';
	display: block;
	clear: both;
}
.lang-box ul li {
	float: left;
	margin-left: 20px;
}
.lang-box ul li:first-child {margin-left: 0;}
.lang-box ul li a {
	display: block;
	font-weight: 400;
	font-size: 20px;
	color: rgb(123,123,123);
	line-height: 60px;
}
.lang-box ul li a.on {color: rgb(255,255,255);}


/*데스크탑*/
@media screen and (min-width:1200px) {
	.d-hide{display:none !important;}

	/*header main*/
	body.main #header {
		width: 100%;
		position: fixed;
		background: none;
	}
	body.main .logo a {background-image: url(../../resource/images/common/logo_osung_wt_314x39.png);}
	body.main._eng .logo a {background-image: url(../../resource/images/common/logo_osung_wt_314x39_eng.png);}
	body.main .gnb > ul > li > a {color: rgb(255,255,255);}
	body.main .btn__menu span {background-color: rgb(255,255,255);}



	body.main.menu--hover #header {background-color: rgb(255,255,255);}
	body.main.menu--hover .btn__menu span {background-color: rgb(0,0,0);}
	body.main.menu--hover #header .logo a {background-image: url(../../resource/images/common/logo_osung_bl_314x39.png);}
	body.main._eng.menu--hover #header .logo a {background-image: url(../../resource/images/common/logo_osung_bl_314x39_eng.png);}
	body.main.menu--hover #header .gnb > ul > li > a {color: rgb(0,0,0);}

	body.main #header:hover {background-color: rgb(255,255,255);}
	body.main #header:hover .logo a {background-image: url(../../resource/images/common/logo_osung_bl_314x39.png);}
	body.main._eng #header:hover .logo a {background-image: url(../../resource/images/common/logo_osung_bl_314x39_eng.png);}
	body.main #header:hover .gnb > ul > li > a {color: rgb(0,0,0);}
	body.main #header:hover + .btn__menu span {background-color: rgb(0,0,0);}
}
/*태블릿 & 모바일*/
@media screen and (max-width: 1199px){
	.tm-hide{display:none !important;}	
	
	#header {position: fixed;}
	.gnb {display: none;}

	.logo {
		width: 256px;
		margin: 30px 0 0 15px;
	}
	.logo a {
		height: 32px;
		background-size: 256px 32px;
	}
	.btn__menu {
		width: 66px;
		height: 55px;
		position: fixed;
		top: 23px;
	}
	.btn__menu span.top {top: 15px;}
	.btn__menu span.bot {top: calc(100% - 14px);}

	.layer__gnb {
		width: 600px;
		padding: 167px 0 0 38px;
	}
	.layer__gnb > ul > li > a {font-size: 2.5rem;}
	.layer__gnb .depth2-box {margin: 0 0 0 35px;}

	body.v2._eng .layer__gnb .depth2-box {
		clear: both;
		float: left;
		margin: 5px 0 0;
	}

	.layer__gnb .depth2-box ul li {margin: 0 0 0 25px;}
	.layer__gnb .depth2-box ul li a {
		font-size: 1.6rem;
		line-height: 3.7rem;
	}
	
	.contact-box {
		height: 200px;
		background-image: url(../../resource/images/common/bg_contact_t.jpg);
	}
	.contact-box > .inner {
		width: 100%;
		text-align: center;
	}
	.contact-box .left .tit {font-size: 2.0rem;}
	.contact-box .left .tit span {font-size: 2.3rem;}
	.contact-box .left .txt {
		margin: 0px 0 0;
		font-size: 2.2rem;
	}
	.contact-box .right {
		margin: 13px 0 0;
		position: relative;
		top: 0;
		right: auto;
		bottom: auto;
	}
	.contact-box .right a {
		display: block;
		padding: 0;
		font-size: 1.6rem;
		border-bottom: 0;
	}
	
	.addr-box {height: 100px;}
	.addr-box > .inner {
		width: 100%;
		text-align: center;
	}
	.addr-box .f-logo {display: none;}
	.addr-box .addr {
		float: none;
		margin: 0;
		font-size: 1.4rem;
		line-height: 2.3rem;
	}
	.addr-box .copyright {
		margin: 10px 0 0;
		position: relative;
		top: 0;
		bottom: auto;
		font-size: 1.0rem;
	}	

	.lang-box ul li a {
		font-size: 1.2rem;
    line-height: 1.85rem;
	}
}

/*태블릿*/
@media screen and (max-width: 1199px) and (min-width: 768px) {
	.t-hide{display:none !important;}
	
	#header {height: 78px;}

	/*header main*/
	body.main #header {
		width: 100%;
		position: fixed;
		background: none;
	}
	body.main .logo a {background-image: url(../../resource/images/common/logo_osung_wt_374x47.png);}
	body.main .gnb > ul > li > a {color: rgb(255,255,255);}
	body.main .btn__menu span {background-color: rgb(255,255,255);}



	body.main.menu--hover #header {background-color: rgb(255,255,255);}
	body.main.menu--hover .btn__menu span {background-color: rgb(0,0,0);}
	body.main.menu--hover #header .logo a {background-image: url(../../resource/images/common/logo_osung_bl_374x47.png);}
	body.main.menu--hover #header .gnb > ul > li > a {color: rgb(0,0,0);}	

	body:not(.main) #contents {margin-top: 78px;}
}
/* 모바일  */
@media screen and (max-width: 767px) {
	.m-hide{display:none !important;}

	html, body {min-width: 320px;}
	
	#header {height: 34px;}
	.logo {
		width: 128px;
		margin: 12px 0 0 6px;
	}
	.logo a {
		height: 16px;
		background-size: 128px 16px;
	}
	.btn__menu {
		width: 38px;
		height: 28px;
		top: 7px;
	}
	.btn__menu span {
		width: 14px;
		height: 2px;
	}
	.btn__menu span.top {top: 8px;}
	.btn__menu span.bot {top: calc(100% - 8px);}
	.layer__gnb {
		width: 81.25%;
		padding: 65px 0 25px 13px;
	}
	.layer__gnb > ul > li {margin: 30px 0 0;}
	.layer__gnb > ul > li:after {
		content: '';
		display: block;
		clear: both;
	}
	.layer__gnb > ul > li > a {
		float: left;
		font-size: 1.8rem;
	}
	.layer__gnb .depth2-box {
		clear: both;
		float: left;
		margin: 5px 0 0;
	}
	.layer__gnb .depth2-box ul li {margin: 0 10px 0 0;}
	.layer__gnb .depth2-box ul li:first-child {margin: 0 10px 0 0;}
	.layer__gnb .depth2-box ul li a {
		font-size: 1.2rem;
		line-height: 1.85rem;
	}

	.contact-box {
		height: 114px;
		background-image: url(../../resource/images/common/bg_contact_m.jpg);
	}
	.contact-box .left .tit {font-size: 1.3rem;}
	.contact-box .left .tit span {font-size: 1.55rem;}
	.contact-box .left .txt {
		margin: 0px 0 0;
		font-size: 1.4rem;
	}
	.contact-box .right {margin: 5px 0 0;}
	.contact-box .right a {font-size: 1.2rem;}
	.addr-box {height: 150px;}
	.addr-box .addr {
		float: none;
		margin: 0;
		font-size: 1.4rem;
		line-height: 2.2rem;
	}
	.addr-box .copyright {font-size: 0.8rem;}
	
	body:not(.main) #contents {margin-top: 34px;}

}

@media screen and (max-width: 350px) {
	/*.logo {
		width: 180px;
		margin-top: 30px;
	}
	.logo a {
		height: 23px;
		background-size: 180px 23px;
	}*/
	.layer__gnb {width: 88%;}
}