@font-face {src : url("/fonts/OldSansBlack.ttf");font-family: 'old_sans_black'}
*{font-family: 'Open Sans', sans-serif;}
old {font-family: "old_sans"; font-weight: 900}
span, strong {font-weight: 800;}

/*SCROLL*/
.k_ani01,.k_ani02,.k_ani03,.k_up01,.k_up02,.k_up03,.k_down01,.k_down02,.k_down03,.k_left01,.k_left02,.k_left03,.k_right01,.k_right02, .k_right03 {opacity: 0;}

.k_ani01.on {animation: k_up 1s both;}
.k_ani02.on {animation: k_up 1s .3s both;}
.k_ani03.on {animation: k_up 1s .6s both;}

.k_up01.on {animation: k_up 1s both;}
.k_up02.on {animation: k_up 1s .3s both;}
.k_up03.on {animation: k_up 1s .6s both;}

.k_down01.on {animation: k_down 1s both;}
.k_down02.on {animation: k_down 1s .3s both;}
.k_down03.on {animation: k_down 1s .6s both;}

.k_left01.on {animation: k_left 1s both;}
.k_left02.on {animation: k_left 1s .3s both;}
.k_left02.on {animation: k_left 1s .6s both;}

.k_right01.on {animation: k_right 1s both;}
.k_right02.on {animation: k_right 1s .3s both;}
.k_right03.on {animation: k_right 1s .6s both;}

@keyframes k_ani {
	0% {opacity: 0}
	100% {opacity: 1}
}
@keyframes k_up {
	0% {transform: translateY(70px); opacity: 0}
	100% {transform: translateY(0); opacity: 1}
}
@keyframes k_down {
	0% {transform: translateY(-70px); opacity: 0}
	100% {transform: translateY(0); opacity: 1}
}
@keyframes k_left {
	0% {transform: translateX(-70px); opacity: 0}
	100% {transform: translateX(0); opacity: 1}
}
@keyframes k_right {
	0% {transform: translateX(70px); opacity: 0}
	100% {transform: translateX(0); opacity: 1}
}

