@charset "utf-8";
/* =============== 헤더, 푸터 css =============== */
/* 헤더 */
.header {width:100%; height:100px; position: fixed; top:0; left:0; right:0; z-index: 100;}
.header .inner {height:100%; padding:0 18.5%; background:#fff; margin:0 auto; display:flex; justify-content:space-between; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);}

.header .logo {height:100%; display:inline-block;}
.header .logo img {display:inline-block; margin:8px auto 0;}
.header .logo span {font-size: 24px;font-weight: 600;position: relative;top: 12px;left: 6px;}

.main_navi {height:100%; display:flex; justify-content:space-between; align-items:center;}
.main_navi .main_menu {display:flex; height:100%; line-height:100px;}
.main_navi .main_menu > li {padding: 0 39px; font-size:18px;}
.main_navi .main_menu > li > a {}

.sub_menu {width:100%; position:fixed; top:100px; left:0; right:0; background:rgba(0, 0, 0, 0.6); height:80px; text-align:center; display:flex; align-items:center; justify-content:center;}
.sub_menu > li {padding:0 30px;}
.sub_menu > li > a {color:#fff; font-size:16px;}

.lang_wrap {display:flex; margin-left:40px;}
.lang_wrap > li {padding:8px 15px; position:relative;}
.lang_wrap > li.on {background:#0054a6;}
.lang_wrap > li.on > a {color:#fff;}

.all_menu_btn {border:none; outline:none; background:none; width:100px; height:100%; position:relative;}
.all_menu_btn > i {display:block; width:30px; height:2px; background:#4d4d4d; position:absolute; left:50%; transform:translateX(-50%); transition: all 0.3s;}
.all_menu_btn > i:nth-of-type(1) {top:40px;}
.all_menu_btn > i:nth-of-type(3) {top:60px;}
.all_menu_btn.on > i {}
.all_menu_btn.on > i:nth-of-type(1) {transform: rotate(45deg) translate(-50%, 0); top:60%;}
.all_menu_btn.on > i:nth-of-type(2) {opacity:0;}
.all_menu_btn.on > i:nth-of-type(3) {transform: rotate(-45deg) translate(-50%, 0); top:40%;}

.all_menu {width:100%; height:31%; position:fixed; top:100px; left:0; right:0; background:rgba(0, 0, 0, 0.6); padding:20px 18.5%; text-align:center;}
.all_menu > li {color:#fff; border-bottom:1px solid rgba(255, 255, 255, 0.3); width:calc((100% / 4) - 20px); float:left; position:relative; height:40px; line-height:40px; margin-left:20px; font-size:18px;}
.all_menu > li:first-child {margin-left:0;}
.a_sub_menu {position:absolute; left:50%; top:40px; transform:translateX(-50%);}
.a_sub_menu > li {}
.a_sub_menu > li > a {color:#fff; font-size:15px; transition: color 0.3s;}
.a_sub_menu > li > a:hover {color:#888;}


/* top 버튼 */
.btn_top {outline:none; border:none; width: 40px; height: 40px; background-color: #0054a6; position: fixed; bottom: 50px; right: 10%; border-radius: 50%; z-index: 999;}
.btn_top i {display: block; width: 8px; height: 1px; background: #fff; position: absolute; top:50%;}
.btn_top i:first-child {left: 14px; transform: translateY(-50%) rotate(135deg);}
.btn_top i:last-child {right: 13px; transform: translateY(-50%) rotate(45deg);}


/* 푸터 */
.footer {width:100%;}
.footer .top {width: 100%; height: 65px; line-height:65px; padding: 0 18.5%; text-align:center; border-top:1px solid #cccccc; border-bottom:1px solid #cccccc; background:#f6f6f6;}
.footer .top a {display: inline-block; padding: 0 40px; position: relative;}
.footer .top a::before {content:" "; display: block; position: absolute; width: 3px; height: 12px; background:#acacac; left: 0; top:50%; transform:translateY(-50%);}
.footer .top a:first-child::before {display:none;}

.footer .btm {width: 100%; padding: 40px 30%; text-align:center; background:#f1f1f1;}
.footer .btm span {display: inline-block; padding: 0 20px; position: relative; color:#555555; margin-bottom:16px;}
.footer .btm span::before {content:" "; display: block; position: absolute; width: 1px; height: 18px; background: #555555; right:0;}
.footer .btm span:nth-of-type(2)::before, .footer .btm span:nth-of-type(5)::before, .footer .btm span:nth-of-type(6)::before {display:none;}
.footer .btm .copy {color:#999999; margin-top:20px;}