@charset "utf-8";

/* service */
.service .service_li{font-size:0; margin-bottom:40px;}
.service .service_li li{ display:inline-block; width:calc(33% - 10px); text-align:center; vertical-align:top; margin-right:20px; }
.service .service_li li:last-child{margin:0;}
.service .service_li li .txt_bx{position: relative; padding:40px 0; border:1px solid #ddd; border-bottom:0;}
.service .service_li li img{margin-bottom:20px;}
.service .service_li li span{display:block; color:#000; font-size:25px; font-weight:600; margin-bottom: 5px;}
.service .service_li li p{height:50px; color:#666; font-size:16px;}
.service .service_li li a{display:block; color:#fff; font-size:18px; padding:15px 0;}
.service .service_li li:nth-child(1) a{background:#4bbdb2;}
.service .service_li li:nth-child(2) a{background:#0094f7;}
.service .service_li li:nth-child(3) a{background: rgba(255,255,255,0.2)}
.service .service_li li.remote{background: linear-gradient(145deg, #00bedf, #009af4);}
.service .service_li li.remote p,
.service .service_li li.remote span{color:#fff;}
.service .service_li li.remote .txt_bx{padding-top:60px; border:0;}

/* quiz_frame omr */
.quiz_frame.omr {max-width:1300px;}
.quiz_frame.omr .frm_top {max-width:1300px;}
.quiz_frame.omr .frm_ct {overflow:hidden;padding-right:220px;}
.quiz_frame.omr .side {position:fixed;right:0;top:82px;width:200px;height:calc(100% - 82px);padding-top:38px;border:2px solid #000;background-color:#fff;transition:right 0.3s ease-out;}
.quiz_frame.omr .side .top {position:absolute;left:0;top:0;width:100%;height:40px;border-bottom:2px solid #000;}
.quiz_frame.omr .side .top .title {text-align:center;line-height:38px;padding:0 10px;font-weight:500;color:#000;}
.quiz_frame.omr .side .sheet {overflow-y:auto;height:100%;}
.quiz_frame.omr .sheet .ord {width:32px;}
.quiz_frame.omr .sheet td {padding:4px;border-top:1px solid #000;border-bottom:1px solid #000;}
.quiz_frame.omr .sheet .num {text-align:center;border-right:1px solid #000;font-size:14px;font-weight:500;color:#000;}
.quiz_frame.omr .sheet .multi {display:flex;justify-content:space-around;}
.quiz_frame.omr .sheet .multi span {text-align:center;display:inline-block;width:16px;line-height:14px;border-radius:50%;border:1px solid #000;font-size:12px;color:#000;}
.quiz_frame.omr .sheet .multi .selected span {border-color:#000;color:#fff;background-color:#000;}
.quiz_frame.omr .sheet .text {font-size:12px;color:#000;}
.quiz_frame.omr .sheet .on {background-color:#b6b6b6;}

/* omr scroll */
.quiz_frame.omr .side .sheet::-webkit-scrollbar {width:7px;}
.quiz_frame.omr .side .sheet::-webkit-scrollbar-thumb,
.quiz_frame.omr .side .sheet::-webkit-scrollbar-thumb {background: #ddd; border-radius: 20px;}
.quiz_frame.omr .side .sheet::-webkit-scrollbar-track,
.quiz_frame.omr .side .sheet::-webkit-scrollbar-track{background: #f6f6f8;}
.quiz_frame.omr .side .sheet::-webkit-scrollbar {width:10px;}

@media screen and (max-width:768px) {
/* service */
.service .service_li li{width:calc(50% - 7.5px); margin:0;}
.service .service_li li img{width:80px;}
.service .service_li li .txt_bx{padding:20px;}
.service .service_li li:nth-child(1){margin-right: 15px;}
.service .service_li li.remote{width:100%; margin-top:20px;}
}

@media screen and (max-width:640px) {
/* service */
.service .service_li li span{font-size:20px;}
.service .service_li li p{font-size:14px; word-break: keep-all;}
.service .service_li li a{font-size:15px; padding: 10px 0;}
.service .service_li li .txt_bx{padding: 20px;}
.service .service_li li.remote .txt_bx{padding:30px 20px 0 20px;}
}

@media screen and (max-width:500px) {
/* service */
.service .service_li li{width:100%;}
.service .service_li li:nth-child(1){margin-right:0; margin-bottom:20px;}
.service .service_li li.remote{display:none;}
.service .service_li li .txt_bx{text-align: left; padding: 20px 10px 0 100px;}
.service .service_li li p br{display: none; }
.service .service_li li img{position: absolute; top:20px; left:20px; width:60px; margin-bottom:0;}
}