:root { --logo2-bg-url: url(""); } /* basic */ .dim{position:fixed; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.4); z-index:99;} .txtRed{color:#e7434a !important;} .input_txt{width:100%; padding:0 35px; height:50px; font-size:16px; border-radius:50px; background:#fff; border:1px solid #d3d3d3;} .search_wrap .input_txt{padding:0 60px 0 35px;} .input_txt::placeholder{color:rgba(0,0,0,0.35);} .input_txt:focus{border:1px solid #000000; box-shadow:0 0 7px rgba(0,0,0,0.5);} .input_txt:disabled{background:#f4f4f4; color:rgba(0,0,0,0.5);} .pointTxt{padding-left:17px; text-indent:-17px; color:#e7434a; font-size:14px; line-height:1.4; letter-spacing:-0.5px;} .container{width:100%; min-width:280px; overflow:hidden; font-family:'NanumSquareNeo', sans-serif;} .header{position:fixed; top:0; left:0; z-index:999; width:100%; height:90px; border-bottom:1px solid #d7d7d7; background:#fff; z-index:9999;} .header .inner{width:100%; height:100%; max-width:1580px; margin:0 auto; display:flex; justify-content:space-between; align-items:center;} .header h1 img{max-height:60px; max-width:200px;width: 100%;height: auto;object-fit: contain;display: block;} .header .logo{display:flex; align-items:center; gap:0 25px;} .header .logo img{max-height:45px; max-width:200px;width: 100%;height: auto;object-fit: contain;display: block;} .header .logo p{margin-top:4px; font-size:18px; color:#000000; text-align:left; font-family:'EsaManru',sans-serif; font-weight:300;} .header .logo p span{display:block; font-size:13px; color:#8d8d8d;} .header .logo p span em{font-size:15px;} .header .gnb{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:flex;} .header .gnb li{} .header .gnb li + li{margin-left:60px;} .header .gnb li a{position:relative; display:inline-block; line-height:2; font-size:17px; font-weight:600; border-bottom:2px solid transparent;} .header .gnb li:hover a, .header .gnb li.on a{color:#000; border-bottom:2px solid #02abf0; transition:0.2s;} .header .visitors{position:relative;} .header .visitors p{font-size:14px; color:#000; text-align:left; width:110px; display:flex; justify-content:space-between;} .header .visitors p span{display:inline-block; text-align:right; font-weight:600;} .header .visitors p + p{margin-top:6px;} .header .btn_menu{display:none;} .allMenu{display:none; position:fixed; top:0; left:0; background:linear-gradient(97deg, rgba(0,117,188,1) 0%, rgba(2,171,240,1) 100%); width:100%; min-height:100vh; overflow:hidden; overflow-y:auto; z-index:99999;} .allMenu.on{display:block;} .allMenu .top_area{position:relative; padding:35px 0 25px; z-index:10;} .allMenu .top_area:before{content:''; position:absolute; top:0; right:0; width:100%; height:100%; display:block; background:var(--logo2-bg-url)no-repeat; background-size:auto 85%; background-position:center right 5%; opacity:0.2; z-index:-1;} .allMenu .top_area .btn_close{position:absolute; top:24px; right:5%; width:20px; height:20px; padding:5px; background:url("../csapp/img/close.png")no-repeat center; background-size:100% auto; z-index:99; font-size:0;} .allMenu .top_area h2{font-family:'EsaManru',sans-serif; font-weight:300; line-height:1; text-align:left; padding:0 5% 0 9%;} .allMenu .top_area h2 span{font-size:15px; color:#fff; opacity:0.65} .allMenu .top_area h2 span em{font-size:18px;} .allMenu .top_area h2 strong{margin-top:5px; display:block; font-size:34px; color:#fff; font-weight:300;} .allMenu .info{margin-top:30px; padding:0 5% 0 9.5%; display:flex; justify-content:space-between; align-items:baseline;} .allMenu .visitors{position:relative;} .allMenu .visitors p{font-size:14px; color:rgba(255,255,255,0.65); text-align:left; width:110px; display:flex; justify-content:space-between;} .allMenu .visitors p + p{margin-top:4px;} .allMenu .visitors p span{display:inline-block; text-align:right; font-weight:600; color:rgba(255,255,255,1);} .allMenu .btn_home{display:block; width:24px; height:22px; background:url("../csapp/img/home.png")no-repeat center; background-size:100% auto; font-size:0;} .allMenu .allMenu_cont{padding:45px 0; background:#fff; border-radius:60px 0 0 0; height:calc(100vh - 183px); overflow-y:auto;} .allMenu .allMenu_cont p{padding:0 5% 0 10%; color:#424242; font-size:15px; font-weight:300; line-height:1.4; word-break:keep-all;} .allMenu .allMenu_cont .point{color:#000000; text-decoration:underline; text-underline-offset:4px; font-weight:500;} .allMenu .allMenu_cont .allMenu_btn{margin-top:40px; padding:0 5% 0 7%;} .allMenu .allMenu_cont .allMenu_btn a{position:relative; display:block; width:100%;} .allMenu .allMenu_cont .allMenu_btn .btn_01{display:flex; align-items:center; padding-left:35px; height:80px; border-radius:20px; border:1px solid #e2e2e2; font-family:'EsaManru',sans-serif; font-weight:300; color:#fff;} .allMenu .allMenu_cont .allMenu_btn .btn_01:after{content:''; position:absolute; top:50%; right:25px; transform:translateY(-50%); width:35px; height:35px; border-radius:50%; background:rgba(0,0,0,0.5) url("../csapp/img/arrow.png")no-repeat center; background-size:20px auto;} .allMenu .allMenu_cont .allMenu_btn .btn_01 + .btn_01{margin-top:6px;} .allMenu .allMenu_cont .allMenu_btn .btn_01 span{font-size:20px;} .allMenu .allMenu_cont .allMenu_btn .btn_01 span em{font-weight:500;} .allMenu .allMenu_cont .allMenu_btn .btn_01.susi{background:#0075bc;} .allMenu .allMenu_cont .allMenu_btn .btn_01.jungsi{background:#02abf0;} .allMenu .allMenu_cont .allMenu_btn .btn_02{display:flex; align-items:center; padding-left:35px; margin-top:20px; height:65px; border:1px solid #e2e2e2; background:#ededed; border-radius:20px;} .allMenu .allMenu_cont .allMenu_btn .btn_02:after{content:''; position:absolute; top:50%; right:25px; transform:translateY(-50%); display:block; width:24px; height:22px; background:url("../csapp/img/arrow_000.png")no-repeat; background-size:24px auto;} .allMenu .allMenu_cont .allMenu_btn .btn_02 span{font-size:17px; color:#000;} .allMenu .allMenu_cont .allMenu_btn .btn_02 span em{font-weight:600;} .allMenu .allMenu_cont .allMenu_btn .btn_02 + .btn_02{margin-top:8px;} .allMenu .allMenu_cont .allMenu_btn .btn_01::before{display:none;} .allMenu .allMenu_cont .allMenu_btn .btn_02::before{display:none;} .sub_container{background:#fbfbfb;} .sub_contents{min-height:calc(100vh - 90px); margin:0 auto; padding:90px 0 70px;} article{position:relative; max-width:1280px; width:100%; margin:0 auto;} .title_wrap{position:relative; text-align:center; padding:70px 0 0;} .title_wrap h2.title{text-align:center; font-size:36px; color:#000000; font-family:'EsaManru',sans-serif; font-weight:300;} .title_wrap p{margin-top:30px; padding:0 20px; word-break:auto-phrase; font-size:15px; line-height:1.5; color:#000000;} .title_wrap .list_dot{margin:60px 0 0; padding:0 40px; padding-right:320px; width:100%; text-align:left;} .title_wrap .list_dot li{position:relative; padding-left:15px; font-size:15px; color:#000000; line-height:1.3;} .title_wrap .list_dot li:not(:first-child){margin-top:5px;} .title_wrap .list_dot li:before{content:''; position:absolute; top:8px; left:2px; width:3px; height:3px; border-radius:3px; background:#000;} .title_wrap .btns{position:absolute; right:0; bottom:0; display:flex; gap:0 8px; padding:0 3px;} .title_wrap .btns a{display:inline-flex; align-items:center; gap:0 8px; font-size:15px; text-align:left; padding:0 6px 0 20px; width:auto; height:40px; line-height:40px; border-radius:35px; border:1px solid #0075bc; background:#fff; color:#0075bc;} .title_wrap .btns .btn_ways:after{content:''; display:inline-block; width:30px; height:30px; border-radius:50%; background:#0075bc url("../csapp/img/btn_qmark.png")no-repeat center;} .title_wrap .btns .btn_back:after{content:''; display:inline-block; width:30px; height:30px; border-radius:50%; background:#0075bc url("../csapp/img/btn_back.png")no-repeat center;} .title_wrap .btns .btn_reinput:after{content:''; display:inline-block; width:30px; height:30px; border-radius:50%; background:#0075bc url("../csapp/img/btn_chk_fff.png")no-repeat center;} .title_wrap .btns a:hover{color:#fff; background:#0075bc; text-decoration:underline; text-underline-offset:3px; box-shadow:0 0 7px rgba(0,0,0,0.5);} .title_wrap .btns .btn_ways:hover:after{background:#0075bc url("../csapp/img/btn_qmark.png")no-repeat center;} .title_wrap .btns .btn_back:hover:after{background:#0075bc url("../csapp/img/btn_back.png")no-repeat center;} .title_wrap .btns .btn-s{} /* 상담자 정보 입력(기본정보) */ .information .cont{margin-top:70px;} .information .wrap_flex{display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px;} .information .wrap_flex .form_wrap{width:calc(50% - 20px/2);} .information .form_wrap{width:100%; background:#fff; border-radius:20px; border:1px solid #d5d5d5; padding:48px 45px 52px;} .information .form_box{width:100%; max-width:520px; margin:30px auto 0;} .information .form_box:first-child{margin-top:0;} .information .form_box:not(.agree_box):first-child{margin-bottom:40px;} .information .form_box .tit_form{margin-bottom:30px; position:relative; font-size:18px; color:#272727; font-weight:600; letter-spacing:-0.5px;} .information .form_box .tit_form.star:before{content:'*'; position:absolute; left:-17px; top:-2px; font-size:20px; color:#e7434a;} .information .form_box .tit_form span{font-weight:400;} .information .form_box .pointTxt{width:calc(100% + 20px); margin-top:20px;} .information .form_box .search_wrap{position:relative;} .information .form_box .search_wrap .input_txt{} .information .form_box .search_wrap .btn_search{position:absolute; top:50%; right:0; transform:translateY(-50%); width:55px; height:100%; background:url("../csapp/img/search.png")no-repeat center; font-size:0;} .information .form_box .select_wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:15px 0;} .information .form_box .select_wrap .select{width:100%;} .information .form_box .select_wrap.half .select{width:calc(50% - 20px/2);} .information .form_box .gender_wrap{position:relative; width:250px; height:50px; background:#e1e1e1; border-radius:50px; border:1px solid #d3d3d3; overflow:hidden;} .information .form_box .gender_wrap .gender{position:absolute; top:50%; transform:translateY(-50%); display:block; width:135px; height:100%;} .information .form_box .gender_wrap .gender:first-child{left:0;} .information .form_box .gender_wrap .gender:last-child{right:0;} .information .form_box .gender_wrap .gender input[type="radio"]{display:none;} .information .form_box .gender_wrap .gender input[type="radio"] + label{width:100%; height:100%; display:flex; align-items:center; justify-content:Center; font-size:16px; color:#000; text-align:center; border-radius:50px; cursor:pointer;} .information .form_box .gender_wrap .gender input[type="radio"]:checked + label{color:#fff; background:#0075bc; transition:ease 0.2s;} .information .agree_box{} .information .agree_box .tit_form{margin-bottom:0;} .information .agree_box .pointTxt{margin-top:15px;} .information .agree_box .agree_wrap{margin-top:40px;} .information .agree_box .agree_wrap > input{margin-bottom:15px;} .information .agree_box .mail_wrap{position:relative; display:flex; align-items:center;} .information .agree_box .mail_wrap .mail_01, .information .agree_box .mail_wrap .mail_02, .information .agree_box .mail_wrap .mail_03{width:46%;} .information .agree_box .mail_wrap .mail_03{padding:0 60px 0 35px} .information .agree_box .mail_wrap .btn_select{display:none; position:absolute; top:50%; right:18px; transform:translateY(-50%); width:24px; height:13px; background:url("../csapp/img/select.png") no-repeat center;} .information .agree_box .mail_wrap select:required:invalid{color:rgba(0,0,0,0.35);} .information .agree_box .mail_wrap .at{width:8%; font-size:16px; color:#000; text-align:center;} .information .agree_box .agree_chk{margin-top:25px; display:flex; justify-content:right;} .information .agree_box .agree_chk input[type="checkbox"]{display:none;} .information .agree_box .agree_chk input[type="checkbox"] + label{position:relative; padding-left:42px; font-size:16px; color:#000; font-weight:600; cursor:pointer;} .information .agree_box .agree_chk input[type="checkbox"] + label span{font-weight:300;} .information .agree_box .agree_chk input[type="checkbox"] + label:after{content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); display:block; width:27px; height:27px; border-radius:27px; background:#e7e7e7;} .information .agree_box .agree_chk input[type="checkbox"]:checked + label:after{background:#0075bc url("../csapp/img/chk_on.png")no-repeat center;} .information .agree_box .agree_con{margin-top:25px; border:1px solid #d3d3d3; border-radius:10px; background:#fff; height:232px; padding:20px 10px 20px 23px;} .information .agree_box .agree_con .scroll_box{padding-right:30px; height:100%; font-size:13px; color:#000000; word-break:keep-all; line-height:1.2; overflow-y:auto;} .information .agree_box .agree_con .list_dot{margin-top:20px;} .information .agree_box .agree_con .list_dot li{position:relative; font-size:13px; color:#000; word-break:break-all; line-height:1.2;} .information .agree_box .agree_con .list_dot li span{position:absolute; top:0; left:0;} .information .agree_box .agree_con .list_dot li.indent01{padding-left:51px;} .information .agree_box .agree_con .list_dot li.indent02{padding-left:101px;} .information .agree_box .agree_con .list_dot li.indent03{padding-left:239px;} .scroll_box::-webkit-scrollbar{width:16px;} .scroll_box::-webkit-scrollbar-thumb{background:#e1e1e1; /* 스크롤바 색상 */ border-radius:3px; /* 스크롤바 둥근 테두리 */} .scroll_box::-webkit-scrollbar-track{background: #fff; /*스크롤바 뒷 배경 색상*/ border-radius:3px;} /* 상담자 정보 입력(수시,정시) */ .grade{} .grade .cont{margin-top:60px;} .grade .board{padding:0 40px; background:#fff; border-radius:10px; border:1px solid #d5d5d5;} .grade .board:not(:first-child){margin-top:14px;} .grade .board .tit_board{position:relative; padding:35px 30px 35px 0; border-bottom:0; font-family:'EsaManru',sans-serif; font-weight:300; cursor:pointer;} .grade .board .tit_board:after{content:''; position:absolute; top:0; right:0; display:block; width:25px; height:100%; background:url("../csapp/img/arrow_open.png")no-repeat center bottom 35px; background-size:100% auto; transition:0.2s;} .grade .board .tit_board .t{position:relative; padding-left:36px; font-size:20px; color:#272727; background:url("../csapp/img/chk_red.png")no-repeat left top 4px;} .grade .board .board_con{height:0; padding:0 15px; overflow:hidden;} .grade .board .pointTxt{margin-left:-2px;} .grade .board .txt_list{margin-top:20px;} .grade .board .txt_list dt{margin-bottom:10px; font-size:16px; color:#000000; font-weight:400;} .grade .board .txt_list dd{font-size:14px; color:#000; font-weight:300; line-height:1.4;} .grade .board .txt_list dd + dd{margin-top:5px;} .grade .board .txt_list + .txt_list{margin-top:25px;} .grade .board .list_dot dd{position:relative; padding-left:15px;} .grade .board .list_dot dd:before{content:''; position:absolute; top:7px; left:2px; display:block; width:3px; height:3px; border-radius:3px; background:#000;} .grade .board .list_num dd{display:flex; gap:0 4px} .grade .board .list_num dd span{flex:none;} .grade .board .direct_grade_wrap{margin:60px auto 0; position:relative; padding-top:90px; width:fit-content; max-width:100%; text-align:center;} .grade .board .direct_grade_wrap .grade_box{position:absolute; top:0; left:50%; transform:translateX(-50%); width:100%;} .grade .board .direct_grade_wrap .grade_box strong{margin-bottom:25px; display:block; font-size:18px; color:#272727; font-weight:600; letter-spacing:6px;} .grade .board .direct_grade_wrap .grade_box .input_txt{text-align:center; width:100%;} .grade .board .btn_wrap{width:fit-content; margin:40px auto 0; display:flex; flex-wrap:wrap;} .grade .board.on .tit_board{padding:44px 30px 33px 0; } .grade .board.on .tit_board:after{transform:rotate(180deg); background-position: center top 40px; transition:0.2s;} .grade .board.on .board_con{height:auto; padding:30px 15px 70px; border-top:1px dashed #8f8f8f; transition:0.4s;} .grade .board:is(.normal) .board_con{height:auto; padding:0 15px 60px; border-top:0; transition:0.4s;} .grade .board.qualification .board_con{padding:50px 0 70px;} .grade .board.qualification .detail_wrap{margin-top:0;} .grade .detail_wrap{margin-top:55px;} .grade .detail_wrap .tit_btns{margin-bottom:20px; padding-left:10px; display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:10px;} .grade .detail_wrap .tit_btns > p{font-size:17px; color:#000000; font-weight:600;} .grade .detail_wrap .tit_btns .btns{display:flex; justify-content:right; gap:0 12px;} .grade .detail_wrap .tit_btns .btn-s{display:block; width:104px; height:35px; border-radius:5px; font-size:13px; display:flex; align-items:center; justify-content:center; background:#fff} .grade .detail_wrap .tit_btns .btn_add{border:1px solid #e7434a; color:#e7434a;} .grade .detail_wrap .tit_btns .btn_add:before{content:''; margin-right:12px; display:inline-block; width:14px; height:100%; background:url("../csapp/img/btn_add.png")no-repeat center;} .grade .detail_wrap .tit_btns .btn_all{border:1px solid #dadada; color:#000000;} .grade .detail_wrap .tit_btns .btn_all:before{content:''; margin-right:12px; display:inline-block; width:14px; height:100%; background:url("../csapp/img/btn_chk.png")no-repeat center;} .grade .detail_wrap .tit_btns .btn_delete{border:1px solid #dadada; color:#000000;} .grade .detail_wrap .tit_btns .btn_delete:before{content:''; margin-right:12px; display:inline-block; width:14px; height:100%; background:url("../csapp/img/btn_delete.png")no-repeat center;} .grade .detail_wrap .tit_btns .btn_add:hover{box-shadow:0 0 5px rgba(0,0,0,0.3); text-decoration:underline; text-underline-offset:3px;} .grade .detail_wrap .tit_btns .btn_all:hover, .grade .detail_wrap .tit_btns .btn_delete:hover{border:1px solid #000; box-shadow:0 0 5px rgba(0,0,0,0.3); text-decoration:underline; text-underline-offset:3px;} .grade .detail_wrap2{padding:0 0 35px; border-bottom:1px dashed #8f8f8f;} .grade .detail_wrap2 .tit_detail{margin:45px 0 30px; font-size:18px; color:#272727; font-family:'EsaManru',sans-serif; font-weight:300;} .grade .detail_wrap2 .tit_detail2{font-size:17px; color:#272727;} .grade .detail_wrap2 .tit_detail2{margin:30px 0 12px;} .grade .detail_wrap2 .detail .tit_detail2{margin:0 0 20px;} .grade .detail_wrap2 .detail_box{display:flex; align-items:center; flex-wrap:wrap;} .grade .detail_wrap2 .detail_box + .detail_box{margin-top:15px;} .grade .detail_wrap2 .detail_box{gap:20px 45px;} .grade .detail_wrap2 .detail_box .detail.row{display:flex; align-items:center; gap:25px;} .grade .detail_wrap2 .detail_box .detail.row .tit_detail2{margin:0;} .grade .detail_wrap2 .detail_box .detail.row .select, .grade .detail_wrap2 .detail_box .detail.row input[type="text"]{min-width:200px; flex:1;} .grade .detail_wrap2 .detail_box .detail.row:has(.rdo_wrap){flex-wrap:wrap;width:100%;} .grade .detail_wrap2 .detail_box .detail.row:has(.rdo_wrap) .tit_detail2{width:100%;} .grade .detail_wrap2 .wrap_detail.flex{display:flex; align-items:center; flex-wrap:wrap;} .grade .detail_wrap2 .wrap_detail.flex .tit_detail{width:100%;} .grade .detail_wrap2 .wrap_detail.flex .tit_detail2{margin:0; margin:0 25px 0 45px;} .grade .detail_wrap2 .wrap_detail.flex .tit_detail2:first-child{margin-left:0;} .grade .detail_wrap2 .wrap_detail.flex .detail_box{} .grade .detail_wrap2 .wrap_detail.flex .select, .grade .detail_wrap2 .wrap_detail.flex input[type="text"]{width:200px;} .grade .detail_wrap2 .rdo_wrap{display:flex; flex-wrap:wrap; align-items:center; gap:0 40px;} .grade .detail_wrap2 .grade_wrap{display:flex; align-items:center; gap:0 16px;} .grade .detail_wrap2 input[type="text"]{padding:0 15px; width:160px; height:50px; border-radius:7px; background:#fff; border:1px solid #d3d3d3; text-align:center; font-size:16px;} .grade .detail_wrap2 input[type="text"]:focus{border:1px solid #000; box-shadow:0 0 5px rgba(0,0,0,0.5);} .grade .detail_wrap2 .select{width:160px;} .grade .detail_wrap2 .detail:has(.radio_wrap){display:flex; align-items:center; gap:25px;} .grade .detail_wrap2 .detail:has(.radio_wrap) .tit_detail2{margin:0;} .grade .detail_wrap2 .detail:has(.radio_wrap) .select, .grade .detail_wrap2 .detail:has(.radio_wrap) input[type="text"]{min-width:200px; flex:1;} /* 성적 맞춤 상담 */ .type_grade{} .type_grade .cont{margin-top:60px;} .type_grade .board{padding:0 40px 40px; background:#fff; border-radius:10px; border:1px solid #d5d5d5;} .type_grade .board .text_area{margin:35px 0;} .type_grade .board .info_txt{padding-left:17px; text-indent:-17px; font-size:14px; line-height:1.3} .type_grade .board .info_txt + .info_txt{margin-top:8px;} .type_box{margin:10px 0 35px;} .type_box.pc{display:block;} .type_box.mb{display:none;} .type_box .type_list{display:flex; align-items:center; flex-wrap:wrap; padding:20px 0; min-height:80px; border-bottom:1px dashed #cbcbcb;} .type_box .type_list dt{width:115px; font-size:17px; color:#272727; line-height:1.2; font-family:'EsaManru',sans-serif; font-weight:300;} .type_box .type_list dd{width:calc(100% - 115px);} .type_box .type_list .rdo_wrap{flex-wrap:wrap; gap:15px 30px;} .type_box .type_list .rdo_wrap .rdo1{width:calc(100%/5 - 120px/5)} .type_box .type_list .rdo_wrap .rdo1 input[type="radio"] + label{word-break:break-all; line-height:1.2;} .type_box .type_list .rdo_wrap .rdo1 input[type="radio"] + label:before{top:-4px; transform:translateY(0);} .type_box .type_list .rdo_wrap .rdo1 input[type="radio"] + label:after{top:4px; transform:translateY(0);} .type_box .type_list .rdo_wrap .rdo1 + .rdo1{} .type_grade h4.tit{margin:35px 0 30px; font-size:20px; color:#272727; font-family:'EsaManru',sans-serif; font-weight:300; display:flex; align-items:center;} .type_grade h4.tit:before{content:''; margin-right:20px; display:block; width:16px; height:15px; background:url("../csapp/img/chk_red.png")no-repeat center;} .type_grade .ex_tab{margin-bottom:22px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px 0;} .type_grade .ex_tab .year_tab{display:flex; border-radius:10px; background:#e6e6e6;} .type_grade .ex_tab .year_tab li{width:120px; height:40px;} .type_grade .ex_tab .year_tab li a{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:14px; color:#272727; font-weight:300;} .type_grade .ex_tab .year_tab li.on a{color:#fff; border-radius:10px; background:#0075bc; box-shadow:0 0 5px rgba(0,0,0,0.5);} .type_grade .ex_tab .year_tab li.on a span{font-weight:800;} .type_grade .ex_tab .year_tab li:hover a{color:#fff; border-radius:10px; background:#0075bc; box-shadow:0 0 5px rgba(0,0,0,0.5); transition:0.2s; /* text-decoration:underline; text-underline-offset:4px; */} .type_grade .ex_tab .year_tab li:hover a span{font-weight:800;} .type_grade .ex_tab .ex{display:flex; align-items:center;} .type_grade .ex_tab .ex span{font-size:12px; color:#000; font-weight:600; display:flex; align-items:center;} .type_grade .ex_tab .ex span + span{margin-left:15px;} .type_grade .ex_tab .ex span em{margin-right:4px; display:inline-block;; text-align:center; line-height:20px; width:21px; height:21px; border-radius:21px; font-size:14px; color:#fff; font-weight:800; font-family:'arial'} .type_grade .ex_tab .ex span.ex_a em{background:#f1244b;} .type_grade .ex_tab .ex span.ex_b em{background:#219705;} .type_grade .ex_tab .ex span.ex_c em{background:#00a4f0;} .type_grade .ex_tab .ex span.ex_d em{background:#a20ef6;} .type_grade .result_wrap.pc{} .type_grade .result_wrap.mb{display:none;} .type_grade .tblW{position:relative; border-top:1px solid #000;} .type_grade .tblW tr.detail{display:none;} .type_grade .tblW tr.detail.open{display:table-row;} .type_grade .tblW tr.detail td{padding:0;} .type_grade .tblW th{height:50px; font-size:13px; color:#000000; background:#f8f8f8; line-height:1.3; border-bottom:1px solid #d2d2d2; border-left:1px solid #d2d2d2;} .type_grade .tblW td{height:55px; padding:10px; text-align:center; font-size:13px; color:#000; line-height:1.3; border-bottom:1px solid #d2d2d2; border-left:1px solid #d2d2d2; word-break:break-word; overflow:hidden;} .type_grade .tblW th:nth-child(6), .type_grade .tblW td:nth-child(6), .type_grade .tblW:not(.type02) th:nth-child(7){border-left:1px solid #000;} .type_grade .tblW:not(.type02) td:nth-child(7){border-left:1px solid #000;} .type_grade .tblW th:first-child, .type_grade .tblW td:first-child{border-left:0;} .type_grade .tblW td .label{display:inline-flex; justify-content:center; align-items:center; width:30px; height:30px; border-radius:30px; font-size:18px; color:#ffffff; font-weight:800; font-family:'arial'} .type_grade .tblW td .label.label_a{background:#f1244b;} .type_grade .tblW td .label.label_b{background:#219705;} .type_grade .tblW td .label.label_c{background:#00a4f0;} .type_grade .tblW td .label.label_d{background:#a20ef6;} .type_grade .tblW td .ico{display:block; margin:0 auto; width:47px; height:100%; font-size:0;} .type_grade .tblW td .ico.ico_a{background:url("../csapp/img/gradeA.png")no-repeat center; background-size:contain;} .type_grade .tblW td .ico.ico_b{background:url("../csapp/img/gradeB.png")no-repeat center; background-size:contain;} .type_grade .tblW td .ico.ico_c{background:url("../csapp/img/gradeC.png")no-repeat center; background-size:contain;} .type_grade .tblW td .ico.ico_d{background:url("../csapp/img/gradeD.png")no-repeat center; background-size:contain;} .type_grade .tblW td .btn_go{display:inline-flex; align-items:center; justify-content:center; padding:0 11px 0 14px; height:24px; line-height:23px; font-size:12px; color:#000; border-radius:24px; border:1px solid #000000;} .type_grade .tblW td .btn_go:after{content:''; display:inline-block; margin-left:6px; width:7px; height:100%; background:url("../csapp/img/btn_go.png")no-repeat center; background-size:100% auto;} .type_grade .tblW td .btn_go:hover{background:#4f4f4f; color:#fff; font-weight:bold; text-decoration:underline; text-underline-offset:2px; transition:0.2s;} .type_grade .tblW td .btn_go:hover:after{background:url("../csapp/img/btn_go_on.png")no-repeat center;} .type_grade .tblW td .pass_spot_wrap{position:relative; width:calc(100% - 50px); margin:0 auto; padding:38px 0 10px;} .type_grade .tblW td .pass_spot_wrap .pass_bar{position:relative; height:10px; background:#dfdfdf;} .type_grade .tblW td .pass_spot_wrap .range{position:absolute; height:100%; background:#f1244b;} .type_grade .tblW td .pass_spot_wrap .num{position:absolute; left:50%; transform:translateX(-50%); bottom:-16px; display:inline-block; font-size:12px; color:#000000; font-weight:400;} .type_grade .tblW td .pass_spot_wrap .num.average{bottom:13px;} .type_grade .tblW td .pass_spot_wrap .num.min{left:0; transform:translateX(-50%);} .type_grade .tblW td .pass_spot_wrap .num.max{left:100%; transform:translateX(-50%);} .type_grade .tblW td .pass_spot_wrap .min_val, .type_grade .tblW td .pass_spot_wrap .max_val{position:absolute; transform:translateX(-50%); top:30px; font-size:0;} .type_grade .tblW td .pass_spot_wrap .my_spot{position:absolute; top:0; width:40px; height:100%; margin-left:-20px;} .type_grade .tblW td .pass_spot_wrap .my_spot span{position:absolute; top:-5px; left:50%; transform:translateX(-50%); display:inline-block; padding:0 7px 0 6px; height:18px; line-height:17px; background:#fff; border-radius:6px; font-size:12px; letter-spacing:-1px; font-weight:bold; z-index:10;} /* .type_grade .tblW td .pass_spot_wrap .my_spot span:after{content:''; position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); display:block; width:10px; height:7px;} */ .type_grade .tblW td .pass_spot_wrap .my_spot:before{content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1px; height:1000px; z-index:1;} .type_grade .tblW td .pass_spot_wrap.red .range{background:#f1244b;} .type_grade .tblW td .pass_spot_wrap.green .range{background:#219705;} .type_grade .tblW td .pass_spot_wrap.blue .range{background:#00a4f0;} .type_grade .tblW td .pass_spot_wrap.purple .range{background:#a20ef6;} /* 주석 */ .type_grade .tblW td .pass_spot_wrap .my_spot span{color:#f1244b; border:1px solid #f1244b; box-shadow:0 0 5px rgba(241,36,75,0.5);} .type_grade .tblW td .pass_spot_wrap .my_spot span:after{content:''; display:block; position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%); width:0; border-color:#fff transparent; border-style:solid; border-width: 6px 5px 0 5.5px; z-index:1;} .type_grade .tblW td .pass_spot_wrap .my_spot span:before{content:''; display:block; position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%); width:0; border-color:#f1244b transparent; border-style:solid; border-width:6px 5px 0 5.5px; z-index:0;} .type_grade .tblW td .pass_spot_wrap.red .my_spot span:before{border-color:#f1244b transparent;} .type_grade .tblW td .pass_spot_wrap.green .my_spot span:before{border-color:#219705 transparent;} .type_grade .tblW td .pass_spot_wrap.blue .my_spot span:before{border-color:#00a4f0 transparent;} .type_grade .tblW td .pass_spot_wrap.purple .my_spot span:before{border-color:#a20ef6 transparent;} .type_grade .tblW td .pass_spot_wrap.green .my_spot span{color:#219705; border:1px solid #219705; box-shadow:0 0 5px rgba(39,179,6,0.5);} .type_grade .tblW td .pass_spot_wrap.blue .my_spot span{color:#00a4f0; border:1px solid #00a4f0; box-shadow:0 0 5px rgba(0,164,240,0.5);} .type_grade .tblW td .pass_spot_wrap.purple .my_spot span{color:#a20ef6; border:1px solid #a20ef6; box-shadow:0 0 5px rgba(162,14,246,0.5);} .type_grade .tblW td .pass_spot_wrap.red .my_spot span:after{background:url("../csapp/img/tri_red.png")no-repeat; background-size:contain;} .type_grade .tblW td .pass_spot_wrap.green .my_spot span:after{background:url("../csapp/img/tri_green.png")no-repeat; background-size:contain;} .type_grade .tblW td .pass_spot_wrap.blue .my_spot span:after{background:url("../csapp/img/tri_blue.png")no-repeat; background-size:contain;} .type_grade .tblW td .pass_spot_wrap.purple .my_spot span:after{background:url("../csapp/img/tri_purple.png")no-repeat; background-size:contain;} .type_grade .tblW td .pass_spot_wrap.red .my_spot:before{background:#f1244b;} .type_grade .tblW td .pass_spot_wrap.green .my_spot:before{background:#219705;} .type_grade .tblW td .pass_spot_wrap.blue .my_spot:before{background:#00a4f0;} .type_grade .tblW td .pass_spot_wrap.purple .my_spot:before{background:#a20ef6;} /* 주석 */ .my_grade_detail_wrap{position:relative; width:100%; overflow-x:auto; box-shadow:0 0 18px rgba(0,0,0,0.1);} .my_grade_detail_wrap:hover .my_grade_detail{box-shadow:0 0 0 1px #656565 inset;} .my_grade_detail_wrap .btn_close{position:absolute; top:30px; right:26px; font-size:0; width:26px; height:14px; background:url("../csapp/img/arrow_close.png")no-repeat center; background-size:contain;} .my_grade_detail{padding:50px 0; display:flex; background:#fff;} .my_grade_detail > div + div{border-left:1px dashed #cccccc;} .my_grade_detail .grade_box{position:relative; padding:0 55px 15px 55px; display:flex; align-items:center; align-content:center; flex-wrap:wrap;} .my_grade_detail .grade_box .tit{position:absolute; top:105px; left:50%; transform:translateX(-50%); display:block; font-size:17px; color:#000000; font-family:'EsaManru',sans-serif; font-weight:300;} .my_grade_detail .grade_box .grade_board{position:relative; width:180px; height:90px;} .my_grade_detail .grade_box .grade_board .in{position:relative; display:block; width:180px; height:90px; overflow:hidden;} .my_grade_detail .grade_box .grade_board .my_grade{position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:85px; height:45px; border-radius:45px 45px 0 0; border:5px solid #fff; border-bottom:0; background:#ebebeb; z-index:10;} .my_grade_detail .grade_box .grade_board .my_grade span{position:absolute; bottom:4px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; height:20px; padding:0 3px; font-size:14px; color:#fff; font-weight:900; border-top:10px solid #3d3f42; border-bottom:10px solid #656d78;} .my_grade_detail .grade_box .grade_board .arrow_wrap{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:145px; height:145px; margin-top:43px;} .my_grade_detail .grade_box .grade_board .arrow{position:absolute; width:100%; height:100%; display:flex; align-items:center; justify-content:center; transform:rotateZ(-90deg);} .my_grade_detail .grade_box .grade_board .arw{position:absolute; bottom:73px; transform-origin:bottom; width:21px; height:63px; background:url("../csapp/img/grade_arrow_1.png")no-repeat;} /* .my_grade_detail .grade_box .grade_board.red{background:url("../csapp/img/grade_board_red.png")no-repeat center;} .my_grade_detail .grade_box .grade_board.green{background:url("../csapp/img/grade_board_green.png")no-repeat center;} .my_grade_detail .grade_box .grade_board.blue{background:url("../csapp/img/grade_board_blue.png")no-repeat center;} .my_grade_detail .grade_box .grade_board.purple{background:url("../csapp/img/grade_board_purple.png")no-repeat center;} */ .my_grade_detail .average_box{display:flex; align-items:center; padding:0 50px; flex:none;} .my_grade_detail .average_box ul{display:flex; flex-wrap:wrap;} .my_grade_detail .average_box ul:after{display:none;} .my_grade_detail .average_box ul li{text-align:center;} .my_grade_detail .average_box ul li + li{margin-left:40px;} .my_grade_detail .average_box ul li span{width:65px; height:65px; display:inline-block; line-height:65px; text-align:center; font-size:16px; color:#000000; font-weight:800; border-radius:50%; border:1px solid #d2d2d2; background:#fff} .my_grade_detail .average_box ul li span.red{border:2px solid #f1244b;} .my_grade_detail .average_box ul li span.green{border:2px solid #219705;} .my_grade_detail .average_box ul li span.blue{border:2px solid #00a4f0;} .my_grade_detail .average_box ul li span.purple{border:2px solid #a20ef6;} .my_grade_detail .average_box ul li p{margin-top:12px; display:block; font-size:14px; font-weight:300; line-height:1.3;} .my_grade_detail .average_box ul li strong{font-weight:800;} .my_grade_detail .info_box{width:100%; display:flex; align-items:center; padding:0 60px;} .my_grade_detail .info_box ul{width:100%; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 0;} .my_grade_detail .info_box ul:after{display:none;} .my_grade_detail .info_box ul li{position:relative; width:48%; text-align:left; padding-left:14px; font-size:13px; line-height:1.2;} .my_grade_detail .info_box ul li:before{content:''; position:absolute; top:8px; left:0; width:2px; height:2px; background:#000; border-radius:2px;} .my_grade_detail .info_box ul li span{font-weight:600;} .my_grade_detail .info_box ul li em{font-weight:300;} .my_grade_detail .info_box ul li strong{font-weight:800; font-size:15px;} .my_grade_detail.type02 .grade_box{padding:0 30px;} .my_grade_detail.type02 .average_box{padding:0 35px;} .my_grade_detail.type02 .average_box ul li + li{margin-left:24px;} .my_grade_detail.type02 .average_box ul li strong{display:block;} .my_grade_detail.type02 .info_box{padding:0 35px;} .type_grade .tblW.type02 th:nth-child(9), .type_grade .tblW.type02 td:nth-child(9){border-left:1px solid #000;} .type_grade .tblW tr:not(.detatil):hover td{background:#f8f8f8;} .select_type_list{width:100%; position:relative; display:inline-block; vertical-align:top; z-index:10;} .select_type_list + .select_type_list{margin-top:10px;} .select_type_list button{position:relative; display:inline-block; width:100%; height:40px; line-height:40px; padding:0 40px 0 25px; border:1px solid #383838; border-radius:10px; font-size:14px; text-align:left; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space: nowrap; color:#000;} .select_type_list button:after{content:''; position:absolute; top:0; right:18px; display:block; width:20px; height:100%; background:url("../csapp/img/select.png") no-repeat center; background-size:100% auto;} .select_type_list ul{display:none; position:absolute; top:100%; left:0; width:100%; max-height:246px; overflow:auto; overflow-x:hidden; box-sizing:border-box; margin-top:-1px; border:1px solid #000; border-radius:0 0 10px 10px; border-top:0; background:#fff; z-index:998;} .select_type_list ul li{border-top:1px solid #d3d3d3;} .select_type_list ul li a{display:flex; align-items:center; min-height:40px; padding:10px 0 10px 25px; font-size:14px; line-height:1.2; text-align:left; background:#f9f9f9; word-break:break-all;} .select_type_list ul li a:hover{text-decoration:underline; text-underline-offset:3px; font-weight:600; background:#fff} .select_type_list.open{z-index:999;} .select_type_list.open button{border-color:#000; border-radius:10px 10px 0 0; box-shadow:0 -3px 5px rgba(0,0,0,0.3);} .select_type_list.open button:after{transform:rotate(180deg); transition:0.2s;} .select_type_list.open ul{display:block; box-shadow:0 3px 5px rgba(0,0,0,0.3);} /* 힉과 상세보기 */ .major_view .cont{margin-top:45px;} .major_view .board{padding:40px 30px; background:#fff; border-radius:10px; border:1px solid #d5d5d5;} .major_view .board .board_con{overflow:hidden;} .major_view .major_tit{position:relative; min-width:100%; display:flex; align-items:center; overflow-x:auto;} .major_view button.admission{flex:none; margin:0; text-align:left; font-size:20px; color:#272727; display:flex; align-items:center; word-break:break-all; font-family:'EsaManru',sans-serif; font-weight:300;} .major_view button.admission:before{content:''; margin-right:20px; display:block; flex:none; width:16px; height:15px; background:url("../csapp/img/chk_red.png")no-repeat center; background-size:100% auto;} .major_view button.admission:after{content:''; margin-left:22px; display:block; width:24px; height:13px; flex:none; background:url("../csapp/img/arrow_open2.png")no-repeat center; background-size:100% auto;} .major_view .select_layer{display:none; position:absolute; top:1px; left:0; width:100%; max-width:280px;} .major_view .select_layer button{position:absolute; right:15px; top:0; transform:rotate(180deg); display:block; width:24px; height:36px; background:url("../csapp/img/arrow_open2.png")no-repeat center; background-size:100% auto; font-size:0;} .major_view .select_layer ul{width:100%; max-height:330px; overflow:auto; overflow-x:hidden; box-sizing:border-box; margin-top:-1px; border:1px solid #000; border-radius:10px; background:#fff; z-index:998;} .major_view .select_layer ul li{border-top:1px solid #d3d3d3;} .major_view .select_layer ul li a{display:flex; align-items:center; min-height:40px; padding:5px 40px 5px 25px; font-size:14px; line-height:1.3; text-align:left; background:#f9f9f9; word-break:break-all;} .major_view .select_layer ul li a:hover{text-decoration:underline; text-underline-offset:3px; font-weight:600; background:#fff} .major_view .select_layer.open{display:block; z-index:999;} .major_view .select_layer.open{box-shadow:0 3px 5px rgba(0,0,0,0.3);} .major_view .major_tit .major{flex:none; position:relative; display:inline-block; margin-left:52px; font-size:22px; color:#0075bc; font-weight:500; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; word-break:break-all; line-height:1.2; font-family:'EsaManru',sans-serif; font-weight:300;} .major_view .major_tit .major:before{content:''; position:absolute; top:50%; left:-26px; transform:translateY(-50%); display:block; width:1px; height:22px; background:#d1d1d1;} .major_view .major_in{max-width:880px; width:100%; margin:60px auto 0;} .major_view .major_menu{display:flex; flex-wrap:wrap; gap:0 10px; justify-content:space-between;} .major_view .major_menu li{width:calc(100%/4 - 30px/4); height:62px;} .major_view .major_menu li a{display:block; width:100%; height:100%; display:flex; align-items:center; align-content:center; border-radius:10px;} .major_view .major_menu li a:before{content:''; width:70px; height:100%; line-height:70px;} .major_view .major_menu li a span{font-size:15px; color:#000; font-weight:600;} .major_view .major_menu li a small{margin-left:8px; font-size:10px; color:#b5b5b5;} .major_view .major_menu li.menu01 a{border:1px solid #369c69;} .major_view .major_menu li.menu01 a:before{background:url("../csapp/img/major_menu01.png")no-repeat center;} .major_view .major_menu li.menu02 a{border:1px solid #40b5c8;} .major_view .major_menu li.menu02 a:before{background:url("../csapp/img/major_menu02.png")no-repeat center;} .major_view .major_menu li.menu03 a{border:1px solid #c291cd;} .major_view .major_menu li.menu03 a:before{background:url("../csapp/img/major_menu03.png")no-repeat center;} .major_view .major_menu li.menu04 a{border:1px solid #f4c753;} .major_view .major_menu li.menu04 a:before{background:url("../csapp/img/major_menu04.png")no-repeat center;} .major_view .major_menu li.menu01:hover a{box-shadow:0 0 7px rgba(54,156,105,0.5); transition:0.2s;} .major_view .major_menu li.menu02:hover a{box-shadow:0 0 7px rgba(63,181,200,0.5); transition:0.2s;} .major_view .major_menu li.menu03:hover a{box-shadow:0 0 7px rgba(193,143,204,0.5); transition:0.2s;} .major_view .major_menu li.menu04:hover a{box-shadow:0 0 7px rgba(244,198,80,0.5); transition:0.2s;} .major_view .major_menu li:hover a span{text-decoration:underline; text-underline-offset:4px;} .major_view .year_tab{margin:60px 0 0; padding-bottom:60px; border-bottom:2px solid #000; display:flex; justify-content:center; gap:0 65px;} .major_view .year_tab:after{display:none;} .major_view .year_tab li a{position:relative; display:inline-block; padding:0 2px; font-size:17px; font-weight:300; z-index:2;} .major_view .year_tab li.on a, .major_view .year_tab li:hover a{font-weight:600;} .major_view .year_tab li.on a:before, .major_view .year_tab li:hover a:before{content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:100%; height:7px; background:#c5eeff; z-index:-1;} .major_result{padding-top:25px;} .major_result > .txt{font-size:15px; color:#000; padding:0 24px;} .major_result .my_result{margin-top:45px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px;} .major_result .box{height:240px; border-radius:20px; border:1px solid #eaeaea;} .major_result .my_grade{width:240px; padding:24px 20px 0; text-align:center;} .major_result .my_grade .tit{margin:0 auto; display:block; width:120px; height:36px; line-height:36px; text-align:center; font-size:17px; color:#fff; border-radius:30px; background:#219705;} .major_result .my_grade .grade{ display:block; font-size:30px; color:#000;} .major_result .my_grade .icon{margin-top:30px; width:100%; height:55px; margin-bottom:32px; font-size:46px; font-weight:600; text-align:center; color:#000; display:block;} .major_result .my_grade.red{border:1px solid #f1244b;} .major_result .my_grade.red .tit{background:#f1244b;} .major_result .my_grade.red .icon{background:url("../csapp/img/gradeA.png")no-repeat center; background-size:auto 100%;} .major_result .my_grade.green{border:1px solid #219705;} .major_result .my_grade.green .tit{background:#219705;} .major_result .my_grade.green .icon{background:url("../csapp/img/gradeB.png")no-repeat center; background-size:auto 100%;} .major_result .my_grade.blue{border:1px solid #00a4f0;} .major_result .my_grade.blue .tit{background:#00a4f0;} .major_result .my_grade.blue .icon{background:url("../csapp/img/gradeC.png")no-repeat center; background-size:auto 100%;} .major_result .my_grade.purple{border:1px solid #a20ef6;} .major_result .my_grade.purple .tit{background:#a20ef6;} .major_result .my_grade.purple .icon{background:url("../csapp/img/gradeD.png")no-repeat center; background-size:auto 100%;} .major_result .my_grade.type02 .tit{background:#fff; border:1px solid #d2d2d2;} .major_result .my_grade.type02.red .tit{color:#f1244b;} .major_result .my_grade.type02.green .tit{color:#219705;} .major_result .my_grade.type02.blue .tit{color:#00a4f0;} .major_result .my_grade.type02.purple .tit{color:#a20ef6;} .major_result .my_grade.type02 .grade{margin-top:32px;} .major_result .my_grade.type02 .grade:before{display:none;} .major_result .my_grade.type02 .grade span{display:flex; align-items:center; justify-content:center; margin:0 auto 26px; width:60px; height:60px; border-radius:60px; font-size:36px; color:#fff; background:#f1244b;} .major_result .my_grade.type02 .grade strong{} .major_result .my_grade.type03 .grade{margin-top:60px; font-size:40px;} .major_result .my_grade.type03 .grade span{position:relative; display:inline-block; padding:0 16px; line-height:1;} /* .major_result .my_grade.type03 .grade span:before{content:''; position:absolute; bottom:-6px; left:50%; transform:translateX(-50%); width:100%; height:20px; opacity:0.25;} .major_result .my_grade.type03.red .grade span:before{background-color:#f1244b} .major_result .my_grade.type03.green .grade span:before{background-color:#219705} .major_result .my_grade.type03.blue .grade span:before{background-color:#00a4f0} .major_result .my_grade.type03.purple .grade span:before{background-color:#a20ef6}*/ .major_result .my_grade.type03 .grade span:before {content: '';position: absolute;bottom: -6px;left: 50%;transform: translateX(-50%);width: 100%;height: 20px;opacity: 0.25;background-color: var(--grade-color);} .major_result .my_grade.type03.red .grade span:before{background-color: var(--grade-color);} .major_result .my_grade.type03.green .grade span:before{background-color: var(--grade-color);} .major_result .my_grade.type03.blue .grade span:before{background-color: var(--grade-color);} .major_result .my_grade.type03.purple .grade span:before{background-color: var(--grade-color);} .major_result .my_grade.type03 .grade:before{display:none;} .major_result .graph_box{width:calc(100% - 260px); padding:0 40px; text-align:center;} .major_result .graph_box .tit{display:inline-flex; align-items:center; justify-content:center; margin:20px auto 30px; width:auto; padding:0 25px; height:35px; text-align:center; font-size:14px; font-weight:600; color:#4e4e4e; border-radius:35px; border:1px solid #acacac;} .major_result .graph_box .pass_spot_wrap{position:relative; padding:68px 0 0; height:68px; width:100%; max-width:550px; margin:0 auto;} .major_result .graph_box .pass_spot_wrap .my_spot{position:absolute; top:0; width:40px; height:100%; margin-left:-20px;} .major_result .graph_box .pass_spot_wrap .my_spot span{position:absolute; top:0; left:50%; transform:translateX(-50%); display:inline-block; padding:0 6px; height:22px; line-height:21px; background:#fff; border-radius:6px; font-size:13px; font-weight:bold; z-index:10;} .major_result .graph_box .pass_spot_wrap .my_spot:before{content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:1px; height:100%; z-index:1;} .major_result .graph_box .pass_spot_wrap .pass_bar{position:relative; display:block; width:100%; height:20px; border-radius:20px; background:#dfdfdf; z-index:4;} .major_result .graph_box .pass_spot_wrap .pass_bar:not(span){overflow:hidden;} .major_result .graph_box .pass_spot_wrap .range{position:absolute; width:100px; height:100%; left:20%; background:#2c9a08;} .major_result .graph_box .pass_spot_wrap > span{position:absolute; top:32px; display:block; z-index:5} .major_result .graph_box .pass_spot_wrap span.min{left:0;} .major_result .graph_box .pass_spot_wrap span.max{left:100%;} .major_result .graph_box .pass_spot_wrap .min_val, .major_result .graph_box .pass_spot_wrap .max_val{position:absolute; transform:translateX(-50%); top:30px; font-size:0;} .major_result .graph_box .pass_spot_wrap .min_val{left:0;} .major_result .graph_box .pass_spot_wrap .max_val{left:100%;} .major_result .graph_box .pass_spot_wrap .num{position:absolute; left:50%; transform:translateX(-50%); top:41px; font-size:12px; color:#000000; text-align:center;} .major_result .graph_box .pass_spot_wrap .txt{position:absolute; left:50%; transform:translateX(-50%); top:68px; font-size:12px; color:#000000;} .major_result .graph_box .pass_spot_wrap .average .num{top:21px;} .major_result .graph_box .pass_spot_wrap .average .txt{top:6px;} .major_result .graph_box .pass_spot_wrap .min .num{transform:translateX(-100%); margin-left:-5px;} .major_result .graph_box .pass_spot_wrap .min .txt{transform:translateX(-100%); margin-left:-2px;} .major_result .graph_box .pass_spot_wrap .max .num{transform:translateX(0);margin-left:5px;} .major_result .graph_box .pass_spot_wrap .max .txt{transform:translateX(0);margin-left:2px;} .major_result .graph_box .pass_spot_wrap.red .range{background:linear-gradient(90deg, rgba(241,36,75,1) 0%, rgba(255,204,68,1) 50%, rgba(241,36,75,1) 100%);} .major_result .graph_box .pass_spot_wrap.green .range{background:linear-gradient(90deg, rgba(33,151,5,1) 0%, rgba(255,204,68,1) 50%, rgba(33,151,5,1) 100%);} .major_result .graph_box .pass_spot_wrap.blue .range{background:linear-gradient(90deg, rgba(0,164,240,1) 0%, rgba(255,204,68,1) 50%, rgba(0,164,240,1) 100%);} .major_result .graph_box .pass_spot_wrap.purple .range{background:linear-gradient(90deg, rgba(162,14,246,1) 0%, rgba(255,204,68,1) 50%, rgba(162,14,246,1) 100%);} /* 주석 */ .major_result .graph_box .pass_spot_wrap.red .my_spot span{color:#f1244b; border:1px solid #f1244b; box-shadow:0 0 5px rgba(241,36,75,0.5);} .major_result .graph_box .pass_spot_wrap.red .my_spot span:after{background:url("../csapp/img/tri_red.png")no-repeat; background-size:contain;} .major_result .graph_box .pass_spot_wrap.green .my_spot span{color:#219705; border:1px solid #219705; box-shadow:0 0 5px rgba(39,179,6,0.5);} .major_result .graph_box .pass_spot_wrap.green .my_spot span:after{background:url("../csapp/img/tri_green.png")no-repeat; background-size:contain;} .major_result .graph_box .pass_spot_wrap.blue .my_spot span{color:#00a4f0; border:1px solid #00a4f0; box-shadow:0 0 5px rgba(0,164,240,0.5);} .major_result .graph_box .pass_spot_wrap.blue .my_spot span:after{background:url("../csapp/img/tri_blue.png")no-repeat; background-size:contain;} .major_result .graph_box .pass_spot_wrap.purple .my_spot span{color:#a20ef6; border:1px solid #a20ef6; box-shadow:0 0 5px rgba(162,14,246,0.5);} .major_result .graph_box .pass_spot_wrap.purple .my_spot span:after{background:url("../csapp/img/tri_purple.png")no-repeat; background-size:contain;} .major_result .graph_box .pass_spot_wrap.red .my_spot:before{border-left:1px dashed #f1244b;} .major_result .graph_box .pass_spot_wrap.green .my_spot:before{border-left:1px dashed #219705;} .major_result .graph_box .pass_spot_wrap.blue .my_spot:before{border-left:1px dashed #00a4f0;} .major_result .graph_box .pass_spot_wrap.purple .my_spot:before{border-left:1px dashed #a20ef6;} /* .major_result .graph_box .pass_spot_wrap .my_spot span{color:#f1244b; border:1px solid #f1244b; box-shadow:0 0 5px rgba(241,36,75,0.5);} */ .major_result .graph_box .pass_spot_wrap .my_spot span:after{content:''; display:block; position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%); width:0; border-color:#fff transparent; border-style:solid; border-width: 6px 5px 0 5.5px; z-index:1;} /* .major_result .graph_box .pass_spot_wrap .my_spot span:before{content:''; display:block; position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%); width:0; border-color:#f1244b transparent; border-style:solid; border-width:6px 5px 0 5.5px; z-index:0;} */ .major_result .graph_box .pass_spot_wrap.red .my_spot span:before{border-color:#f1244b transparent;} .major_result .graph_box .pass_spot_wrap.green .my_spot span:before{border-color:#219705 transparent;} .major_result .graph_box .pass_spot_wrap.blue .my_spot span:before{border-color:#00a4f0 transparent;} .major_result .graph_box .pass_spot_wrap.purple .my_spot span:before{border-color:#a20ef6 transparent;} .major_result .graph_box .pass_spot_wrap.green .my_spot span{color:#219705; border:1px solid #219705; box-shadow:0 0 5px rgba(39,179,6,0.5);} .major_result .graph_box .pass_spot_wrap.blue .my_spot span{color:#00a4f0; border:1px solid #00a4f0; box-shadow:0 0 5px rgba(0,164,240,0.5);} .major_result .graph_box .pass_spot_wrap.purple .my_spot span{color:#a20ef6; border:1px solid #a20ef6; box-shadow:0 0 5px rgba(162,14,246,0.5);} /* 주석 */ .major_result .menu_box{width:240px; border:0;} .major_result .menu_box ul:after{display:none;} .major_result .menu_box ul{height:100%; border:0; display:flex; flex-wrap:wrap; gap:10px;} .major_result .menu_box li{width:calc(100%/2 - 10px/2); height:calc(100% - 98px); border:1px solid #e7e7e7; border-radius:20px;} .major_result .menu_box li > a{display:block; width:100%; height:100%; text-align:center; font-size:18px; color:#000; font-family:'EsaManru',sans-serif; font-weight:300;} .major_result .menu_box li:hover > a span{text-decoration:underline; text-underline-offset:4px;} .major_result .menu_box li:hover > a small{text-decoration:none;} .major_result .menu_box li.btn_other_admission{position:relative; width:100%; height:88px;} .major_result .menu_box li.btn_other_admission > a{padding:0 30px 0 34px; display:flex; align-items:center; justify-content:center; justify-content:space-between;} .major_result .menu_box li.btn_other_admission > a:after{content:''; width:32px; height:32px; display:block; background:url("../csapp/img/more.png")no-repeat;} .major_result .menu_box li.menu a{padding-top:30px;} .major_result .menu_box li.menu a small{display:block; font-size:12px; color:#b5b5b5; font-family:'NanumSquareNeo', sans-serif;} .major_result .menu_box li.menu01 a:before{content:''; width:100%; height:47px; margin-bottom:23px; display:block; background:url("../csapp/img/compare.png")no-repeat center;} .major_result .menu_box li.menu02 a:before{content:''; width:100%; height:47px; margin-bottom:23px; display:block; background:url("../csapp/img/chet.png")no-repeat center;} .major_result .other_admission{display:none; position:absolute; left:0; top:0; width:330px; padding:0 20px 25px; background:#fff; border-radius:20px; border:1px solid #d2d2d2; z-index:990;} .major_result .other_admission .btn_close{position:absolute; right:20px; top:27px; display:block; width:32px; height:32px; background:url("../csapp/img/close.png")no-repeat center; background-size:100% auto;} .major_result .other_admission p.tit{margin-bottom:25px; padding:0 12px; height:80px; line-height:80px; font-size:18px; border-bottom:1px solid #5e5e5e; font-family:'EsaManru',sans-serif; font-weight:300;} .major_result .other_admission .admission_cont{height:400px; overflow-y:auto;} .major_result .other_admission .admission_cont::-webkit-scrollbar{width:14px;} .major_result .other_admission .admission_cont::-webkit-scrollbar-thumb{background:#757575;} .major_result .other_admission .admission_cont::-webkit-scrollbar-track{background:#d9d9d9;} .major_result .other_admission .admission_cont dl{position:relative; padding:5px 5px 20px 0;} .major_result .other_admission .admission_cont dl + dl{padding-top:23px;} .major_result .other_admission .admission_cont dl + dl:before{content:''; position:absolute; top:0; left:0; width:calc(100% - 12px); height:1px; border-top:1px dashed #d3d3d3;} .major_result .other_admission .admission_cont dl dt{margin-bottom:25px; font-size:17px; font-weight:600;} .major_result .other_admission .admission_cont dl dd a{position:relative; display:block; padding-left:10px; font-size:14px; color:#000000; line-height:1.4;} .major_result .other_admission .admission_cont dl dd a:before{content:'-'; position:absolute; top:0px; left:0;} .major_result .other_admission .admission_cont dl dd + dd{margin-top:10px;} .major_result .other_admission .admission_cont dl dd:hover a{color:#e7434a; font-weight:800; text-decoration:underline; text-underline-offset:3px;} .major_result .my_result.type02, .major_result .my_result.type03{justify-content:end;} .major_result .my_result.type03 .menu_box li{width:100%} .major_result .my_result.type03 .menu_box li.menu a{padding-top:0; padding-left:55px; display:flex; align-items:center; text-align:left; line-height:1.1;} .major_result .my_result.type03 .menu_box li.menu a small{margin-top:5px;} .major_result .my_result.type03 .menu_box li.menu01 a:before{content:''; width:44px; height:100%; margin-bottom:0; margin-right:24px; background:url("../csapp/img/compare.png")no-repeat center; background-size:100% auto;} .major_result .my_result.type04{gap:15px;} .major_result .my_result.type04 .menu_box{width:100%; height:auto;} .major_result .my_result.type04 .menu_box ul{gap:15px;} .major_result .my_result.type04 .menu_box li{height:85px; width:calc((100% - 255px) / 2 - 15px / 2);} .major_result .my_result.type04 .menu_box li.btn_other_admission{width:240px; height:85px;} .major_result .my_result.type04 .menu_box li.menu a{padding-top:0; padding-left:60px; display:flex; align-items:center;} .major_result .my_result.type04 .menu_box li.menu a small{margin-left:12px} .major_result .my_result.type04 .menu_box li.menu01 a:before{content:''; width:44px; height:100%; margin-bottom:0; margin-right:24px; background:url("../csapp/img/compare.png")no-repeat center; background-size:100% auto;} .major_result .my_result.type04 .menu_box li.menu02 a:before{content:''; width:44px; height:100%; margin-bottom:0; margin-right:24px; background:url("../csapp/img/chet.png")no-repeat center; background-size:100% auto;} .major_result .my_result.type06{justify-content:end;} .major_result .my_result.type06 .menu_box li{width:100%} .major_result .my_result.type06 .menu_box li.menu a{padding-top:0; padding-left:55px; display:flex; align-items:center; text-align:left;} .major_result .my_result.type06 .menu_box li.menu a small{margin-top:5px;} .major_result .my_result.type06 .menu_box li.menu01 a:before{content:''; width:44px; height:100%; margin-bottom:0; margin-right:24px; background:url("../csapp/img/compare.png")no-repeat center; background-size:100% auto;} /* type01 */ .major_result .my_grade{order:1} .major_result .graph_box{order:2} .major_result .menu_box{order:3} .major_result .graph_box2{order:4} /* type02 type03 */ .major_result .my_result.type02 .menu_box{order:1} .major_result .my_result.type03 .menu_box{order:1} .major_result .my_result.type02 .graph_box{order:2} .major_result .my_result.type03 .graph_box{order:2} .major_result .my_result.type02 .graph_box2{order:3} .major_result .my_result.type03 .graph_box2{order:3} /* type04 type05 */ .major_result .my_result.type05 .menu_box{order:1} .major_result .my_result.type06 .menu_box{order:1} .major_result .my_result.type05 .graph_box{order:2} .major_result .my_result.type06 .graph_box{order:2} .chart_wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;} .chart_wrap .tit{padding:40px 0 30px; width:100%; text-align:center; font-size:18px; font-family:'EsaManru',sans-serif; font-weight:300;} .chart_wrap .chart_box{width:calc(100%/3 - 30px/3); padding:40px 40px 100px 35px; border-radius:10px; border:1px solid #e7e7e7} .chart_wrap .chart{position:relative; height:170px;} .chart .sort{position:absolute; bottom:-70px; left:50%; transform:translateX(-50%); text-align:center; display:flex; justify-content:center; gap:0 20px;} .chart .sort:after{display:none;} .chart .sort li{position:relative; display:flex; align-items:center; font-size:15px; color:#000; font-weight:bold;} .chart_type1 .col{position:relative; height:100%} .chart_type1 .col li{position:relative; height:28px; height:calc(100%/6);} .chart_type1 .col li:before{content:''; position:absolute; left:35px; top:0; display:block; width:calc(100% - 35px); height:1px; background:#d3d3d3; z-index:9} .chart_type1 .col li.zero{height:1px; z-index:12;} .chart_type1 .col li.zero:before{background:#d8d8d8;} .chart_type1 .col li .txt{position:absolute; left:0; top:-8px; display:block; width:35px; padding-right:10px; text-align:right; font-size:10px; color:#b2b2b2;} .chart_type1 .row{position:absolute; left:35px; bottom:0; width:calc(100% - 35px); height:100%; text-align:center; display:flex;} .chart_type1 .row li{position:relative; width:calc(100%/3);} .chart_type1 .row li .txt{position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); display:block; margin-top:10px; font-size:10px; color:#353535; } .chart_type1 .row li .bar{position:absolute; left:50%; bottom:0px; display:inline-block; width:12px; height:50%; z-index:10;} .chart_type1 .row li .bar.color1{margin-left:-14px; background:#ddf8ff; border:1px solid #42d6fa; border-bottom:0;} .chart_type1 .row li .bar.color2{margin-left:10px; background:#fef0ed; border:1px solid #f7735d; border-bottom:0;} .chart_type1 .row li .num{position:absolute; top:-20px; left:50%; transform:translateX(-50%); margin-left:-1px; font-size:10px; color:#000; text-align:center; font-weight:800; background:#fff;} .chart_type1 .row li:hover:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#f9f9f9;} .chart_type1 .row li:hover .txt{text-decoration:underline; text-underline-offset:3px; font-weight:900;} .chart_type1 .sort li:before{content:''; display:block; width:12px; height:12px; margin-right:8px;} .chart_type1 .sort li.color1:before{background:#ddf8ff; border:1px solid #42d6fa;} .chart_type1 .sort li.color2:before{background:#fef0ed; border:1px solid #f7735d;} .chart_type2 .col{position:relative; height:100%} .chart_type2 .col li{position:relative; height:calc(100%/5);} .chart_type2 .col li:before{content:''; position:absolute; left:35px; top:0; display:block; width:calc(100% - 35px); height:1px; background:#d3d3d3; z-index:9} .chart_type2 .col li.zero{height:1px; z-index:12;} .chart_type2 .col li.zero:before{background:#d8d8d8;} .chart_type2 .col li .txt{position:absolute; left:0; top:-8px; display:block; width:35px; padding-right:10px; text-align:right; font-size:10px; color:#b2b2b2;} .chart_type2 .row_wrap{position:absolute; left:35px; bottom:0; width:calc(100% - 35px); height:100%; text-align:center;} .chart_type2 .row_wrap canvas{position:absolute; top:0; left:0; z-index:10; height:100%; width:100%;} .chart_type2 .row{width:100%; height:100%;display:flex;} .chart_type2 .row li{position:relative; width:calc(100%/3);} .chart_type2 .row li .txt{position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); display:block; margin-top:10px; font-size:10px; color:#353535; } .chart_type2 .row li .bar{position:absolute; left:0; bottom:0; display:inline-block; width:100%; height:100px; z-index:10;} .chart_type2 .row li .bar:after{content:''; position:absolute; left:50%; top:-6px; transform:translateX(-50%); display:block; width:12px; height:12px; border-radius:50%; background:#e6d7ff; border:1px solid #7523fe;} .chart_type2 .row li .num{position:absolute; top:-25px; left:50%; transform:translateX(-50%); font-size:10px; color:#000; text-align:center; font-weight:800;} .chart_type2 .row li:hover:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#f9f9f9;} .chart_type2 .row li:hover .txt{text-decoration:underline; text-underline-offset:3px; font-weight:900;} .chart_type2 .sort li{padding-left:32px;} .chart_type2 .sort li:after{content:''; position:absolute; left:6px; top:50%; transform:translateY(-50%); display:block; width:12px; height:12px; border-radius:50%; background:#e6d7ff; border:1px solid #7523fe;} .chart_type2 .sort li:before{content:''; position:absolute; display:block; left:0; top:50%; transform:translateY(-50%); width:24px; height:1px; background:#7523fe;} .chart_type3 .col{position:relative; height:100%} .chart_type3 .col li{position:relative; height:calc(100%/5);} .chart_type3 .col li:before{content:''; position:absolute; left:35px; top:0; display:block; width:calc(100% - 35px); height:1px; background:#d3d3d3; z-index:9} .chart_type3 .col li.zero{height:1px; z-index:12;} .chart_type3 .col li.zero:before{background:#d8d8d8;} .chart_type3 .col li .txt{position:absolute; left:0; top:-8px; display:block; width:35px; padding-right:10px; text-align:right; font-size:10px; color:#b2b2b2;} .chart_type3 .row{position:absolute; left:35px; bottom:0; width:calc(100% - 35px); height:100%; text-align:center; display:flex;} .chart_type3 .row li{position:relative; width:calc(100%/3);} .chart_type3 .row li .txt{position:absolute; bottom:-24px; left:50%; transform:translateX(-50%); display:block; margin-top:10px; font-size:10px; color:#353535; } .chart_type3 .row li .bar{position:absolute; left:50%; bottom:0; display:inline-block; margin-left:-11px; width:22px; height:100px; background:#ddfff6; border:1px solid #24ddab; border-bottom:0; z-index:10;} .chart_type3 .row li .num{position:absolute; top:-20px; left:50%; transform:translateX(-50%); margin-left:-1px; font-size:10px; color:#000; text-align:center; font-weight:800; background:#fff;} .chart_type3 .row li:hover:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:#f9f9f9;} .chart_type3 .row li:hover .txt{text-decoration:underline; text-underline-offset:3px; font-weight:900;} .chart_type3 .sort li:before{content:''; display:block; width:12px; height:12px; margin-right:8px; background:#ddfff6; border:1px solid #24ddab;} .major_list{margin-top:30px;} .major_list .list .tit_list{position:relative; display:flex; align-items:center; height:60px; padding:0 25px; border-bottom:1px solid #000; cursor:pointer;} .major_list .list .tit_list:before{content:''; width:23px; height:60px; margin-right:18px; display:block; background:url("../csapp/img/add.png")no-repeat center; background-size:100% auto;} .major_list .list .tit_list:after{content:''; position:absolute; right:30px; top:50%; transform:translateY(-50%); width:24px; height:13px; background:url("../csapp/img/arrow_open2.png")no-repeat center;} .major_list .list .tit_list .tit{position:relative; display:inline-block; font-size:18px; font-family:'EsaManru',sans-serif; font-weight:300; z-index:1;} .major_list .list .tit_list .tit:before{content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:0; height:8px; background:#daf1ff; opacity:0; z-index:-1;} .major_list .list .list_con{display:none; height:0; padding:40px 64px; background:#fbfbfb; border-top:1px solid #d2d2d2; border-bottom:1px solid #d2d2d2;} .major_list .list .list_con dl + dl{margin-top:30px;} .major_list .list .list_con dl dt{margin-bottom:8px; font-size:16px; font-weight:600; line-height:1.3;} .major_list .list .list_con dl dd{font-size:14px; font-weight:300; line-height:1.3;} .major_list .list.on .tit_list{border-bottom:0; box-shadow:0 0 20px rgba(0,0,0,0.1)} .major_list .list.on .tit_list:after{transform:translateY(-50%) rotate(180deg); transition:0.2s;} .major_list .list.on .tit_list:before{background:url("../csapp/img/add_on.png")no-repeat center; background-size:100% auto; transition:0.2s;} .major_list .list.on .tit_list .tit:before{width:calc(100% + 4px); opacity:1; transition:0.2s} .major_list .list.on .list_con{display:block; height:auto; transition:0.2s} /* 라디오버튼 */ .rdo_wrap{display:flex;} .rdo1 input[type="radio"]{display:none;} .rdo1 input[type="radio"] + label{position:relative; display:block; padding-left:40px; font-size:16px; color:#000000; font-weight:300;} .rdo1 input[type="radio"] + label:before{content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:27px; height:27px; border-radius:50%; background:#e5e5e5; border:1px solid #d9d9d9;} .rdo1 input[type="radio"] + label:after{content:''; position:absolute; top:50%; left:8px; transform:translateY(-50%); width:11px; height:11px; border-radius:50%; background:#fff;} .rdo1 input[type="radio"]:checked + label{color:#0075bc; font-weight:600;} .rdo1 input[type="radio"]:checked + label:before{border:1px solid #2170bd; background:#2170bd;} /* 테이블 tbl_a */ .tbl_wrap{position:relative; z-index:100; width:100%; overflow:hidden; overflow-y:visible; overflow-x:auto;} .tbl_a{position:relative; border-top:1px solid #7e7e7e; /* overflow:hidden; */ min-width:600px;} .tbl_a.full{min-width:100%;} .tbl_a:has(.no_data){width:100%;} .tbl_a th{padding:0 10px; height:40px; font-size:13px; color:#000000; font-weight:400; background:#f8f8f8; border-right:1px solid #d2d2d2; border-bottom:1px solid #d2d2d2; word-break:break-all;} .tbl_a th:last-child{border-right:0;} .tbl_a td{padding:10px; font-size:13px; font-weight:400; border-left:1px solid #d2d2d2; border-bottom:1px solid #d2d2d2; word-break:break-all;} .tbl_a td:first-child{border-left:0;} .tbl_a td .chk{display:flex; justify-content:center;} .tbl_a td .chk input[type="checkbox"]{display:none;} .tbl_a td .chk input[type="checkbox"] + label{font-size:0; width:24px; height:18px; display:block; background:url("../csapp/img/chk2.png")no-repeat center left;} .tbl_a td .chk input[type="checkbox"]:checked + label{background:url("../csapp/img/chk2_on.png")no-repeat center left;} .tbl_a td .select button, .tbl_a td .select{width:100%; min-width:60px} .tbl_a td input[type="text"]{width:100%; min-width:50px; height:36px; border-radius:7px; border:1px solid #d3d3d3; text-align:center; font-size:13px; color:#000; font-weight:600;} .tbl_a td input[type="text"]:focus{border:1px solid #000; box-shadow:0 0 7px rgba(0,0,0,0.5)} .tbl_a td.no_data{padding:25px 0 30px; text-align:center;} .tbl_a td.no_data button{display:inline-block;} .tbl_a td.no_data p{margin-top:10px; display:block; font-size:15px; color:#000000;} /* 셀렉트01 */ .select_box{position:relative; display:inline-block; vertical-align:top; z-index:10;} .select_box button{position:relative; display:inline-block; width:100%; height:50px; line-height:50px; padding:0 60px 0 35px; border:1px solid #d3d3d3; border-radius:25px; font-size:16px; text-align:left; color:rgba(0,0,0,0.5); overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space: nowrap;} .select_box button:after{content:''; position:absolute; top:0; right:18px; display:block; width:24px; height:100%; background:url("../csapp/img/select.png") no-repeat center;} .select_box ul{display:none; position:absolute; top:100%; left:0; width:100%; max-height:246px; overflow:auto; overflow-x:hidden; box-sizing:border-box; margin-top:-1px; border:1px solid #000; border-radius:0 0 25px 25px; border-top:0; background:#fff; z-index:998;} .select_box ul li{border-top:1px solid #d3d3d3;} .select_box ul li strong{display:block; padding:15px 0 15px 35px;} .select_box ul li a{display:flex; align-items:center; min-height:48px; padding:12px 0 12px 35px; font-size:16px; text-align:left; background:#f9f9f9; line-height:1.2; word-break:break-all;} .select_box ul li a:hover{text-decoration:underline; text-underline-offset:3px; font-weight:600; background:#fff} .select_box.open{z-index:999;} .select_box.open button{border-color:#000; border-radius:25px 25px 0 0; box-shadow:0 -3px 5px rgba(0,0,0,0.3);} .select_box.open button:after{transform:rotate(180deg); transition:0.2s;} .select_box.open ul{display:block; box-shadow:0 3px 5px rgba(0,0,0,0.3);} /* 셀렉트02 */ .select_box_02{position:relative; display:inline-block; vertical-align:top; z-index:10;} .select_box_02 button{position:relative; display:inline-block; width:100%; height:36px; line-height:36px; box-sizing:border-box; padding:0 45px 0 15px; background:#fff; border:1px solid #d3d3d3; border-radius:7px; font-size:13px; text-align:left; color:rgba(0,0,0,0.5); overflow:hidden; white-space: nowrap; text-overflow:ellipsis; word-break:break-all;} .select_box_02 button:after{content:''; position:absolute; top:0; right:17px; display:block; width:15px; height:100%; background:url("../csapp/img/select2.png") no-repeat center;} .select_box_02 ul{display:none; position:absolute; top:100%; left:0; width:100%; max-height:156px; overflow:auto; overflow-x:hidden; box-sizing:border-box; margin-top:-1px; border:1px solid #000; border-radius:0 0 8px 8px; border-top:0; background:#fff; z-index:999;} .select_box_02 ul li{border-top:1px solid #d3d3d3;} .select_box_02 ul li a{display:flex; align-items:center; min-height:38px; padding:6px 0 6px 15px; font-size:14px; line-height:1.2; text-align:left; word-break:break-all; background:#f9f9f9;} .select_box_02 ul li a:hover{text-decoration:underline; text-underline-offset:3px; font-weight:600; background:#fff} .select_box_02.open{z-index:999;} .select_box_02.open button{border-color:#000; border-radius:8px 8px 0 0; box-shadow:0 -3px 5px rgba(0,0,0,0.3);} .select_box_02.open button:after{transform:rotate(180deg); transition:0.2s;} .select_box_02.open ul{display:block; box-shadow:0 3px 5px rgba(0,0,0,0.3);} /* 셀렉트03 */ .select_box_03{position:relative; display:inline-block; vertical-align:top; z-index:10;} .select_box_03 button{position:relative; display:inline-block; align-items:center; width:100%; height:50px; line-height:50px; box-sizing:border-box; padding:0 45px 0 20px; border:1px solid #d3d3d3; border-radius:7px; font-size:16px; text-align:left; color:rgba(0,0,0,0.5); overflow:hidden; white-space: nowrap; text-overflow:ellipsis; word-break:break-all;} .select_box_03 button:after{content:''; position:absolute; top:0; right:15px; display:block; width:24px; height:100%; background:url("../csapp/img/select.png") no-repeat center;} .select_box_03 ul{display:none; position:absolute; top:100%; left:0; width:100%; max-height:195px; overflow:auto; overflow-x:hidden; box-sizing:border-box; margin-top:-1px; border:1px solid #000; border-radius:0 0 8px 8px; border-top:0; background:#fff; z-index:999;} .select_box_03 ul li{border-top:1px solid #d3d3d3;} .select_box_03 ul li a{display:flex; align-items:center; min-height:48px; padding:12px 0 12px 20px; font-size:16px; line-height:1.2; word-break:break-all; text-align:left; background:#f9f9f9;} .select_box_03 ul li a:hover{text-decoration:underline; text-underline-offset:3px; font-weight:600; background:#fff} .select_box_03.open{z-index:999;} .select_box_03.open button{border-color:#000; border-radius:7px 7px 0 0; box-shadow:0 -3px 5px rgba(0,0,0,0.3);} .select_box_03.open button:after{transform:rotate(180deg); transition:0.2s;} .select_box_03.open ul{display:block; box-shadow:0 3px 5px rgba(0,0,0,0.3);} /* 버튼 */ .btn_wrap{margin-top:60px; display:flex; flex-wrap:wrap; justify-content:center;} .btn-l{display:block; max-width:300px; width:calc(100%/3 - 40px/3); height:60px; font-size:20px; font-weight:600; border-radius:30px;} .btn-l + .btn-l{margin-left:20px;} .btn-m{display:block; width:180px; height:50px; font-size:16px; font-weight:600; border-radius:30px;} .btn-m + .btn-m{margin-left:15px;} .btn.gray{color:#fff; background:#c9c9c9; border:2px solid #c9c9c9;} .btn.white{color:#0075bc; background:#fff; border:2px solid #0075bc;} .btn.blue{color:#fff; background:#0075bc; border:2px solid #0075bc;} .btn.red{color:#e7434a; background:#fff; border:2px solid #e7434a;} .btn-l:hover{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; transform:translate3d(0, -10px, 0); box-shadow:0 0 10px rgba(0,0,0,0.6); transition:0.2s;} .btn-m:hover{text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; transform:translate3d(0, -5px, 0); box-shadow:0 0 10px rgba(0,0,0,0.6); transition:0.2s;} .btn_wrap.ea4 .btn-l{width:calc(100%/4 - 60px/4);} .popup_bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:9999;} .popup_bg .popup{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:94%; max-width:500px; border-radius:15px; border:1px dotted #383838; background:#fff;} .popup .btn_pop_close{position:absolute; top:24px; right:20px; font-size:0; width:18px; height:18px; background:url("../csapp/img/btn_pop_close.png")no-repeat center; z-index:10; cursor:pointer;} .popup_detail .popup_con{padding:25px 30px 30px; max-height:calc(100vh - 140px); overflow:hidden; overflow-y:auto;} .popup_detail .loca{position:relative; padding-left:30px; font-size:14px; line-height:1.3; padding-right:30px; word-break:break-all;} .popup_detail .loca strong{font-weight:800;} .popup_detail .loca em{position:absolute; top:-2px; left:0; display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:20px; font-size:14px; color:#fff; font-weight:bold; font-family:'arial'} .popup_detail .loca.red em{background:#f1244b;} .popup_detail .loca.green em{background:#219705;} .popup_detail .loca.blue em{background:#00a4f0;} .popup_detail .loca.purple em{background:#a20ef6;} .popup_detail .my_grade_detail{flex-wrap:wrap; justify-content:center; padding:0; margin-top:30px;} .popup_detail .my_grade_detail > div + div{border-left:0;} .popup_detail .my_grade_detail .grade_box{padding:0; width:178px; height:91px;} .popup_detail .my_grade_detail .grade_box .tit{font-size:15px;} .popup_detail .my_grade_detail .info_box{padding:0; margin-left:25px; width:100%;} .popup_detail .my_grade_detail .info_box ul{gap:8px 0;} .popup_detail .my_grade_detail .info_box ul li{padding-left:10px; width:49%;} .popup_detail .my_grade_detail .info_box ul li span{font-weight:300; font-size:13px;} .popup_detail .my_grade_detail .info_box ul li strong{font-size:13px;} .popup_detail .my_grade_detail .average_box{width:100%; padding:0;} .popup_detail .my_grade_detail .average_box ul{width:100%; flex-wrap:wrap; gap:20px 0;} .popup_detail .my_grade_detail .average_box ul li{width:calc(100%/3); padding:0 5px;} .popup_detail .my_grade_detail .average_box ul li + li{margin-left:0;} .popup_detail .my_grade_detail .average_box ul li span{width:60px; height:60px; line-height:60px; font-size:14px;} .popup_detail .my_grade_detail .average_box ul li p{margin-top:10px; font-size:13px;} .popup_detail .my_grade_detail .grade_box + .info_box{width:calc(100% - 203px);} .popup_detail .my_grade_detail .grade_box + .info_box ul li{padding-left:10px; width:100%;} .popup_detail .my_grade_detail .grade_box + .average_box{margin-top:50px;} .popup_detail .my_grade_detail .info_box + .average_box{margin-top:30px;} .popup_detail .my_grade_detail .grade_box + .info_box + .average_box{margin-top:30px;} .popup{max-width:630px; border-radius:20px; border:2px solid #fff;} .popup .btn_close{position:absolute; top:24px; right:35px; width:22px; height:22px; display:block; background:url("../csapp/img/btn_pop_close_fff.png")no-repeat center; background-size:100% auto;} .popup h5.tit_pop{display:flex; align-items:center; height:70px; padding:0 26px; font-size:20px; color:#fff; background:#0075bc; font-family:'EsaManru',sans-serif; font-weight:300; border-radius:20px 20px 0 0;} .popup h5.tit_pop:before{content:''; display:block; margin-right:15px; width:19px; height:100%; background:url("../csapp/img/pop_chk.png")no-repeat center; background-size:100% auto;} .popup .popup_con{padding:45px 45px 50px;} .popup_search .popup{max-width:630px; border-radius:20px; border:2px solid #fff;} .popup_search .popup_con{padding:45px 45px 50px;} .popup_search .search_wrap{position:relative; max-width:520px; width:100%; margin:0 auto;} .popup_search .search_wrap .btn_search{position:absolute; top:50%; right:0; transform:translateY(-50%); width:55px; height:100%; background:url("../csapp/img/search.png")no-repeat center; font-size:0;} .popup_search p{margin-top:20px; padding-left:24px; text-indent:-18px; font-size:14px; color:#e7434a; line-height:1.3;} .popup_search p.center{padding:0 8px; text-indent:0;} .popup_search .search_result{margin-top:35px; border-top:2px solid #000; max-height:calc(100vh - 340px); overflow-y:auto;} .popup_search .search_result ul li{border-bottom:1px solid #bebebe;} .popup_search .search_result ul li a{display:flex; align-items:center; flex-wrap:wrap; padding:25px 5px;} .popup_search .search_result ul li a strong{margin-left:18px; font-size:20px; color:#000; line-height:1.2; font-family:'EsaManru',sans-serif; font-weight:300;} .popup_search .search_result ul li a .label{display:block; flex:none;width:105px; height:27px; line-height:26px; text-align:center; font-size:13px; color:#757575; letter-spacing:-0.5px; border-radius:23px; border:1px solid #757575;} .popup_counseling{position:absolute;} .popup_counseling .popup{max-width:630px; top:40px; transform:translateX(-50%); border-radius:20px; border:2px solid #fff;} .popup_counseling .popup_con{padding:30px 30px 35px;} .popup_counseling .counsel_wrap{max-width:520px; width:100%; margin:0 auto;} .popup_counseling .form_box + .form_box{margin-top:30px;} .popup_counseling .form_box .tit_form{position:relative; padding-left:35px; margin-bottom:20px; display:flex; align-items:center; justify-content:space-between; font-size:17px; color:#272727; font-weight:600;} .popup_counseling .form_box .tit_form:before{content:''; position:absolute; top:-3px; left:0; width:23px; height:23px; background:url("../csapp/img/add_black.png"); background-size:100% auto;} .popup_counseling .chk1 input[type="checkbox"]{display:none;} .popup_counseling .chk1 input[type="checkbox"] + label{position:relative; padding-left:42px; font-size:16px; color:#000; font-weight:600; cursor:pointer;} .popup_counseling .chk1 input[type="checkbox"] + label span{font-weight:300;} .popup_counseling .chk1 input[type="checkbox"] + label:after{content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); display:block; width:27px; height:27px; border-radius:27px; background:#e7e7e7;} .popup_counseling .chk1 input[type="checkbox"]:checked + label:after{background:url("../csapp/img/chk_on2.png")no-repeat center;} .popup_counseling .agree_wrap{border:1px solid #d3d3d3; border-radius:10px; background:#fff; height:120px; padding:20px 10px 20px 23px;} .popup_counseling .agree_wrap .scroll_box{padding-right:30px; height:100%; font-size:13px; color:#000000; word-break:keep-all; line-height:1.2; overflow-y:auto;} .popup_counseling .search_wrap{position:relative; width:100%; margin:0 auto;} .popup_counseling .search_wrap .btn_search{position:absolute; top:50%; right:0; transform:translateY(-50%); width:55px; height:100%; background:url("../csapp/img/search.png")no-repeat center; font-size:0;} .popup_counseling .select_wrap .select_box{margin-top:12px; width:100%;} .popup_counseling .info_wrap .info_tab{margin-bottom:20px; position:relative; width:100%; height:50px; background:#e1e1e1; border:1px solid #d3d3d3; border-radius:25px; overflow:hidden; display:flex;} .popup_counseling .info_wrap .info_tab .tab{position:absolute; top:50%; transform:translateY(-50%); display:block; width:50%; height:100%;} .popup_counseling .info_wrap .info_tab .tab:first-child{left:0;} .popup_counseling .info_wrap .info_tab .tab:last-child{right:0;} .popup_counseling .info_wrap .info_tab .tab input[type="radio"]{display:none;} .popup_counseling .info_wrap .info_tab .tab input[type="radio"] + label{width:100%; height:100%; display:flex; align-items:center; justify-content:Center; font-size:16px; color:#000; text-align:center; border-radius:50px; cursor:pointer;} .popup_counseling .info_wrap .info_tab .tab input[type="radio"]:checked + label{color:#fff; background:#0075bc; transition:ease 0.2s;} .popup_counseling .mail_wrap{display:flex; align-items:center; position:relative;} .popup_counseling .mail_wrap .mail_01, .popup_counseling .mail_wrap .mail_02, .popup_counseling .mail_wrap .mail_03{width:46%;} .popup_counseling .mail_wrap .mail_03{padding:0 60px 0 35px} .popup_counseling .mail_wrap .btn_select{display:none; position:absolute; top:50%; right:18px; transform:translateY(-50%); width:24px; height:13px; background:url("../csapp/img/select.png") no-repeat center;} .popup_counseling .mail_wrap select:required:invalid{color:rgba(0,0,0,0.35);} .popup_counseling .mail_wrap .at{width:8%; font-size:16px; color:#000; text-align:center;} .popup_counseling .btn_wrap{margin-top:30px;} .popup_counseling .btn_wrap .btn{width:100%; height:60px; background:#4f4f4f; border-radius:15px; font-size:20px; color:#fff;} .popup_counseling .btn_wrap .btn:hover{box-shadow:0 0 10px rgba(0,0,0,0.75); text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; transition:0.2s;} .popup_majorCompare .popup{max-width:630px; border-radius:20px; border:2px solid #fff;} .popup_majorCompare .popup_con{padding:30px 30px; max-height:80vh; overflow-y:auto;} .popup_majorCompare .tbl_pop{position:relative; width:100%;} .popup_majorCompare .tbl_pop table{word-break:break-all;} .popup_majorCompare .tbl_pop:before{content:''; position:absolute; top:0; left:0; width:100%; height:1px; background:#000;} .popup_majorCompare .tbl_pop thead th{padding:20px 10px; height:55px; line-height:1.3; font-size:13px; background:#f8f8f8; word-break:break-all;} .popup_majorCompare .tbl_pop thead th:first-child{border-right:1px solid #000;} .popup_majorCompare .tbl_pop thead th.blue{padding:20px 15px; height:55px; line-height:1.3; font-size:13px; background:#f4fbff; font-weight:600; text-align:left; word-break:break-all;} .popup_majorCompare .tbl_pop thead th .major{margin-top:5px; display:block; color:#0075bc;} .popup_majorCompare .tbl_pop tbody th{padding:20px 10px; height:55px; line-height:1.3; font-size:13px; background:#f8f8f8; word-break:break-all;} .popup_majorCompare .tbl_pop tbody th.bdr_none{border-right:0 !important;} .popup_majorCompare .tbl_pop tbody th.bdr{border-right:1px solid #000;} .popup_majorCompare .tbl_pop tbody th.bdl{border-left:1px solid #d2d2d2;} .popup_majorCompare .tbl_pop tbody th:first-child{border-right:1px solid #000;} .popup_majorCompare .tbl_pop th, .popup_majorCompare .tbl_pop td{border-bottom:1px solid #d2d2d2; border-right:1px solid #d2d2d2;} .popup_majorCompare .tbl_pop thead th:last-child{border-right:0;} .popup_majorCompare .tbl_pop tbody td:last-child{border-right:0;} .popup_majorCompare .tbl_pop tbody td{padding:20px 10px; height:55px; line-height:1.3 ; font-size:13px; text-align:center; word-break:break-all;} .popup_majorCompare .tbl_pop .label{margin-left:6px; display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border-radius:25px; font-size:15px; color:#fff; font-weight:800; font-family:'arial';} .popup_majorCompare .tbl_pop .label.label_a{background:var(--setA-color);} .popup_majorCompare .tbl_pop .label.label_b{background:var(--setB-color);} .popup_majorCompare .tbl_pop .label.label_c{background:var(--setC-color);} .popup_majorCompare .tbl_pop .label.label_d{background:var(--setD-color);} .popup_majorCompare .tbl_pop a.btn{display:inline-flex; align-items:center; padding:0 10px; height:24px; line-height:24px; border-radius:24px; font-size:12px; color:#000; border:1px solid #000;} .popup_majorCompare .tbl_pop a.btn:after{content:''; display:inline-block; margin-left:8px; width:7px; height:100%; background:url("../csapp/img/btn_go.png")no-repeat center; background-size:100% auto;} .popup_majorCompare .tbl_pop a.btn:hover{color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; background:#4f4f4f; transition:0.2s;} .popup_majorCompare .tbl_pop a.btn:hover:after{background:url("../csapp/img/btn_go_on.png")no-repeat center;} .popup_majorCompare .tbl_pop .select_box_02{width:100%;} .popup_majorCompare .tbl_pop .select_box_02 + .select_box_02{margin-top:10px;} .popup_majorCompare .tbl_pop .btn_re{position:relative; float:right; margin-top:-5px; padding-left:5px; cursor:pointer; z-index:10;} /* 서브푸터 */ .footer .inner{padding:0 0 80px; margin:0 auto;} .footer address{text-align:center; color:#8c8c8c; font-size:13px; line-height:1.4;} .footer address span{position:relative;} .footer address span + span{margin-left:10px;} .footer address span + span:before{content:''; position:absolute; top:1px; left:-5px; width:1px; height:12px; background:#8c8c8c;} @media screen and (max-width:1580px){ .header .inner, .intro, .footer .inner{width:92%;} .header{height:100px;} .header .gnb{margin-left:40px;} .header .gnb li + li{margin-left:40px;} } @media screen and (max-width:1280px){ #contents{width:94%;} .information .wrap_flex{gap:10px;} .information .wrap_flex .form_wrap{width:calc(50% - 10px/2);} .type_grade .tblW{overflow-x:auto;} .type_box .type_list .rdo_wrap{gap:15px 30px;} .type_box .type_list .rdo_wrap .rdo1{width:calc(100%/4 - 120px/4)} .my_grade_detail .grade_box{padding:0 45px;} .my_grade_detail .average_box{padding:0 40px;} .my_grade_detail .average_box ul li + li{margin-left:24px;} .my_grade_detail .info_box{padding:0 50px 0 40px;} .my_grade_detail .info_box ul li{padding-left:10px;} .my_grade_detail .info_box ul li{width:100%;} .my_grade_detail.type02 .grade_box{padding:0 20px;} .my_grade_detail.type02 .average_box{padding:0 25px;} .my_grade_detail.type02 .average_box ul li + li{margin-left:15px;} .my_grade_detail.type02 .info_box{padding:0 35px 0 25px;} } @media screen and (max-width:1099px){ .my_grade_detail .grade_box{padding:0 40px 0 45px;} .my_grade_detail .grade_box .tit{font-size:15px;} .my_grade_detail .average_box{padding:0 30px;} .my_grade_detail .average_box ul li + li{margin-left:20px;} .my_grade_detail .average_box ul li span{width:55px; height:55px; line-height:55px; font-size:14px;} .my_grade_detail .average_box ul li p{margin-top:10px; font-size:12px;} .my_grade_detail .info_box{padding:0 50px 0 40px;} .my_grade_detail .info_box ul li:before{top:6px;} .my_grade_detail .info_box ul li{font-size:12px;} .my_grade_detail .info_box ul li strong{font-size:13px;} .my_grade_detail.type02 .grade_box{padding:0 20px;} .my_grade_detail.type02 .average_box{padding:0 25px;} .my_grade_detail.type02 .average_box ul li + li{margin-left:15px;} .my_grade_detail.type02 .info_box{padding:0 35px 0 25px;} } @media screen and (max-width:1023px){ .header{position:fixed; height:70px; background:#fff;} .header h1 img{max-height:35px; width:auto;} .header .logo{gap:0 20px;} .header .logo p{font-size:16px;} .header .logo p span{font-size:12px;} .header .logo p span em{font-size:14px;} .header .gnb, .header .visitors{display:none;} .header .btn_menu{position:absolute; top:50%; right:4%; transform:translateY(-50%); display:block; width:22px; height:16px; font-size:0;} .header .btn_menu span{position:absolute; top:0; left:0; display:block; width:100%; height:2px; background:#000; transition:all 0.3s;} .header .btn_menu span:nth-child(1){} .header .btn_menu span:nth-child(2){width:16px; top:50%; transform:translateY(-50%);} .header .btn_menu span:nth-child(3){top:auto; bottom:0;} .header .btn_menu.on span{background:#fff;} .header .btn_menu.on span:nth-child(1){transform:translateY(8px) rotateZ(135deg)} .header .btn_menu.on span:nth-child(2){opacity:0;} .header .btn_menu.on span:nth-child(3){transform:translateY(-6px) rotateZ(-135deg);} .header.sub{height:70px;} .sub_contents{padding:70px 0 50px; width:94%; min-height:calc(100vh - 70px); padding-bottom:50px;} .title_wrap{padding:60px 0 0;} .title_wrap h2.title{font-size:32px;} .title_wrap p{margin-top:25px;} .title_wrap .list_dot{margin:50px 0 0; padding:0 30px;} .title_wrap .btns{position:relative; right:auto; bottom:auto; display:flex; justify-content:center; gap:0 10px; margin-top:20px;} .information .wrap_flex .form_wrap{width:100%;} .grade .board{padding:0 30px;} .grade .board .direct_grade_wrap{width:100%; } .grade .board .btn_wrap{width:100%; display:flex; flex-wrap:wrap;} .grade .detail_wrap2{padding:0 30px 30px;} .type_box .type_list .rdo_wrap{gap:15px 20px;} .type_box .type_list .rdo_wrap .rdo1{width:calc(100%/3 - 60px/3)} .type_grade .ex_tab .year_tab li{width:105px;} .type_grade .ex_tab .year_tab li a{font-size:13px;} .type_grade .ex_tab .ex span{font-size:11px; letter-spacing:-1px;} .type_grade .ex_tab .ex span + span{margin-left:10px;} .type_grade .ex_tab .ex span em{width:18px; height:18px; line-height:17px; font-size:10px} .type_grade .result_wrap.pc{display:none;} .type_grade .result_wrap.mb{display:block;} .type_grade .result_wrap .result_box{padding:15px 40px 10px; border-radius:10px; border:1px dotted #383838;} .type_grade .result_wrap .result_box + .result_box{margin-top:5px;} .type_grade .result_wrap .result_box .label{position:relative; font-size:13px; color:#000; font-weight:300; line-height:1.3;} .type_grade .result_wrap .result_box .label em{position:absolute; top:-1px; left:-24px; width:19px; height:19px; font-size:11px; color:#fff; font-weight:800; border-radius:18px; display:flex; justify-content:center; align-items:center; font-family: 'arial';} .type_grade .result_wrap .result_box .label.gradeA em{background:#f1244b;} .type_grade .result_wrap .result_box .label.gradeB em{background:#219705;} .type_grade .result_wrap .result_box .label.gradeC em{background:#00a4f0;} .type_grade .result_wrap .result_box .label.gradeD em{background:#a20ef6;} .type_grade .result_wrap .result_box .label.chk:before{top:0; left:-20px; width:14px; background:url("../csapp/img/label_chk.png")no-repeat; background-size:100% auto;} .type_grade .result_wrap .result_box .label strong{font-weight:800;} .type_grade .result_wrap .result_box .my_grade{margin-top:10px; display:flex; align-items:center; flex-wrap:wrap; gap:10px 15px;} .type_grade .result_wrap .result_box .my_grade span{position:relative; font-size:13px; color:#000000; padding-left:10px;} .type_grade .result_wrap .result_box .my_grade span:before{content:''; position:absolute; top:6px; left:0; width:2px; height:2px; border-radius:2px; background:#000; display:block; margin-right:5px;} .type_grade .result_wrap .result_box .my_grade span .grade{font-size:14px; font-weight:800;} .type_grade .result_wrap .result_box .my_grade span .grade.red{color:#f1244b;} .type_grade .result_wrap .result_box .my_grade span .grade.green{color:#219705;} .type_grade .result_wrap .result_box .my_grade span .grade.blue{color:#00a4f0;} .type_grade .result_wrap .result_box .my_grade span .grade.purple{color:#a20ef6;} .type_grade .result_wrap .result_box .btn_go{display:flex; align-items:center; padding:0 13px 0 15px; height:35px; font-size:13px; border-radius:25px; border:1px solid #383838;} .type_grade .result_wrap .result_box .btn_go:after{content:''; margin-left:15px; display:block; width:8px; height:100%; background:url("../csapp/img/btn_go.png")no-repeat center; background-size:100% auto;} /* 힉과 상세보기 */ .major_view .board{padding:40px 30px;} .major_view .major_in{margin:40px auto 0;} .major_view .major_menu{gap:0 5px;} .major_view .major_menu li{width:calc(100%/4 - 15px/4); height:70px;} .major_view .major_menu li a{flex-wrap:wrap;} .major_view .major_menu li a span{display:block; width:100%; text-align:center; font-size:13px;} .major_view .major_menu li a small{display:none;} .major_view .major_menu li a:before{margin-bottom:8px;} .major_view .major_menu li.menu01 a:before{width:100%; height:25px; background-size:auto 22px;} .major_view .major_menu li.menu02 a:before{width:100%; height:25px; background-size:auto 100%;} .major_view .major_menu li.menu03 a:before{width:100%; height:25px; background-size:auto 100%;} .major_view .major_menu li.menu04 a:before{width:100%; height:25px; background-size:auto 22px;} .major_result .other_admission{display:none; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); max-width:330px; width:95%;} .major_result .my_result.type04 .menu_box li.menu{justify-content:center;} .major_result .my_result.type04 .menu_box li.menu a{padding-left:0; justify-content:center;} .major_result .my_result.type04 .menu_box li.menu a small{display:none;} .chart_wrap .chart_box{width:calc(100%/3 - 20px/3); padding:30px 40px 100px 25px;} .btn-l{font-size:18px;} .btn_wrap.ea4 .btn-l{width:calc(100%/4 - 45px/4);} .btn_wrap.ea4 .btn-l + .btn-l{margin-left:15px;} .btn_wrap.ea4 .btn-m{width:calc(100%/4 - 45px/4);} .popup_counseling .popup{top:60px;} .footer address .addr{display:block;} .footer address span + span{margin-left:0;} .footer address span + span:before{display:none;} } @media screen and (max-width:767px){ .header .inner, .intro, .footer .inner{width:94%;} .header .menu{right:3%;} .header h1 img{max-height:30px;} .header .logo{gap:0 10px;} .header .logo p{font-size:14px;} .header .logo p span{font-size:10px;} .header .logo p span em{font-size:13px;} .input_txt{padding:0 20px; height:40px; font-size:13px;} .search_wrap .input_txt{padding:0 50px 0 20px;} .pointTxt{padding-left:15px; text-indent:-15px; font-size:12px;} .header.sub{height:60px;} #contents.sub_contents{padding:60px 0 30px; width:96%; min-height:calc(100vh - 60px); padding-bottom:40px;} .title_wrap{padding:40px 0 0;} .title_wrap h2.title{font-size:25px;} .title_wrap p{margin-top:20px; font-size:13px;} .title_wrap .list_dot{margin:25px 0 0; padding:0 20px;} .title_wrap .list_dot li{padding-left:12px; font-size:13px;} .title_wrap .list_dot li:not(:first-child){margin-top:4px;} .title_wrap .list_dot li:before{top:6px;} .title_wrap .btns a{gap:0 5px; font-size:12px; padding:0 4px 0 14px; height:32px; line-height:32px;} .title_wrap .btns .btn_ways:after{width:22px; height:22px; background-size:auto 10px;} .title_wrap .btns .btn_back:after{width:22px; height:22px; background-size:auto 10px;} .title_wrap .btns .btn_reinput:after{width:22px; height:22px; background-size:auto 10px;} .title_wrap .btns .btn_ways:hover:after{background-size:auto 10px;} .title_wrap .btns .btn_back:hover:after{background-size:auto 10px;} .information .cont{margin-top:35px;} .information .form_wrap{padding:30px 25px 30px;} .information .form_box{max-width:100%; margin:20px auto 0;} .information .form_box:not(.agree_box):first-child{margin-bottom:30px;} .information .form_box .tit_form{margin-bottom:20px; font-size:15px;} .information .form_box .tit_form.star:before{left:-8px; top:-2px; font-size:14px;} .information .form_box .pointTxt{margin-top:15px; width:100%;} .information .form_box .search_wrap{} .information .form_box .search_wrap .input_txt{} .information .form_box .search_wrap .btn_search{width:55px; background-size:auto 20px;} .information .form_box .select_wrap{gap:10px;} .information .form_box .select_wrap.half .select{width:calc(50% - 10px/2);} .information .form_box .gender_wrap{position:relative; width:150px; height:40px;} .information .form_box .gender_wrap .gender{width:85px;} .information .form_box .gender_wrap .gender input[type="radio"] + label{font-size:13px;} .information .agree_box .tit_form{margin-bottom:0;} .information .agree_box .pointTxt{margin-top:10px;} .information .agree_box .agree_wrap{margin-top:20px;} .information .agree_box .agree_wrap > input{margin-bottom:10px;} .information .agree_box .mail_wrap .mail_03{padding:0 50px 0 20px;} .information .agree_box .mail_wrap .btn_select{right:16px; width:16px;} .information .agree_box .mail_wrap .at{font-size:13px;} .information .agree_box .agree_chk{margin-top:15px;} .information .agree_box .agree_chk input[type="checkbox"] + label{padding-left:32px; font-size:13px;} .information .agree_box .agree_chk input[type="checkbox"] + label:after{width:22px; height:22px;} .information .agree_box .agree_chk input[type="checkbox"]:checked + label:after{background-size:contain;} .information .agree_box .agree_con{margin-top:15px; height:180px; padding:12px 5px 12px 13px;} .information .agree_box .agree_con .scroll_box{padding-right:15px; font-size:11px;} .information .agree_box .agree_con .list_dot{margin-top:15px;} .information .agree_box .agree_con .list_dot li{font-size:11px;} .information .agree_box .agree_con .list_dot li.indent01{padding-left:42px;} .information .agree_box .agree_con .list_dot li.indent02{padding-left:87px;} .information .agree_box .agree_con .list_dot li.indent03{padding-left:201px;} .scroll_box::-webkit-scrollbar{width:10px;} .grade .cont{margin-top:30px;} .grade .board{padding:0 20px;} .grade .board:not(:first-child){margin-top:10px;} .grade .board .tit_board{padding:20px 30px 20px 0;} .grade .board .tit_board:after{width:20px; background-position:center bottom 23px;} .grade .board.on .tit_board{padding:24px 30px 20px 0;} .grade .board.on .tit_board:after{background-position:center top 25px;} .grade .board .tit_board .t{padding-left:26px; font-size:17px; background-size:13px auto;} .grade .board .board_con{padding:0 10px;} .grade .board dl{margin-top:15px;} .grade .board dl dt{margin-bottom:8px; font-size:13px;} .grade .board dl dd{font-size:12px;} .grade .board dl dd + dd{margin-top:4px;} .grade .board dl + dl{margin-top:15px;} .grade .board .list_dot dd{padding-left:10px;} .grade .board .list_dot dd:before{top:7px; width:2px; height:2px;} .grade .board .direct_grade_wrap{margin:30px auto 0; width:100%; padding-top:0;} .grade .board .direct_grade_wrap .grade_box{position:relative; top:auto; left:auto; transform:translateX(0);} .grade .board .direct_grade_wrap .grade_box strong{margin-bottom:15px; font-size:15px; letter-spacing:4px;} .grade .board .direct_grade_wrap .grade_box .input_txt{text-align:center; width:100%;} .grade .board .btn_wrap{width:100%; margin-top:30px;} .grade .board.on .board_con{padding:30px 10px 40px;} .grade .board:is(.normal) .board_con{padding:0 10px 30px;} .grade .board.qualification .board_con{padding:45px 0 65px;} .grade .detail_wrap{margin-top:30px;} .grade .detail_wrap .tit_btns{margin-bottom:10px; padding-left:5px;} .grade .detail_wrap .tit_btns > p{font-size:14px;} .grade .detail_wrap .tit_btns .btns{gap:0 6px;} .grade .detail_wrap .tit_btns .btn-s{width:80px; height:28px; font-size:11px;} .grade .detail_wrap .tit_btns .btn_add:before{margin-right:6px; width:10px; background-size:100% auto;} .grade .detail_wrap .tit_btns .btn_all:before{margin-right:6px; width:10px; background-size:100% auto;} .grade .detail_wrap .tit_btns .btn_delete:before{margin-right:6px; width:10px; background-size:100% auto;} .grade .detail_wrap2{padding:0 0 20px;} .grade .detail_wrap2 .rdo_wrap{gap:10px 30px;} .grade .detail_wrap2 .grade_wrap{gap:0 10px;} .grade .detail_wrap2 input[type="text"]{padding:0 10px; width:120px; height:35px; font-size:13px;} .grade .detail_wrap2 .select{width:120px;} .grade .detail_wrap2 .tit_detail{margin:25px 0 20px; font-size:15px;} .grade .detail_wrap2 .tit_detail2{margin:20px 0 12px; font-size:14px;} .grade .detail_wrap2 .detail .tit_detail2{margin:0 0 12px; font-size:14px;} .grade .detail_wrap2.type01 input[type="text"]{width:100%;} .grade .detail_wrap2 .grade_wrap{gap:10px; justify-content:space-between; width:100%;} .grade .detail_wrap2 .grade_wrap .select, .grade .detail_wrap2 .grade_wrap input[type="text"]{width:50%;} .grade .detail_wrap2 .detail_box{gap:12px 10px;} .grade .detail_wrap2 .detail_box + .detail_box{margin-top:15px;} .grade .detail_wrap2 .detail_box .detail{flex:1; min-width:calc(50% - 10px/2);} .grade .detail_wrap2 .detail_box .detail .select{width:100%;} .grade .detail_wrap2 .detail_box input[type="text"], .grade .detail_wrap2 .detail_box .select{flex:1; min-width:calc(100%/2 - 10px/2);} .grade .detail_wrap2 .detail_box .detail.row{display:flex; align-items:center; gap:0; flex:none;} .grade .detail_wrap2 .detail_box .detail.row + .detail.row{margin-top:5px;} .grade .detail_wrap2 .detail_box .detail.row .tit_detail2{margin:0 0 12px;} .grade .detail_wrap2 .detail_box .detail.row .rdo_wrap{margin-bottom:11px;} .grade .detail_wrap2 .detail_box .detail.row .select, .grade .detail_wrap2 .detail_box .detail.row input[type="text"]{min-width:calc(50% - 10px/2); flex:1;} .grade .detail_wrap2 .detail_box .detail.row{flex-wrap:wrap;width:100%;} .grade .detail_wrap2 .detail_box .detail.row .tit_detail2{width:100%;} .grade .detail_wrap2 .wrap_detail.flex .tit_detail2{margin:0; width:8%; margin-left:4%;} .grade .detail_wrap2 .wrap_detail.flex .detail_box{width:auto; min-width:100px; flex:1;} .grade .detail_wrap2 .wrap_detail.flex .detail_box{} .grade .detail_wrap2 .wrap_detail.flex .select, .grade .detail_wrap2 .wrap_detail.flex input[type="text"]{width:100%;} .type_grade .cont{margin-top:30px;} .type_grade .board{padding:0 20px 20px;} .type_grade .board .text_area{margin:20px 0;} .type_grade .board .info_txt{padding-left:15px; text-indent:-15px; font-size:12px;} .type_grade .board .info_txt + .info_txt{margin-top:4px;} .type_box{margin-bottom:0;} .type_box.pc{display:none;} .type_box.mb{display:block; padding-top:10px;} .select_type_list{width:100%; position:relative; display:inline-block; vertical-align:top; z-index:10;} .select_type_list + .select_type_list{margin-top:10px;} .select_type_list button{position:relative; display:inline-block; width:100%; height:40px; padding:0 40px 0 25px; border:1px solid #383838; border-radius:10px; font-size:14px; text-align:left; word-break:break-all; color:#000;} .select_type_list button:after{content:''; position:absolute; top:0; right:18px; display:block; width:20px; height:100%; background:url("../csapp/img/select.png") no-repeat center; background-size:100% auto;} .select_type_list ul{display:none; position:absolute; top:100%; left:0; width:100%; max-height:246px; overflow:auto; overflow-x:hidden; box-sizing:border-box; margin-top:-1px; border:1px solid #000; border-radius:0 0 10px 10px; border-top:0; background:#fff; z-index:998;} .select_type_list ul li{border-top:1px solid #d3d3d3;} .select_type_list ul li a{display:flex; align-items:center; min-height:40px; padding:8px 0 8px 25px; font-size:14px; text-align:left; background:#f9f9f9; word-break:break-all;} .select_type_list ul li a:hover{text-decoration:underline; text-underline-offset:3px; font-weight:600; background:#fff} .select_type_list.open{z-index:999;} .select_type_list.open button{border-color:#000; border-radius:10px 10px 0 0; box-shadow:0 -3px 5px rgba(0,0,0,0.3);} .select_type_list.open ul{display:block; box-shadow:0 3px 5px rgba(0,0,0,0.3);} .type_grade h4.tit{margin:30px 0 15px; font-size:17px;} .type_grade h4.tit:before{margin-right:10px;} .type_grade .ex_tab{margin-bottom:20px;} .type_grade .ex_tab .year_tab{width:100%;} .type_grade .ex_tab .year_tab li{width:calc(100%/3); height:35px;} .type_grade .ex_tab .year_tab li a{font-size:12px;} .type_grade .ex_tab .ex{width:100%; justify-content:center;} .type_grade .ex_tab .ex{flex-wrap:wrap; gap:5px 10px;} .type_grade .ex_tab .ex span{font-size:11px;} .type_grade .ex_tab .ex span + span{margin-left:0;} .type_grade .ex_tab .ex span em{width:20px; height:20px; line-height:19px; font-size:12px;} .major_view .cont{margin-top:30px;} .major_view .board{padding:30px 20px;} .major_view .major_in{margin:30px auto 0;} .major_view button.admission{font-size:17px;} .major_view button.admission:before{margin-right:15px; width:13px; height:12px;} .major_view button.admission:after{margin-left:15px; width:20px; height:10px;} .major_view .select_layer{min-width:230px;} .major_view .select_layer ul{max-height:188px;} .major_view .select_layer button{right:10px; background-size:20px auto;} .major_view .select_layer ul li a{min-height:36px; padding:5px 35px 5px 15px; font-size:12px; letter-spacing:-0.5px;} .major_view .major_tit .major{margin-left:38px; font-size:19px;} .major_view .major_tit .major:before{left:-19px; height:19px;} .major_view .year_tab{margin:35px 0 0; padding-bottom:20px; gap:0 35px;} .major_view .year_tab li a{font-size:14px;} .major_view .year_tab li.on a:before, .major_view .year_tab li:hover a:before{bottom:-2px; height:5px;} .major_result{padding-top:20px;} .major_result > .txt{font-size:12px; padding:0 4px;} .major_result .my_result{margin-top:25px; gap:10px;} .major_result .box{height:190px; border-radius:10px; border:1px solid #eaeaea;} .major_result .my_grade{width:calc(100%/2 - 10px/2); padding:20px 0 0; order:1;} .major_result .my_grade .tit{margin:0 auto; display:block; width:90px; height:28px; line-height:28px; font-size:14px;} .major_result .my_grade .grade{font-size:24px;} .major_result .my_grade .icon{margin-top:24px; width:100%; height:42px; margin-bottom:20px; font-size:36px;} .major_result .my_grade.type02 .grade{margin-top:22px;} .major_result .my_grade.type02 .grade span{margin:0 auto 20px; width:50px; height:50px; font-size:28px;} .major_result .my_grade.type03 .grade{margin-top:40px; font-size:34px;} .major_result .my_grade.type03 .grade span{padding:0 8px;} .major_result .my_grade.type03 .grade span:before{bottom:-4px; height:16px;} .major_result .graph_box{width:100%; padding:0 25px; order:3;} .major_result .graph_box .tit{margin:15px auto 25px; height:32px; font-size:13px;} .major_result .graph_box .pass_spot_wrap .txt{font-size:11px; top:60px; letter-spacing:-0.5px;} .major_result .menu_box{width:calc(100%/2 - 10px/2); border:0; order:2;} .major_result .menu_box ul{height:100%; border:0; gap:5px;} .major_result .menu_box li{width:calc(100%/2 - 5px/2); height:calc(100% - 70px); border-radius:10px;} .major_result .menu_box li > a{font-size:14px;} .major_result .menu_box li.btn_other_admission{height:65px;} .major_result .menu_box li.btn_other_admission > a{padding:0 25px; text-align:left;} .major_result .menu_box li.btn_other_admission > a:after{width:24px; height:24px; background-size:100% auto; flex:none;} .major_result .menu_box li.menu a small{font-size:10px;} .major_result .menu_box li.menu01 a:before, .major_result .menu_box li.menu02 a:before{height:35px; margin-bottom:15px; background-size:auto 100%;} .major_result .other_admission{padding:0 15px 20px;} .major_result .other_admission .btn_close{right:15px; top:18px; width:25px; height:25px} .major_result .other_admission p.tit{margin-bottom:15px; padding:0 8px; height:60px; line-height:60px; font-size:15px;} .major_result .other_admission .admission_cont{height:auto; max-height:calc(95vh - 95px);} .major_result .other_admission .admission_cont::-webkit-scrollbar{width:10px;} .major_result .other_admission .admission_cont dl{padding:5px 5px 15px 0;} .major_result .other_admission .admission_cont dl + dl{padding-top:18px;} .major_result .other_admission .admission_cont dl + dl:before{width:calc(100% - 8px);} .major_result .other_admission .admission_cont dl dt{margin-bottom:20px; font-size:14px;} .major_result .other_admission .admission_cont dl dd a{padding-left:8px; font-size:12px;} .major_result .other_admission .admission_cont dl dd a:before{content:'-'; position:absolute; top:0px; left:0;} .major_result .other_admission .admission_cont dl dd + dd{margin-top:6px;} .major_result .my_result.type02 .menu_box{width:100%;} .major_result .my_result.type03 .menu_box{width:100%; height:auto;} .major_result .my_result.type03 .menu_box li{height:75px; width:calc(100%/2 - 5px/2);} .major_result .my_result.type03 .menu_box li.btn_other_admission{width:calc(100%/2 - 5px/2);} .major_result .my_result.type03 .menu_box li{width:calc(100%/2 - 5px/2);} .major_result .my_result.type03 .menu_box li.menu a{justify-content:center; padding:0;} .major_result .my_result.type03 .menu_box li.menu01 a:before{margin-right:20px; width:36px;} .major_result .my_result.type04{gap:10px;} .major_result .my_result.type04 .menu_box{width:calc(100%/2 - 10px/2);} .major_result .my_result.type04 .menu_box ul{gap:5px;} .major_result .my_result.type04 .menu_box li{height:85px; width:calc(100%/2 - 5px/2); height:calc(100% - 70px);} .major_result .my_result.type04 .menu_box li.btn_other_admission{width:100%; height:65px;} .major_result .my_result.type04 .menu_box li.menu{padding-top:0;} .major_result .my_result.type04 .menu_box li.menu a{padding-left:0; padding-top:0; flex-wrap:wrap; align-items:baseline; align-content:center; justify-content:center;} .major_result .my_result.type04 .menu_box li.menu a:after{display:none;} .major_result .my_result.type04 .menu_box li.menu01 a:before{width:100%; height:35px; margin-bottom:15px; margin-right:0; background-size:auto 100%;} .major_result .my_result.type04 .menu_box li.menu02 a:before{width:100%; height:35px; margin-bottom:15px; margin-right:0; background-size:auto 100%;} .major_result .my_result.type05 .menu_box{width:100%;} .major_result .my_result.type06 .menu_box{width:100%; height:auto;} .major_result .my_result.type06 .menu_box li.btn_other_admission{width:calc(100%/2 - 5px/2);} .major_result .my_result.type06 .menu_box li{height:75px; width:calc(100%/2 - 5px/2);} .major_result .my_result.type06 .menu_box li.menu a{justify-content:center; padding:0;} .major_result .my_result.type06 .menu_box li.menu01 a:before{margin-right:20px; width:36px;} .chart_wrap .tit{padding:30px 0 20px; font-size:15px;} .chart_wrap .chart_box{width:100%; padding:40px 30px 80px 25px;} .chart_wrap .chart_box + .chart_box{margin-top:10px;} .chart .sort{bottom:-55px;} .chart .sort li{font-size:12px;} .chart_type1 .sort li:before{width:9px; height:9px; margin-right:5px;} .chart_type2 .sort li{padding-left:26px;} .chart_type2 .sort li:after{width:9px; height:9px;} .chart_type2 .sort li:before{width:20px; height:1px;} .chart_type3 .sort li:before{width:9px; height:9px; margin-right:5px;} .major_list{margin-top:20px;} .major_list .list .tit_list{height:50px; padding:0 15px;} .major_list .list .tit_list:before{width:18px; height:50px; margin-right:12px;} .major_list .list .tit_list:after{right:20px; width:20px; height:100%; background-size:100% auto;} .major_list .list .tit_list .tit{font-size:15px;} .major_list .list .list_con{padding:25px 40px;} .major_list .list .list_con dl + dl{margin-top:20px;} .major_list .list .list_con dl dt{margin-bottom:5px; font-size:13px;} .major_list .list .list_con dl dd{font-size:12px;} .rdo1 input[type="radio"] + label{padding-left:25px; font-size:13px;} .rdo1 input[type="radio"] + label:after{width:18px; height:18px; background-size:contain;} .rdo1 input[type="radio"]:checked + label:after{background-size:contain;} .rdo1 input[type="radio"] + label:before{width:19px; height:19px;} .rdo1 input[type="radio"] + label:after{left:6px; width:7px; height:7px;} .tbl_wrap{} .tbl_a{} .tbl_a tr{} .tbl_a th{padding:6px; height:35px; font-size:11px;} .tbl_a td{padding:6px; font-size:11px;} .tbl_a td .chk input[type="checkbox"] + label{width:20px; height:15px; background-size:contain;} .tbl_a td .chk input[type="checkbox"]:checked + label{width:20px; height:15px; background-size:contain;} .tbl_a td .select button, .tbl_a td .select{width:100%;} .tbl_a td input[type="text"]{height:30px; font-size:11px;} .tbl_a td.no_data{padding:15px 0 20px;} .tbl_a td.no_data p{font-size:13px;} .tbl_a td.no_data button img{width:25px;} .select_box button{height:40px; line-height:40px; padding:0 40px 0 20px; border-radius:20px; font-size:13px; letter-spacing:-1px;} .select_box button:after{right:16px; width:16px;} .select_box ul{max-height:158px; border-radius:0 0 20px 20px;} .select_box ul li a{min-height:38px; padding:8px 0 8px 20px; font-size:13px} .select_box.open button{border-radius:20px 20px 0 0; box-shadow:0 -2px 4px rgba(0,0,0,0.3);} .select_box.open ul{box-shadow:0 2px 4px rgba(0,0,0,0.3);} .select_box_02 button{padding:0 30px 0 10px; height:30px; line-height:30px; font-size:11px;} .select_box_02 button:after{width:10px; right:12px;} .select_box_02 ul{max-height:133px;} .select_box_02 ul li a{min-height:32px; font-size:12px; padding:5px 0 5px 10px;} .select_box_03 button{height:35px; line-height:35px; padding:0 30px 0 15px; font-size:13px; letter-spacing:-1px;} .select_box_03 button:after{right:16px; width:16px;} .select_box_03 ul{max-height:145px;} .select_box_03 ul li a{min-height:35px; padding:8px 0 8px 20px; font-size:13px} .select_box_03.open button{box-shadow:0 -2px 4px rgba(0,0,0,0.3);} .select_box_03.open ul{box-shadow:0 2px 4px rgba(0,0,0,0.3);} .btn_wrap{margin-top:30px;} .btn-l{max-width:calc(100%/3 - 20px/3); width:calc(100%/3 - 20px/3); height:45px; font-size:15px;} .btn-l + .btn-l{margin-left:10px;} .btn-m{width:calc(100%/3 - 20px/3); height:40px; font-size:13px;} .btn-m + .btn-m{margin-left:10px;} .btn-l:hover{transform:translate3d(0, -3px, 0);} .btn-m:hover{transform:translate3d(0, -2px, 0);} .btn_wrap.ea4 .btn-l{max-width:calc(100%/2 - 10px/2); width:calc(100%/2 - 10px/2); margin-bottom:10px;} .btn_wrap.ea4 .btn-l + .btn-l{margin-left:10px;} .btn_wrap.ea4 .btn-l:nth-child(2n+1){margin-left:0;} .btn_wrap.ea4 .btn-l:nth-child(n+3){margin-bottom:0;} .btn_wrap.ea4 .btn-m{width:calc(100%/2 - 10px/2); margin-bottom:10px;} .btn_wrap.ea4 .btn-m + .btn-m{margin-left:10px;} .btn_wrap.ea4 .btn-m:nth-child(2n+1){margin-left:0;} .btn_wrap.ea4 .btn-m:nth-child(n+3){margin-bottom:0;} .popup_search .popup .btn_close{position:absolute; top:18px; right:20px; width:18px; height:18px;} .popup_search .popup h5.tit_pop{height:55px; padding:0 20px; font-size:17px;} .popup_search .popup h5.tit_pop:before{margin-right:12px; width:15px;} .popup_search .popup_con{padding:25px 25px 30px;} .popup_search p{margin-top:15px; padding-left:22px; text-indent:-14px; font-size:13px;} .popup_search .search_result{margin-top:20px;} .popup_search .search_result ul li a{padding:20px 5px;} .popup_search .search_result ul li a strong{margin-right:-13px;font-size:17px;} .popup_search .search_result ul li a .label{width:80px; height:22px; line-height:22px; font-size:12px;} .popup_counseling .popup_con{padding:30px 20px;} .popup_counseling .form_box + .form_box{margin-top:20px;} .popup_counseling .form_box .tit_form{padding-left:30px; margin-bottom:15px; font-size:14px; letter-spacing:-1px;} .popup_counseling .form_box .tit_form:before{top:-2px; width:18px; height:18px;} .popup_counseling .chk1 input[type="checkbox"] + label{padding-left:30px; font-size:13px;} .popup_counseling .chk1 input[type="checkbox"] + label:after{width:20px; height:20px;} .popup_counseling .chk1 input[type="checkbox"]:checked + label:after{background:url("../csapp/img/chk_on2.png")no-repeat center; background-size:contain;} .popup_counseling .agree_wrap{height:100px; padding:12px 5px 12px 13px;} .popup_counseling .agree_wrap .scroll_box{font-size:11px;} .popup_counseling .select_wrap .select_box{margin-top:12px; width:100%;} .popup_counseling .info_wrap .info_tab{margin-bottom:15px; height:40px;} .popup_counseling .info_wrap .info_tab .tab input[type="radio"] + label{font-size:13px;} .popup_counseling .mail_wrap .mail_03{padding:0 50px 0 20px;} .popup_counseling .mail_wrap .at{font-size:14px;} .popup_counseling .mail_wrap .btn_select{right:16px; width:16px;} .popup_counseling .btn_wrap{margin-top:20px;} .popup_counseling .btn_wrap .btn{height:45px; font-size:16px;} .popup_majorCompare .popup_con{padding:30px 20px;} .popup_counseling .popup{top:30px;} .footer .inner{padding:0 0 40px} .footer address{font-size:12px; letter-spacing:-0.5px;} .footer address span{display:block;} .footer address .br{display:block;} } @media screen and (max-width:499px){ .allMenu .top_area{padding:35px 0 25px;} .allMenu .top_area:before{background-size:auto 80%;} .allMenu .top_area h2 span{font-size:13px;} .allMenu .top_area h2 span em{font-size:14px;} .allMenu .top_area h2 strong{font-size:25px;} .allMenu .info{margin-top:20px;} .allMenu .visitors p{font-size:13px;} .allMenu .allMenu_cont{padding:35px 0; border-radius:50px 0 0 0; height:calc(100vh - 166px);} .allMenu .allMenu_cont p{font-size:13px;} .allMenu .allMenu_cont .allMenu_btn{margin-top:30px;} .allMenu .allMenu_cont .allMenu_btn .btn_01{padding-left:25px; height:70px; border-radius:15px;} .allMenu .allMenu_cont .allMenu_btn .btn_01 span{font-size:18px;} .allMenu .allMenu_cont .allMenu_btn .btn_02{margin-top:15px; padding-left:25px; height:55px; border-radius:15px;} .allMenu .allMenu_cont .allMenu_btn .btn_02 span{font-size:15px;} .information .form_box .select_wrap.half{gap:10px 0;} .information .form_box .select_wrap.half .select{width:100%} .grade .board.on .board_con{padding:30px 0 40px;} .grade .board:is(.normal) .board_con{padding:0 0 30px;} .grade .board.qualification .board_con{padding:30px 0 40px;} .grade .detail_wrap2 .grade_wrap{display:block; } .grade .detail_wrap2 .detail_box .detail{min-width:100%;} .grade .detail_wrap2 .detail_box input[type="text"], .grade .detail_wrap2 .detail_box .select{width:100%; flex:none;} .grade .detail_wrap2 .detail_box .select + input[type="text"]{margin-top:5px;} .grade .detail_wrap2 .wrap_detail.flex .tit_detail2{margin:15px 0 12px; width:100%;} .major_view button.admission{font-size:16px;} .major_view button.admission:before{margin-right:12px; width:13px; height:12px;} .major_view button.admission:after{margin-left:12px; width:17px; height:8px;} .major_view .major_tit .major{margin-left:38px; font-size:17px;} .major_view .major_tit .major:before{left:-19px; height:17px;} .btn_wrap{margin-top:20px;} .btn-l{max-width:100%; width:100%; height:36px; font-size:14px;} .btn-l + .btn-l{margin-left:0; margin-top:8px;} .btn-m{max-width:100%; width:100%;} .btn-m + .btn-m{margin-left:0; margin-top:5px;} .btn_wrap.ea4 .btn-l{max-width:100%; width:100%; margin-bottom:0;} .btn_wrap.ea4 .btn-l + .btn-l{margin-left:0;} .btn_wrap.ea4 .btn-m{width:100%; margin-bottom:0;} .btn_wrap.ea4 .btn-m + .btn-m{margin-left:0;} } @media screen and (max-width:390px){ .input_txt{padding:0 15px; font-size:12px;} .search_wrap .input_txt, .information .agree_box .mail_wrap .mail_03, .popup_counseling .mail_wrap .mail_03{padding:0 34px 0 15px;} .pointTxt{padding-left:15px; text-indent:-15px; font-size:12px;} .information .form_wrap{padding:25px 20px 25px;} .information .agree_box .agree_con .list_dot li.indent03{padding-left:0; padding-top:14px;} .grade .detail_wrap .tit_btns .btns{width:100%;} .grade .detail_wrap .tit_btns .btn-s{width:calc(100%/3 - 12px/3);} .grade .detail_wrap2{padding:0 10px 20px;} .type_grade .ex_tab .ex span{font-size:9px;} .type_grade .ex_tab .ex span + span{margin-left:0;} .type_grade .ex_tab .ex span em{width:16px; height:16px; line-height:17px; font-size:10px;} .major_view .major_menu li a span{font-size:12px; letter-spacing:-1px;} .major_view .year_tab{gap:0; justify-content:space-around;} .major_result .my_grade .grade{font-size:22px;} .major_result .my_grade.type02 .grade span{margin:0 auto 20px; width:40px; height:40px; font-size:24px;} .major_result .my_grade.type03 .grade{margin-top:40px; font-size:26px; letter-spacing:-1px;} .major_result .my_grade.type03 .grade span{padding:0 8px;} .major_result .my_grade.type03 .grade span:before{bottom:-4px; height:16px;} .major_result .menu_box li > a{font-size:12px;} .major_result .menu_box li.btn_other_admission > a{padding:0 15px;} .major_result .my_result.type04 .menu_box li.menu01 a:before, .major_result .my_result.type04 .menu_box li.menu02 a:before{height:25px;} .select_box button{padding:0 30px 0 15px;} .select_box button:after{right:12px; width:14px;} .select_box ul li a{padding:6px 0 6px 15px;} .popup_detail .popup_con{padding:20px 25px 25px;} .popup .btn_pop_close{top:20px; width:15px; height:15px;} .popup_detail .my_grade_detail .grade_box{margin:0 auto;} .popup_detail .my_grade_detail .grade_box + .info_box{margin-top:40px; margin-left:0; width:100%;} .popup_detail .my_grade_detail .info_box ul{justify-content:space-between;} .popup_detail .my_grade_detail .info_box ul li{width:49%;} .popup_detail .my_grade_detail .average_box{margin-top:40px;} .popup_search .search_result ul li a{padding:15px 5px;} .popup_search .search_result ul li a strong{margin-left:0; margin-top:8px; width:100%;} .popup_majorCompare .tbl_pop thead th{height:45px; font-size:12px;} .popup_majorCompare .tbl_pop thead th.blue{padding:15px 10px; height:45px; font-size:12px;} .popup_majorCompare .tbl_pop tbody th{padding:15px 5px; height:45px; font-size:12px;} .popup_majorCompare .tbl_pop tbody td{padding:15px 5px; height:45px; font-size:12px;} .popup_majorCompare .tbl_pop .label{margin-left:6px; width:20px; height:20px; font-size:13px;} .popup_majorCompare .tbl_pop a.btn{padding:0 8px; height:24px; line-height:24px; border-radius:24px; font-size:11px;} .popup_majorCompare .tbl_pop a.btn:after{margin-left:4px; width:5px;} .popup_majorCompare .tbl_pop a.btn:hover:after{background-size:100% auto;} .popup_majorCompare .tbl_pop .select_box_02 + .select_box_02{margin-top:5px;} .popup_majorCompare .tbl_pop .btn_re img{width:22px;} } @media screen and (max-width:360px){ .footer address span{font-size:10px;} } @media screen and (max-width:320px){ .title_wrap h2.title{font-size:22px;} .title_wrap p{font-size:12px;} .title_wrap .list_dot li{font-size:12px;} .information .form_wrap{padding:20px 15px} .type_grade .board{padding:0 15px 20px;} .major_view .major_menu{gap:5px;} .major_view .major_menu li{width: calc(100%/2 - 5px/2); height:62px;} .major_view .year_tab li a{font-size:12px; letter-spacing:-0.5px;} .major_result .my_grade.type03 .grade{font-size:22px;} .select_box button{font-size:12px;} .select_box ul li a{font-size:12px;} .footer address{letter-spacing:-0.5px;} } /* .grade_board .graph{position:absolute; top:100%; left:50%; width:145px; height:145px; border-radius:50%; aspect-ratio:1; transform:translate(-50%,-50%); font-size:11px;} .grade_board .graph{background:conic-gradient(from -90deg, #f1244b 12.2%, #fff 12.2%, #fff 12.8%, #727272 12.8%, #727272 24.7%, #fff 24.7%, #fff 25.3%, #727272 25.3%, #727272 37.2%, #fff 37.2%, #fff 37.8%, #727272 37.8%, #727272 50%); } .grade_board .graph.ea3{background:conic-gradient(from -90deg, #f1244b 16.3%, #fff 16.3%, #fff 16.9%, #727272 16.9%, #727272 33%, #fff 33%, #fff 33.6%, #727272 33.6%, #727272 50%); } .grade_board .graph svg{position:absolute; top:-40px; left:50%; transform:translateX(-50%) rotate(5deg); width:210px; height:220px;} .grade_board .graph svg text{font-size:4.5px; font-weight:bold; color:#a0a0a0; fill:#a0a0a0; text-align:center;} .grade_board .graph svg text textPath.on{color:#000; fill:#000;} .grade_board .graph{background:conic-gradient(from -90deg, #f1244b 12.5%, #727272 12.5%, #727272 25%, #219705 25%, #219705 37.5%, #a20ef6 37.5%, #a20ef6 50%);} .grade_board .graph.ea3{background:conic-gradient(from -90deg, #727272 16%, #727272 16%, #727272 34%, #00a4f0 34%, #00a4f0 50%);} */ .grade_board .graph{position:absolute; top:100%; left:50%; width:140px; height:140px; border-radius:50%; aspect-ratio:1; transform:translate(-50%,-50%); font-size:11px;} .grade_board .graph .douhnot{position:absolute; top:50%; left:50%; width:100%; height:100%; border-radius:50%; aspect-ratio:1; transform:translate(-50%,-50%); font-size:11px; z-index:9;} .grade_board .graph .line{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2px; height:140px; background:#fff; z-index:21;} .grade_board .graph .line:before{content:''; position:absolute; top:50%; left:50%; width:2px; height:140px; background:#fff; margin-left:-2px; margin-top:-2px; transform:translate(-50%,-50%) rotate(-45.5deg); transform-origin:center;} .grade_board .graph .line:after{content:''; position:absolute; top:50%; left:50%; width:2px; height:140px; background:#fff; transform:translate(-50%,-50%) rotate(44deg)} .grade_board .graph svg{position:absolute; top:-40px; left:50%; transform:translateX(-50%) rotate(-25deg); width:210px; height:220px;} .grade_board .graph svg text{font-size:4.5px; font-weight:bold; color:#a0a0a0; fill:#a0a0a0; text-anchor: middle;} .grade_board .graph svg text textPath{letter-spacing:-0.3px;} .grade_board .graph .douhnot:not(.on){background:none !important;} .grade_board .graph .douhnot.on{z-index:20;} .grade_board .graph .douhnot.on svg text textPath{color:#000; fill:#000; font-weight:900} .grade_board .graph svg text textPath.on{color:#000; fill:#000; font-weight:900} .grade_board .graph.ea3 svg{transform:translateX(-50%) rotate(-33deg);} .grade_board .graph.ea3 .line{transform:translate(-50%,-50%) rotate(-30deg); margin-top:-1px; margin-left:-1px;} .grade_board .graph.ea3 .line:before{content:''; position:absolute; top:50%; left:50%; width:2px; height:140px; background:#fff; transform:translate(-50%,-50%) rotate(63deg)} .grade_board .graph.ea3 .line:after{display:none;} .grade_board .my_grade:before{content:''; top:50%; left:50%; transform:translate(-50%,-50%); width:85px; height:85px; background:#fff;} :root { --setA-color: #f1244b; --setA-halfcolor: #f1244b80; --setB-color: #219705; --setB-halfcolor: #21970580; --setC-color: #00a4f0; --setC-halfcolor: #00a4f080; --setD-color: #a20ef6; --setD-halfcolor: #a20ef680; } .type_grade .tblW td .pass_spot_wrap.A .range{background:var(--setA-color);} .type_grade .tblW td .pass_spot_wrap.A .my_spot span{color:var(--setA-color); border:1px solid var(--setA-color); box-shadow:0 0 5px var(--setA-halfcolor);} .type_grade .tblW td .pass_spot_wrap.A .my_spot span:after{content:''; display:block; position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%); width:0; border-color:#fff transparent; border-style:solid; border-width: 6px 5px 0 5.5px; z-index:1;} .type_grade .tblW td .pass_spot_wrap.A .my_spot span:before{content:''; display:block; position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%); width:0; border-color:var(--setA-color) transparent; border-style:solid; border-width:6px 5px 0 5.5px; z-index:0;} .type_grade .tblW td .pass_spot_wrap.A .my_spot span{color:var(--setA-color); border:1px solid var(--setA-color); box-shadow:0 0 5px var(--setA-halfcolor);} .type_grade .tblW td .pass_spot_wrap.A .my_spot:before{background:var(--setA-color);} .type_grade .tblW td .pass_spot_wrap.B .range{background:var(--setB-color);} .type_grade .tblW td .pass_spot_wrap.B .my_spot span{color:var(--setB-color); border:1px solid var(--setB-color); box-shadow:0 0 5px var(--setB-halfcolor);} .type_grade .tblW td .pass_spot_wrap.B .my_spot span:after{content:''; display:block; position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%); width:0; border-color:#fff transparent; border-style:solid; border-width: 6px 5px 0 5.5px; z-index:1;} .type_grade .tblW td .pass_spot_wrap.B .my_spot span:before{content:''; display:block; position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%); width:0; border-color:var(--setB-color) transparent; border-style:solid; border-width:6px 5px 0 5.5px; z-index:0;} .type_grade .tblW td .pass_spot_wrap.B .my_spot span{color:var(--setB-color); border:1px solid var(--setB-color); box-shadow:0 0 5px var(--setB-halfcolor);} .type_grade .tblW td .pass_spot_wrap.B .my_spot:before{background:var(--setB-color);} .type_grade .tblW td .pass_spot_wrap.C .range{background:var(--setC-color);} .type_grade .tblW td .pass_spot_wrap.C .my_spot span{color:var(--setC-color); border:1px solid var(--setC-color); box-shadow:0 0 5px var(--setC-halfcolor);} .type_grade .tblW td .pass_spot_wrap.C .my_spot span:after{content:''; display:block; position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%); width:0; border-color:#fff transparent; border-style:solid; border-width: 6px 5px 0 5.5px; z-index:1;} .type_grade .tblW td .pass_spot_wrap.C .my_spot span:before{content:''; display:block; position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%); width:0; border-color:var(--setC-color) transparent; border-style:solid; border-width:6px 5px 0 5.5px; z-index:0;} .type_grade .tblW td .pass_spot_wrap.C .my_spot span{color:var(--setC-color); border:1px solid var(--setC-color); box-shadow:0 0 5px var(--setC-halfcolor);} .type_grade .tblW td .pass_spot_wrap.C .my_spot:before{background:var(--setC-color);} .type_grade .tblW td .pass_spot_wrap.D .range{background:var(--setD-color);} .type_grade .tblW td .pass_spot_wrap.D .my_spot span{color:var(--setD-color); border:1px solid var(--setD-color); box-shadow:0 0 5px var(--setD-halfcolor);} .type_grade .tblW td .pass_spot_wrap.D .my_spot span:after{content:''; display:block; position:absolute; top:calc(100% - 1px); left:50%; transform:translateX(-50%); width:0; border-color:#fff transparent; border-style:solid; border-width: 6px 5px 0 5.5px; z-index:1;} .type_grade .tblW td .pass_spot_wrap.D .my_spot span:before{content:''; display:block; position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%); width:0; border-color:var(--setD-color) transparent; border-style:solid; border-width:6px 5px 0 5.5px; z-index:0;} .type_grade .tblW td .pass_spot_wrap.D .my_spot span{color:var(--setD-color); border:1px solid var(--setD-color); box-shadow:0 0 5px var(--setD-halfcolor);} .type_grade .tblW td .pass_spot_wrap.D .my_spot:before{background:var(--setD-color);} .my_spot span {color: var(--myspot-color);border: 1px solid var(--myspot-color);box-shadow: 0 0 5px var(--myspot-shadow);} .my_spot span:after {content: '';display: block;position: absolute;top: calc(100% - 1px);left: 50%;transform: translateX(-50%);width: 0;border-style: solid;border-width: 6px 5px 0 5.5px;z-index: 1;border-color: #fff transparent transparent transparent;} .my_spot span:before {content: '';display: block;position: absolute;top: calc(100% + 1px);left: 50%;transform: translateX(-50%);width: 0;border-style: solid;border-width: 6px 5px 0 5.5px;z-index: 0;border-color: var(--myspot-color) transparent transparent transparent; } /* 선택적 상태용 클래스 */ .pass_spot_wrap.red .my_spot span:before {border-color: var(--myspot-color) transparent transparent transparent;} .major_result .graph_box .pass_spot_wrap .my_spot:before {border-left: 1px dashed var(--myspot-color);} .major_result .graph_box .pass_spot_wrap.A .range{background:linear-gradient(90deg, var(--setA-color) 0%, rgba(255,204,68,1) 50%, var(--setA-color) 100%);} .major_result .graph_box .pass_spot_wrap.B .range{background:linear-gradient(90deg, var(--setB-color) 0%, rgba(255,204,68,1) 50%, var(--setB-color) 100%);} .major_result .graph_box .pass_spot_wrap.C .range{background:linear-gradient(90deg, var(--setC-color) 0%, rgba(255,204,68,1) 50%, var(--setC-color) 100%);} .major_result .graph_box .pass_spot_wrap.D .range{background:linear-gradient(90deg, var(--setD-color) 0%, rgba(255,204,68,1) 50%, var(--setD-color) 100%);}