/* List */ .tab { display:flex; } .tab li { } .tab li a { display:flex; width:200px; height:50px; justify-content:center; align-items:center; text-align: center; border: 1px solid #dadada; box-sizing:border-box; border-bottom: 0; background:#f7f7f7; font-size:2rem; color:#666; font-weight: 500; border-radius:10px 10px 0 0; } .tab li a.active { background:#62c3ad; color:#fff; border-color:transparent; } .tableOutter { } .tableOutter table { border-top: 2px solid #62c3ad; box-sizing:border-box; width:100%; border-collapse:collapse; } .tableOutter table thead { } .tableOutter table thead tr { } .tableOutter table thead tr th { background:#fafafa; font-size:1.8rem; color:#666; font-weight: 400; height:50px; vertical-align: middle; } .tableOutter table tbody tr { } .tableOutter table tbody tr td { padding: 20px 0; box-sizing:border-box; vertical-align: middle; font-size:1.8rem; color:#3a3a3a; font-weight: 400; text-align: center; border-bottom: 1px solid #eaeaea; } .tableOutter table tbody tr td.tit { text-align:left; } .tableOutter table tbody tr td a { color:#000; font-weight: 700; } .tableOutter table tbody tr td button { width:120px; height:42px; background:#eaeaea; border: 0; border-radius:10px; font-size:1.8rem; color:#aaa; font-weight: 700; } .tableOutter table tbody tr.open td button { border: 1px solid #ffbf13; background:#fff9e9; color:#ff9813; } .tableOutter table tbody tr.closed td:not(.btnTd) { opacity:0.5; } /* View */ #program_view { } #program_view .inner { width:100%; max-width:1200px; margin: 0 auto; border: 1px solid #dadada; border-radius:5rem; padding: 5rem 5rem 7rem; box-sizing:border-box; } #program_view .inner .pgm_head { display:flex; align-items:center; justify-content:space-between; padding: 0 10px 2rem; box-sizing:border-box; border-bottom: 1px solid #dadada; } #program_view .inner .pgm_head .pgm_tit { font-size:3rem; color:#3a3a3a; font-weight: 600; } #program_view .inner .pgm_head > div { } #program_view .inner .pgm_head > div button { width:120px; height:42px; border-radius:10px; font-size:1.8rem; font-weight: 700; border: 0; } #program_view .inner .pgm_head > div .appl { border: 1px solid #ffbf13; background:#fff9e9; color:#ff9813; } #program_view .inner .pgm_head > div .disa { color:#aaa; background:#eaeaea; } #program_view .inner .pgm_body { } #program_view .inner .pgm_body .pgm_body_head { display:flex; align-items:center; justify-content:space-between; padding: 2rem 10px 5rem; box-sizing:border-box; } #program_view .inner .pgm_body .pgm_body_head > span { font-size:2rem; color:#000; font-weight: 400; } #program_view .inner .pgm_body .content { } #program_view .pgm_foot { display:flex; align-items:center; justify-content:center; text-align: center; margin-top: 5rem; } #program_view .pgm_foot .buttons { } #program_view .pgm_foot .buttons a { display:inline-flex; align-items:center; justify-content:center; text-align: center; width:200px; height:50px; border-radius:10px; font-size:2rem; } #program_view .pgm_foot .buttons .greenBtn { background:#369782; font-weight: 600; color:#fff; } #program_view .pgm_foot .buttons .orangeBtn { border: 1px solid #ffbf13; background:#fff9e9; color:#ff9813; } #program_view .pgm_foot .buttons .grayBtn { color:#aaa; background:#eaeaea; } /* Write */ .formWrite { } .formWrite .info { width:100%; max-width:1200px; margin: 0 auto; padding: 5rem; box-sizing:border-box; border-radius:5rem; border: 1px solid #dadada; display:flex; gap:6rem; } .formWrite .info .left { flex:1; } .formWrite .info .left .policy { } .formWrite .info .left .policy .sub_tit { font-size:2.2rem; color:#000; font-weight: 600; margin-bottom: 2.8rem; } .formWrite .info .left .policy .text { background:#fafafa; border-radius:10px; height:285px; overflow-y:scroll; padding: 2.6rem 3rem 3rem; box-sizing:border-box; } .formWrite .info .left .policy .text .tit { font-size:1.6rem; color:#000; font-weight: 600; } .formWrite .info .left .policy .text ul { padding-left: 18px; box-sizing:border-box; margin-top: 16px; } .formWrite .info .left .policy .text ul li { font-size:1.6rem; color:#666; font-weight: 300; list-style: decimal; line-height: 1.5em; } .formWrite .info .left .policy .text ul li .block { display:flex; align-items:baseline; } .formWrite .info .left .policy .text ul li .block .label { } .formWrite .info .left .policy .agreebox { font-size:1.6rem; color:#3a3a3a; font-weight: 400; } .formWrite .info .left .policy .agreebox label { display:flex; align-items:center; gap:10px; padding: 11px 3rem 0; box-sizing:border-box; } .formWrite .info .left .policy .agreebox input { display:none; } .formWrite .info .left .policy .agreebox i { display:inline-flex; align-items:center; justify-content:center; text-align: center; border: 2px solid #369782; border-radius:50%; box-sizing:border-box; width:20px; height:20px; } .formWrite .info .left .policy .agreebox i:before { content:"\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 600; font-style: normal; color:#369782; font-size:10px; opacity:0; } .formWrite .info .left .policy .agreebox input:checked ~ i:before { opacity:1; } .formWrite .info .formBox { flex:1; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; } .formWrite .info .formBox .inputLine { display:flex; align-items:center; font-size:1.8rem; color:#3a3a3a; font-weight: 400; } .formWrite .info .formBox .inputLine .label { width:134px; flex-shrink:0; } .formWrite .info .formBox .inputLine .label.important { position:relative; } .formWrite .info .formBox .inputLine .label.important .required { display:inline-block; width:6px; height:6px; border-radius:50%; background:#de3d4c; position:absolute; left:-9px; top:3px; } .formWrite .info .formBox .inputLine .input { flex:1; display:flex; gap:11px; } .formWrite .info .formBox .inputLine .input input, .formWrite .info .formBox .inputLine .input select { flex:1; height:42px; border-radius:10px; border: 1px solid #eaeaea; box-sizing:border-box; background:#fafafa; padding-left: 2rem; box-sizing:border-box; font-size:1.6rem; } .formWrite .info .formBox .inputLine .input input { } .formWrite .info .formBox .inputLine .input input:-ms-input-placeholder { color: #a9a9a9; } .formWrite .info .formBox .inputLine .input input::-webkit-input-placeholder { color: #a9a9a9; } .formWrite .info .formBox .inputLine .input input::-moz-placeholder { color: #a9a9a9; } .formWrite .info .formBox .inputLine .input select { padding-left: 1.8rem; color:#000; appearance: none; background:url(img/sel_arrow.png) right 10px center no-repeat; } .formWrite .buttonbox { margin-top: 5rem; display:flex; align-items:center; justify-content:center; text-align: center; gap:10px; } .formWrite .buttonbox button { border: 0; width:200px; height:50px; border-radius:10px; font-size:2rem; font-weight: 600; } .formWrite .buttonbox .submit { color:#fff; background:#369782; } .formWrite .buttonbox .reWrite { color:#aaa; background:#eaeaea; } /* Confirm */ .applyConfirm { } .applyConfirm .sectionTxt { font-size:1.8rem; color:#3a3a3a; font-weight: 500; text-align: center; margin-bottom: 2rem;} .applyConfirm .formOutter { border-radius:5rem; border: 1px solid #dadada; box-sizing:border-box; width:100%; max-width:500px; padding: 5rem; margin: 0 auto; } .applyConfirm .formOutter ul { display:flex; flex-direction:column; gap:10px; } .applyConfirm .formOutter ul li { } .applyConfirm .formOutter ul li input { height:42px; border-radius:10px; border: 1px solid #eaeaea; box-sizing:border-box; background:#fafafa; padding-left: 2rem; box-sizing:border-box; font-size:1.6rem; } .applyConfirm .formOutter ul li input:-ms-input-placeholder { color: #a9a9a9; } .applyConfirm .formOutter ul li input::-webkit-input-placeholder { color: #a9a9a9; } .applyConfirm .formOutter ul li input::-moz-placeholder { color: #a9a9a9; } .applyConfirm .formOutter .buttonBox { } .applyConfirm .formOutter .buttonBox button { width:100%; height:50px; border-radius:10px; font-size:2rem; font-weight: 600; border: 0; background:#369782; color:#fff; margin-top: 3rem; } @media (max-width:1600px){ } @media (max-width:1400px){ } @media (max-width:1200px){ .tableOutter table colgroup col:first-child { width:70px; } .tableOutter table colgroup col:nth-child(4) { width:100px; } .tableOutter table colgroup col:last-child { width:150px; } } @media (max-width:992px){ .formWrite .info { flex-direction:column; } } @media (max-width:768px){ .tab li { flex:1; } .tab li a { width:100%; } .tableOutter table, .tableOutter table tbody { display:block; } .tableOutter table colgroup, .tableOutter table thead { display:none; } .tableOutter table tbody tr { display:flex; align-items:center; flex-wrap:wrap; width:100%; padding: 2rem 1rem; box-sizing:border-box; border-bottom: 1px solid #dadada; } .tableOutter table tbody tr td { border-bottom: 0; padding: 0; text-align:left; } .tableOutter table tbody tr td.num { width:50px; flex-shrink:0; text-align: center; } .tableOutter table tbody tr td.tit { width:calc(100% - 50px - 120px); } .tableOutter table tbody tr td.tit a { display:block; padding-left: 10px; box-sizing:border-box; } .tableOutter table tbody tr td.day, .tableOutter table tbody tr td.count { width:50%; border-top: 1px solid #eaeaea; padding-top: 10px; margin-top: 10px; } .tableOutter table tbody tr td.day { order:2; } .tableOutter table tbody tr td.count { order:3; text-align: right; } .tableOutter table tbody tr td.day:before { content:"접수기간: "; } .tableOutter table tbody tr td.count:before { content:"모집인원: "; } .tableOutter table tbody tr td.btnTd { order:1; } #program_view .pgm_foot .buttons { display:flex; gap:1rem; width:100%; } #program_view .pgm_foot .buttons a { /*width:calc(33.33% - (2rem / 3));*/ } } @media (max-width:600px){ #program_view .inner { padding: 3rem 3rem 5rem; border-radius:2rem; } #program_view .inner .pgm_body .pgm_body_head { padding-bottom: 3rem; } #program_view .inner .pgm_head { flex-wrap:wrap; } #program_view .inner .pgm_head > div { order:0; margin-bottom: 1rem; } #program_view .inner .pgm_head .pgm_tit { order:1; } .formWrite .info { padding: 3rem 3rem 5rem; border-radius:2rem; gap:4rem; } } @media (max-width:479px){ .tableOutter table tbody tr td.tit { width:calc(100% - 50px); } .tableOutter table tbody tr td.day, .tableOutter table tbody tr td.count { width:100%; } .tableOutter table tbody tr td.count { text-align:left; margin-top: 5px; border-top: 0; padding-top: 0; } .tableOutter table tbody tr td.btnTd { order:4; width:100%; margin-top: 10px; } .tableOutter table tbody tr td button { width:100%; } .formWrite .info .left .policy .agreebox label { padding-left: 0; padding-right: 0; } .formWrite .info .formBox .inputLine { flex-direction:column; align-items:start; } .formWrite .info .formBox .inputLine .input { width:100%; margin-top: 1rem; } .formWrite .info .formBox .inputLine:first-child .input { font-size:2rem; font-weight: 700; } #program_view .inner .pgm_body .pgm_body_head { flex-direction:column; align-items:start; gap:1rem; } }