@charset "utf-8";
/*================= 헤더, 푸터 css =================*/
body{ position:relative; }

/* 헤더 */
.header {width: 100%; height: 100px; background: #fff; box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); z-index: 100;}
.header.fix {position: fixed; top: 0;}
.header .inner {max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between;}

.header .logo img {margin-top: 25px;}

.main_navi {width: 700px;}
.main_navi > ul {height: 100%; display:flex; justify-content: space-between;}
.main_navi > ul > li {line-height:100px; width: calc(100% / 4); text-align: center; position: relative; white-space: nowrap; }
.main_navi > ul > li > a {font-weight: 500; color:#222; transition: color .3s; font-size: 18px; margin-right: 10px;}
.main_navi > ul > li:hover > a {color:#f54053;}

.sub_navi {width:100%; position:absolute; top:100px; left:0; z-index: 110; border-top: 4px solid #f54053; height: auto;}
.sub_navi > li {width:100%; padding: 0; text-align:center; background: rgba(0, 0, 0, 0.5); transition: background .3s; height:50px; line-height:50px; overflow: hidden;}
.sub_navi > li:hover {background: rgba(0, 0, 0, 0.8); color: #fff;}
.sub_navi > li > a {font-size:15px; color: #fff; display: block; width: 100%; height: 100%;}
.sub_navi > li:hover > a { color: #fff; }

/* top 버튼 */
.top_btn {width: 40px; height: 40px; position: fixed; right:50px; bottom:50px; z-index: 999; border:none; outline:none; background: #f54053;}
.top_btn i {display:block; width:10px; height:2px; background:#fff; position:absolute; left:18px; top:50%; transform: rotate(45deg) translateY(-50%);}
.top_btn i:last-child {transform: rotate(-45deg); left:12px;}


/* 푸터 */
.footer {width: 100%; background: #f1f1f1; color: #777;}
.footer .inner {padding: 50px 19%;}

.footer .top { line-height: 80px; display: flex; justify-content: space-between; max-width: 1100px; margin: 0 auto; }
.footer .top .f_navi ul {display: flex; white-space: nowrap;}
.footer .top .f_navi ul li {padding: 0 30px; position: relative;}
.footer .top .f_navi ul li:nth-child(1) { padding-left: 0; }
.footer .top .f_navi ul li:last-child {padding-right:0;}
.footer .top .f_navi ul li::before {content:" "; display: block; width: 20px; height: 2px; background: #e5e5e5; transform: rotate(90deg); position: absolute; left:-10px; top:40px;}
.footer .top .f_navi ul li:first-child:before {display: none;}
.footer .top .f_navi ul li a { font-weight: 500;}

.footer .middle {padding: 40px 0; border-bottom: 1px solid #ddd; display: flex; justify-content: flex-start; align-items: center; flex-direction: row;}
.footer .middle address > span {line-height:2; }
.footer .middle .btn_privacy {display: none;}
.footer .middle .btn_privacy:hover {background: #555; color:#fff;}

.footer .bottom { display: none;}
.footer .bottom .btn_top { border:none; outline:none; color: #777; position:relative; padding-right:30px; }
.footer .bottom .btn_top i {display:block; width:10px; height:2px; background:#999; position:absolute; transform: rotate(45deg); right:0; top:12px;}
.footer .bottom .btn_top i:last-child {transform: rotate(-45deg); right:6px;}