/*MENU*/
header{width: 100%; height:90px; background-color: rgba(0,65,142,.9); position: fixed; z-index: 99;}
header a, header i {color: #fff;}
nav {width: 1200px; height: 100%; padding: 35px 15px; margin: 0 auto;}
.open_menu {display: none; float: left;}
.top_logo {width: 300px;float: left;}
.top_logo img {width: 250px;}

.m_menu {width: 650px; float: left; position: relative; text-align: center;}
.m_menu > li {display: inline-block; padding: 0 9px; height: 50px;}
.m_menu > li.on {height: 320px;}
.m_menu > li>a {font-weight: 600;}
.m_menu > li>a:after {content: ""; display: block; width: 0; height: 1px; background-color: #fff; margin: 0 auto; transition: .2s}
.m_menu > li:hover>a:after {width: 100%;}

.s_menu {width:auto; top: 60px; height: 0; position: absolute; transition: .2s;overflow: hidden; opacity: 0}
.s_menu.on {height: auto; opacity: 1;}
.s_menu li {width: 250px; height: 25px; text-align: left;}
.s_menu li a {width: auto; height: 25px; padding: 5px; transition: .2s; font-size: 12px}
.s_menu li:hover a {background-color: #00418e;}
.s_menu div {width: 100px; height: 1px; background-color: #fff; margin: 5px 0 10px;}

.lang {width: auto; float: right;}
.lang a {font-size: 20px;margin: 0 15px;}
.lang a:nth-child(3):after {content: ""; display: block; width: 1px; height: 15px; background-color: #fff;position: relative; left: 93px; top:-20px;}
.lang a:hover {font-weight: 600;}

.s_back {width: 100%; height: 0; background-color: rgba(0,0,0,.5); position:absolute; top:90px; transition: .1s;}
.s_back.on {height: 230px;}

/*CONTACT*/
.contact {width: 70px; height: 70px;background-color:  rgba(0,65,142,.9); position: fixed; top: 50%; transform: translateY(-50%);z-index: 99;right: 30px; border-radius: 35px; transition: .5s; overflow: hidden;}
.contact a {position: relative;}
.contact a i {color: #fff;font-size: 36px;}
.contact a p {width: 200px; color: #fff; font-size: 20px; font-weight: 600; display: none; transition: .5s}
.contact:hover {width: 200px;}
.contact:hover i {display: none;}
.contact:hover p {display: inline-block;}

/*CONTACT US*/
#mail_form {position: fixed; top:0; left: 0; z-index: 999; background-color: rgba(0,0,0,.6); width: 100vw; height: 100vh; color: #888; text-align: center; display: none;}
#mail_form form {background-color: #fff; padding: 15px; position: absolute; top: 50%; left: 50%; width: 40%; transform: translate(-50%, -50%); box-shadow: 5px 5px 10px rgba(0,0,0,.6)}
#mail_form strong {width: 100%; height: 70px; font-size: 30px;display: block; background-image: url(../img/mail_back.jpg);color: #fff; line-height: 70px; margin-bottom: 15px; font-weight: 500}
#mail_form strong i {font-size: 30px;}
#mail_form table {width: 100%;}
#mail_form tr {line-height: 35px;}
#mail_form th {width: 30%;border-bottom: 1px solid #eee;line-height: 15px}
#mail_form th label {font-weight: 600;}
#mail_form td {width: 70%;}
#mail_form input {background-color: #eee; width: 100%;height: 30px;}
#mail_form textarea {width: 100%; background-color: #eee; border: none;}
#mail_form .btn_submit {width: 100%; background-color: #00418e; color: #fff; margin: 5px 0; display: inline-block; text-align: center; transition: .2s}
#mail_form .btn_submit:hover {background-color: #eb6f24;}
.mail_cls {color: #888; border: 1px solid#ddd; width: 100%; height: 30px; transition: .2s; line-height: 30px;}
.mail_cls:hover {background-color: #eb6f24; color: #fff; border: none}


/*TOP BUTTON*/
button.top {position: fixed; right: 30px; bottom: 30px; width: 70px; height: 70px; border-radius: 50%; background-color: #fff; z-index: 1000;}
button.top a {width: 70px; height: 70px; border-radius: 50%;}

/*TOP BANNER*/
#top_banner {width: 100%; height: 320px; background-size: cover; background-position: center top;background-repeat: no-repeat; position: relative; z-index: 6;}

#top_banner.tb_intro {background-image: url(../img/banner/banner10.jpg);}
#top_banner.tb_business {background-image: url(../img/banner/banner13.jpg);}
#top_banner.tb_carriervision {background-image: url(../img/banner/banner07.jpg);}
#top_banner.tb_catarogue {background-image: url(../img/banner/banner09.jpg);}
#top_banner.tb_news {background-image: url(../img/banner/banner06.jpg);}
#top_banner.tb_pb {background-image: url(../img/banner/banner15.jpg);}
#top_banner.tb_brand {background-image: url(../img/banner/banner11.jpg);}
#top_banner.tb_product {background-image: url(../img/banner/banner15.jpg);}
#top_banner.tb_location {background-image: url(../img/banner/banner08.jpg);}
#top_banner.tb_exhibition {background-image: url(../img/banner/banner14.jpg);}

.top_banner {width: 1200px; height: 300px; margin: 0 auto; position: relative; padding: 0 15px;}
.top_b_title {padding-top: 150px; color: #fff;}
.top_b_title strong {font-size: 36px; text-shadow: 3px 3px 5px rgba(0,0,0,.4); letter-spacing: 5px; display: block;}
.top_b_title span {display: block; font-weight: 300; text-shadow: 3px 3px 5px rgba(0,0,0,.4);margin-top: 5px;}
.top_b_page {width: auto; height: 30px; position: absolute; bottom: 0; right: 0;}
.top_b_page p {display: inline-block; font-size: 14px;}

/*PAGE MENU*/
#p_menu {width: 100%; height: auto; border-bottom: 1px solid #ddd; position: relative; z-index: 5; background-color: #eee;}
#p_menu ul {width: 1200px; margin: 0 auto; text-align: center; line-height: 30px; padding: 15px 0;}
#p_menu ul li {display: inline-block; padding: 0 10px;}
#p_menu ul li a {font-size: 14px; font-weight: 600; transition: .1s;}
#p_menu ul li a:hover {color: #eb6f24;}
#p_menu ul li .em {color: #00418e; font-weight: 700;}

/*CONTANTS*/
#con {width: 100%; padding: 100px 0 200px;}
#con strong {font-size: 30px; color: #58595b; }
#con p {line-height: 1.7;font-size: 20px;}
.con {width: 1200px; margin: 0 auto;}
.con_w {width: 100%;}
.con_title {font-size: 30px; color: #606060; display: block; line-height: 1; position: relative; z-index: 10;}
.con_title:before {content: ""; display: block; background-color: #eb6f24;}
.con_title.t1 {width: 100%; margin: 0 auto 100px; text-align: center;}
.con_title.t1:before {width: 35px; height: 4px; margin: 0 auto;margin-bottom: 10px;}
.con_title.t2 {position: relative;padding-left: 20px}
.con_title.t2:before {position: absolute; width: 4px; height: 100%; left: 0}

/*BOARD*/
iframe {width: 100%; height: 700px; overflow:inherit; border: none; border-width: 0; border-style: inherit; border-color: inherit; border-image: none; }

	/*LOGIN BUTTON*/
	.k_member {width: 100%; background-color: #003968; height: 30px;padding: 5px 0;}
.k_member div {width: 1200px; margin: 0 auto;}
.k_member div .k_loginout {color: #eb6f24; font-size: 12px;}
.k_member div .k_loginout:hover {color: #fff;}

/*BOTTOM MENU*/
#bottom_logo {width: 100%;  background-color: #00418e;}
.bottom_logo {width: 1200px; margin: 0 auto; padding: 15px 0;}
.bottom_logo img {width: 300px;}

#bottom_menu {width: 100%; background-color: #003968;}
.bottom_menu {width: 1200px; margin: 0 auto; padding: 30px 0;}
.bottom_m_menu {width: 100%;}
.bottom_m_menu > li{float: left; width: 350px; margin-bottom: 10px;}
.bottom_m_menu > li > a {display: block; margin-bottom: 10px; color: #fff; font-weight: 700}
.bottom_s_menu > li >a {font-size: 14px;color: #ddd;}

/*FOOTER*/
footer {width: 100%; padding: 30px 15px; background-color: #606060; color: #fff;}
footer article {width: 1200px; margin: 0 auto;position: relative;}
footer .footer_logo {width: 250px; float: left; padding: 15px 300px 0 0;}
footer .footer_logo img {width: 250px; }
footer .footer_text {float: left; width: 900px;}
footer .footer_text p {display: inline-block; margin: 0 5px; font-size: 12px;}

#hd_login_msg {display: none;}
#ft {display: none;}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:fixed;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

/* 아웃로그인 스킨 */
#aside {width: 300px; height: 300px; position: fixed; top: 50%; left:50%; transform: translate(-50%,-50%); z-index: 999; display: none;}
#aside.on {display: block;}

.ol {position:relative;border:1px solid #dde7e9;margin-bottom:15px;border-radius:3px}
.ol h2 {width:100%;float:left;padding:15px 0;text-align:center}
.ol .join {width:116px;float:left;padding:15px 0;text-align:center;background:#f7f7f7;color:#6e6e6e}
.ol #ol_be_cate:after {display:block;visibility:hidden;clear:both;content:""}
.ol form {padding:20px}
.ol a.btn_admin {display:inline-block;padding:0 10px;height:25px;text-decoration:none;line-height:25px;vertical-align:middle} /* 관리자 전용 버튼 */
.ol a.btn_admin:focus, .ol a.btn_admin:hover {text-decoration:none}
.ol .login-sns{padding-bottom:0px}

#ol_before {width: 300px; padding: 15px; background-color: #fff;}
#ol_before:after {display:block;visibility:hidden;clear:both;content:""}
#ol_before .ol_wr {position:relative;margin-bottom:5px; padding: 15px;}
#ol_id {display:block;width:100%;border:1px solid #d0d3db;padding:0 10px;height:35px;margin-bottom:5px;border-radius:3px}
#ol_pw {display:block;width:100%;border:1px solid #d0d3db;padding:0 10px;height:35px;margin-bottom:5px;border-radius:3px}
#ol_submit {width:100%;height:35px;background:#3a8afd;border-left:1px solid #ccc;color:#fff;font-weight:bold;font-size:1.167em;border-radius:3px}
#ol_svc {float:right;line-height:20px}
#ol_svc a {display:inline-block;border:1px solid #d5d9dd;color:#3a8afd;border-radius:2px;padding:2px 5px}
#ol_auto {float:left;line-height:20px;margin-top:5px}
#ol_auto label {color:#555;vertical-align:baseline}
#ol_auto input {width:13px;height:13px} 
.ol_auto_wr:after {display:block;visibility:hidden;clear:both;content:""}
#sns_login {margin-top:0 !important;border-top:0 !important}
#sns_login h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}

#ol_after {width: 300px; background-color: #fff;}
#ol_after_hd {position:relative;padding:10px;height:80px}
#ol_after_hd strong {display:block;margin:5px 0 10px; width: 100%; text-align: center; color: #fff;}
#ol_after_hd .profile_img {position:absolute;top:15px;left:15px;display:inline-block}
#ol_after_hd .profile_img img {border:1px solid #bbb;border-radius:50%;width:50px;height:50px}
#ol_after_hd .profile_img a {text-align:center;font-size:17px;width:30px;line-height:30px;color:#777}
#ol_after_info {display:inline-block;height:28px;line-height:22px;border:1px solid #d5d9dd;color:#3a8afd;border-radius:2px;padding:2px 5px}
#ol_after h2 {margin:0;padding:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#ol_after_hd .btn_admin {border-radius:3px;height:28px;line-height:28px;vertical-align:baseline; width: 100%; text-align: center;}
#ol_after_hd .btn_b04 {line-height:23px;padding:0 5px}
#ol_after_private {zoom:1}
#ol_after_private:after {display:block;visibility:hidden;clear:both;content:""}
#ol_after_private li {text-align:left;position:relative;text-align:left}
#ol_after_private li:first-child a {border-left:0}
#ol_after_private a {display:block;color:#465168;line-height:18px;padding:10px 10px 10px 20px}
#ol_after_private a strong {display:inline-block;float:right;max-width:87px;overflow:hidden;white-space:nowrap;text-overflow:clip;color:#3a8afd;padding:0 5px;border-radius:15px;font-size:0.92em}
#ol_after_private a:hover strong {background:#4b8bff}
#ol_after_private li a:hover {color:#4b8bff;background:#f7f7f7}
#ol_after_private li a:hover:after {position:absolute;left:-1px;top:0;width:2px;height:38px;background:#3a8afd;content:""}
#ol_after_private li i {width:25px;color:#8c9eb0;margin-right:5px}
#ol_after_private li:hover i {color:#3a8afd}
#ol_after_private .win_point:hover strong {background:#37bc9b;color:#fff}
#ol_after_private .win_memo:hover strong {background:#8cc152;color:#fff}
#ol_after_private .win_scrap:hover strong {background:#ff8b77;color:#fff}

#ol_after_logout {text-align:center;font-weight:bold;display:block;padding:15px 0;color:#a0a0a1;border-top:1px solid #dde7e9}
#ol_after_logout:hover {color:#3c8bfd}
#ol_after_memo {margin-right:1px}
#ol_after_pt {margin-right:1px}

.selec_chk {position:absolute;top:0;left:0;width:0;height:0;opacity:0;outline:0;z-index:-1;overflow:hidden}
.chk_box {position:relative}
.chk_box input[type="checkbox"] + label {padding-left:20px;color:#676e70}
.chk_box input[type="checkbox"] + label:hover{color:#2172f8}
.chk_box input[type="checkbox"] + label span {position:absolute;top:2px;left:0;width:15px;height:15px;display:block;margin:0;background:#fff;border:1px solid #d0d4df;border-radius:3px}
.chk_box input[type="checkbox"]:checked + label {color:#000}
.chk_box input[type="checkbox"]:checked + label span {background:url(../img/chk.png) no-repeat 50% 50% #3a8afd;border-color:#1471f6;border-radius:3px;}

/*HIDE*/
h2#container_title {display: none;}
div.ctt_admin {display: none;}
div#ctt_con {display: none;}


@media (max-width: 1199px) {
	/*MENU*/
	.s_back {opacity: 0;}
	
	header{width: 100%; height:50px; background-color: rgba(0,65,142,.9);}
	header a, header i {color: #fff;}
	nav {width: 100%; padding: 15px 15px;}

	.open_menu {display: block; width: 20px; height: 20px; margin-right: 20px; position: relative;}
	.open_menu a {width: 17px; height: 17px;}
	.open_menu a div {width: 17px; height: 3px; background-color: #fff; position: absolute; transition: .2s}
	.open_menu a div:nth-child(1) {top:0;}
	.open_menu a div:nth-child(2) {top:7px;}
	.open_menu a div:nth-child(3) {top:7px;}
	.open_menu a div:nth-child(4) {top:14px;}
	
	.open_menu.on a div:nth-child(1) {opacity: 0;}
	.open_menu.on a div:nth-child(2) {transform: rotate(-45deg);}
	.open_menu.on a div:nth-child(3) {transform: rotate(45deg);}
	.open_menu.on a div:nth-child(4) {opacity: 0;}
	
	.m_menu {position: absolute; left: 0; top:50px; width: 60%; background-color: rgba(0,65,142,.9); height: 100vh;
	padding-top: 60px; left: -100%; transition: .2s; margin-left: 0; text-align: left;}
	.m_menu.on {left: 0;}
	.m_menu > li {width: 250px; float: none; padding: 15px 15px; display: block;}
	.m_menu > li.on {height: auto;}
	.m_menu > li>a:after {margin: 0;}
	.m_menu > li:hover>a:after {width: 100%;}
	
	.s_menu {height: auto; position: relative; top:5px; display: none;}
	.s_menu.on {display: block;}
	.s_menu li a {width: auto; height: 25px; padding: 5px; transition: .2s; font-size: 12px;}
	.s_menu li:hover a {background-color: #00418e;}
	.s_menu div {width: 100px; height: 1px; background-color: #fff; margin: 5px 0 10px}
	
	/*TOP BANNER*/
	#top_banner {height: 150px;}
	.top_banner {width: 100%; height: 150px; padding: 15px;}
	.top_b_title {padding-top: 50px;}
	.top_b_title strong {font-size: 24px;}
	.top_b_title span {font-size: 12px; margin: 0;}
	.top_b_page {width: auto; height: 25px; position: absolute; bottom: 0; right: 15px; font-size: 10px}
	.top_b_page p {display: inline-block; font-size: 10px;}
	
	/*PAGE MENU*/
	#p_menu ul {width: 100%; margin: 0 auto; text-align: center; line-height: 60px}
	
	/*CONTANTS*/
	#con {width: 100%; padding: 50px 0 50px;}
	.con {width: 100%;}
	
	/*CONTANTS US*/
	#mail_form form {width: 70%;}
	
	/*LOGIN BUTTON*/
	.k_member div {width: 100%; padding: 0 15px;}
	
	
	/*BOTTOM MENU*/
	.bottom_logo {width: 100%; padding: 15px}
	.bottom_logo img {width: 200px;}

	.bottom_menu {width: 100%; padding: 15px 15px;}
	.bottom_m_menu {width: 100%;}
	.bottom_m_menu > li{width: auto; margin-bottom: 20px; margin-right: 20px;}
	.bottom_s_menu > li >a {font-size: 12px;}
	
	/*FOOTER*/
	footer {padding: 15px;}
	footer article {width: 100%;}
	footer .footer_text  {width: 100%;}
}

@media (max-width: 767px) {
	.top_logo {width: auto;}
	.lang {width: auto; position: absolute; top: 70px; left: -100%; transition: .2s;}
	.lang.on {left: 15px;}
	
	/*CONTACT*/
	.contact {width: 40px; height: 40px;right: 15px;  top: 85px;}
	.contact a i {font-size: 20px;}
	
	/*CONTANTS US*/
	#mail_form form {width: 100%;}
	#mail_form th label {font-size: 14px}
	
	/*TOP BUTTON*/
	button.top {right: 15px; bottom: 15px; width: 40px; height: 40px;}
	button.top a {width: 40px; height: 40px; border-radius: 50%; font-size: 12px;}
	
	/*PAGE MENU*/
	#p_menu {display: none;}
	
	/*CONTANTS*/
	#con p {line-height: 1.5;font-size: 16px;}
		.con_title {margin-left: 15px;}
	.con_title:before {content: ""; display: block; background-color: #eb6f24;}
	.con_title.t1 {width: auto; margin: 0 15px 50px; text-align: left; padding-left: 20px;}
	.con_title.t1:before {position: absolute;  width: 4px; height: 100%; left: 0; margin: 0 auto; left: 0;}
	
	/* 팝업레이어 */
	.hd_pops {width: 90%; overflow: scroll;}
	
		


}