/* *******************************************************
* filename : layout.css
* description : 헤더, 푸터 css
* date : 2022-02-25
******************************************************** */
@charset "UTF-8";

/*---------- 헤더 ----------*/
.header {width: 100%; height: 90px; min-width: 1300px; margin: 0 auto; position: fixed; top: 0; left: 0; right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); z-index: 100; transition: all .3s;}
.header.on {border-color: transparent; background: rgba(0, 0, 0, 0.8);}
.header .inner {min-width: 1300px; width: 1300px; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center;}

.main_nav {color: #fff; height: 100%; font-family: 'Saira', sans-serif;}
.main_nav .main_menu {display: flex; height: 100%;}
.main_nav .main_menu > li {height: 100%; line-height: 90px; padding: 0 50px; position: relative;}
.main_nav .main_menu > li:nth-of-type(6) {padding-right: 0;}
.main_nav .main_menu > li > a {}

.sub_menu1 {background:#292f70; width: 120%; height: auto; position: absolute; top: 90px; left: 50%; transform: translateX(-50%);}
.main_menu li:nth-of-type(1) .sub_menu1 {width: 180%;}
.main_menu li:nth-of-type(4) .sub_menu1 {width: 160%;}
.main_menu li:nth-of-type(5) .sub_menu1 {width: 100%;}
.sub_menu1 > li {height: 60px; line-height: 60px; padding: 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
.sub_menu1 > li:last-child {border-bottom: none;}
.sub_menu1 > li > a {color: #8f95d3;}
.sub_menu1 > li > a:hover, .sub_menu1 > li > a.on {color: #fff;}

.sub_menu2 {position: fixed; right: -120%; top: 0; background: #fff; width: 120%;}
.sub_menu2 > li {border-bottom: 1px solid rgba(0, 0, 0, 0.1);padding: 0 18px;}
.sub_menu2 > li:last-child {border-bottom: none;}
.sub_menu2 > li > a {color: #666666; transition: color .3s;}
.sub_menu2 > li > a:hover {color: #292f70;}


/*---------- 푸터 ----------*/
.footer {width: 100%; background: #111111; clear: both; min-width: 1300px; margin: 0 auto;}
.footer .inner {min-width: 1300px; width: 1300px; margin: 0 auto; padding: 56px 0 100px;}

.footer .ft_logo {float: left; margin-right: 65px;}

.footer .address_wrap {float: right; margin-top: 16px; margin-bottom: 40px; width: 85%;}
.footer .address_wrap address {float: left;}
.footer .address_wrap address > span {display: inline-block; color: #888888; margin-bottom: 20px; margin-right: 60px;}
.footer .address_wrap address > span .color {color: #2933a0; margin-right: 20px;}
.footer .address_wrap address > span .gray {color: #555555; margin-right: 20px;}
.footer .address_wrap #top_btn {float: right; position: static; border: 1px solid #2933a0; color: #2933a0; background: transparent;}

.footer .copy {color: #555555; clear: both; margin-left: 190px;}


.footer2 {width: 100%; background: #111111; clear: both; min-width: 1458px; margin: 0 auto;}
.footer2 .inner {min-width: 1300px; width: 1300px; margin: 0 auto; padding: 56px 0 100px;}

.footer2 .ft_logo {float: left; margin-right: 65px;}

.footer2 .address_wrap {float: right; margin-top: 16px; margin-bottom: 40px; width: 85%;}
.footer2 .address_wrap address {float: left;}
.footer2 .address_wrap address > span {display: inline-block; color: #888888; margin-bottom: 20px; margin-right: 60px;}
.footer2 .address_wrap address > span .color {color: #2933a0; margin-right: 20px;}
.footer2 .address_wrap address > span .gray {color: #555555; margin-right: 20px;}
.footer2 .address_wrap #top_btn {float: right; position: static; border: 1px solid #2933a0; color: #2933a0; background: transparent;}

.footer2 .copy {color: #555555; clear: both; margin-left: 190px;}