@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


section {width: 100%; position: relative;}

strong {font-family: 'Open Sans', sans-serif; font-weight: 700;}
/*strong {font-family: 'Poppins', sans-serif;; font-weight: 700;}*/

.more {width: 200px; height: 35px; line-height: 35px; background-color: #0a4e98; color: #fff; border-radius: 30px; text-align: center; font-weight: 400;  display: block; transition: .2s}
.more:hover {letter-spacing: 1px;}

.title_01 {width: 1200px; margin: 0 auto; display: block; position: relative; }

.title_01 strong {font-size: 30px; font-weight: 700; margin-right: 30px;}
.title_01 p {display: inline-block; font-size: 30px; color: #909295; position: relative; padding-left: 30px;font-family: 'Open Sans', sans-serif;}
.title_01 p:before {content:''; display: block; width: 5px; height: 25px; background-color: #000; position: absolute; top: 10px; font-weight: 700; left: 0;}

.title_02 {width: 1200px; display: block; font-weight: 700; font-size: 24px; letter-spacing: 2px;  margin: 0 auto; }
.title_02 div {width: 25px; height: 25px; background-color: #0a4e98; display: inline-block; margin-right: 20px;}

/*메뉴*/
#header {width: 100%; height: 70px; background-color: #fff; position: fixed;  z-index: 1000; box-shadow: 0 10px 10px rgba(0,0,0,.1); padding: 0 2%;}
.top_logo {float: left; width: 250px; height: 70px; padding: 15px 0; line-height: 60px; cursor: pointer;}
.top_logo img {width: 100%;}

nav {width: 800px; margin: 0 auto;}
.m_menu { width: 100%; margin: 0 auto; height: 70px; line-height: 70px; text-align: center;}
.m_menu>li {width: 15%; padding: 0 10px; color: #000; cursor:default; display:inline-block;}
.m_menu>li:hover {background-color: #0a4e98; transition: .3s;}
.m_menu>li:hover>div { color: #fff}

.s_menu {position: absolute; text-align: left; line-height: 30px; height: 0; overflow: hidden; transition: .3s; margin-left: 20px;}
.s_menu.on {height: 170px;}
.s_menu a {font-size: 14px; color: #fff;}
.s_menu li:after {content: ''; display: block; width: 0; height: 1px; background-color: #fff; transition: .3s;}
.s_menu li:hover:after {width: 100%;}

.open_menu {width:20px; height: 20px; display: block; position: absolute; top:25px; right: 25px; display: none;}
.open_menu div {width: 100%; height: 3px; background-color: #fff; position: absolute; border-radius: 2px; transition: .2s; box-shadow: 0 0 2px rgba(0,0,0,.3)}
.open_menu div:nth-child(1) {top:0;}
.open_menu div:nth-child(2) {top:50%; transform: translateY(-50%)}
.open_menu div:nth-child(3) {top:50%; transform: translateY(-50%)}
.open_menu div:nth-child(4) {bottom: 0;}

.open_menu.on div {box-shadow: 0 0 0 rgba(0,0,0,0)}
.open_menu.on div:nth-child(1) {opacity: 0;}
.open_menu.on div:nth-child(2) {transform: translateY(-50%) rotate(45deg)}
.open_menu.on div:nth-child(3) {transform: translateY(-50%) rotate(-45deg)}
.open_menu.on div:nth-child(4) {opacity: 0;}

.catalogue {width: 180px; height: 25px; display: block; position: absolute; top:20px; right: 370px;}
.catalogue img {width: 25px; float: left; margin-right: 12px; position: relative; top:5px; transition: .5s}
.catalogue p {color: #fff; font-size: 18px; transition: .5s}

.contact_us {position: absolute; top: 20px; right: 215px; border: 1px solid #fff; border-radius: 15px; width: 150px; height: 30px; text-align: center; color: #fff; padding: 0 10px; transition: .5s;}
.contact_us:hover {background-color: #0a4e98; border-color: #0a4e98;}

.lang {position: absolute; right: 40px;; top: 25px;}
.lang a {margin-left: 10px;}
.menu_back {width: 100%; height: 0; background-color: rgba(0,0,0,.5); transition: .3s;}
.menu_back.on {height: 200px;}

#header {background-color: inherit; box-shadow: none; transition: .5s}
#header:after {content: ''; display: block; background-color: #fff; width: 100%; height: 1px; margin: 0 auto; opacity: .5; transition: .5s}
.top_logo img {filter:brightness(0)invert(1); transition: .5s}
.m_menu>li {color: #fff; transition: .5s}

#header.sr {background-color: #fff; box-shadow: 0 10px 10px rgba(0,0,0,.1)}
#header.sr:after {display: none;}
#header.sr .top_logo img {filter: brightness(1) invert(0)}
#header.sr .m_menu>li {color: #000}
#header.sr .catalogue p {color: #000;}
#header.sr .catalogue img {filter: invert(1)}
#header.sr .contact_us {color: #000; border-color: #000;}
#header.sr .contact_us:hover {color: #fff; border-color: #0a4e98;}

.s_scroll {position: fixed; transform: rotate(-90deg); color: #ddd; right: -15px; bottom: 150px; letter-spacing: 5px; font-weight: 100}
.s_scroll i {letter-spacing: -15px; z-index: 999;}
.s_scroll:after {content: ''; display: block; background-color: #ddd; width: 100px; height: 1px;position: absolute; right: -100%; top: 50%; opacity: .5;}

/*위로*/
.top {width: 50px; height: 50px; position: fixed; bottom: 30px; right: 30px; background-color: #0a4e98; z-index: 1000;}
.top a {color: #fff; font-size: 20px;}

/*푸터*/
#footer {width: 100%; background-color: #404041; color: #d1d3d4; font-size: 12px;}
.footer {width: 1200px; margin: 0 auto; padding: 15px;}
.footer_btn {width: 100%; border-bottom: 1px solid #d1d3d4; padding: 5px 0; margin-bottom: 15px;}
.footer_btn li {float: left; margin-right: 30px;}
.footer_btn li a {color: #d1d3d4; font-size: 14px;}

.footer_information {float: left; width: 50%;}
.footer_information div {width: 50%; float: left; margin: 5px 0;}
.footer_information div strong {float: left; width: 20%; font-weight: 600;}
.footer_information div p {float: left; width: 80%; padding-right: 15px; font-weight: 100;}
.footer_copy {float: left;width: 30%; font-size: 16px; color: #939598;}
.footer_logo {float: left; width: 20%; text-align: right;}
.footer_logo img {width: 200px; opacity: .5;}

.privacy_policy {position: fixed; width: 100%; height: 100vh; z-index: 1000; background-color: rgba(0,0,0,.5); top:0; display: none;}
.privacy_policy_cls {width: 100%;height: 100%;}
.privacy_policy_con {width: 800px; position: absolute; background-color: #fff; height: 70vh; top:50%; left: 50%; transform: translate(-50%,-50%);overflow: scroll; overflow-x: hidden; padding: 30px; color: #888; line-height: 28px}
.privacy_policy_con strong {font-size: 24px; color: #0a4e98; font-weight: 700;}
.privacy_policy_con strong span { font-weight: 700}
.privacy_policy_con ul {padding: 15px; border: 1px solid #ddd; margin-top: 20px;}
.privacy_policy_con ul li {margin-top: 20px}
.privacy_policy_con ul li:first-child {margin: 0;}
.privacy_policy_con ul li h1 {font-size: 18px; color: #0a4e98; font-weight: 600; margin-bottom: 10px;}
.privacy_policy_con ul li p {font-size: 14px; line-height: 20px}

.email_denied {position: fixed; width: 100%; height: 100vh; z-index: 1000; background-color: rgba(0,0,0,.5); top:0; display: none;}
.email_denied_cls {width: 100%;height: 100%;}
.email_denied_con {width: 500px; position: absolute; background-color: #fff; height: auto; top:50%; left: 50%; transform: translate(-50%,-50%); padding: 30px; color: #888; line-height: 28px; }
.email_denied_con strong {font-size: 24px; color: #0a4e98; font-weight: 700}
.email_denied_con p {border: 1px solid #ddd; padding: 10px;}
.email_denied_con strong span { font-weight: 700}
.email_denied_con h3 {font-size: 12px; text-align: right}

/*메인배너*/
#top_banner {width: 100%; height: 550px; position: relative; background-repeat: no-repeat; background-attachment: fixed; background-position: top center;}
.top_title {width: auto; height: 250px; position: absolute; left: 0; bottom: 0; padding: 90px 90px 30px 200px; color: #fff; }
.top_title span {font-size: 36px; text-shadow: 0 0 5px rgba(0,0,0,.7); letter-spacing: 2px; font-weight: 600; display: block; margin-bottom: -10px;}
.top_title strong {font-size: 40px; text-shadow: 2px 2px 5px rgba(0,0,0,.4); font-weight: 700; letter-spacing: 3px;}
.top_title br{display: none;}

.top_banner_about {background-image: url(../img/banner/banner_company_about.jpg);}
.top_banner_organization {background-image: url(../img/banner/banner_company_organization.jpg);}
.top_banner_history {background-image: url(../img/banner/banner_company_history.jpg);}
.top_banner_catalogue {background-image: url(../img/banner/banner_company_catalogue.jpg);}

.top_banner_steel {background-image: url(../img/banner/banner_product_steel.jpg);}
.top_banner_press {background-image: url(../img/banner/banner_product_press.jpg);}
.top_banner_track {background-image: url(../img/banner/banner_product_track.jpg);}
.top_banner_cdm {background-image: url(../img/banner/banner_product_cdm.jpg);}
.top_banner_auto {background-image: url(../img/banner/banner_product_auto.jpg);}

.top_banner_mechanical {background-image: url(../img/banner/banner_technology_mechanical.jpg);}
.top_banner_transaction {background-image: url(../img/banner/banner_technology_transaction.jpg);}
.top_banner_factory {background-image: url(../img/banner/banner_technology_factory.jpg);}
.top_banner_certificate {background-image: url(../img/banner/banner_technology_certificate.jpg);}

.top_banner_contact {background-image: url(../img/banner/banner_contact.jpg);}

.top_banner_reruitment {background-image: url(../img/banner/banner_recruitment.jpg);}

@media (max-width: 1700px) {
	.catalogue {right: 228px;}
	.catalogue p {display:none;}
}


@media (max-width: 1400px) {
	
	.title_01 {width: 100%; padding: 0 30px;}

	
	.title_02 {padding: 0 30px; width: 100%;}
	
	.more {width: 100px; font-size: 14px;}

	/*메뉴*/
	#header {width: 100%; height: 70px;}
	.top_logo {position: relative; z-index: 100; left: 15px;}
	nav {width: 75%; height: 100vh; padding: 50px 25px 0; background-color: rgba(10,78,152,.9); margin: 70px 0 0 0; transform: translateX(-105%); transition: .2s; position: relative; z-index: 90}
	nav.on {transform: translateX(-5%)}
	nav:after {content: ''; display: block; clear: both;}
	.m_menu {line-height: 30px; padding-top: 80px;}
	.m_menu>li {width: 100%; text-align: left; height: auto;}
	.s_menu {position: static; transform: translateX(20px)}
	.s_menu.on {height: auto;}
	.s_menu li:hover:after {width: 80%;}
	.menu_back {display: none;}
	
	.catalogue {top: 100px; left: 25px; z-index: 100;transform: translateX(-150%); transition: .2s}
	.catalogue.on {transform: translateX(0);}
	.catalogue p {display:block;}
	
	.contact_us {top: 150px; left: 25px; z-index: 100;transform: translateX(-150%);transition: .2s}
	.contact_us.on {transform: translateX(0);}
	.lang {position: absolute; right: 60px;; top: 25px;}
	
	.open_menu {display: block;}
	
	#header.sr .m_menu>li {color: #fff;}
	#header.sr .catalogue p {color: #fff;}
	#header.sr .catalogue img {filter: invert(0)}
	#header.sr .contact_us {color: #fff; border-color: #fff;}
	#header.sr .open_menu div {background-color: #0a4e98;}
	
	/*위로*/
	.top {width: 30px; height: 30px; right: 15px; bottom: 15px;}
	
	/*푸터*/
	.footer {width: 100%;}
	.footer_information {width: 100%;}
	.footer_information div {width: 100%;}
	.footer_copy {width: 100%;}
	.footer_logo {width: 100%; text-align: left; margin: 30px 0;}
	
	.privacy_policy_con {width: 700px;}
	
	/*메인배너*/
	#top_banner {height: 250px; background-attachment:inherit; background-size: cover;}
	.top_title {height: 130px; padding: 15px 15px 15px 30px;}
}

@media (max-width: 767px) {
	.title_01 strong {display: block; font-size: 22px;}
	.title_01 p {display: block; font-size: 14px; margin-left: 0; padding-left: 0;}
	.title_01 p:before {display: none;}
	.title_02 {font-size: 20px; width: 100%;}
	.top_logo {line-height: 50px; width: 60px; overflow: hidden;}
	.top_logo img {width: 250px;}
	
	.privacy_policy_con {width: 90%;}
	.email_denied_con {width: 90%}
	
	.top_title {height: 80px;}
	.top_title span {font-size: 16px;}
	.top_title strong {font-size: 22px; letter-spacing: 3px}
}