@charset "utf-8";

#skipNavi {display: none;}
body {display: flex; min-height: 100vh;	flex-direction: column;}
#wrap {flex: 1;}

/* default page header */
.header {background: url(../../images/visual/h_bnews.jpg) left top no-repeat; background-size: cover;}
.header-bg1 {background-image: url(../../images/visual/h_introduce.jpg)}
.header-bg2 {background-image: url(../../images/visual/h_record.jpg);}
.header-bg3 {background-image: url(../../images/visual/h_square.png);}
.header-bg4 {background-image: url(../../images/visual/h_story.jpg);}
.top-util {padding: 18px 15px 0 15px; overflow: hidden;}
.btn-back {font-weight: bold; font-size: 16px; color: #fff;}
.btn-back .fas {padding-right: 5px; font-size: 16px; color: #fff; vertical-align: middle;}
.btn-back > span {vertical-align: middle;}
.btn-search .fas {font-size: 22px; color: #fff}
.page-title-top {padding: 30px 0; font-size: 24px; text-align: center; color: #fff;}
.gnb {background: rgba(0, 86, 205, .8) url(../../images/common/gnb_bg.png) left bottom no-repeat; border-bottom: 6px solid #e2e2e2;}
.gnb ul {display: flex; max-width: 100%; flex-shrink: 0; flex-grow: 1; padding: 0 15px; overflow-x: auto; overflow-y:hidden;}
/* .gnb li {float: left; height: 46px; padding: 0 8px;} */
.gnb li {flex-shrink: 0; flex-grow: 1; height: 46px; padding: 0 8px;}
.gnb li:first-child {padding-left: 0;}
.gnb li a {display: block; height: 100%; line-height: 46px; font-size: 18px; color: #a1c8ff; text-decoration: none; text-align: center;}
.gnb li.active a {color: #fff; border-bottom: 3px solid#fff;}
.main .gnb li a {color: #fff;}
.gnb-fix {position: fixed; top: 0; left: 0; z-index: 3000; width: 100%; background-color: rgba(0, 86, 205, 1); transition: all 1s;}

/* login page header */
.header-login {position: relative; padding: 0 15px; color: #fff; background-color:#0056cd;}
.page-title-login {display: inline-block; font-size: 24px; color: #fff;}
.page-title-login > span {display: inline-block; padding: 14px 0 11px 0; line-height: 26px; border-bottom: 3px solid #fff;}
.header-login [class|=ti] {position: absolute; top: 14px; right: 15px; font-size: 26px; color: #fff;}

.container {padding: 15px 15px;}
.contents {min-height: 300px;}
.page-title-cont {padding: 8px 15px 0 15px; font-size: 20px; color: #1429a0; border-bottom: 1px solid #e2e2e2;}
.page-title-cont strong {display: inline-block; position: relative; bottom: -1px; z-index: 2; padding-bottom: 8px; border-bottom: 1px solid #1c97fe;}

/* footer */
.footer {padding: 15px 5px 30px 5px; text-align: center;  background-color: #2e2e2e; color: rgba(255, 255, 255, .3);}
.footer-links ul {}
.footer-links li a {vertical-align: middle; color: #979797; text-decoration: none; letter-spacing: -1px;}
.footer-links li {display: inline-block;}
.footer-links li::before {content: '|'; vertical-align: middle; margin: 0 8px; font-size: 11px; color: #777575;}
.footer-links li:first-child::before {display: none;}
.footer-links li:last-child a {color: #00adf5;}
.footer-address {padding-top: 15px; line-height: 20 px; font-weight:300; color: rgba(255, 255, 255, .3);}
.footer-address a {padding-left: 10px; font-weight:300; color: rgba(255, 255, 255, .3); text-decoration: none;}
.footer-btns {padding: 20px 0 15px 0;}
.footer-btns .btn {margin: 0 4px;}
.footer-btns .btn-login, .footer-btns .btn-join {width: 94px; height: 22px; line-height: 22px; background-color: #515151; color: #c9c9c9; border-radius: 15px;}
.footer-btns .btn-fb {width: 22px; height: 22px; font-size: 14px; color: #fff; border-radius: 50%; background-color: #1a61af;}
.copyright {padding-top: 10px; word-spacing: -1px;}