.m-visual {width: 100%; overflow: hidden;}
.m-visual .swiper-slide a {display: block; width: 100%; padding-bottom: calc(100% * 250 / 450); box-sizing: border-box; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat !important;}
.m-middle {width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; box-sizing: border-box; border-bottom: 1px solid #ddd;}
.m-middle li {flex: none; width: auto; }
.m-middle li a {display: block; text-align: center; font-size: 13px; color: #222; font-weight: 500;}
.m-middle li img {display: block; margin: 0 auto 8px;}


.m-notice {padding: 36px 0 0; box-sizing: border-box;}
.ico-title {font-size: 20px; line-height: 35px; margin: 0 0 16px; font-weight: bold; color: #222; display: flex; justify-content: space-between; align-items: center; padding: 0 0 0 44px; box-sizing: border-box;}
.ico-title a {flex: none; font-size: 0; display: block; width: 18px; height: 18px; background: url(/m/img/comm/m-more.png) 0 50% no-repeat; background-size: 18px auto;}
.ico-title.notice-title {background: url(/m/img/comm/m-notice.png) 0 50% no-repeat; background-size: 35px auto;}
.ico-title.best-title {background: url(/m/img/comm/m-best.png) 0 50% no-repeat; background-size: 35px auto;}

.m-notice li {position: relative; padding: 0 0 0 8px;}
.m-notice li::before {content: ''; width: 3px; height: 3px; display: block; background: #ff5855; border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.m-notice li a {display: flex; width: 100%; justify-content: space-between; align-items: center;}
.m-notice li h3 {padding: 0 40px 0 0; box-sizing: border-box; flex: none; font-size: 15px; line-height: 30px; color: #222; width: calc(100% - 70px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.m-notice li span {flex: none; font-size: 14px; line-height: 14px; color: #555; width: 70px;}

.m-best {margin: 28px 0 50px; box-sizing: border-box; background: #f1f1f1; border: 1px solid #ddd; border-radius: 20px; padding: 20px 20px; }
.best_ul > li { border-radius: 8px; overflow: hidden; border: 1px solid #ddd; box-sizing: border-box; display: flex; justify-content: space-between; align-items: stretch;}
.best_ul > li + li {margin: 12px 0 0;}
.best_ul > li h3 {flex: none; width: 80px; display: flex; justify-content: center; align-items: center; color: #fff; font-weight: bold; font-size: 14px;}
.best_ul > li ol {padding: 8px 12px; box-sizing: border-box; background: #fff; flex: none; width: calc(100% - 80px); display: flex; justify-content: flex-start; align-items: stretch; align-content: flex-start; flex-wrap: wrap;}
.best_ul > li ol li {font-size: 15px; color: #222; line-height: 30px; margin: 0 7px;}
.best_ul > li ol li:first-of-type span {color: #ff5855;}
.best_ul > li:first-of-type h3 {background: #f24266;}
.best_ul > li:nth-of-type(2) h3 {background: #fc9d9b;}
.best_ul > li:nth-of-type(3) h3 {background: #facdae;}
.best_ul > li:last-of-type h3 {background: #a89c8e;}

.member-tabs {padding: 0 !important; margin: 0 !important; font-family: inherit !important; border: 1px solid #ddd; box-sizing: border-box; overflow: hidden; border-radius: 8px !important;}
.member-tabs > ul {display: flex; justify-content: center; align-items: center; padding: 0!important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid #ddd !important; box-sizing: border-box; }
.member-tabs > ul::before {content: initial !important;}
.member-tabs > ul::after {content: initial !important;}
.member-tabs > ul > li {float: none !important; overflow: hidden; flex: none; font-size: 16px; color: #777; font-weight: 500; width: 50%; max-width: none; margin: 0 !important; border: 0 !important; box-sizing: border-box; padding: 0 !important; }
.member-tabs > ul > li > a {background: #f8f8f8; display: flex; justify-content: center; width: 100%; padding: 18px 0 !important; box-sizing: border-box; border: 0 !important; }
.member-tabs > ul > li.ui-state-active {}
.member-tabs > ul > li.ui-state-active a {background: var(--m-color); color: #fff;}
.member-tabs .member-wraps {max-width: 380px; margin: 20px auto 0;}
.member-tabs .member-wraps input[type='text'],
.member-tabs .member-wraps input[type='password'] {width: 100%; height: 52px !important; display: block; border: 1px solid #ddd; padding: 0 12px; box-sizing: border-box; font-size: 15px; color: #222; font-family: inherit;}
.member-tabs .member-wraps input[type='text'] {border-top-left-radius: 8px; border-top-right-radius: 8px;}
.member-tabs .member-wraps input[type='password'] {border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}
.member-tabs .member-wraps .chk_p {margin: 10px 0 26px;}
.member-tabs .member-wraps button[type='submit'] {font-family: inherit; border-radius: 8px; height: 54px; width: 100%; background: var(--m-color); color: #fff; display: block; text-align: center; border: 0; outline: 0; font-size: 18px; }
.member-flex {margin: 12px 0 0; display: flex; justify-content: center; align-items: center;}
.member-flex a,
.member-flex span {display: inline-block; flex: none;position: relative; padding: 0 4px; box-sizing: border-box; font-size: 12px; color: #555;}
.member-flex a::after {position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background: #555; content: ''; display: block;}
.member-flex span:last-of-type a::after {content: initial;}

.img-container img {display: block; width: 100% !important; height: auto !important;}

.awards-container {width: 100%;}
.awards-container section {padding: 0 0 40px; box-sizing: border-box;}
.awards-container section h4 {margin: 0 0 20px; height: 50px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 18px; font-weight: 500; color: #222;}
.awards-container section.over1 h4 {background: var(--a1-color);}
.awards-container section.over2 h4 {background: var(--a2-color);}
.awards-container section.over3 h4 {background: var(--a3-color);}
.awards-container section.over4 h4 {background: var(--a4-color);}
.flex-awards {display: flex; width: 100%; justify-content: space-between; align-items: stretch;}
.flex-awards .award-box {border-top-left-radius: 12px; border-bottom-right-radius: 12px; width: calc((100% - 28px) / 3); border: 1px solid #ccc; color: #ccc;  text-align: center; padding: 12px; box-sizing: border-box;}
.flex-awards .award-box.silver {margin: 0 14px;}
.flex-awards .award-box h5 {font-size: 18px; line-height: 22px; font-weight: 800; border-bottom: 1px solid #ccc; box-sizing: border-box; margin: 0 0 8px; padding: 0 0 12px;}
.flex-awards .award-box h5 span {font-size: 16px; line-height: 22px; display: block; font-weight: 500; ;}
.flex-awards .award-box p {font-size: 14px; margin: 0 0 10px;}
.flex-awards .award-box .stamp_area {width: 80%; padding-bottom: 80%; margin: 0 auto; position: relative;}


.flex-awards .award-box.stamp {border: 1px solid #f05a00;}
.flex-awards .award-box.stamp h5 {color: #f05a00; border-bottom: 1px solid #f05a00;}
.flex-awards .award-box.stamp h5 span {color: #222;}
.flex-awards .award-box.stamp p {color: #222;}
.flex-awards .award-box.stamp .stamp_area {background: url(/m/img/comm/stamp-on.png) 50% 50% no-repeat; background-size: 100% auto;}

@media all and (max-width: 340px) {
  .flex-awards .award-box h5 {font-size: 14px; line-height: 18px;}
  .flex-awards .award-box h5 span {font-size: 12px; line-height: 18px;}
  .flex-awards .award-box p {font-size: 12px; margin: 0 0 8px;}
}

.mileage-container h3 {margin: 0 0 20px; width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 18px; font-weight: 600; color: #222;}
.mileage-container.over1 h3 {background: var(--a1-color); height: 70px; flex-wrap: wrap; align-content: center;}
.mileage-container.over2 h3 {background: var(--a2-color); height: 70px; flex-wrap: wrap; align-content: center;}
.mileage-container.over3 h3 {background: var(--a3-color); height: 70px; flex-wrap: wrap; align-content: center;}
.mileage-container.over4 h3 {background: var(--a4-color); height: 70px; flex-wrap: wrap; align-content: center;}
.mileage-container h3 span {color: #777; font-size: 14px; font-weight: bold; display: block; width: 100%; text-align: center; margin: 5px 0 0;}
.mileage-container h3 span b {color: #f00;}

.mileage-container .award-box {width: calc(100% - 8px); border-top-left-radius: 20px; border-bottom-right-radius: 20px; border: 1px solid #ccc; color: #222;  text-align: center; box-sizing: border-box; margin: 0 0 14px; padding: 30px 14px 14px; }
.mileage-container .award-box h4 {font-size: 18px; font-weight: bold; padding: 0 0 28px; color: #ccc; border-bottom: 1px solid #ccc; box-sizing: border-box; margin: 0 0 10px;}
.mileage-container .award-box dl {width: 100%; display: flex; justify-content: flex-start; align-items: center;}
.mileage-container .award-box dt {flex: none; font-size: 15px; color: #222; font-weight: bold; line-height: 30px; width: 60px; text-align: left;}
.mileage-container .award-box dd {flex: none; font-size: 14px; color: #222; font-weight: 400; line-height: 30px; width: calc(100% - 60px); text-align: left;}
.mileage-container .award-box {position: relative;}
.mileage-container .award-box::after {content: ''; display: block; max-width: 84px; max-height: 84px; min-width: 62px; min-height: 62px;  background: url(/m/img/comm/awards-stamp.png) 50% 50% no-repeat; background-size: contain; position: absolute; top: 60%; transform: translateY(-50%); right: -8px; width: 21%; padding-bottom: 21%;}

.mileage-container.over3 .award-box {border-color: var(--a3-color-b);}
.mileage-container.over3 .award-box h4 {border-bottom-color: var(--a3-color-b); color: var(--a3-color-b);}

.mileage-container.over4 .award-box {border-color: var(--a4-color-b);}
.mileage-container.over4 .award-box h4 {border-bottom-color: var(--a4-color-b); color: var(--a4-color-b);}

.bbs-container ul li {padding: 18px 0 14px; box-sizing: border-box; border-bottom: 1px solid #ddd;}
.bbs-container ul li:first-of-type {padding-top: 0;}
.bbs-container ul li .no {color: #777; font-size: 14px; display: block;}
.bbs-container ul li .chip {color: #0d64b4; font-size: 14px; display: block; margin: 8px 0 4px;}
.bbs-container ul li h4 {font-size: 16px; color: #222; line-height: 22px; font-weight: 500;}
.bbs-container ul li .state {margin: 10px 0 0; display: flex; justify-content: flex-start; align-items: center;}
.bbs-container ul li .state span {flex: none; display: block; position: relative; color: #777; font-size: 14px;}
.bbs-container ul li .state span:nth-of-type(2) {margin: 0 10px;}
.bbs-container ul li .state span::after {content: ''; width: 1px; height: 10px; display: block; background: #ddd; position: absolute; top: 2px; right: -5px;}
.bbs-container ul li .state span:last-of-type::after {content: initial;}

.cal_title {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; align-content: flex-start;}
.cal_title img {display: block; max-width: 53%; position: relative; left: -14px;}
.cal_title p {display: block; width: 100%; text-align: center; font-size: 15px; color: #777; padding: 0 20px; box-sizing: border-box; margin: 14px 0 28px;}
.my_attend {width: 100%; height: 60px; display: flex; justify-content: center; align-items: center; text-align: center; color: #3c6de6; border: 1px solid #3c6de6; background: #fff; border-radius: 20px; margin: 0 auto 30px; max-width: 390px;}
.my_attend h3 b {color: #f00; font-weight: bold;}

.manage-container {width: 100%;}
.manage-container h3 {font-size: 18px; font-weight: bold; color: #222; margin: 0 0 18px; text-align: center;}
.manage-cont {border: 1px solid #ddd; box-sizing: border-box; padding: 20px;}
.manage-cont h4 {font-size: 15px; color: #222; margin: 20px 0 12px; font-weight: 600;}
.manage-cont h4 + p {line-height: 40px; font-size: 14px; color: #222;}
.manage-cont h4.fir {margin: 0 0 12px;}
.manage-cont .input-container label {font-size: 13px; color: #777; display: block; margin: 0 0 7px;}
.manage-cont .flex-container {display: flex; justify-content: flex-start; align-items: stretch;}
.manage-cont .start-input,
.manage-cont .end-input {width: calc((100% - 10px) / 2); flex: none;}
.manage-cont .end-input {margin: 0 0 0 10px;}
.manage-cont .input-container input[type='text'] {font-family: inherit; font-size: 13px; width: 100%; height: 40px; border: 1px solid #ddd; box-sizing: border-box; padding: 4px; }
.manage-cont .input-container.flex-container input[type='text'] {width: calc(100% - 30px);}
.manage-cont .input-container.flex-container input[type='text'] + img {margin: 0 0 0 9px;}
.manage-cont .input-container.flex-container .no-img input[type='text'] {width: 100%;}
.manage-cont .select-container select {width: 100%; height: 40px; border: 1px solid #ddd; box-sizing: border-box; padding: 4px 26px 4px 10px; font-size: 14px; color: #222; font-family: inherit; }
.manage-cont .select-container select + select {margin: 6px 0 0;}
.manage-cont .select-container select + input[type='text'] {margin: 6px 0 0;}
.manage-cont .select-container button[type='submit'] {margin: 6px 0 0; height: 40px; line-height: 40px; color: #fff; background: var(--m-color); font-size: 14px; font-family: inherit; text-align: center; display: block; width: 100%; border: 0;}
.manage-cont .select-container .end-button button[type='submit'] {margin: 0; border-radius: 8px;}
.manage-cont .select-container .end-button button[type='button'] { height: 40px; line-height: 40px; color: #fff; background: var(--m-color); font-size: 14px; font-family: inherit; text-align: center; display: block; width: 100%; border: 0; border-radius: 8px;}

.list-cont {margin: 32px 0 0;}
.list-cont2 {margin: 32px 0 0;}
.bbs-wrap {display: flex; justify-content: flex-end; align-items: center; margin: 0 0 10px;}
.bbs-wrap button[type='button'],
.bbs-wrap a {display: inline-block; height: 40px; color: #fff; font-size: 14px; padding: 0 18px; box-sizing: border-box; background: #154172; border: 0; border-radius: 8px; font-family: inherit;}
.list-cont .list {width: 100%;}
.list-cont .list li {border-bottom: 1px solid #ddd; box-sizing: border-box; padding: 18px 0; display: flex; justify-content: flex-start; align-items: center;}
.list-cont .list li:first-of-type {border-top: 2px solid #ddd; }
.list-cont .list li h4 {font-size: 15px; line-height: 25px; color: #222;}
.list-cont .list li h4 b {font-weight: bold;}
.list-cont .list li p {margin: 4px 0 0;}
.list-cont .list li p span {display: inline-block; position: relative; font-size: 14px; color: #777; margin: 0 18px 0 0;}
.list-cont .list li p span::after {content: ''; display: block; width: 1px; height: 12px; background: #777; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);}
.list-cont .list li p span:last-of-type::after {content: initial;}
.list-cont .list li .txt-cont,
.list-cont .list li .btn-cont {flex: none;}
.list-cont .list li .txt-cont {width: 100%; box-sizing: border-box;}
.list-cont .list li .btn-cont {width: 80px; position: absolute; right: 20px;}
.list-cont .list li .btn-cont button {display: block; width: 100%; background: var(--m-color); color: #fff; height: 40px; line-height: 40px; border-radius: 8px; border: 0; font-family: inherit;}

.list-cont2 .list2 li {box-sizing: border-box; padding: 10px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
.list-cont2 .list2 li:first-of-type {border-top: 1px solid #ddd; }
.list-cont2 .list2 label p,
.list-cont2 .list2 label span {text-align: left; font-size: 14px; color: #222; line-height: 22px; }
.list-cont2 .list2 label span {display: inline-block; position: relative; margin: 0 18px 0 0;}
.list-cont2 .list2 label span::after {content: ''; display: block; width: 1px; height: 12px; background: #777; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);}
.list-cont2 .list2 label span:last-of-type::after { content: initial;}
.list-cont2 .list2 li input[type='checkbox'] {appearance: none;}
.list-cont2 .list2 li input + label {display: block; position: relative; width: 100%; padding: 0 0 0 32px; box-sizing: border-box;}
.list-cont2 .list2 li input + label::before {content: ''; display: block; width: 20px; height: 20px; position: absolute; left: 0; top: 4px; border: 1px solid #ddd; box-sizing: border-box; border-radius: 4px;}
.list-cont2 .list2 li input:checked + label::before {background: var(--m-color) url(/m/img/comm/chk_on.png) 50% 50% no-repeat; background-size: 12px auto; border-color: var(--m-color);}

@media all and (max-width: 340px) {
  .manage-cont {padding: 12px;}
  .list-cont .list li .txt-cont {padding: 0 10px 0 0; width: calc(100% - 60px);}
  .list-cont .list li .btn-cont {width: 60px;}
}

.table-cont {width: 100%; margin: 40px 0 0;}
.table-cont table {width: 100%;}
.table-cont thead tr th {line-height: 50px; background: #fafafa; color: #222; font-weight: 500; font-size: 14px; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; box-sizing: border-box;}
.table-cont thead tr th + th {border-left: 1px solid #ddd;}
.table-cont tbody tr td {font-size: 14px; color: #222; padding: 7px 10px; box-sizing: border-box; border-bottom: 1px solid #ddd; text-align: center; line-height: 25px;}
.table-cont tbody tr td b {font-weight: bold; display: inline-block; margin: 0 4px 0 0;}
.table-cont tbody tr td + td {border-left: 1px solid #ddd;}
.table-cont tbody tr td button {display: block; width: 100%; background: #999; color: #fff; height: 35px; line-height: 35px; border-radius: 8px; border: 0; font-family: inherit;}

.bottom-wrap {width: 100%; padding: 0 14px; margin: 32px 0 0; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}
.bottom-wrap button {width: calc((100% - 12px) / 2); height: 50px; border-radius: 12px; color: #fff; border: 0; font-size: 16px; font-weight: bold; font-family: inherit;}
.bottom-wrap button:first-of-type {background: var(--m-color);}
.bottom-wrap button:last-of-type {background: #555;}


#layer {display: none; width: 100%; height: 100vh; position: fixed; top: 0; left: 0; background: #fff; z-index: 999; overflow-y: auto; }
#layer::before {content: ''; display: block; width: 100%; height: 100vh; position: absolute; z-index: -1; top: 0; left: 0; background: rgba(0, 0, 0, 0.5);}
#layer .layer-cont {width: 100%; position: relative; z-index: 1; background: #fff; /*border-top-left-radius: 20px; border-top-right-radius: 20px;*/}
#layer h3 {font-size: 18px; font-weight: bold; color: #222; margin: 0 0 18px; text-align: center;}

/*ÆäÀÌ¡°£°Ý*/
.Paging_Num td { padding-left:3px; vertical-align: middle;}
.Paging_Num td a {vertical-align: middle;}

.contents_box {width: 100%; font-size: 14px; padding: 0 18px calc(100% * 225 / 810); box-sizing: border-box;}

.select-list {margin: 0 0 12px; border:0; font-size: 22px; font-weight: bold; color: #222;}
.select-list option {font-size:14px; font-weight:normal;}