@charset "UTF-8";@import url("/resources/css/fnc_css/font/font.css");.wrap { width: 100%; height: calc(100vh - 80px); min-height: 700px; display: flex; } 
 
/* 메인 */
.main { width: 100%; height: 100%; padding: 20px 40px; background: url("/resources/images/fnc_images/main/main_bg.png") no-repeat center/cover, #f3f3f3; overflow-y: auto; overflow-x: hidden; border-top: 1px solid #f3f3f3; border-left: 1px solid #f3f3f3; } 
.box { width: 100%; border-radius: 15px; background-color: #fff; display: flex; flex-direction: column; box-shadow: 0 0 5px #00000010; } 
/* */
.main-grid1-wrap { display: flex; flex-direction: column; width: 100%; height: 100%; } 
.main-grid1-logo { margin-bottom: 20px; flex-shrink: 0; } 
.main-grid1-logo > img { height: 50px; } 
.main-grid1 { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } 
.main-grid1 > .box {position:relative; padding: 30px 40px; display: flex; flex-direction: column; justify-content: space-between;/*  background: url("/resources/images/fnc_images/main/main1_box_bg.png") no-repeat top 40% right 20%, #fff; */ } 
.main-grid1 > .box > div { display: flex; align-items: end; /* justify-content: space-between; */ width: 100%;justify-content:end; }
.main-grid1 > .box > div > img{z-index:2;position:relative;}
.main-grid1 > .box > div > img:last-child{filter: invert(1);} 
.main-grid1-title {position:relative;z-index:2; color:#fff; width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 26px; line-height: 34px; font-weight: bold; } 
.main-grid1 > .login-box { grid-column: 3/4; grid-row: 1/3; padding: 50px; width: 100%; border-radius: 15px; display: flex; flex-direction: column; box-shadow: 0 0 5px #00000010; background: url("/resources/images/fnc_images/main/login_bg.png") no-repeat bottom/contain, #fff; } 
.login-box > h3 { text-align: center; font-size: 50px; line-height: 60px; font-weight: 600; margin-bottom: 50px; } 
.login-box label { display: block; width: 100%; margin-bottom: 20px; } 
.login-box label p { font-size: 16px; line-height: 24px; font-weight: bold; margin-bottom: 10px; } 
.login-box label input { width: 100%; height: 50px; border-radius: 10px; border: 1px solid #d8d8d8; padding: 0 15px; } 
.login-box button { width: 100%; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background-color: #34bdea; border: 2px solid #34bdea; font-size: 20px; line-height: 28px; font-weight: 600; transition: all 0.2s; color: #fff; margin-top: 50px; } 
.login-box button:hover { background-color: #fff; color: #34bdea; } 
.login-box-etc { display: flex; align-items: center; justify-content: space-evenly; margin-top: 25px; } 
.login-box-etc > a { font-size: 16px; line-height: 24px; color: #b7b7b7; } 
.login-box-etc > span { display: block; width: 1px; height: 10px; background-color: #b7b7b7; } 
.login-box-info { width: 100%; height: 100%; background: url("/resources/images/fnc_images/main/main1_box_bg.png") no-repeat top 0% right 0%; padding-top: 50px; } 
.login-box-info h3 { font-size: 24px; line-height: 32px; font-weight: 600; } 
.login-box-info h3 > span { font-size: 20px; line-height: 28px; } 
.login-box-info > div { display: flex; align-items: end; gap: 10px; } 
.login-box-info > div > p { color: #b7b7b7; font-size: 16px; line-height: 24px; } 
.login-box-info > a { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid #d6d6d6; border-radius: 21px; font-size: 16px; line-height: 24px; color: #34bdea; transition: all 0.2s; margin-top: 100px; background-color:#fff;} 
.login-box-info > a:hover { background-color: #34bdea; color: #fff; border: 1px solid #34bdea; }

.main-grid1 > .box::after{content:"";position:absolute;top:0; left:0; width:100%;height:100%;border-radius:20px;background:rgba(0,0,0,0.4);z-index:1;}
.main-grid1 > .box:hover:after{background:rgba(0,0,0,0.2);}
.main-grid1 > .box.main-box1{background:url('/resources/images/fnc_images/main/mainbox_img1.jpg')no-repeat center/cover ;}
.main-grid1 > .box.main-box2{background:url('/resources/images/fnc_images/main/mainbox_img2.jpg')no-repeat center/cover ;}
.main-grid1 > .box.main-box3{background:url('/resources/images/fnc_images/main/mainbox_img3.png')no-repeat center/contain ;}
.main-grid1 > .box.main-box4{background:url('/resources/images/fnc_images/main/mainbox_img4.jpg')no-repeat center/cover ;} 
/* */
.main-grid2 { width: 100%; min-height: 100%; display: grid; grid-template-columns: 5fr 5fr 4fr; grid-template-rows: 60px 400px 1fr; gap: 20px; } 
.main-grid2-title { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } 
.main-grid2-title > h3 { font-size: 20px; line-height: 28px; font-weight: bold; } 
.main-grid2-title > p { height: 35px; padding: 0 25px; display: flex; align-items: center; justify-content: center; border-radius: 20px; border: 1px solid #e6e6e6; font-size: 14px; line-height: 20px; } 
.main-grid2 .box { padding: 20px; } 
.chart-box { grid-column: 1/4; grid-row: 3/4; } 
/* */
.main-grid2 .box.notice-box { grid-column: 1/4; grid-row: 1/2; width: 100%; padding: 0; height: 60px; } 
.notice-box > a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font-size: 16px; line-height: 24px; gap: 40px; } 
.notice-box > a > h3 { color: #34bdea; flex-shrink: 0; font-weight: bold; } 
.notice-box > a > h4 { width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 
.notice-box > a:hover > h4 { text-decoration: underline; font-weight: 500; } 
.notice-box > a > p { flex-shrink: 0; color: #c7c7c7; } 

/* */
.perf-chart-wrap { display: flex; justify-content: space-between; margin-top: 20px; height: 100%; } 
.perf-chart { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; max-height: 305px; } 
.perf-info > h3 { font-size: 22px; line-height: 30px; font-weight: bold; display: flex; align-items: end; gap: 5px; margin-bottom: 10px; } 
.perf-info > h3 > span { font-size: 18px; line-height: 26px; } 
.perf-info-grade { margin-bottom: 15px; position: relative; width: fit-content; } 
.perf-info-grade-hidden { position: absolute; top: 60px; left: 0px; background-color: #fff; width: 550px; border-radius: 15px; box-shadow: 0px 0px 15px #66748036; padding: 30px; display: none; z-index:9;} 
.perf-info-grade:hover .perf-info-grade-hidden { display: block; } 
.perf-info-grade-hidden::after { content: ""; position: absolute; left: 20px; top: -10px; border-bottom: 10px solid #fff; border-right: 10px solid transparent; border-left: 10px solid transparent; } 
.perf-info-grade-hidden > h3 { font-size: 16px; line-height: 24px; font-weight: bold; margin-bottom: 15px; } 
.perf-info-grade-hidden-grade { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; } 
.perf-info-grade-hidden-grade > p { font-size: 14px; line-height: 20px; font-weight: bold; } 
.perf-info-grade-hidden-table > p { font-size: 14px; line-height: 20px; font-weight: bold; margin-bottom: 10px; } 
.perf-info-grade-hidden-table table { width: 100%; font-size: 14px; line-height: 20px; } 
.perf-info-grade-hidden-table table th { background-color: #f9f9f9; font-weight: bold; padding: 5px 15px; border: 1px solid #e6e6e6; } 
.perf-info-grade-hidden-table table td { text-align: center; border: 1px solid #e6e6e6; padding: 5px 15px; } 
.perf-info-grade-hidden-table table tr td:first-child,
.perf-info-grade-hidden-table table tr th:first-child { border-left: none; } 
.perf-info-grade-hidden-table table tr td:last-child,
.perf-info-grade-hidden-table table tr th:last-child { border-right: none; } 

.perf-info-point { display: flex; flex-direction: column; gap: 5px; } 
.perf-info-point > div { display: flex; align-items: center; gap: 10px; } 
.perf-info-point > div > span { display: block; width: 12px; height: 12px; border-radius: 3px; } 
.perf-info-point > div:first-child > span { background-color: #09c1ff; } 
.perf-info-point > div:last-child > span { background-color: #ffb871; } 
.perf-info-point > div > p { font-size: 14px; line-height: 22px; color: #a4a4a4; } 
.perf-info-point > div > h3 { font-size: 14px; line-height: 22px; font-weight: 600; } 

/* */
.ability-grid { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; gap: 10px; margin-top: 20px; } 
.ability-grid-item { border: 1px solid #e6e6e6; border-radius: 15px; display: flex; flex-direction: column; justify-content: space-between; padding: 10px 15px; position: relative; } 
.ability-grid-item-top > p { font-size: 14px; line-height: 20px; font-weight: 500; margin-top: 5px; } 
.ability-grid-item > h3 { display: flex; align-items: end; justify-content: end; font-size: 18px; line-height: 26px; font-weight: 600; gap: 5px; } 
.ability-grid-item > h3 > span { font-size: 14px; line-height: 20px; font-weight: 500; } 
.ability-grid-item-hidden { position: absolute; width: 190px; height: auto; left: 50%; bottom: 120px; background-color: #fff; z-index: 5; box-shadow: 0px 0px 20px #66748036; padding: 15px 20px; border-radius: 10px;  display: none;  }
.ability-grid-item:hover .ability-grid-item-hidden { display: block; } 
.ability-grid-item-hidden > h3 { font-size: 16px; line-height: 24px; font-weight: 600; margin-bottom: 5px; } 
.ability-grid-item-hidden > p { font-size: 14px; line-height: 20px; } 
.ability-grid-item-hidden::after { content: ""; position: absolute; bottom: -10px; left: 20px; border-top: 10px solid #fff; border-right: 10px solid transparent; border-left: 10px solid transparent; } 
/* */
.select-box { display: flex; flex-direction: column; gap: 20px; width: 100%; height: 100%; } 
.select-box > select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: url("/resources/images/fnc_images/common/select.svg") no-repeat; background-position: right 20px top 50%; padding-left: 20px; padding-right: 40px; width: 100%; background-color: #fff; border-radius: 15px; height: 45px; flex-shrink: 0; box-shadow: 0 0 5px #00000010; font-weight:500;} 
.select-box > .box { height: 100%; } 
.program-list { width: 100%; height: 245px; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; overflow: auto;} 
.program-list-item { width: 100%; height: 40px; border-radius: 10px; background-color: #f9f9f9; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; gap: 20px; flex-shrink: 0;} 
.program-list-item > p { color: #c9c9c9; font-size: 14px; line-height: 20px; letter-spacing: -0.4px; flex-shrink: 0; } 
.program-list-item > h4 { width: 100%; text-align: right; font-size: 16px; line-height: 24px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: normal; overflow: hidden; text-overflow: ellipsis; } 
.program-list-item > h3 { font-size: 16px; line-height: 24px; font-weight: 600; flex-shrink: 0; } 
.program-list-item > h3 > span { color: #34bdea; } 
/* */
.line-chart { margin-top: 10px; width: 100%; height: 100%; max-height: 300px; } 

/* 전교생 ABCD 기초교육 */
.content { width: 100%; min-height: 100%; box-shadow: 0 0 5px #00000010; background-color: #fff; border-radius: 15px; padding: 30px; } 
.content-title { display: flex; align-items: center; gap: 15px; font-size: 28px; line-height: 36px; font-weight: bold; margin-bottom: 30px; } 
.content-title > img { width: 45px; } 
.abcd { height: 100%; } 
.abcd-title { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } 
.abcd-flex { display: flex; width: 100%; margin-bottom: 30px; } 
.abcd-flex-item { width: 20%; display: flex; align-items: center; justify-content: center; text-align: center; flex-direction: column; gap: 5px; border-right: 1px solid #d9d9d9; } 
.abcd-flex-item:last-child { border: none; } 
.abcd-flex-item > p { font-size: 16px; line-height: 24px; font-weight: 500; color: #707070; } 
.abcd-flex-item > h3 { font-size: 20px; line-height: 28px; font-weight: 600; color: #446dbe; } 
.abcd-table { width: 100%; margin-bottom: 30px; } 
.abcd-table th { background-color: #f8f8f8; text-align: center; height: 40px; font-size: 16px; line-height: 24px; font-weight: 600; border: 1px solid #d9d9d9; } 
.abcd-table td { text-align: center; padding: 10px; font-size: 16px; line-height: 24px; border: 1px solid #d9d9d9; } 
.abcd-table-flex { display: flex; align-items: center; justify-content: space-between; text-align: left; padding-left: 20px; } 
.abcd-table-flex > h3 { font-weight: 500; width: 50%; } 
.abcd-table-grid { width: 100%; text-align: left; padding-left: 20px; } 
.abcd-table-grid > h3 { font-weight: 500; margin-bottom: 5px; } 
.abcd-table-grid > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } 
.abcd-info { width: 100%; display: flex; gap: 30px; } 
.abcd-info > div { width: 25%; border: 1px solid #d9d9d9; border-radius: 15px; padding: 20px; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 20px; } 
.abcd-info > div > p { font-size: 16px; line-height: 24px; } 

/* 문제은행 */
.bank { width: 100%; } 
.bank-top { display: flex; align-items: end; justify-content: space-between; z-index: 1; gap: 20px; padding-bottom: 20px;} 
.bank-top-info { display: flex; gap: 20px;  } 
.bank-top-info * { transition: all 0.2s; } 
.bank-top-info > a { width: 200px; height: 130px; box-shadow: 5px 5px 15px #798d9729; border-radius: 15px; padding: 15px 25px; background-color: #fff; display: flex; flex-direction: column; justify-content: space-between; } 
.bank-top-info > a.active,
.bank-top-info > a:hover { background-color: #34bdea; } 
.bank-top-info > a > p { width: 100%; display: flex; align-items: center; justify-content: space-between; font-size: 20px; line-height: 28px; font-weight: bold; } 
.bank-top-info > a.active > p,
.bank-top-info > a:hover > p { color: #fff; } 
.bank-top-info > a > h3 { display: flex; align-items: end; justify-content: end; gap: 5px; font-size: 22px; line-height: 30px; font-weight: 600; color: #34bdea; } 
.bank-top-info > a.active > h3,
.bank-top-info > a:hover > h3 { color: #fff; } 
.bank-top-info > a > h3 > span { font-size: 14px; line-height: 20px; color: #000; } 
.bank-top-info > a.active > h3 > span,
.bank-top-info > a:hover > h3 > span { color: #fff; } 
.bank-top-img {  display:flex;align-items:end;} 
.bank .box { z-index: 2; position: relative; padding: 20px 30px; } 
.bank-table { width: 100%; overflow:auto;} 
.bank-table table {min-width:1100px;}
.bank-table table:has(.bank-table-status > div){min-width:unset;}
.bank-table th { background-color: #f8f8f8; font-size: 18px; line-height: 26px; padding: 10px; font-weight: 600; border-bottom: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; text-align: center; } 
.bank-table td { font-size: 18px; line-height: 26px; padding: 10px; text-align: center; border-bottom: 1px solid #e6e6e6; } 
.bank-table td.title { text-align: left; padding-left: 30px; }
.bank-table td:has(> div),.bank-table td:has(> input){width:100px;}
.bank-table td.date{width:125px;}  
.bank-table td > input { width: 100px; height: 34px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 16px; line-height: 24px; font-weight: 500; border: 1px solid #dbdbdb; color: #717171; transition: all 0.2s; } 
.bank-table td > input:hover { border: none; background-color: #34bdea; color: #fff; } 
.bank-table td > div { width: 100px; height: 34px; border-radius: 20px; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: 16px; line-height: 24px; font-weight: 500; }
.bank-table-status > div.type1 { background-color: #ececec; color: #a7a7a7; } 
.bank-table-status > div.type2 { background-color: #fff4c9; color: #b17d31; } 
.bank-table-status > div.type3 { background-color: #e1f7ff; color: #34bdea; } 
.bank-table-status > div.type4 { background-color: #ffdfdf; color: #c61717; } 

/* 문제은행 상세 */
.bank_detail { width: 100%; } 
.bank_detail .box { width: 100%; padding: 20px 30px; } 
.bank-detail-top { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } 
.bank-detail-top > h3 { font-size: 24px; line-height: 32px; font-weight: bold; } 
.bank-detail-top > div { height: 40px; padding: 0 20px; border-radius: 30px; display: flex; align-items: center; justify-content: center; background-color: #34bdea; color: #fff; font-weight: 500; border: 1px solid #34bdea; transition: all 0.2s; cursor: pointer; } 
.bank-detail-top > div:hover { background-color: #fff; color: #34bdea; } 
.bank-detail-main { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ddd; } 
.bank-detail-main > h4 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 20px; } 
.bank-detail-main pre{white-space: pre-wrap;font-size:16px;line-height:24px;}

.bank-answer-top{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.bank-answer-top > h3{font-size:20px;line-height:28px;font-weight:600;}
.bank-answer-top > input { height: 34px; padding: 0 20px; border-radius: 30px; display: flex; align-items: center; justify-content: center; background-color: #34bdea; color: #fff; font-weight: 500; border: 1px solid #34bdea; transition: all 0.2s; cursor: pointer; font-size:14px;} 
.bank-answer-top > input:hover { background-color: #fff; color: #34bdea; }

.bank-answer-select{display:flex;align-items:center;margin-bottom:10px;gap:5px;}
.bank-answer-select > p {font-size:16px;line-height:24px;}
.bank-answer-select > select{ -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: url("/resources/images/fnc_images/common/select.svg") no-repeat, #fff; background-position: right 15px top 50%; padding-left: 20px; padding-right: 40px; font-size: 16px; line-height: 24px; font-weight: 500; border: 1px solid #d6d6d6; border-radius: 20px; height: 34px; flex-shrink: 0; }
/* 마일리지 */
.mileage { width: 100%; height: 100%; } 
.mileage .box { width: 100%; padding: 20px 30px; min-height: 100%; }


.mileage .bank-table td,
.mileage .bank-table th { font-size: 16px; line-height: 24px; } 
.mileage-top { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } 
.mileage-top > a { height: 40px; padding: 0 20px; border: 1px solid #d6d6d6; border-radius: 21px; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 24px; color: #34bdea; font-weight: 500; transition: all 0.2s; } 
.mileage-top > a:hover { background-color: #34bdea; color: #fff; border: 1px solid #34bdea; } 
.mileage-select { display: flex; align-items: center; gap: 10px; } 
.mileage-select > select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: url("/resources/images/fnc_images/common/select.svg") no-repeat, #fff; background-position: right 15px top 50%; padding-left: 20px; padding-right: 40px; font-size: 16px; line-height: 24px; font-weight: 500; border: 1px solid #d6d6d6; border-radius: 20px; height: 40px; flex-shrink: 0; } 

/* 마일리지 신청 */
.mileage-apply { width: 100%; font-size: 16px; line-height: 24px; border-top: 1px solid #d9d9d9; border-right: 1px solid #d9d9d9; } 
.mileage-apply-tr { width: 100%; display: flex; }
.mileage-apply-tr > div { width: 50%; } 
.mileage-apply-tr-long .mileage-apply-th{width:25%;}
.mileage-apply-tr-long .mileage-apply-td{width:75%;} 
.mileage-apply-th { width: 100%; display: flex; align-items: center; justify-content: center; background-color: #f8f8f8; min-height: 60px; font-weight: bold; padding: 10px; border-left: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; } 
.mileage-apply-td { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; border-left: 1px solid #d9d9d9; border-bottom: 1px solid #d9d9d9; }
.mileage-apply-td > select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; background: url("/resources/images/fnc_images/common/select.svg") no-repeat, #fff; background-position: right 15px top 50%; padding-left: 20px; padding-right: 40px; font-size: 16px; line-height: 24px; font-weight: 500; border: 1px solid #d6d6d6; border-radius: 20px; width: 100%; height: 40px; flex-shrink: 0; } 
.mileage-apply-td > input[type="file"] { border: 1px solid #d6d6d6; border-radius: 20px; width: 100%; height: 40px; padding: 4px 15px; }
.mileage-apply-td:has(> input[type="text"]){gap:5px;}
.mileage-apply-td > input[type="text"] {border: 1px solid #d6d6d6; border-radius: 10px; width: 100px; height: 40px; padding: 4px 15px; text-align:center;}
.mileage-apply-td:has(> .mileage-apply-td-delete){flex-direction:column;gap:5px;}
.mileage-apply-td-delete{width:100%; display:flex;align-items:center;gap:10px; }
.mileage-apply-td-delete > label{display:flex;align-items:center;gap:5px;flex-shrink:0;width:fit-content;}
 
.mileage-apply-textarea { flex-direction: column; } 
.mileage-apply-textarea > div { width: 100%; } 
.mileage-apply-textarea textarea { width: 100%; height: 200px; padding: 0px; resize: none; } 
.mileage-apply-btn { width: 100%; max-width: 400px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background-color: #34bdea; border: 2px solid #34bdea; font-size: 20px; line-height: 28px; font-weight: 600; transition: all 0.2s; color: #fff; margin: 50px auto 0; } 
.mileage-apply-btn:hover { background-color: #fff; color: #34bdea; } 
/* 반응형 */
@media screen and (max-width: 1650px){


 .main-grid1 { grid-template-columns: 1fr 1fr 1.2fr; } 
 .main-grid1 > .login-box { padding: 50px 20px; min-width: 400px; } 
 .main-grid1 > .box { padding: 30px 20px; } 
 .main-grid2 { grid-template-columns: repeat(2, 1fr); } 
 .chart-box { grid-column: 1/3; grid-row: 4/5; } 
 .main-grid2 .box.notice-box { grid-column: 1/3; } 
 .main-grid2-box2 { grid-column: 1/3; grid-row: 3/4; } 
 .ability-grid { display: flex; } 
 .ability-grid-item { width: 100%; gap: 10px; } 
 .ability-grid-item-hidden { left: 10px; } 
 .abcd-table-grid > div { grid-template-columns: repeat(2, 1fr); }
 
 .mileage-apply-tr > .mileage-apply-th{width:30%;}
 .mileage-apply-tr > .mileage-apply-td{width:70%;}
 .mileage-apply-tr-long .mileage-apply-th{width:15%;}
 .mileage-apply-tr-long .mileage-apply-td{width:85%;}
 
 .mileage-apply-tr.mileage-apply-textarea > div{width:100%;}
 
 .bank-top-info > a{width:160px;} 
 }
@media screen and (max-width: 1439px){
 .abcd-info { display: grid; grid-template-columns: repeat(2, 1fr); } 
 .abcd-info > div { width: 100%; } 
 }
@media screen and (max-width: 1279px){
 

 .wrap {  height: auto; padding-top:60px;} 
 .main {min-height: calc(100vh - 60px); padding: 20px; } 
 .main-grid1-wrap { height: auto; } 
 .main-grid1 { grid-template-columns: 1fr 1fr; } 
 .main-grid1-logo { display: none; } 
 .main-grid1-title { font-size: 20px; line-height: 28px; } 
 .main-grid1 > .login-box { grid-column: 2/3; grid-row: 1/5; } 
 .main-grid1 > .box { padding: 20px; gap: 20px; } 
 .main-grid1 > .box > div > img:first-child { height: 50px; } 
 .main-grid2-title > h3 { font-size: 18px; line-height: 26px; } 
 .perf-info > h3 { font-size: 18px; line-height: 26px; } 
 .main-grid2-title > p { padding: 0 15px; } 
 .ability-grid-item-hidden { left: 0px;  } 
 .content { padding: 20px; } 
 .content-title { font-size: 24px; line-height: 32px; margin-bottom: 20px; } 
 .content-title > img { width: 35px; }
 
 .bank-top-img{display:none;} 
 .bank-top-info{width:100%;}
 .bank-top-info > a{width:25%;}
 }
@media screen and (max-width: 1023px){
 .main:has(.content) { padding: 0; } 
 .content { border-radius: 0; } 

 .ability-grid { display: grid; } 
 .main-grid2 { display: flex; flex-direction: column; gap: 20px; } 
 .abcd-table-grid > div { display: block; } 
 .abcd-flex-item > p { font-size: 14px; line-height: 20px; } 
 .abcd-flex-item > h3 { font-size: 16px; line-height: 24px; } 
 .abcd-flex-item > img { height: 40px; } 
 .abcd-table td,
 .abcd-table th { font-size: 14px; line-height: 20px; padding: 10px 5px; } 
 .abcd-info > div > p { font-size: 14px; line-height: 22px; } 
 .abcd-table-grid { padding-left: 0; } 
 .abcd-table-flex { padding-left: 0; display: block; } 
 .abcd-table-flex > h3 { width: 100%; } 
 .abcd-table { overflow: auto; margin-bottom: 20px; } 
 .abcd-table > table { min-width: 500px; } 
 
 .bank-table th,.bank-table td{padding:5px;font-size: 14px; line-height: 20px;}
 .bank-table td.title{padding:5px;}




.mileage-apply-tr{flex-direction:column;} 
.mileage-apply-tr > .mileage-apply-td,.mileage-apply-tr > .mileage-apply-th,.mileage-apply-tr > div{width:100%;}

.main:has(.mileage){padding:0;}
.mileage .box{padding:20px;border-radius:0;}
.mileage-top > a{height:34px;font-size:14px;line-height:18px;text-align:center;padding:0 10px;}
.mileage-select > select{height:34px;font-size:14px;line-height:20px;padding-left:10px;padding-right:35px;}

.mileage-apply-list .box{padding:20px;}
.bank .box{padding:20px;}
.bank_detail .box{padding:20px;}
.bank-detail-top > div{padding:0 10px; height:34px;font-size:14px;line-height:20px;}
.bank-detail-top > h3{font-size: 18px; line-height: 26px; }
.bank-detail-main > h4{font-size: 17px; line-height: 25px; }

.bank-detail-main pre{font-size:15px;line-height:23px;}

.bank-table td > div,.bank-table td > input{width:fit-content;font-size:14px;padding:0 10px;}

.bank-table td.date{width:100px;}  

 }
@media screen and (max-width: 767px){
 .main-grid1 { display: flex; flex-direction: column; } 
 .main-grid1 > .login-box { order: 5; min-width: unset; padding: 20px; } 
 .login-box > h3 { font-size: 32px; line-height: 40px; margin-bottom: 30px; } 
 .login-box button { height: 50px; font-size: 16px; line-height: 24px; margin-top: 40px; } 
 .main-grid1-title { font-size: 18px; line-height: 26px; } 
 .main-grid1-title br { display: none; } 
 .main-grid1 > .box { gap: 10px; } 
 .perf-info-grade-hidden { width: 300px; padding: 20px; } 
 .perf-info-grade-hidden-table table { font-size: 12px; line-height: 16px; } 
 .perf-info-grade-hidden-table table th,
 .perf-info-grade-hidden-table table td { padding: 5px; } 
 .abcd-title { font-size: 18px; line-height: 26px; } 
 .abcd-flex { flex-wrap: wrap; row-gap: 20px; justify-content: center; } 
 .abcd-flex-item { width: 33%; } 
 .abcd-flex-item:nth-child(3) { border: none; } 
 .abcd-info { display: flex; flex-direction: column; gap: 20px; } 
 .content-title { font-size: 20px; line-height: 28px; gap: 5px; } 
 .content-title > img { height: 30px; } 
 
 .bank-top-info{gap:10px;display:grid;grid-template-columns:1fr 1fr;}
 .bank-top-info > a{padding:10px;height:auto;flex-direction:row;width:100%;}
 .bank-top-info > a > p{font-size:16px;line-height:20px;}
 .bank-top-info > a > h3{font-size:16px;line-height:20px;}
 .bank-top-info > a > p > img{display:none;}
 
  .login-box-info h3{font-size:20px;line-height:28px;}
  .program-list-item > p{display:none;}
  .notice-box > a{gap:20px;}
.notice-box > a > p{display:none;}
 }
@media screen and (max-width: 479px){
 .main-grid2-title { flex-direction: column; gap: 10px; } 
 .main-grid2-title > p { height: 30px; } 
 .perf-info { display: flex; flex-direction: column; align-items: center; } 
 .perf-info-point { flex-direction: row; width: 100%; justify-content: space-evenly; } 
 .perf-chart-wrap { flex-direction: column; gap: 20px; } 
 .perf-info-grade-hidden { left: 50%; transform: translateX(-50%); } 
 .perf-info-grade-hidden::after { transform: translateX(-50%); left: 50%; } 
 .ability-grid { grid-template-columns: repeat(2, 1fr); } 
 
 .bank-answer-top > h3{font-size: 16px; line-height: 24px; }
 }