@charset "utf-8";

/* 공통 */
.container {min-height:calc(100vh - 100px);overflow-x:hidden}
.wrapper {width:100%;max-width:940px;padding:0 20px;margin:0 auto}
.no_scroll {height:100%;overflow:hidden}
.only_mb {display:none}
.btn_wrap {display:flex;align-items:center;justify-content:center;gap:0 10px}
.btn_wrap.only_mb {display:none}
.btn {display:flex;align-items:center;justify-content:center;gap:0 10px;width:100%;transition:all .2s}
.btn_primary {background:var(--primary);font-size:24px;font-weight:700;color:var(--white)}
.btn_primary:hover {background:#1ca499}
.btn_black {background:#333333;color:var(--white)}
.btn_black:hover {background:#555555}
.btn_red {background:var(--red);color:var(--white)}
/*.btn:disabled,*/
/*.btn.disabled {background:#EEEEEE;color:#DDDDDD}*/
/*내가 수정*/
.btn:disabled,
.btn.disabled {background:#EEEEEE;color:#DDDDDD;cursor: not-allowed; /* 마우스 커서를 변경 */pointer-events: none; /* 클릭 이벤트를 막음 */}
.btn_gray {background:#DDDDDD}
.btn_gray:hover {background:#c3c3c3}
.sec {overflow:hidden}
.sec_tit {display:block;font-size:18px;font-weight:600;margin-bottom:30px}
.green {color:var(--primary)}
.orange {color:#FF983A}
.red {color:#FF5A79}
.alert_msg {font-size:14px;font-weight:500;color:#FF5353;text-align:center;margin-top:50px}
.msg {font-size:14px;font-weight:500;text-align:center;margin-top:10px}
.guide_marker {display:block}
.coach {display:none}

.scroll_custom::-webkit-scrollbar {width:6px}
.scroll_custom::-webkit-scrollbar-thumb {background-clip:padding-box;background-color:#eee;border-radius:50px}
.scroll_custom::-webkit-scrollbar-track {background-color:#fafafa;border-radius:50px}

.title_box {display:flex;align-items:center;margin-bottom:20px}
.title_box h2 {font-size:20px;font-weight:700}
.title_box h3 {font-size:16px;font-weight:500;color:#44474B;margin-left:12px}
.title_box .btn {max-width:140px;height:32px;border-radius:5px}
.title_box p {font-size:14px;color:#555555;margin-left:auto}

.cont_box {background:var(--white);border:solid 1px #EEEEEE;border-radius:5px;box-shadow:2px 2px 4px rgba(217,217,217,.25);overflow:hidden}

.legend_box {display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:10px}
.legend_box > div {display:flex;align-items:center;gap:0 8px;font-size:12px;font-weight:600}
.legend_box > div .square {width:34px;height:20px;border-radius:2px}

.gauge {flex:1;width:100%;height:15px;background:#F4F4F5;border-radius:20px;position:relative}
.gauge .bar {display:inline-block;width:0;height:100%;background:var(--primary);border-radius:20px;position:absolute;transition:all 1.2s}
.gauge .bar .percent {display:flex;align-items:center;justify-content:center;width:40px;height:24px;background:#333333;border-radius:5px;font-size:12px;font-weight:500;color:var(--white);text-align:center;position:absolute;left:100%;bottom:24px;transform:translateX(-50%)}
.gauge .bar .percent::before {content:'';display:block;width:12px;height:8px;background:url('../../img/agent/tri.svg') no-repeat center/100%;position:absolute;top:100%;left:50%;transform:translateX(-50%)}

.popup_wrap {width:100%;height:100%;background:rgba(0,0,0,.3);position:fixed;top:0;left:0;z-index:99;padding:20px}
.popup_wrap .alert_box {display:flex;flex-direction:column;align-items:center;width:100%;max-width:516px;background:var(--white);border-radius:10px;padding:35px 20px;position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center}
.popup_wrap .alert_box img {width:54px}
.popup_wrap .alert_box .tit {display:block;font-size:20px;font-weight:700;margin-top:20px}
.popup_wrap .alert_box p {font-size:15px;font-weight:500;color:#44474B;margin-top:8px}
.popup_wrap .alert_box .btn_wrap {width:100%;margin-top:20px}
.popup_wrap .alert_box .btn_wrap .btn {width:100%;max-width:158px;height:50px;border-radius:5px;font-size:16px;font-weight:600;padding:0 20px}

.chart_box {height:240px;position:relative}
.chart_box .guide_point {font-size:10px;font-weight:600;color:var(--primary);position:absolute;right:0;right:-8px}
.chart_box .guide_point.p70 {top:22%}

.doughnut {width:125px;min-width:125px;height:125px;position:relative}
.doughnut .num {font-size:20px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}

.paging {margin-top:30px}
.paging ul {display:flex;align-items:center;justify-content:center;gap:5px}
.paging ul li > * {display:flex;align-items:center;justify-content:center;text-align:center;width:30px;height:30px;border:solid 1px #EEEEEE;border-radius:5px;transition:all .2s}
.paging ul li > *:hover {border-color:#333333}
.paging .current {background:#333333;border-color:#333333;color:var(--white);font-weight:600}
.paging .btn_prev {margin-right:5px}
.paging .btn_next {margin-left:5px}

.form {font-size:14px}
.form .item {background:var(--white);border:solid 1px #EEEEEE;border-radius:5px;box-shadow:2px 2px 4px rgba(217,217,217,.25);overflow:hidden}
.form .item + .item {margin-top:20px}
.btn_wrap {margin-top:30px}
.btn_wrap .btn {max-width:158px;height:40px;border-radius:5px;font-weight:500}
.mo_btn_wrap {display:none;align-items:center;justify-content:center;gap:0 10px;width:100%;background:var(--white);padding:20px;margin:0}
.mo_btn_wrap .btn {max-width:initial;height:48px;font-size:16px;border-radius:4px}
.input_box {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 20px;position:relative}
.select_box select,
.input_box input {width:100%;height:40px;border:0;font-size:1em;padding:0 16px}
.input_box .word_count,
.textarea_box .word_count {color:#DDDDDD;position:absolute;top:50%;right:16px;transform:translateY(-50%)}
.input_box.alert input {border-color:#FE5F5F !important}
.input_box.alert .alert_msg {width:100%;margin-top:8px;text-align:left;}
.textarea_box {height:400px;padding:16px 0}
.textarea_box textarea {width:100%;height:100%;border:0;font-size:1em;padding:0 16px}

.tooltip {display:none;position:relative;vertical-align:middle;margin-left:4px}
.tooltip .img {display:none;width:250px;position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:3}
.tooltip .img.w220 {width:220px}
.tooltip.right {margin-left:auto}
.tooltip.right .img {left:auto;right:-18px;transform:none}

/* 모바일 탑 헤드 */
.top_head {display:none;align-items:center;width:100%;height:64px;background:var(--white);border-bottom:solid 1px var(--gray-200);position:fixed;top:0;left:0;z-index:9}
.top_head.bg_tr {background:transparent;border-color:transparent}
.top_head.no_border {border-color:transparent}
.top_head.white {background:var(--white);border-bottom:solid 1px var(--gray-200)}
.top_head .btn_prev {display:flex;align-items:center;justify-content:center;width:56px;height:100%}
.top_head .btn_home {display:flex;align-items:center;justify-content:center;width:56px;height:100%}
.top_head h1 {width:calc(100% - 112px);font-size:18px;font-weight:600;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center}
.top_head .right {margin-left:auto}
.top_head .txt_link {font-size:16px;color:var(--primary);margin-right:20px}
.top_head .txt_link.gray {color:var(--gray-900)}
.top_head .txt_link.disabled {color:var(--gray-400)}

/* 탭메뉴 */
.tab_menu {background:#F6F6F6;border-radius:5px;padding:4px;margin-bottom:20px}
.tab_menu ul {display:flex;align-items:center}
.tab_menu li {flex:1}
.tab_menu li > * {display:flex;align-items:center;justify-content:center;width:100%;height:40px;font-size:16px;color:#838383;border-bottom:solid 1px var(--blue-01);border-radius:5px;transition:all .2s}
.tab_menu li > *.on {background:var(--white);color:var(--black);box-shadow:0 5px 20px rgba(0,0,0,.05)}
.tab_menu.type_01 {background:transparent;border:solid 1px #EEEEEE;border-radius:5px 5px 0 0;padding:0;overflow:hidden;margin-bottom:0}
.tab_menu.type_01 li + li {border-left:solid 1px #EEEEEE}
.tab_menu.type_01 li > * {font-size:12px;padding:0 10px}
.tab_menu.type_01 li > *.on {background:#6A6A6A;color:var(--white);border-radius:0;box-shadow:none}
.tab_menu.type_02 {background:transparent;padding:0}
.tab_menu.type_02 ul {display:grid;grid-template-columns:repeat(5, 1fr);gap:12px}
.tab_menu.type_02 li > * {border:solid 1px #EEEEEE}
.tab_menu.type_02 li > *.on {background:rgba(0,0,0,.7);color:var(--white);box-shadow:none}
.tab_menu.type_03 {background:var(--white);border-bottom:solid 1px  var(--gray-200);padding:0 20px;margin:0}
.tab_menu.type_03 ul {gap:0 20px;background:transparent;padding:0}
.tab_menu.type_03 li {flex:none}
.tab_menu.type_03 li > * {height:40px;padding:0;color:var(--gray-400);border-bottom:solid 2px transparent;border-radius:0;font-size:16px}
.tab_menu.type_03 li > *.on {box-shadow:none;border-color:var(--gray-900);color:var(--gray-900)}
.tab_cont {display:none}
.tab_cont.on {display:block}

/* 아코디언 */
.accordion_wrap .item {border-radius:5px;box-shadow:2px 2px 3px rgba(190,190,190,.25);overflow:hidden}
.accordion_wrap .item + .item {margin-top:20px}
.accordion_wrap .item > button {display:flex;align-items:center;gap:0 10px;width:100%;height:44px;background:#EEEEEE;font-size:16px;font-weight:700;color:#777777;padding:0 24px;transition:all .2s}
.accordion_wrap .item > button svg {width:12px}
.accordion_wrap .item > button svg path {transition:all .2s}
.accordion_wrap .item > button.on {background:#6A6A6A;color:var(--white)}
.accordion_wrap .item > button.on svg {transform:rotate(180deg)}
.accordion_wrap .item > button.on svg path {fill:var(--white)}
.accordion_wrap .item > button .status {display:none}
.accordion_wrap .item .cont {display:none;border:solid 1px #EEEEEE;border-top:0;border-radius:0 0 5px 5px}
.accordion_wrap .item .cont a {display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:15px;padding:10px 20px}
.accordion_wrap .item .cont a:hover .tit {text-decoration:underline}
.accordion_wrap .item .cont a + a {border-top:solid 1px #EEEEEE}
.accordion_wrap .item .cont a .tit {display:flex;align-items:center;gap:0 8px;line-height:1.4}
.accordion_wrap .item .cont a .tit img {width:20px;min-width:20px}
.accordion_wrap .item .cont a .tit img.arrow {display:none}
.accordion_wrap .item .cont a .status {color:#9FA4AB;white-space:nowrap;font-size:13px;margin-left:20px}
.accordion_wrap .item .cont a.done .status {color:#44474B}
.accordion_wrap .item .cont a .percent {display:none;align-items:center;gap:0 6px;color:var(--primary);font-size:14px}
.accordion_wrap .item .cont a .percent .round {width:16px;height:16px;border-radius:50%;margin:0 2px;position:relative}
.accordion_wrap .item .cont a .percent .round::before {content:'';width:16px;height:16px;border:solid 2px var(--gray-400);background:transparent;border-radius:100%;position:absolute}
.accordion_wrap .item .cont a .percent .bar {width:16px;height:16px}
.accordion_wrap .item .cont a .percent .to50 {display:block;content:'';clip-path:inset(0 50% 0 0);width:16px;height:16px;border:solid 2px var(--primary);background:transparent;border-radius:100%;position:absolute}
.accordion_wrap .item .cont a .percent .to100 {display:block;content:'';clip-path:inset(0 0 0 50%);width:16px;height:16px;border:solid 2px var(--primary);background:transparent;border-radius:100%;position:absolute}

/* 로딩 */
.loading {text-align:center;padding:40px 0}
.loading .top .img_wrap img {width:80px;animation:float 1s ease-in-out infinite alternate}
.loading .top span {display:block;font-size:20px;font-weight:700;color:var(--primary);margin-top:24px}
.loading .txt_wrap .tit {display:block;font-size:20px;font-weight:700;margin-top:30px}
.loading .txt_wrap p {font-size:16px;font-weight:500;color:#44474B;margin-top:8px}

/* 네비게이션 */
.navigation {display:none;background:var(--white);position:fixed;bottom:0;left:0;width:100%;z-index:9}
.navigation ul {display:flex}
.navigation li {flex:1}
.navigation li a {display:flex;flex-direction:column;align-items:center;gap:4px 0;height:60px;font-size:12px;font-weight:600;color:var(--gray-400);padding-top:9px}
.navigation li a .icon {display:block;width:24px;height:24px;background:url('../../img/agent/navi_icon.svg') no-repeat left top/96px}
.navigation li a .icon_02 {background-position-x:-24px}
.navigation li a .icon_03 {background-position-x:-48px}
.navigation li a .icon_04 {background-position-x:-72px}
.navigation li a.on {color:var(--gray-900)}
.navigation li a.on .icon {background-position-y:-24px}

/* 헤더 */
.header {display: flex; width:100%;height: 110px;background:#FAFAFA;border-bottom:solid 1px #EEEEEE;position:fixed;top:0;left:0;z-index:99;transition:background .2s}
.header.white {background:var(--white);border-bottom:solid 1px #f8f8f8}
.header.white .gnb li a {color:var(--black)}
.header.white .menu_open line {stroke:var(--black)}

.header .wrapper {display:flex;align-items:center;max-width:1100px}
.header .logo {width:87px}
.header .menu_wrap {display:flex;align-items:center;width:100%}
.header .menu_wrap .menu_head {display:none}
.header .menu_open {display:none}

.header .gnb {margin-left:54px}
.header .gnb > ul {display:flex;align-items:center;gap:0 34px}
.header .gnb li {position:relative}
.header .gnb li:hover .depth_01 {color:var(--primary)}
.header .gnb .depth_01 {display:flex;align-items:center;height:50px;font-size:16px;font-weight:500;color:#44474B;transition:all .2s;cursor:pointer}
.header .gnb .depth_02 {display:none;width:320px;flex-direction:column;gap:20px 0;background:var(--white);border:solid 1px #EEEEEE;border-radius:10px;position:absolute;top:40px;left:0;box-shadow:4px 4px 4px rgba(206,206,206,.25);padding:26px 0;animation:show-right .3s ease-out}
.header .gnb .depth_02 .menu {display:flex;align-items:center;gap:0 10px;font-size:13px;font-weight:500;color:#656A71;position:relative;padding:0 24px;cursor:pointer;transition:all .2s}
.header .gnb .depth_02 li > .have_03::after {content:'';display:block;width:6px;height:10px;background:url('../../img/agent/arrow_right.svg') no-repeat center/100%;position:absolute;right:24px;top:50%;transform:translateY(-50%);transition:all .2s}
.header .gnb .depth_02 li:hover > .have_03::after {right:21px}
.header .gnb .depth_02 li > div:hover,
.header .gnb .depth_02 li > a:hover {color:var(--primary)}
.header .gnb > ul > li:hover .depth_02 {display:flex}
.header .gnb .depth_02 li:hover .depth_03 {display:flex}
.header .gnb .depth_03 {display:none;position:absolute;top:0;left:100%;padding-left:10px;animation:show-right .3s ease-out}
.header .gnb .depth_03 .inner {width:246px;display:flex;flex-direction:column;gap:20px 0;background:var(--white);border:solid 1px #EEEEEE;border-radius:10px;box-shadow:4px 4px 4px rgba(206,206,206,.25);padding:14px 0}
.header .gnb .depth_03 li > a {padding:0 16px}
.header .gnb .icon {display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:#F9F9FA;border:solid 1px #EEEEEE;border-radius:10px;}
.header .gnb .icon img {width:20px}

.header .my_menu {display:flex;align-items:center;gap:0 10px;margin-left:auto}
.header .my_menu > div {position:relative}
.header .my_menu .toggle_btn {display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:40px;position:relative}
.header .my_menu .toggle_btn.on {background:#EEEEEE}
.header .my_menu .toggle_btn .new {display:block;width:10px;height:10px;background:#FF5353;border-radius:10px;position:absolute;top:2px;right:4px}
.header .my_menu .toggle_btn.new {animation: shake-top 1.6s cubic-bezier(0.455, 0.030, 0.515, 0.955) both infinite}
.header .my_menu .box {display:none;background:var(--white);border:solid 1px #EEEEEE;border-radius:5px;position:absolute;top:calc(100% + 3px);right:0;animation:show-up .3s ease-out}
.header .alarm_box .box {width:320px}
.header .alarm_box .box .head {display:flex;align-items:center;justify-content:space-between;height:40px;border-bottom:solid 1px #EEEEEE;font-size:14px;font-weight:500;color:#656A71;padding:0 15px}
.header .alarm_box .box .head button {display:flex;align-items:center;height:100%;font-size:12px;color:#9FA4AB;transition:color .2s}
.header .alarm_box .box .head button:hover {color:#656A71}
.header .alarm_box .box .noti-cont {max-height:230px;overflow-y:auto}
.header .alarm_box .box .noti-cont li + li div {border-top:solid 1px #EEEEEE}
.header .alarm_box .box .noti-cont li div {font-size:13px;color:#656A71;padding:18px 16px;position:relative}
.header .alarm_box .box .noti-cont li div .btn_delete {width:20px;height:20px;position:absolute;top:12px;right:12px}
.header .alarm_box .box .noti-cont li .date {font-size:12px;font-weight:500;color:#9FA4AB}
.header .alarm_box .box .noti-cont li p {line-height:1.4;margin-top:10px}
.header .alarm_box .box .noti-cont .empty {font-size:14px;font-weight:500;color:#656A71;text-align:center;padding:50px 0}

.header .my_box .toggle_btn {background:#EEEEEE;border:solid 1px #DDDDDD}
.header .my_box .box {width:142px}
.header .my_box .box li > * {display:flex;align-items:center;width:100%;height:40px;font-size:14px;font-weight:500;color:#44474B;padding:0 14px;transition:all .2s}
.header .my_box .box li > *:hover {color:var(--primary)}
.header .my_box .box li > *.red {color:#FF5353}
.header .my_box .box li + li {border-top:solid 1px #EEEEEE}

.mb_header {display:none}

@keyframes show-right {
    from {transform:translateX(-5%);opacity:0}
    to {transform:translateX(0);opacity:1}
}
@keyframes show-up {
    from {transform:translateY(5%);opacity:0}
    to {transform:translateY(0);opacity:1}
}
@keyframes shake-top {
    0%,
    50% {transform: rotate(0deg);transform-origin: 50% 0}
    5% {transform: rotate(2deg);}
    10%,
    20% {transform: rotate(-4deg)}
    15%,
    25% {transform: rotate(4deg)}
    40% {transform: rotate(-2deg)}
    45% {transform: rotate(2deg)}
}
@keyframes float {
    from {transform:translateY(0)}
    to {transform:translateY(6%)}
}

/* 푸터 */
.footer {background:#25282B;padding:24px 0}
.footer .info {display:flex;align-items:center;gap:0 20px;margin-top:20px;color:rgba(255,2555,255,.4)}
.footer .info ul {display:flex;align-items:center;gap:0 20px}
.footer .info ul li a {color:inherit}
.footer .info ul li a:hover {text-decoration:underline}

/* 로그인 */
.login_wrap {display:flex;align-items:center;justify-content:center;flex-direction:column;height:100vh;position:relative}
.login_wrap::before {content:'';display:block;width:50%;height:100%;background:url('../../img/agent/login_bg.jpg') no-repeat center/cover;position:absolute;top:0;left:0;z-index:-1}
.login_wrap .head {text-align:center}
.login_wrap .head p {font-size:16px;font-weight:500;margin-top:10px}
.login_wrap .box {width:100%;max-width:480px;background:#FAFAFA;border-radius:20px;margin-top:28px;box-shadow:4px 4px 4px rgba(209,209,209,.25), -2px -2px 4px rgba(209,209,209,.25);padding:58px 43px}
.login_wrap .box h1 {font-size:25px;font-weight:600;text-align:center;margin-bottom:28px}
.login_wrap .box .input_box {position:relative;margin-top:16px}
.login_wrap .box .input_box input {height:50px;background:var(--white);border:solid 1px #EEEEEE;border-radius:5px;font-size:15px;transition:all .2s}
.login_wrap .box .input_box input:focus {border-color:var(--primary)}
.login_wrap .box .input_box .icon {position:absolute;top:16px;right:16px}
.login_wrap .box .input_box .icon .yes {display:none}
.login_wrap .box .input_box .btn_delete {position:absolute;top:13px;right:8px}
.login_wrap .box .btn_primary {height:50px;border-radius:5px;font-size:15px;font-weight:600;margin-top:12px}
.login_wrap .box .link_wrap {display:flex;align-items:center;justify-content:center;font-size:12px;color:#44474B;margin-top:12px}
.login_wrap .box .link_wrap a:hover {text-decoration:underline}
.login_wrap .box .link_wrap a + a {position:relative;margin-left:7px;padding-left:8px}
.login_wrap .box .link_wrap a + a::before {content:'';display:block;width:1px;height:10px;background:#44474B;position:absolute;left:0;top:50%;transform:translateY(-50%)}

/* 인덱스 */
.index {padding:82px 0 60px}
.index .wrapper {max-width:1100px}
.index .sec {margin-top:60px}
.index .sec_01 .wrapper {display:flex;align-items:flex-start;gap:0 20px}
.index .sec_01 .banner_box {border:solid 1px #EEEEEE;border-radius:5px;position:relative}
.index .sec_01 .banner_box .inner {width:680px;overflow:hidden}
.index .sec_01 .banner_box .swiper-slide img {width:100%}
.index .sec_01 .banner_box .button-prev,
.index .sec_01 .banner_box .button-next {display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:Var(--white);border:solid 1px #EEEEEE;border-radius:28px;position:absolute;top:50%;left:0;transform:translate(-50%, -50%);z-index:1;transition:all .2s;cursor:pointer;padding-right:1px}
.index .sec_01 .banner_box .button-next {left:auto;right:0;transform:translate(50%, -50%);padding:0 0 0 1px}
.index .sec_01 .banner_box .button-prev:hover,
.index .sec_01 .banner_box .button-next:hover {border-color:var(--primary)}
.index .sec_01 .right {flex:1}
.index .sec_01 .right > div {border:solid 1px #EEEEEE;border-radius:5px;overflow:hidden}
.index .sec_01 .my_info .top {display:flex;align-items:center;gap:0 16px;padding:20px 20px}
.index .sec_01 .my_info .top .profile {display:flex;align-items:center;justify-content:center;width:45px;height:45px;background:#EEEEEE;border:solid 1px #DDDDDD;border-radius:36px}
.index .sec_01 .my_info .top .profile img {width:100%;height:100%;object-fit:cover}
.index .sec_01 .my_info .top .profile .no_profile {width:18px;height:auto}
.index .sec_01 .my_info .top .txt_wrap span {display:block;font-size:14px;font-weight:500;color:#9FA4AB}
.index .sec_01 .my_info .top .txt_wrap p {font-size:17px;font-weight:700;color:#44474B;margin-top:4px}
.index .sec_01 .my_info .bottom {background:#F9F9FA;border-top:solid 1px #EEEEEE;padding:14px}
.index .sec_01 .my_info .bottom > div {display:flex;align-items:flex-start;gap:0 10px;font-size:14px}
.index .sec_01 .my_info .bottom > div + div {margin-top:10px}
.index .sec_01 .my_info .bottom > div > span {flex:56px 0 0;font-weight:500;color:#9FA4AB}
.index .sec_01 .my_info .bottom > div > span svg {display:none}
.index .sec_01 .my_info .bottom > div > strong {font-weight:600}
.index .sec_01 .my_info .bottom > div > strong span {display:block;font-weight:normal;line-height:1.4;margin-top:2px}
.index .sec_01 .notice_box {display:flex;align-items:center;gap:0 8px;font-size:14px;padding:16px;margin-top:10px}
.index .sec_01 .notice_box .tit {font-weight:600;color:var(--primary)}
.index .sec_01 .notice_box a {flex:1;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.index .sec_01 .notice_box .date {font-size:12px;color:#656A71;margin-left:auto}

.index .sec_02 .title_box h2 em {margin-left:5px}
.index .sec_02 .title_box .btn_black {margin-left:auto}
.index .sec_02 .title_box .btn_black svg {display:none}
.index .sec_02 .cont_box {padding:40px 20px 30px}
.index .sec_02 .cont_box > div {display:flex;align-items:center;gap:0 12px}
.index .sec_02 .cont_box > div + div {margin-top:40px}
.index .sec_02 .cont_box .tit {display:block;flex:70px 0 0;font-size:15px;font-weight:500;color:#555555;text-align:right}
.index .sec_02 .cont_box .tit span {display:none}

.index .sec_03 .cont_box {padding:30px 16px 20px}

.index .sec_04 .list {display:flex;gap:20px}
.index .sec_04 .list a {width:100%;border:solid 1px #EEEEEE;border-radius:5px;padding:20px;transition:all .2s}
.index .sec_04 .list a:hover {border-color:var(--primary)}
.index .sec_04 .list a:hover .tit {text-decoration:underline}
.index .sec_04 .list a .mark {display:none}
.index .sec_04 .list a .tit {display:block;font-size:16px;font-weight:700;line-height:1.4}
.index .sec_04 .list a .btm {display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-top:12px}
.index .sec_04 .list a .btm .date {color:#9FA4AB}

/* 이론 및 학습평가 */
.edu_wrap, .my_report, .board_wrap {padding:82px 0 60px}

.done_wrap {display:flex;flex-direction:column;align-items:center;text-align:center;padding:100px 0}
.done_wrap img {width:54px}
.done_wrap p {font-size:20px;font-weight:600;margin-top:24px}
.done_wrap p.small {font-size:14px;font-weight:500;margin-top:10px}

.eval_list .item {display:flex;align-items:center;min-height:60px;border:solid 1px #EEEEEE;border-radius:5px;box-shadow:2px 2px 4px rgba(217,217,217,.25);padding:10px 20px}
.eval_list .item + .item {margin-top:20px}
.eval_list .item .tit {display:flex;align-items:center;gap:0 8px;font-size:16px;line-height:1.4}
.eval_list .item .tit img {width:20px;min-width:20px}
.eval_list .item .right {font-size:14px;font-weight:500;margin-left:auto}
.eval_list .item .right .point {color:#9FA4AB;margin-left:4px}
.eval_list .item .right .point em {color:#44474B}
.eval_list .item .right .go_link {display:none}

.eval_sel {width:100%;max-width:578px;margin:0 auto;padding:50px 0 60px}
.eval_sel .eval_head {font-size:20px;font-weight:600;line-height:1.4;text-align:center;margin-bottom:20px}
.eval_sel .eval_head .num {color:var(--primary)}
.eval_sel .eval_head .tit {display:block;margin-top:16px}

.radio_wrap .radio_box + .radio_box {margin-top:10px}
.radio_wrap .radio_box input {display:none}
.radio_wrap .radio_box input + label {cursor:pointer}
.radio_wrap .radio_box input:checked + label,
.radio_wrap .radio_box label.true {background-image:url('../../img/agent/check_04.svg');background-color:#EFFFFE;border-color:var(--primary)}
/*내가 추가(선택한건데 정답일때)*/
.radio_wrap .radio_box label.selected-correct-answer {background-image:url('../../img/agent/check_04.svg');background-color:#FFF9FA;border-color:var(--primary)}
.radio_wrap .radio_box label.false {background-image:url('../../img/agent/false.svg');background-color:#FFF9FA;border-color:#FF5A79}
.radio_wrap .radio_box label {display:flex;align-items:center;width:100%;height:100%;background:url('../../img/agent/check_03.svg') no-repeat center right 16px/18px;line-height:1.4;border:solid 1px #EEEEEE;border-radius:5px;box-shadow:2px 2px 4px rgba(217,217,217,.25);padding:16px 48px 16px 20px;transition:all .2s}

.ox_wrap {display:flex;gap:0 30px}
.ox_wrap > div {flex:1}
.ox_wrap .sel_o input:checked + label,
.ox_wrap .sel_o .answer {background:#EFFFFE;border-color:var(--primary)}
.ox_wrap .sel_o .choice {background:#EFFFFE}
.ox_wrap .sel_x input:checked + label,
.ox_wrap .sel_x .answer {background:#FFF9FA;border-color:#FF5A79}
.ox_wrap .sel_x .choice {background:#FFF9FA}
/*내가 추가*/
/*.ox_wrap .sel_x .report-answer {background:#FFF9FA;border-color:#FF5A79}*/
.ox_wrap .report-choice {background:#FFF9FA}
.ox_wrap .report-answer {background:#EFFFFE;border-color:var(--primary)}
/*.ox_wrap .sel_o .report-choice {background:#EFFFFE}*/

.ox_wrap input {display:none}
.ox_wrap input + label {cursor:pointer}
.ox_wrap label {display:flex;align-items:center;justify-content:center;background:var(--white);border:solid 1px #EEEEEE;border-radius:5px;box-shadow:2px 2px 4px rgba(217,217,217,.25);padding:50px;transition:all .2s}
.ox_wrap label img {width:96px}

/* 게시판 뷰 */
.page_head {display:flex;align-items:center;gap:0 10px;width:100%;min-height:44px;background:#6A6A6A;border-radius:5px 5px 0 0;padding:10px 24px;overflow:hidden}
.page_head h2 {font-size:16px;font-weight:700;color:var(--white)}
.page_head h2 em {color:#ffc534}
.page_head.center {justify-content:center;text-align:center}
.page_head.center.roleplay-exam {
    display: flex; /* Flexbox 컨테이너로 설정 */
    justify-content: center;
    text-align: center;
}

/* 가이드 */
.guide_wrap,
.record_wrap {width:100%;max-width:650px;margin:0 auto;padding:50px 0 60px;text-align:center}
.guide_wrap > .tit,
.record_wrap > .tit {display:block;font-size:20px;font-weight:600;line-height:1.4;margin-bottom:30px}
.guide_wrap .list {display:flex;justify-content:center;gap:0 24px}
.guide_wrap .list .item {width:100%;max-width:200px;background:var(--white);border:solid 1px #EEEEEE;border-radius:5px;box-shadow:2px 2px 4px rgba(217,217,217,.25);padding:35px 20px 24px;overflow:hidden;transition:all .2s}
.guide_wrap .list .item img {width:60px}
.guide_wrap .list .item p {font-size:14px;font-weight:700;color:#44474B;margin-top:20px}
.guide_wrap .list.only_mb {display:none}
.guide_wrap .guide_2 {display:flex;gap:0 20px}
.guide_wrap .guide_2 > div {display:flex;flex-direction:column}
.guide_wrap .guide_2 > .col2 {width:40%}
.guide_wrap .guide_2 > .col3 {width:60%}
.guide_wrap .guide_2 .head {display:flex;align-items:center;justify-content:center;height:44px;background:#333333;border-radius:5px 5px 0 0;font-size:16px;font-weight:600;color:var(--white);text-align:center}
.guide_wrap .guide_2 .inner {flex:1;display:flex;align-items:flex-start;;border:solid 1px #EEEEEE;border-radius:0 0 5px 5px;box-shadow:2px 2px 4px rgba(217,217,217,.25);padding:26px 20px}
.guide_wrap .guide_2 .inner > div {flex:1}
.guide_wrap .guide_2 .inner > div + div {border-left:solid 1px #EEEEEE}
.guide_wrap .guide_2 .inner img {width:100%;max-width:60px}
.guide_wrap .guide_2 .inner span {display:block;font-size:14px;font-weight:500;color:#44474B;margin-top:15px}
.guide_wrap.guide_2 {max-width:800px}

.mic_test {text-align:center}
.mic_test p {display:inline-block;font-size:20px;font-weight:600;color:#BBBBBB;}
.mic_test .bar_wrap {width:100%;max-width:200px;height:10px;background:#D0D2D5;border-radius:10px;margin:18px auto 0;position:relative}
.mic_test .bar_wrap .bar {display:block;height:100%;background:var(--primary);border-radius:10px;position:absolute;top:0;left:0;transition:all .2s}
.mic_test .btn_wrap {margin-top:10px}
.mic_test .btn_wrap button {border-radius:50px}
.mic_test .ripple_wrap {display:none}
.mic_ripple {display:block;width:60px;position:relative;margin:0 auto}
.guide_wrap .list .item.btn_mic_test:hover {border-color:#A1CAFF}
.btn_mic_test.on .mic_ripple:before,
.btn_mic_test.on .mic_ripple:after {content:'';position:absolute;top:0;right:0;bottom:0;left:0;border:solid 1px #A1CAFF;border-radius:200px}
.btn_mic_test.on .mic_ripple:before {animation:ripple 2s linear infinite}
.btn_mic_test.on .mic_ripple:after {animation:ripple 2s 1s linear infinite}

.record_wrap {max-width:570px;padding:50px 0 30px}
.record_wrap .mic_test {margin-top:40px}
.record_wrap .msg + .mic_test {margin-top:20px}
.record_wrap .tit {position:relative}
.record_wrap .tit .num {font-size:14px;font-weight:500;color:#44474B;position:absolute;right:0;top:4px}
.record_wrap .question,
.record_wrap .record .box,
.record_wrap .repeat .box,
.record_wrap .record_result .wrap > div {display:flex;align-items:center;justify-content:center;flex-direction:column;border-radius:5px;width:100%;min-height:130px;font-size:15px;font-weight:600;padding:20px}
.record_wrap .record .box,
.record_wrap .repeat .box {background:#EFFFFE;border:solid 1px var(--primary);margin-top:10px;color:var(--primary)}
.record_wrap .repeat .box {color:#BBBBBB}
.record_wrap .question {background:#F4F4F5}
.record_wrap .question .num {display:none}
.record_wrap .question .alert {display:none}
.record_wrap .record p {font-size:15px;margin-top:8px}
.record_wrap .record p.gray_mb {font-size:16px;font-weight:normal;color:var(--gray-600);margin-top:8px}
.record_wrap .record_result {width:100%;padding:0 !important;background:none !important;border:0 !important;position:relative;overflow:hidden;margin-top:10px}
.record_wrap .record_result.on .wrap {transform:rotateY(180deg)}
.record_wrap .record_result .wrap {width:100%;transition:all .4s;transform-style:preserve-3d}
.record_wrap .record_result .wrap > div {width:100%;height:100%;position:absolute;top:0;left:0;backface-visibility:hidden;border-radius:5px;overflow:hidden;padding:30px 20px}
.record_wrap .record_result .mark {display:flex;align-items:center;justify-content:center;width:75px;height:34px;background:var(--primary);font-size:14px;font-weight:700;color:var(--white);border-radius:5px 0;position:absolute;top:0;left:0}
.record_wrap .my_record {position:initial !important;background:#EFFFFE;border:solid 1px var(--primary);backface-visibility:hidden}
.record_wrap .best_answer {background:#DBF2FF;color:#4BA4D6;border:solid 1px #4BA4D6;transform:rotateY(180deg)}
.record_wrap .best_answer .mark {background:#4BA4D6}

.reverse-spinner {position:relative;height:40px;width:40px;border:2px solid transparent;border-top-color:var(--primary);border-left-color:var(--primary);border-radius:50%;animation:spin 1.5s linear infinite}

@keyframes spin {
    from {transform:rotate(0deg)}
    to {transform:rotate(360deg)}
}
@keyframes spinBack {
    from {transform:rotate(0deg)}
    to {transform:rotate(-720deg)}
}
@keyframes ripple {
	to {transform: scale(2);opacity: 0}
}

/* 리포트 */
.report .cont_box {padding:24px}
.report .cont_box + .cont_box {margin-top:20px}
.report .q_check_list {margin-top:20px}
.report .intro {display:flex;align-items:center;padding:38px 54px}
.report .intro > div {flex:1}
.report .intro .left {display:flex;align-items:center;gap:0 20px}
.report .intro .result_num {flex:1}
.report .intro .result_num > div {display:flex;align-items:center;font-size:16px}
.report .intro .result_num > div .tit {flex:50px 0 0;font-weight:700}
.report .intro .result_num > div + div {margin-top:14px}
.report .intro .result_num > div strong {display:flex;align-items:center;justify-content:center;width:80px;height:26px;text-align:center;background:#EFFFFE;border:solid 1px var(--primary);border-radius:30px;font-weight:700}
.report .intro .result_num .orange strong {background:#FFEFE0;border-color:#FF983A}
.report .intro .right .tit {display:block;font-size:22px;font-weight:700;line-height:1.4}
.report .intro .right p {font-size:14px;font-weight:500;color:#44474B;margin-top:10px}

.report .q_list .tit {display:flex;align-items:flex-start;justify-content:space-between;font-size:16px;margin-bottom:30px}
.report .q_list .tit .left {display:flex;align-items:flex-start;gap:0 16px;margin-right:8px}
.report .q_list .tit .left span {font-weight:500;white-space:nowrap;padding-top:2px}
.report .q_list .tit .num {font-size:12px;color:#44474B;white-space:nowrap;padding-top:5px}
.report .q_list .comment {font-size:15px;font-weight:600;margin-bottom:12px}
.report .q_list .radio_wrap {display:grid;grid-template-columns:repeat(2, 1fr);gap:10px}
.report .q_list .radio_box {margin-top:0 !important}

.report_02 .cont_box {display:grid;grid-template-columns:repeat(2, 1fr);gap:20px}
.report_02 .box {flex:1;background:#F9F9FA;border:solid 1px #EEEEEE;border-radius:5px;padding:20px}
.report_02 .box .tab_menu.type_01 {border:solid 1px #EEEEEE !important}
.report_02 .box .tab_cont_wrap {background:var(--white);border:solid 1px #EEEEEE;border-radius:5px;border-top:0}
.report_02 .col2 {grid-column:span 2}
.report_02 .tit_box {display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.report_02 .tit_box .box_tit {font-size:16px;font-weight:700}
.report_02 .tit_box .mark {display:flex;align-items:center;justify-content:center;width:90px;height:34px;background:#EEEEEE;border-radius:5px;font-size:16px}
.report_02 .tit_box p {font-size:15px;margin-top:8px}
.report_02 .grid_cont {background:#EEEEEE;border-radius:5px;padding:1px}
.report_02 .grid_cont .wrap {display:grid;grid-template-columns:repeat(2,1fr);gap:1px;border-radius:5px;overflow:hidden}
.report_02 .grid_cont .wrap div {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px 0;height:100%;background:var(--white);padding:20px 14px;font-size:14px;font-weight:500}
.report_02 .grid_cont .wrap div strong {font-size:16px;font-weight:700}
.report_02 .p_cont {font-size:14px}
.report_02 .p_cont ul li {position:relative;padding-left:20px}
.report_02 .p_cont ul li span {position:absolute;top:2px;left:0}
.report_02 .p_cont .comment {font-weight:600;margin-top:20px}
/*.report_02 .voice_tone {padding:20px 20px 10px}*/
.report_02 .table_01 {padding:0;background:var(--white)}
.report_02 .table_01 th {height:36px;font-weight:600;background:#F9F9FA;border-right:solid 1px #EEEEEE}
.report_02 .table_01 th:first-child {width:70px}
.report_02 .table_01 th:last-child {width:140px;border-right:0}
.report_02 .table_01 td {border-top:solid 1px #EEEEEE;border-right:solid 1px #EEEEEE;padding:19px;text-align:center;line-height:1.2}
.report_02 .table_01 td:last-child {border-right:0}
.report_02 .habit_box {display:grid;grid-template-columns:repeat(3, 1fr);gap:16px}
.report_02 .habit_box div {font-weight:500;background:var(--white);border:solid 1px #EEEEEE;border-radius:5px;overflow:hidden}
.report_02 .habit_box div .tit {display:flex;align-items:center;justify-content:center;height:32px;background:#333333;color:var(--white)}
.report_02 .habit_box div .word {display:flex;align-items:center;justify-content:center;height:32px;font-weight:700}
.report_02 .habit_box .num {display:none}
.report_02 .box_05 > div + div {margin-top:24px}
.report_02 .box_05 > div + div .box_tit {display:none}
.report_02 .voice_speed {display:flex;align-items:center;gap:0 14px;padding-left:18px}
.report_02 .voice_speed .graph {flex:220px 0 0;background:var(--white);position:relative}
.report_02 .voice_speed .graph .graph_label {position:absolute;top:0;left:-25px;text-align:right;font-size:12px}
.report_02 .voice_speed .graph .graph_label.bottom {top:auto;bottom:0}
.report_02 .voice_speed .graph .name {width:60px;position:absolute;transform:translate(-50%, -5px)}
.report_02 .voice_speed .graph .name span {display:block;width:100%;font-size:11px;position:absolute;top:8px;left:0;text-align:center}
.report_02 .voice_speed .legend_wrap div {display:flex;align-items:center;gap:0 8px;font-size:12px}
.report_02 .voice_speed .legend_wrap div + div {margin-top:8px}
.report_02 .voice_speed .legend_wrap div span {display:block;width:12px;min-width:12px;height:12px;border-radius:12px}
.report_02 .voice_hearing {padding:20px}
.report_02 .voice_hearing .txt_wrap {text-align:center}
.report_02 .voice_hearing .txt_wrap span {display:block;font-size:20px;font-weight:600;line-height:1.4}
.report_02 .voice_hearing .txt_wrap p {font-size:14px;color:#ABABAB;margin-top:6px}
.report_02 .voice_hearing .play_wrap {display:flex;align-items:center;gap:0 10px;max-width:470px;margin:18px auto 30px}
.report_02 .voice_hearing .play_wrap button .pause {display:none}
.report_02 .voice_hearing .play_wrap button.on .pause {display:block}
.report_02 .voice_hearing .play_wrap button.on .play {display:none}
.report_02 .voice_hearing .play_wrap .gauge {height:5px;background:#D9D9D9}
.report_02 .voice_hearing .play_wrap .gauge .bar {background:#333333}
.report_02 .voice_hearing .my_answer {background:#EFFFFE;border-radius:5px;border:solid 1px var(--primary);text-align:center;padding:20px}
.report_02 .voice_hearing .my_answer .tit {display:flex;align-items:center;justify-content:center;width:92px;height:30px;background:var(--primary);border-radius:30px;color:var(--white);font-size:14px;font-weight:500;margin:0 auto 16px}
.report_02 .voice_hearing .my_answer p {font-size:16px;font-weight:500}

.my_report .wrapper {max-width:1000px}
.my_report .title_box ~ div {margin-top:20px}
.my_report .sec_01 select {width:100%;height:50px;font-size:16px;background:#ffffff url('../../img/agent/arrow_down.svg') no-repeat center right 14px/24px;border:solid 1px #EEEEEE;border-radius:5px;box-shadow:2px 2px 4px rgba(217,217,217,.25);padding:0 45px 0 20px}

.my_report .sec_02 .inner {display:flex}
.my_report .sec_02 .inner .left {display:flex;align-items:center;gap:0 24px;text-align:center}
.my_report .sec_02 .inner .left .info > div + div {margin-top:24px}
.my_report .sec_02 .inner .left .info span {display:flex;align-items:center;justify-content:center;width:128px;height:36px;font-size:14px;font-weight:500;color:var(--primary);background:#EFFFFE;border:solid 1px var(--primary);border-radius:40px}
.my_report .sec_02 .inner .left .info strong {display:block;font-size:16px;font-weight:600;margin-top:10px}
.my_report .sec_02 .inner .right {display:flex;flex-direction:column;justify-content:center;font-size:15px;border-left:solid 1px #EEEEEE;padding-left:40px;margin-left:40px}
.my_report .sec_02 .inner .right p + p {margin-top:20px}

.my_report .sec_02 .cont_box,
.my_report .sec_03 .cont_box {padding:30px}

.my_report .sec_04 {margin-top:20px}
.my_report .sec_04 .tab_menu .btn_toggle {display:none}
.my_report .sec_04 .tab_menu.type_01 {background:var(--white);border:0;border-bottom:solid 1px #EEEEEE}
.my_report .sec_04 .cont_wrap {border:solid 1px #EEEEEE;border-radius:5px;box-shadow:2px 2px 4px rgba(217,217,217,.25);padding:20px}
.my_report .sec_04 .cont_wrap .paging {margin-bottom:10px}
.my_report .btn_wrap {margin-top:20px}
.my_report .btn_wrap .btn {max-width:158px;height:40px;border-radius:5px}

.my_report_02 .sec_04 .sec_tit {margin-bottom:10px}

/* 마이페이지 */
.mypage_index {padding:120px 0}
.mypage_index h2 {font-size:20px;font-weight:700;margin-bottom:24px}
.mypage_index .wrapper > div + div {margin-top:20px}

.mypage_index .sec_01 {display:flex;padding:24px 20px}
.mypage_index .sec_01 > div {width:calc(70% / 3);display:flex;flex-direction:column;gap:12px 0;text-align:center;padding:0 20px}
.mypage_index .sec_01 > div + div {border-left:solid 1px #EEEEEE}
.mypage_index .sec_01 > div:nth-child(3) {width:30%}
.mypage_index .sec_01 > div span {font-size:14px;font-weight:500;color:#44474B}
.mypage_index .sec_01 > div strong {font-size:16px}

.mypage_index .sec_02 {display:flex;gap:0 20px}
.mypage_index .sec_02 > .cont_box {flex:1;padding:20px 20px 60px}
.mypage_index .sec_02 .cont > div + div {margin-top:60px}
.mypage_index .sec_02 .tit {display:flex;align-items:center;justify-content:space-between;font-size:16px;font-weight:600;color:#44474B;margin-bottom:12px}
.mypage_index .sec_02 .tit > span:last-child {font-size:14px;font-weight:500}
.mypage_index .sec_02 .gauge {height:10px}
.mypage_index .sec_02 .gauge .bar .percent {background:var(--primary);bottom:0;top:24px}
.mypage_index .sec_02 .gauge .bar .percent::before {height:7px;background-image:url('../../img/agent/tri_green.svg');background-size:10px;top:auto;bottom:100%}

.mypage_index .sec_03 .cont_box {padding:30px}
.mypage_index .sec_03 .sec_tit {text-align:center;margin-bottom:20px}

.mypage_index .sec_04 .cont_box {padding:30px}
.mypage_index .sec_04 .cont_box + .msg {font-size:16px;text-align:right}
.mypage_index .sec_04 .top_menu {display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.mypage_index .sec_04 .top_menu .btn {width:auto;height:44px;border-radius:5px;font-size:16px;padding:0 20px}
.mypage_index .sec_04 .top_menu span {background:#B7DEDB;color:#0E423E}
.mypage_index .sec_04 .top_menu a {background:#707070;color:var(--white)}
.mypage_index .sec_04 .top_menu a:hover {background:#5e5e5e}

.mypage_index .sec_05 {display:none}

/* 공지사항 */
.board_list .table th {height:40px;background:#6A6A6A;font-size:14px;font-weight:700;color:var(--white)}
.board_list .table th:nth-child(2) {width:140px}
.board_list .table td {font-size:14px;border-top:solid 1px #EEEEEE;padding:20px}
.board_list .table td a {display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.board_list .table td a:hover {text-decoration:underline}
.board_list .table td:nth-child(2) {text-align:center}

.board_view .page_head {gap:0 20px;justify-content:space-between;color:var(--white)}
.board_view .cont {min-height:240px;font-size:16px;border:solid 1px #EEEEEE;border-top:none;border-radius:0 0 5px 5px;padding:30px;box-shadow:2px 2px 4px rgba(217,217,217,.25)}
.board_view .file_list {margin-top:20px}
.board_view .file_list .tit {display:flex;align-items:center;gap:0 8px;font-size:16px}
.board_view .file_list .tit button {font-size:1em;font-weight:500;color:#4B77D6}
.board_view .file_list .list {border:solid 1px #EEEEEE;border-radius:5px;margin-top:10px;box-shadow:2px 2px 4px rgba(217,217,217,.25)}
.board_view .file_list .list .item {display:flex;align-items:center;gap:0 10px;width:100%;height:44px;padding:0 14px 0 10px}
.board_view .file_list .list .item + .item {border-top:solid 1px #EEEEEE}
.board_view .file_list .list .item .name {display:flex;align-items:center;gap:0 8px;font-size:14px}
.board_view .file_list .list .item .name span {display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.board_view .file_list .list .item:hover .name {text-decoration:underline}
.board_view .file_list .list .item .name img {width:20px}
.board_view .file_list .list .item .download {margin-left:auto}
.board_view .btn_wrap {margin-top:30px}
.board_view .btn_wrap .btn {max-width:158px;height:40px;border-radius:5px;font-weight:500}
.board_view .alert_msg + .btn_wrap {margin-top:20px}
.board_view.video_wrap .page_head {border-radius:5px}
.board_view.video_wrap .cont {border:0;border-radius:5px;margin-top:20px;box-shadow:none;padding:0;overflow:hidden;position:relative}
.board_view.video_wrap video {display:block;width:100%}
/* .board_view.video_wrap .btn_wrap {justify-content:space-between} */
.video_wrap .done {width:100%;height:100%;background:rgba(0,0,0,.8);position:absolute;top:0;left:0}
.video_wrap .done .inner {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px 0;width:100%;height:100%;text-align:center;color:var(--white)}
.video_wrap .done .inner p {font-size:20px;font-weight:700}
.video_wrap .done img {width:54px}

.my_inquiry_list tbody tr:first-child td {border-top:0}
.my_inquiry_list tbody tr td {text-align:center}
.my_inquiry_list tbody tr td:first-child {width:500px;text-align:left}

.my_inquiry_write .item .tit {display:none}

.board_wrap .answer {margin-top:30px}
.board_wrap .answer .page_head {background:var(--primary)}

/* 모바일 리스트 */
.mb_board_list {margin-top:64px}
.mb_board_list .item {display:block;background:var(--white);border-bottom:solid 1px var(--gray-200);padding:20px}
.mb_board_list .item .status {display:block;font-size:14px;font-weight:600;color:var(--gray-600);margin-bottom:12px}
.mb_board_list .item .status.done {color:var(--primary)}
.mb_board_list .item .subject {display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb_board_list .item .opt {display:flex;align-items:center;margin-top:12px;font-size:14px;color:var(--gray-600)}
.mb_board_list .item .opt > span {display:flex;align-items:center}
.mb_board_list .item .opt > span + span::before {content:'';display:block;width:1px;height:12px;background:var(--gray-200);margin:0 8px}

/*내가 추가*/
.download {cursor: pointer}
.btn {cursor: pointer; /* 마우스를 올렸을 때 손가락 모양 */}
.record_wrap .record_result .wrap .best_answer {font-size: 13px !important}

/* 모바일 알람 페이지 */
.alarm_wrap {margin-top:64px !important}
.alarm_wrap .empty {display:flex;align-items:center;justify-content:center;height:calc(100vh - 64px);font-size:16px;color:var(--gray-600);text-align:center;padding:0 20px}
.alarm_wrap .item {display:flex;align-items:flex-start;gap:0 16px;background:var(--white);border-bottom:solid 1px var(--gray-200);padding:20px}
.alarm_wrap .item .icon {display:flex;align-items: center;justify-content:center;width:28px;min-width:28px;height:28px;background:var(--gray-100);border-radius:4px}
.alarm_wrap .item .cont .tit {font-size:16px; text-align: left;}
.alarm_wrap .item .cont .date {display:block;font-size:14px;color:var(--gray-600);margin-top:8px;text-align:left;}
.alarm_wrap .item.unread {background:#F2F8FF}
.alarm_wrap .item.unread .icon {background:rgba(87,167,255,.12)}
.alarm_wrap .item.unread .icon path {fill:rgba(87,167,255,.8)}

/* 스텝 */
.step_progress {width:100%;height:4px;background:var(--gray-200);position:absolute;bottom:-4px;left:0}
.step_progress .bar {height:100%;background:var(--primary);position:absolute;top:0;left:0;transition:all .2s}

/* 토스트 팝업 */
.toast_pop {width:calc(100% - 40px);min-height:52px;position:fixed;top:auto;bottom:20px;left:20px;background:var(--gray-700);border-radius:4px;padding:16px;color:var(--white)}
.toast_pop .inner {display:flex;align-items:center;gap:12px}
.toast_pop .inner img {width:20px}
.toast_pop .inner p {font-size:16px;font-weight:normal}


@media all and (max-width: 1199px) {}

@media all and (max-width: 1023px) {
    /* 인덱스 */
    .index .sec_01 .wrapper {flex-direction:column;gap:20px}
    .index .sec_01 .banner_box {width:100%}
    .index .sec_01 .banner_box .inner {width:auto}
    .index .sec_01 .right {width:100%;flex:auto}
}

@media all and (max-width: 767px) {
    .only_mb {display:block}
    .only_pc {display:none}

    .only_pc_hidden {visibility:hidden}
    .box_inner.only_pc_hidden {
        margin:40px 0 0;
    }
    /* 내가추가 */
    .container.wrapper {
            padding: 0; /* padding 제거 */
            width: auto; /* 폭 제한 제거 */
        }

    body {background:#F2F3F4}
    .container {display:flex;flex-direction:column;min-height:100vh;overflow-y:auto}
    .navigation {display:block}
    .top_head {display:flex}
    .mo_btn_wrap {display:flex;margin-top:auto}
    .btn_wrap.only_mb {display:flex}
    .btn:disabled,
    .btn.disabled {background:var(--gray-300);color:var(--white)}
    .btn_gray {background:var(--gray-200);color:var(--gray-600)}
    .btn_gray.disabled,
    .btn_gray:disabled {background:var(--gray-100);color:var(--gray-300)}
    .btn_wrap {gap:0 10px;width:100%;margin-top:20px}
    .btn_wrap .btn {max-width:initial;height:48px;font-size:16px;border-radius:4px}
    .w67 {width:67%}
    .w220 {width:220px}
    .tooltip {display:inline-block}

    .title_box h2 {font-size:18px;font-weight:600}
    .flex {display:flex;align-items:center}
    .flex.sec_tit .sec_tit {margin-bottom:0}
    .flex .legend_box {margin:0}

    .select_box select,
    .input_box input,
    .textarea_box textarea {height:48px;border:solid 1px var(--gray-200);border-radius:4px;font-size:16px;padding:0 12px}
    .select_box.alert select,
    .input_box.alert input,
    .textarea_box.alert textarea {border-color:var(--red)}
    .input_box.alert .word_count,
    .textarea_box.alert .word_count {color:var(--red)}
    .select_box select:focus,
    .input_box input:focus,
    .textarea_box textarea:focus {border-color:var(--gray-900)}
    .textarea_box textarea {height:280px;padding:12px}
    .textarea_box {display:flex;flex-direction:column;height:auto;padding:0}
    .input_box .word_count,
    .textarea_box .word_count {display:block;position:initial;transform:none;margin:8px 0 0 auto}

    .gauge {display:flex;align-items:center;height:8px;background:var(--gray-200);border-radius:2px}
    .gauge .bar {border-radius:2px 0 0 2px}
    .gauge .bar .percent {display:none}
    .gauge .bar .txt_percent {color:var(--primary);font-size:14px;font-weight:600}

    .legend_box {margin:0 0 16px}
    .legend_box > div {gap:6px;font-weight:normal}
    .legend_box > div .square {width:8px;height:8px}

    .popup_wrap .alert_box {width:calc(100% - 40px);padding:30px 20px 20px}
    .popup_wrap .alert_box img {display:none}
    .popup_wrap .alert_box .tit {font-size:16px;font-weight:600;margin:0}
    .popup_wrap .alert_box p {color:var(--gray-600)}
    .popup_wrap .alert_box .btn_wrap {margin-top:32px}
    .popup_wrap .alert_box .btn_wrap .btn {height:48px;border-radius:4px}
    .popup_wrap .alert_box .btn_wrap .btn_gray {background:var(--gray-200);color:var(--gray-600)}
    .popup_wrap .alert_box .btn_wrap .btn_black {background:var(--primary);color:var(--white)}

    .tab_menu {background:var(--white);padding:20px;margin-bottom:0}
    .tab_menu ul {background:var(--gray-100);border-radius:4px;padding:4px}
    .tab_menu ul li > * {height:32px;border-radius:2px;font-size:14px;color:var(--gray-600)}
    .tab_menu ul li > *.on {font-weight:600}

    .tab_cont_wrap {padding:20px 20px 80px}

    /* 아코디언 */
    .accordion_wrap .item {border:solid 1px var(--gray-200)}
    .accordion_wrap .item > button {background:var(--white);color:var(--gray-900);font-weight:600;padding:0 48px 0 16px;position:relative}
    .accordion_wrap .item > button::after {content:'';display:block;width:24px;height:24px;background:url('../../img/agent/arrow_down_01.svg') no-repeat center/100%;position:absolute;top:50%;right:12px;transform:translateY(-50%)}
    .accordion_wrap .item > button.on {background:var(--white);color:var(--gray-900)}
    .accordion_wrap .item > button.on::after {transform:rotate(180deg) translateY(12px)}
    .accordion_wrap .item > button svg {display:none}
    .accordion_wrap .item > button .status {display:block;background:rgba(42,208,147,.2);border-radius:2px;font-size:12px;font-weight:600;color:var(--green);padding:4px 6px;margin-left:auto}
    .accordion_wrap .item > button .status.done {background:rgba(87,167,255,.2);color:var(--primary)}
    .accordion_wrap .item .cont {background:var(--gray-50);border:0;border-top:solid 1px var(--gray-200);padding:0 16px}
    .accordion_wrap .item .cont a {padding:14px 0}
    .accordion_wrap .item .cont a + a {border-color:var(--gray-200)}
    .accordion_wrap .item .cont a .tit {gap:0}
    .accordion_wrap .item .cont a .tit img {display:none}
    .accordion_wrap .item .cont a .tit img.arrow {display:block}
    .accordion_wrap .item .cont a .status {display:none}
    .accordion_wrap .item .cont a .percent {display:flex}

    /* 헤더 푸터 */
    .header {display:none}

    .mb_header {display:flex;align-items:center;width:100%;height:64px;padding:0 10px 0 20px;transition:all .2s;position:fixed;top:0;left:0;z-index:9}
    .mb_header svg path {fill:var(--gray-900)}
    .mb_header.only_index {background:var(--primary);color:var(--white)}
    .mb_header.only_index svg path {fill:var(--white)}
    .mb_header.fix_white {background:var(--white)}
    .mb_header.white {background:var(--white);border-bottom:solid 1px var(--gray-200);color:var(--gray-900)}
    .mb_header.white svg path {fill:var(--gray-900)}
    .mb_header .tit {display:block;font-size:20px;font-weight:600}
    .mb_header .my_menu {margin-left:auto}
    .mb_header .my_menu a {padding:6px}

    .footer {display:none}

    /* 로그인 */
    .login_wrap {justify-content:flex-start;padding:80px 20px}
    .login_wrap .head {display:none}
    .login_wrap .box {background:none;padding:0;box-shadow:none;border-radius:0;margin:0}
    .login_wrap .box h1 {font-size:24px;margin-bottom:40px}
    .login_wrap .box .input_box {margin-top:12px}
    .login_wrap .box .input_box input {height:48px;padding:0 28px 0 12px}
    .login_wrap .box .input_box input:focus {border-color:var(--gray-900)}
    .login_wrap .box .btn_primary {margin-top:24px}
    .login_wrap .box .link_wrap {font-size:14px;margin-top:24px}
    .login_wrap .box .link_wrap a {color:var(--gray-600)}
    .login_wrap .box .link_wrap a + a {padding-left:12px;margin-left:11px}
    .login_wrap .box .link_wrap a + a::before {background:var(--gray-200)}

    /* 인덱스 */
    .index {padding:40px 0 100px;margin-top:-40px}
    .index .sec {margin-top:40px}

    .index .sec_01 .wrapper {flex-direction:column-reverse}
    .index .sec_01 .right > div {overflow:visible;border:0}
    .index .sec_01 .right .notice_box {display:none}
    .index .sec_01 .my_info .top {align-items:flex-start;width:calc(100% + 40px);max-width:initial;min-height:220px;background:var(--primary);margin-left:-20px;padding:84px 20px 97px}
    .index .sec_01 .my_info .top .profile {display:none}
    .index .sec_01 .my_info .top .txt_wrap span {color:var(--white);font-size:16px;font-weight:600}
    .index .sec_01 .my_info .top .txt_wrap p {font-size:24px;font-weight:600;color:var(--white);margin-top:12px}
    .index .sec_01 .my_info .bottom {border-radius:4px;position:relative;z-index:1;padding:16px;margin-top:-39px}
    .index .sec_01 .my_info .bottom > div {flex-direction:column;gap:8px 0}
    .index .sec_01 .my_info .bottom > div + div {margin-top:18px}
    .index .sec_01 .my_info .bottom > div > span {flex:auto;display:flex;align-items:center;gap:0 6px;color:#848B93}
    .index .sec_01 .my_info .bottom > div > span svg {display:block}
    .index .sec_01 .my_info .bottom > div > strong {font-size:16px;font-weight:normal}

    .index .sec_02 .title_box h2 em {display:none}
    .index .sec_02 .title_box .btn_black {width:auto;gap:0 7px;background:none;color:#9EA4AA}
    .index .sec_02 .title_box .btn_black svg {display:block}
    .index .sec_02 .cont_box {padding:16px}
    .index .sec_02 .cont_box > div {display:block}
    .index .sec_02 .cont_box > div + div {border-top:solid 1px #EEEFF0;margin-top:16px;padding-top:16px}
    .index .sec_02 .cont_box .tit {display:flex;align-items:center;text-align:left;font-size:14px;font-weight:600;margin-bottom:8px}
    .index .sec_02 .cont_box .tit span {display:inline-block;font-size:12px;color:#848B93;margin-left:6px}
    .index .sec_02 .cont_box .tit .percent {color:var(--primary);font-size:14px;font-weight:600;margin-left:auto}

    .index .sec_03 .title_box p {display:none}
    .index .sec_03 .cont_box {padding:16px}

    .index .sec_04 .title_box p {display:none}
    .index .sec_04 .list {gap:0 12px;overflow-x:auto}
    .index .sec_04 .list a {display:flex;flex-direction:column;align-items:flex-start;width:152px;min-width:152px;height:120px;background:var(--white);padding:16px}
    .index .sec_04 .list a .mark {display:inline-flex;align-items:center;height:22px;font-size:12px;color:var(--green);background:rgba(42,208,147,.2);border-radius:2px;padding:0 6px;margin-bottom:8px}
    .index .sec_04 .list a .mark.done {background:rgba(87,167,255,.2);color:var(--primary)}
    .index .sec_04 .list a .tit {font-weight:600}
    .index .sec_04 .list a .btm {margin-top:auto}
    .index .sec_04 .list a .btm .date {font-size:14px;color:#848B93}
    .index .sec_04 .list a .btm .link {display:none}

    /* 마이페이지 */
    .sec_tit {margin-bottom:20px}
    .mypage_index {padding:64px 0 20px}
    .mypage_index h2 {font-size:24px;font-weight:600;text-align:center;margin:20px 0 12px}
    .mypage_index .user_id {display:block;font-size:16px;color:var(--gray-600);text-align:center}

    .mypage_index .sec_01 {display:block;margin-top:40px;padding:0 16px}
    .mypage_index .sec_01 > div {flex-direction:row;align-items:center;width:100% !important;height:50px;text-align:left;padding:0}
    .mypage_index .sec_01 > div:first-child {display:none}
    .mypage_index .sec_01 > div + div {border:0}
    .mypage_index .sec_01 > div:nth-child(n + 3) {border-top:solid 1px var(--gray-200)}
    .mypage_index .sec_01 > div span {flex:80px 0 0;font-size:16px;font-weight:normal;color:var(--gray-600)}
    .mypage_index .sec_01 > div strong {flex:1;font-weight:normal;text-align:right}

    .mypage_index .sec_05 {display:flex;flex-direction:column;gap:20px}
    .mypage_index .sec_05 > * {display:flex;align-items:center;height:50px;background:var(--white);border-radius:4px;font-size:16px;padding:0 16px}
    .mypage_index .sec_05 > * span {display:flex;align-items:center;gap:0 6px}
    .mypage_index .sec_05 > * .arrow {margin-left:auto}

    .mypage_index.mb {padding-bottom:61px}
    .mypage_index.mb .wrapper {padding:0}
    .mypage_index .sec_02 {flex-direction:column;gap:8px 0}
    .mypage_index .sec_02 > .cont_box {border:0;box-shadow:none;padding:20px}
    .mypage_index .sec_02 .cont > div {border:solid 1px var(--gray-200);border-radius:4px;padding:16px}
    .mypage_index .sec_02 .cont > div + div {margin-top:12px}
    .mypage_index .sec_02 .tit {display:block;color:var(--gray-900)}
    .mypage_index .sec_02 .tit span strong {color:var(--primary);margin-left:5px}
    .mypage_index .sec_02 .tit .info {display:flex;align-items:center;font-size:14px;color:var(--gray-600);font-weight:normal;margin-top:8px}
    .mypage_index .sec_02 .tit .info span {display:flex;align-items:center}
    .mypage_index .sec_02 .tit .info span:nth-child(2)::before {content:'·';display:block;margin:0 5px}
    .mypage_index .sec_02 .tit .info span:last-child {margin-left:auto}

    .mypage_index .sec_03 .cont_box {border:0;box-shadow:none;padding:20px}
    .mypage_index .sec_03 .sec_tit {text-align:left}
    .mypage_index .sec_03 .mb_chart {border:solid 1px var(--gray-200);border-radius:4px;padding:16px}

    .mypage_index .sec_04 {margin-top:8px !important}
    .mypage_index .sec_04 .tab_cont_wrap {background:var(--white);padding:0 20px 20px}
    .mypage_index .sec_04 .tab_cont {border:solid 1px var(--gray-200);border-radius:4px;padding:16px}
    .mypage_index .sec_04 .cont_box {border:0;box-shadow:none;padding:0;overflow:visible}
    .mypage_index .sec_04 .top_menu {gap:0 8px;margin:16px 0 0}
    .mypage_index .sec_04 .top_menu .btn {width:100%;background:var(--gray-50);padding:0 16px;font-size:14px;color:var(--gray-600)}
    .mypage_index .sec_04 .top_menu .btn span {background:none}
    .mypage_index .sec_04 .top_menu a,
    .mypage_index .sec_04 .top_menu span {color:inherit}
    .mypage_index .sec_04 .top_menu div.btn {justify-content:space-between;}
    .mypage_index .sec_04 .top_menu div.btn > span:last-child {font-weight:600;color:var(--gray-900)}


    /* 공지사항 */
    .board_wrap {background:var(--white);padding:0 0 50px;margin-top:64px !important}
    .board_wrap .wrapper {padding:0}
    .board_wrap .title_box {display:none}
    .board_wrap .tab_menu {display:none}

    .board_wrap .answer {margin:0}
    .board_wrap .answer .page_head {display:none}

    .board_view {display:flex;flex-direction:column;min-height:calc(100vh - 152px);padding:0 20px 20px;background:var(--white)}
    .board_view .page_head {display:block;background:transparent;color:var(--gray-600);border-bottom:solid 1px var(--gray-200);padding:20px 0}
    .board_view .page_head h2 {line-height:1.4;color:var(--gray-900);font-size:16px;font-weight:600}
    .board_view .page_head .opt {display:flex;align-items:center;margin-top:12px}
    .board_view .page_head .opt > span {display:flex;align-items:center}
    .board_view .page_head .opt > span + span::before {content:'';display:block;width:1px;height:12px;background:var(--gray-200);margin:0 8px}
    .board_view .cont {border:0;padding:20px 0 0;box-shadow:none}
    .board_view .btn_wrap {justify-content:flex-start}
    .board_view .btn_wrap .btn_black {width:auto;max-width:initial;background:var(--gray-200);font-size:14px;color:var(--gray-600);padding:0 16px}
    .board_view .file_list {width:calc(100% + 40px);border-top:solid 8px var(--gray-100);margin-left:-20px;padding:20px}
    .board_view .file_list .tit {justify-content:space-between;color:var(--gray-600)}
    .board_view .file_list .tit button {color:var(--primary)}
    .board_view .file_list .list {border:0;box-shadow:none;border-radius:0;margin-top:20px}
    .board_view .file_list .list .item {background:var(--gray-50);border:solid 1px var(--gray-200);border-radius:4px}
    .board_view .file_list .list .item + .item {border:0;margin-top:12px}
    .board_view .file_list .list .item .name {gap:0 4px}
    .board_view.video_wrap {padding:20px}
    .board_view.video_wrap .cont {min-height:initial;margin:0}
    .video_wrap .done {width:calc(100% - 40px);height:52px;position:fixed;top:auto;bottom:20px;left:20px;background:var(--gray-700);border-radius:4px;padding:0 16px}
    .video_wrap .done .inner {flex-direction:row;justify-content:flex-start;gap:12px}
    .video_wrap .done .inner img {width:20px}
    .video_wrap .done .inner p {font-size:16px;font-weight:normal}

    .my_inquiry_view {padding:0;margin-top:64px !important}
    .my_inquiry_view .board_view {background:#F2F3F4;padding:0}
    .my_inquiry_view .board_view .page_head {background:var(--white);border:0;padding:20px}
    .my_inquiry_view .board_view .page_head .status {display:block;font-size:15px;color:var(--gray-600);font-weight:600;margin-bottom:12px}
    .my_inquiry_view .board_view .page_head .status.done {color:var(--primary)}
    .my_inquiry_view .board_view .page_head h2 em {display:none}
    .my_inquiry_view .board_view .page_head .date {display:none}
    .my_inquiry_view .board_view .cont {min-height:auto;background:var(--white);border-bottom:solid 1px var(--gray-200);padding:0 20px 20px}
    .my_inquiry_view .answer .cont {background:#F2F3F4;border:0;padding:20px 20px 0}
    .my_inquiry_view .board_view .cont .opt {display:flex;align-items:center;font-size:14px;color:var(--gray-600);margin-top:20px}
    .my_inquiry_view .board_view .cont .opt > span {display:flex;align-items:center}
    .my_inquiry_view .board_view .cont .opt > span + span::before {content:'';display:block;width:1px;height:12px;background:var(--gray-200);margin:0 8px}
    .my_inquiry_view .btn_wrap {margin-top:40px;padding:0 20px 20px}

    .my_inquiry_write .form {padding:20px 20px 0}
    .my_inquiry_write .form .item {border:0;box-shadow:none}

    .my_inquiry_write .item .tit {display:block;font-size:14px;margin-bottom:8px}
    .my_inquiry_write .item .tit sup {vertical-align:text-top;color:var(--primary);margin-left:4px}
    .my_inquiry_write .btn_wrap {display:none}

    /* 이론 및 학습평가 */
    .edu_wrap,
    .my_report {flex:1;padding:64px 0 0}
    .edu_wrap .wrapper {padding:0}
    .edu_wrap .title_box,
    .my_report .title_box {display:none}
    .edu_wrap .board_view .page_head {display:none}
    .edu_wrap .board_view .btn_wrap {display:none}

    .eval_list .item {height:50px;min-height:initial;background:var(--gray-50);border:solid 1px var(--gray-200);padding:0 16px}
    .eval_list .item .tit {font-weight:600;color:var(--gray-400)}
    .eval_list .item .tit img {display:none}
    .eval_list .item .right {display:flex;align-items:center}
    .eval_list .item .right > span:first-child {display:none}
    .eval_list .item .right .point {display:none}
    .eval_list .item .right .point em {color:var(--primary)}
    .eval_list .item .right .go_link {display:flex;align-items:center;font-size:14px;color:var(--gray-400)}
    .eval_list .item.done {background:var(--white)}
    .eval_list .item.done .tit {color:var(--gray-900)}
    .eval_list .item.done .right .point {display:flex}

    .eval_sel {padding:0}
    .eval_sel .eval_head {text-align:left;font-size:16px;margin-bottom:40px }
    .eval_sel .eval_head .tit {font-weight:600;margin-top:20px}

    .ox_wrap {gap:12px}
    .ox_wrap label {background:var(--gray-50);border:solid 1px var(--gray-200);border-radius:4px;box-shadow:none;padding:0}
    .ox_wrap label svg {width:100%;height:100%}
    .ox_wrap label span.only_mb {display:flex}
    .ox_wrap .sel_x input:checked + label,
    .ox_wrap .sel_x .answer {background:rgba(87,167,255,.12);border-color:var(--primary)}
    .ox_wrap input:checked + label svg path {fill:var(--primary)}
    .ox_wrap input:checked + label svg circle {stroke:var(--primary)}
    .ox_wrap .answer {background:rgba(42,208,147,.12) !important;border-color:var(--green) !important}
    .ox_wrap .answer svg path {fill:var(--green)}
    .ox_wrap .answer svg circle {stroke:var(--green)}
    .ox_wrap .choice:not(.answer) {background:rgba(254,95,95,.12);border-color:var(--red)}
    .ox_wrap .choice:not(.answer) svg path {fill:var(--red)}
    .ox_wrap .choice:not(.answer) svg circle {stroke:var(--red)}

    .radio_wrap .radio_box label {background-color:var(--gray-50);background-image:none;background-size:20px;background-position:center right 10px;border:solid 1px var(--gray-200);border-radius:4px;font-size:14px;box-shadow:none;padding:12px 40px 12px 12px}
    .radio_wrap .radio_box input:checked + label {background-color:rgba(87,167,255,.12);background-image:url('../../img/agent/check_05.svg');color:var(--primary)}
    .radio_wrap .radio_box label.true {background-color:rgba(42,208,147,.12);border-color:var(--green);background-image:url('../../img/agent/check_06.svg');color:var(--green)}
    .radio_wrap .radio_box.off label {color:var(--gray-400)}

    .alert_msg {color:var(--red);text-align:left;margin-top:auto}

    /* 로딩 */
    .loading {display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 84px);padding:0 0 120px;margin-top:-20px}
    .loading .top .img_wrap img {width:64px;margin:0 auto}
    .loading .top span {display:none}
    .loading .txt_wrap .tit {font-weight:600;margin-top:32px}
    .loading .txt_wrap p {font-size:14px;color:var(--gray-600);margin-top:12px}

    /* 리포트 */
    .report {background:var(--white)}
    .report .page_head {display:none}
    .report .cont_box {flex-wrap:wrap;border:0;padding:20px;box-shadow:none}
    .report .cont_box .box_tit {display:block;width:100%;font-size:16px;font-weight:600;color:var(--gray-600);margin-bottom:20px}
    .report .cont_box.intro {flex-direction:column}
    .report .cont_box.intro .box_tit {margin-bottom:40px}
    .report .intro .left {flex-direction:column;align-items:center;gap:40px 0;width:100%}
    .report .intro .doughnut {width:200px;height:200px}
    .report .intro .doughnut .num {font-size:32px;color:var(--primary)}
    .report .intro .right {margin-top:40px}
    .report .intro .result_num {display:flex;align-items:center;gap:0 12px;width:100%}
    .report .intro .result_num > div {flex:1;justify-content:space-between;height:50px;border-radius:4px;padding:0 16px}
    .report .intro .result_num > div + div {margin:0}
    .report .intro .result_num > div strong {width:auto;height:auto;display:block;border:0;background:0}
    .report .intro .result_num > .green {background:rgba(42,208,147,.12);color:var(--green)}
    .report .intro .result_num > .orange {background:rgba(254,95,95,.12);color:var(--red)}
    .report .intro .right {width:100%;background:var(--gray-100);border-radius:4px;margin-top:12px;padding:16px}
    .report .intro .right .tit {font-size:16px;font-weight:600}
    .report .intro .right p {color:var(--gray-600);margin-top:8px}
    .report .q_check_list {border-top:solid 8px var(--gray-100);padding:20px}
    .report .q_check_list > .tit {font-size:16px;font-weight:600;color:var(--gray-600);margin-bottom:20px}
    .report .q_check_list .cont_box {padding:0}
    .report .q_check_list .cont_box + .cont_box {border-top:solid 1px var(--gray-200);margin-top:20px;padding-top:20px}
    .report .q_list .tit {margin-bottom:16px}
    .report .q_list .tit .left {display:block;font-size:16px;font-weight:600}
    .report .q_list .tit .left span {display:none}
    .report .q_list .tit .left span.num {display:inline;font-size:inherit;font-weight:inherit;color:inherit}
    .report .q_list .tit .left p {display:inline}
    .report .q_list .tit .num {display:none}
    .report .q_list .comment.green {color:var(--green)}
    .report .q_list .radio_wrap {display:flex;flex-direction:column;gap:12px}
    .radio_wrap .radio_box label {color:var(--gray-400)}
    .radio_wrap .radio_box label.false {color:var(--red);background-color:rgba(254,95,95,.12);background-image:url('../../img/agent/check_07.svg')}
    .radio_wrap .radio_box label.true.choice {background-image:none}

    .done_wrap {display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 192px);padding:40px 0}
    .done_wrap p {margin-top:32px}
    .done_wrap p.small {font-size:16px;font-weight:normal;color:var(--gray-600);margin-top:12px}

    .my_report {background:var(--white)}
    .my_report .wrapper {padding:0}
    .my_report .sec_tit {font-size:16px;font-weight:600;color:var(--gray-600)}
    .my_report .title_box ~ div {margin:0}
    .my_report .tab_menu {padding-top:12px}
    .my_report .tab_cont_wrap {padding:0;margin:0}
    .my_report .sec_01 {padding:20px}
    .my_report .sec_01 select {background:url('../../img/agent/arrow_down_01.svg') no-repeat center right 8px/24px;padding:0 35px 0 12px;box-shadow:none}
    .my_report .sec_02 {border-top:solid 1px var(--gray-200)}
    .my_report .sec_02 .cont_box,
    .my_report .sec_03 .cont_box {padding:20px;border:0;border-radius:0;box-shadow:none}
    .my_report .sec_02 .inner {flex-direction:column;}
    .my_report .sec_02 .inner .left .info {display:none}
    .my_report .sec_02 .inner .right {background:var(--gray-100);border-radius:4px;padding:20px;margin:40px 0 0;border:0;font-size:14px;color:var(--gray-600)}
    .my_report .sec_02 .inner .right * {color:var(--gray-600)}
    .my_report .sec_02 .inner .right .tit {font-size:16px;font-weight:600;color:var(--gray-900);margin-bottom:8px}
    .my_report .sec_02 .doughnut {width:200px;height:200px;margin:0 auto}
    .my_report .sec_02 .doughnut .num {font-size:32px;color:var(--primary);top:55%}
    .my_report .sec_02 .doughnut .result {font-size:16px;color:var(--gray-600);position:absolute;top:68px;left:50%;transform:translateX(-50%)}
    .my_report .sec_02 + .tab_menu {background:var(--white);border-top:solid 8px var(--gray-200);border-bottom:solid 1px var(--gray-200);padding:12px 20px 0;margin:0}
    .my_report .sec_02 + .tab_menu ul {gap:0 20px;background:transparent;padding:0}
    .my_report .sec_02 + .tab_menu li {flex:none}
    .my_report .sec_02 + .tab_menu li > * {height:40px;padding:0;color:var(--gray-400);border-bottom:solid 2px transparent;border-radius:0;font-size:16px}
    .my_report .sec_02 + .tab_menu li > *.on {box-shadow:none;border-color:var(--gray-900);color:var(--gray-900)}

    .my_report .sec_03 {border-top:solid 8px var(--gray-200)}
    .my_report .sec_03 .mb_chart {border:solid 1px var(--gray-200);border-radius:4px;padding:16px}
    .my_report .sec_03 .mb_chart .top_menu {display:flex;align-items:center;justify-content:space-between;gap:0 8px;margin-top:16px}
    .my_report .sec_03 .mb_chart .top_menu .btn {justify-content:space-between;height:44px;border-radius:5px;font-size:14px;padding:0 16px;background:var(--gray-50)}
    .my_report .sec_03 .mb_chart .top_menu .btn span:first-child {color:var(--gray-600)}

    .my_report .sec_04 {border-top:solid 1px var(--gray-200);padding:20px}
    .my_report .sec_04 .cont_wrap {padding:0;box-shadow:none;border:0}
    .my_report .sec_04 .cont_box {padding:0}
    .my_report .sec_04 .q_check_list {padding:20px 0 0 0;border:0;border-top:solid 1px var(--gray-200)}
    .my_report .sec_04 .paging,
    .my_report .btn_wrap {display:none}
    .my_report .sec_04 .tab_menu {padding:0;position:relative}
    .my_report .sec_04 .tab_menu .btn_toggle {display:block;width:40px;position:absolute;top:0;right:0;z-index:2}
    .my_report .sec_04 .tab_menu .btn_toggle::before {content:'';display:block;width:150px;height:100%;background:linear-gradient(to right, rgba(255,255,255,0), #fff);position:absolute;top:0;right:0;z-index:1}
    .my_report .sec_04 .tab_menu .btn_toggle img {position:relative;z-index:5}
    .my_report .sec_04 .tab_menu .btn_toggle.on::before {display:none}
    .section_toggle.btn_toggle.on img {transform:rotate(180deg)}
    .section_toggle.btn_toggle.on + ul {overflow:visible;flex-wrap:wrap}
    .my_report .sec_04 .tab_menu ul {display:flex;align-items:center;gap:12px;background:none;padding:0;overflow:hidden}
    .my_report .sec_04 .tab_menu li {flex:0}
    .my_report .sec_04 .tab_menu li > * {border:solid 1px var(--gray-200);height:40px;padding:0 16px;font-size:14px;color:var(--gray-600);border-radius:50px;white-space:nowrap}
    .my_report .sec_04 .tab_menu li > *.on {background:var(--gray-900);color:var(--white)}
    .my_report .sec_04 .tab_cont_wrap {margin-top:40px}
    .my_report .tab_cont_wrap .sec_03 {border-top:0}

    .report_02 .cont_box {display:flex;flex-direction:column;gap:20px}
    .report_02 .box {background:none;border-color:var(--gray-200);border-radius:4px;padding:16px}
    .report_02 .box .box_tit {color:var(--gray-900);margin:0}
    .report_02 .box .box_tit .blue {display:inline;color:var(--primary);margin-left:4px}
    .report_02 .box_01 .tit_box p,
    .report_02 .box_02 .tit_box p,
    .report_02 .box_07 .tit_box p {display:none}
    .report_02 .tit_box p {color:var(--gray-600)}
    .report_02 .tit_box p strong {font-weight:600}
    .report_02 .grid_cont {padding:0;background:none}
    .report_02 .grid_cont .wrap {gap:8px}
    .report_02 .grid_cont .wrap div {width:100%;flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:4px;background:var(--gray-50);border-radius:4px;font-size:14px;color:var(--gray-600);padding:16px}
    .report_02 .grid_cont .wrap div.col2 {grid-column:span 1;}
    .report_02 .grid_cont .wrap div strong {font-weight:600;color:var(--gray-900)}
    .report_02 .tit_box .mark {display:none}
    .report_02 .voice_tone.only_mb {display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px}
    .report_02 .voice_tone > div {display:flex;align-items:center;justify-content:center;min-width:57px;width:57px;height:57px;background:var(--gray-50);border:solid 1px var(--gray-200);border-radius:60px;font-size:12px;color:var(--gray-400)}
    .report_02 .voice_tone > div.on {border-color:var(--primary);color:var(--primary);background:rgba(87,167,255,.12)}
    .report_02 .box_04 {display:none}
    .report_02 .box_05 {border:0;padding:0}
    .report_02 .box_05 > div {border:solid 1px var(--gray-200);border-radius:4px;padding:16px}
    .report_02 .box_05 > div + div {margin-top:20px}
    .report_02 .box_05 > div + div .box_tit {display:block}
    .report_02 .habit_box {display:block}
    .report_02 .habit_box div {display:flex;align-items:center;padding:14px 16px;border:0;background:var(--gray-50)}
    .report_02 .habit_box div + div {margin-top:8px}
    .report_02 .habit_box div .num {display:flex;align-items:center;justify-content:center;width:20px;min-width:20px;height:20px;background:var(--gray-300);border-radius:20px;text-align:center;color:var(--gray-600);margin-right:16px}
    .report_02 .habit_box div .tit {order:2;background:none;height:auto;display:block;color:var(--gray-600);font-weight:normal}
    .report_02 .habit_box div .word {font-weight:600;height:auto;display:block;flex:1}
    .report_02 .voice_speed {display:block;padding:0}
    .report_02 .voice_speed .graph {margin-left:28px}
    .report_02 .voice_speed .graph .graph_label.bottom {bottom:16%}
    .report_02 .voice_speed .legend_wrap {display:grid;grid-template-columns:repeat(2, 1fr);gap:12px;background:var(--gray-50);border-radius:4px;margin-top:16px;padding:16px}
    .report_02 .voice_speed .legend_wrap div + div {margin:0}
    .report_02 .voice_speed .legend_wrap div span {min-width:8px;width:8px;height:8px;border-radius:2px}
    .report_02 .p_cont ul {background:var(--gray-100);border-radius:4px;padding:16px;color:var(--gray-600)}
    .report_02 .p_cont ul li + li {margin-top:8px}
    .report_02 .p_cont .comment {font-weight:normal;margin-top:16px}
    .report_02 .box_08 .tab_menu.type_01 {background:Var(--gray-100);border:0 !important;padding:4px}
    .report_02 .box_08 .tab_menu.type_01 ul {gap:0}
    .report_02 .box_08 .tab_menu.type_01 li {flex:1}
    .report_02 .box_08 .tab_menu.type_01 li + li {border:0}
    .report_02 .box_08 .tab_menu li > *.on {background:var(--white);color:var(--gray-900);font-weight:600;border-radius:2px;box-shadow:0 0 4px rgba(42,45,47,.12)}
    .report_02 .box_08 .tab_cont_wrap {border:0;background:var(--gray-100);margin-top:16px;padding:16px}
    .report_02 .voice_hearing {display:flex;flex-direction:column;padding:0}
    .report_02 .voice_hearing > div {width:100%}
    .report_02 .voice_hearing .txt_wrap {text-align:left}
    .report_02 .voice_hearing .txt_wrap span {display:inline-block;background:var(--white);border-radius:20px 20px 20px 0;padding:12px 16px;font-size:14px;font-weight:600}
    .report_02 .voice_hearing .txt_wrap p {display:none}
    .report_02 .voice_hearing .play_wrap {order:2;background:var(--white);border:solid 1px var(--gray-200);border-radius:4px;margin:16px 0 0;padding:8px}
    .report_02 .voice_hearing .my_answer,
    .report_02 .voice_hearing .correct_answer {max-width:calc(100% - 16px);background:var(--primary);font-size:14px;color:Var(--white);border:0;border-radius:20px 20px 0 20px;margin-top:16px;text-align:left;padding:12px 16px;margin-left:16px}
    .report_02 .voice_hearing .correct_answer {background:var(--green)}
    .report_02 .voice_hearing .my_answer .tit,
    .report_02 .voice_hearing .correct_answer .tit {display:block;width:auto;height:auto;color:rgba(255,255,255,.64);margin-bottom:8px}
    .report_02 .voice_hearing .my_answer p,
    .report_02 .voice_hearing .correct_answer p {font-size:14px;font-weight:600}

    /* 가이드 */
    .guide_wrap, .record_wrap {padding:60px 0 20px}
    .guide_wrap > .tit {display:none}
    .guide_wrap > .tit_box .sub {display:block;font-size:16px;font-weight:600;color:var(--gray-600);margin-bottom:20px}
    .guide_wrap > .tit_box .tit {display:block;font-size:20px;font-weight:600;line-height:1.5}
    .guide_wrap .list.only_pc {display:none}
    .guide_wrap .list.only_mb {display:flex;align-items:center;flex-direction:column;gap:12px;margin-top:40px;}
    .guide_wrap .list .item {display:flex;align-items:center;gap:0 30px;max-width:initial;box-shadow:none;background:var(--gray-50);border:0;text-align:left;padding:20px}
    .guide_wrap .list .item .txt_wrap {flex:1}
    .guide_wrap .list .item .txt_wrap .tit {font-size:16px;font-weight:600}
    .guide_wrap .list .item .txt_wrap p {font-size:14px;font-weight:normal;color:var(--gray-600);margin-top:8px}
    .guide_wrap .list .item .img_wrap {width:44px}
    .guide_wrap .list.type2 {gap:12px;margin-top:40px}
    .guide_wrap .list.type2 .item {text-align:center}
    .guide_wrap .list.type2 .item .only_mb {margin:0 auto}
    .guide_wrap .list.type2 .item img {width:78px}
    .guide_wrap .list.type2 .item p {font-size:16px;margin-top:12px;color:var(--gray-900)}
    .guide_wrap .list.type3 {flex-direction:column;gap:12px}
    .guide_wrap .list.type3 .item {gap:0 12px;padding:13px 16px}
    .guide_wrap .list.type3 .item img {width:24px}
    .guide_wrap .list.type3 .item p {font-size:16px;font-weight:normal;color:var(--gray-900);margin:0}
    .guide_info .img_wrap {margin:82px 0}

    .guide_wrap .guide_2 {flex-direction:column;gap:12px;margin-top:40px}
    .guide_wrap .guide_2 > div {width:100% !important;background:var(--gray-50);border-radius:4px;padding:20px}
    .guide_wrap .guide_2 .head {display:block;height:auto;text-align:left;font-size:14px;font-weight:600;color:var(--gray-600);background:0;margin-bottom:12px}
    .guide_wrap .guide_2 .inner {flex-wrap:wrap;gap:12px;border:0;border-radius:0;box-shadow:none;padding:0}
    .guide_wrap .guide_2 .inner > div {flex:0;display:inline-flex;align-items:center;gap:0 4px;background:var(--gray-200);border-radius:4px;padding:4px}
    .guide_wrap .guide_2 .inner > div + div {border:0}
    .guide_wrap .guide_2 .inner > div img {width:20px}
    .guide_wrap .guide_2 .inner span {font-size:16px;font-weight:600;margin:0;white-space:nowrap}

    .mic_test {padding-bottom:20px}
    .mic_test .bar_wrap {display:none}
    .mic_test .ripple_wrap {display:block;margin:52px 0 72px}
    .mic_test .ripple_wrap > button,
    .mic_test .ripple_wrap > .done {display:flex;align-items:center;justify-content:center;width:92px;height:92px;background:var(--primary);border-radius:90px;margin:0 auto;position:relative}
    .mic_test .ripple_wrap > .done {background:var(--green)}
    .mic_test .ripple_wrap > button.on::before,
    .mic_test .ripple_wrap > button.on::after {content:'';display:block;width:100%;height:100%;background:var(--primary);border-radius:50%;opacity:0;position:absolute;top:0;left:0;animation:growAndFade 2s infinite ease-out}
    .mic_test .ripple_wrap > button.on::after {animation-delay: 1s;}
    .mic_test .ripple_wrap > button .on {display:none}
    .mic_test .ripple_wrap > button.on .on {display:block}
    .mic_test .ripple_wrap > button.on .off {display:none}
    .mic_test .ripple_wrap > button img {position:relative;z-index:2}
    .mic_test p.only_pc {display:none}
    .mic_test .btn_wrap {display:block !important;position:relative}
    .mic_test .btn_wrap button {position:relative;z-index:13}
    .mic_test .btn_wrap button img {width:64px}

    .board_view.board_record {padding:0}
    .board_view.board_record .cont {padding:0;border-radius:0}
    .board_view .alert_msg {margin-bottom:-20px;padding-top:12px}

    .record_wrap {padding:0}
    .record_wrap .tit {display:none}
    .record_wrap .inner {display:flex;flex-direction:column;min-height:calc(100vh - 152px)}
    .record_wrap .question {flex:1;display:block;min-height:300px;background:var(--gray-100);border-radius:0;text-align:left;position:relative}
    .record_wrap .question .num {display:block;font-size:16px;font-weight:600;color:var(--gray-600);margin-bottom:20px;text-align:center}
    .record_wrap .question .bubble {display:inline-block;background:var(--white);border-radius:24px 24px 24px 0;font-size:16px;font-weight:600;padding:16px 20px;margin-right:26px}
    .record_wrap .question .alert {display:block;width:100%;font-size:16px;font-weight:normal;color:var(--gray-600);position:absolute;bottom:40px;left:0;padding:0 20px;text-align:center}
    .record_wrap .question .my {margin-top:20px;font-size:16px;font-weight:600;color:var(--white);padding-left:26px}
    .record_wrap .question .my .mark {display:block;font-size:14px;font-weight:600;color:rgba(255,255,255,.64);margin-bottom:8px}
    .record_wrap .question .my .my_record {background:var(--primary);border:0;border-radius:24px 24px 0 24px;padding:16px 20px}
    .record_wrap .question .my .best_answer {display:none;background:var(--green);border:0;border-radius:24px 24px 0 24px;padding:16px 20px;transform:none;color:inherit}
    .record_wrap .question .my.on .my_record {display:none}
    .record_wrap .question .my.on .best_answer {display:block}
    .record_wrap .question .my.on .best_answer .mark {background:none}
    .record_wrap .record {flex:260px 0 0}
    .record_wrap .record,
    .record_wrap .repeat {min-height:280px;background:var(--gray-50);border:solid 1px var(--gray-200);border-radius:4px;margin:20px}
    .record_wrap .record .box,
    .record_wrap .repeat .box {min-height:initial;background:0;border:0;margin:0;padding:0}
    .record_wrap .record .box .time {font-size:32px;font-weight:600;margin:70px 0 48px}
    .record_wrap .record p.gray_mb {margin-top:55px;margin-bottom:32px}
    .record_wrap .record img + p.gray_mb {margin-top:8px}
    .record_wrap .mic_test {margin-top:0}
    .record_wrap .mic_test .btn_wrap {margin-top:0}
    .record_wrap .record .record_result {display:none}
    .record_wrap .repeat p {font-size:20px;font-weight:600;color:var(--gray-400);margin:40px 0 64px}

    .coach {display:block}
    .coach_marker {position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:11}
    .coach + button {position:relative}
    .coach + button::before {content:'';display:block;width:calc(100% + 24px);height:calc(100% + 24px);background:var(--gray-50);border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}
    .coach + button img {position:relative;z-index:13}
    .coach .coach_msg {width:100%;font-size:16px !important;font-weight:600;color:var(--white);position:absolute;left:50%;bottom:calc(100% + 40px);transform:translateX(-50%);z-index:13;margin:0 !important}
}

@keyframes growAndFade {
    0% {opacity: .5;transform: scale(1)}
    100% {opacity: 0;transform: scale(1.5)}
}
@media all and (max-width: 499px) {}

@media all and (max-width: 374px) {}