.pf {font-family: 'MaplestoryOTFLight';}

:root {
    --navy_dark: #415067;
    --blue: #4C87AF;
    --orange: #EE7047;
    --legendary: #0CAC64;
    --unique: #F89842;
    --epic: #9B64DC;
    --rare: #2E9BF8;
    --normal: #9F9F9F;
} 

#wrap { background: #f1f1f1; min-height: 100vh;}
#wrap .inner { max-width: 1024px; margin: -15px auto 0; padding: 15px 0;}

header { z-index: 9999; position: relative; max-width: 1024px; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 15px; background: var(--navy_dark); border-radius: 0 0 15px 15px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; margin: 0 auto;}
header a.pf { font-size: 28px; color: #fff;}
header a img{ width: 165px; }
header button i { color: #333; font-size: 30px;}

header .search_form { margin-top: 15px; width: 100%; display: flex; border-radius: 10px;  background: #fff;}
header .search_form select { padding: 7px 30px 5px 15px; background: url(../img/down3.png) no-repeat 95% 50% / 18px; border: none; border-right: 1px solid #dfdfdf; font-weight: 600; color: #333;}
header .search_form .right { width: 100%; display: flex; align-items: center; padding: 0 5px 0 15px;}
header .search_form .right input { width: 100%; }
header .search_form .right button {display: flex; align-items: center; padding: 5px 10px;}

footer { background: #383838;}
footer .inner { max-width: 1024px; margin: 0 auto; padding: 30px 15px;}
footer .inner p { text-align: center; color: #fff; line-height: 1.3;}
footer .inner p a { color: inherit; line-height: inherit; text-decoration: underline;}

/* 반응형 */
@media screen and (max-width: 1279px) {
    header a.pf { font-size: 24px; }
    header button i { font-size: 20px;}
    header { padding: 10px 15px;}
    header .search_form { margin-top: 10px;}
}