/* container */
html , body {overflow-x:hidden;}
.container {max-width:1230px; margin:0 auto; padding:0 15px; width:100%;}
.is-pc {display:block;}
.is-m {display:none;}
@media (max-width:991px){
.is-pc {display:none;}
.is-m {display:block;}
}

/* header */
header .header-banner {background:#000;}
header .header-banner .container {position:relative;}
header .header-banner .subject {height:80px; padding:0 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
header .header-banner .subject p {font-size:22px; font-weight:bold; line-height:1.5; color:#fff;}
header .header-banner .close {font-size:0; position:absolute; right:0; top:50%; transform:translateY(-50%); width:24px; height:24px; background:url('../images/icon_header_banner_close.png') no-repeat center / cover;}
header .header-category {border-bottom:1px solid #F1F3F5;}
header .header-category ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
header .header-category ul li {flex:1; min-width:0;}
header .header-category ul li .link {height:64px; font-size:16px; font-weight:bold; color:#4a4a4a; text-align:center; padding:0 10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
header .header-main {border-bottom:1px solid #F1F3F5; padding:20px 0;}
header .header-main .container {display:flex; flex-wrap:wrap; align-items:center;}
header .header-main .main-logo {flex:1; min-width:0;}
header .header-main .main-logo h1 a img {width:159px;}
header .header-main .main-button {flex:1; min-width:0;}
header .header-main .main-button ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; width:100%;}
header .header-main .main-button ul li {margin:0 12px 0 0;}
header .header-main .main-button ul li:last-of-type {margin:0;}
header .header-main .main-button ul li .link {border:1px solid #ADB5BD; border-radius:6px; font-size:14px; color:#4a4a4a; height:36px; padding:0 18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
header .header-main .main-button ul li .link.active {background:#00529C; border-color:#00529C; color:#fff;}
header .header-main .main-form {padding:0 24px; width:100%; max-width:500px;}
header .header-main .main-form form {display:flex; flex-wrap:wrap; align-items:center; width:100%; border-radius:8px; overflow:hidden; background:#f6f6f6; border:1px solid #CED4DA;}
header .header-main .main-form form input {flex:1; min-width:0; padding:0 12px; font-size:14px; color:#111; height:32px; background:none;}
header .header-main .main-form form input::placeholder {color:#A2A2A2;}
header .header-main .main-form form .search {display:block; font-size:0; width:32px; height:32px; margin:0 8px 0 0; background:url('../images/icon_header_search.png') no-repeat center / cover;}
header .header-main .main-bar {display:none;}
header .header-main .main-member {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
header .header-main .main-member .logout {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#4a4a4a;}
header .header-main .main-member .logout:before {display:inline-block; content:""; width:16px; height:16px; margin:0 2px 0 0; background:url('../images/icon_header_logout.png') no-repeat center / cover;}
header .header-main .main-member .member-pc {position:relative; margin:0 34px 0 0; z-index:10;}
header .header-main .main-member .member-pc p {font-size:16px; color:#4a4a4a; cursor:pointer;}
header .header-main .main-member .member-pc p b {font-size:16px; color:#00529C; font-weight:600; cursor:pointer;}
header .header-main .main-member .member-pc .inner {pointer-events:none; opacity:0; transition:all ease 0.5s; position:absolute; left:-16px; top:0; width:260px; padding:33px 0 0;}
header .header-main .main-member .member-pc .inner .inner-cate {padding:14px 24px; background:#fff; border:1px solid #d9d9d9; box-shadow:0 0 10px rgba(0,0,0,0.15);}
header .header-main .main-member .member-pc .inner .inner-cate ul li.border {border-top:1px solid #d9d9d9; padding:10px 0 0; margin:10px 0 0;}
header .header-main .main-member .member-pc .inner .inner-cate ul li > * {display:flex; flex-wrap:wrap; align-items:center; height:39px; font-size:16px; font-weight:500; color:#4a4a4a;}
header .header-main .main-member .member-pc .inner .inner-cate ul li > *.guide:before {display:inline-block; content:""; width:16px; height:16px; margin:0 8px 0 0; font-size:0; background:url('../images/icon_header_guide.png') no-repeat center / cover;}
header .header-main .main-member .member-pc .inner .inner-cate ul li > *.logout:before {display:inline-block; content:""; width:16px; height:16px; margin:0 8px 0 0; background:url('../images/icon_header_logout.png') no-repeat center / cover;}
header .header-main .main-member .member-pc:hover .inner {pointer-events:inherit; opacity:1;}
header .header-main .main-member .member-mo {display:none;}
header .header-mobile {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); transition:all ease 0.5s; z-index:9999;}
header .header-mobile .box {pointer-events:none; opacity:0; position:absolute; width:280px; top:0; height:100%; overflow-y:auto; background:#fff; transition:all ease 0.5s; padding:0 12px;}
header .header-mobile .box[data-name="left"] {left:-140px;}
header .header-mobile .box[data-name="right"] {right:-140px;}
header .header-mobile .mobile-head {padding:15px 12px; border-bottom:1px solid #d9d9d9;}
header .header-mobile .mobile-head .head-cate ul {display:flex; flex-wrap:wrap; align-items:center;}
header .header-mobile .mobile-head .head-cate ul li {display:flex; flex-wrap:wrap; align-items:center;}
header .header-mobile .mobile-head .head-cate ul li:after {display:inline-block; content:""; width:1px; height:10px; background:#d9d9d9; margin:0 8px;}
header .header-mobile .mobile-head .head-cate ul li:last-of-type:after {display:none;}
header .header-mobile .mobile-head .head-cate ul li .link {font-size:14px; font-weight:600; color:#a2a2a2;}
header .header-mobile .mobile-head .head-member {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
header .header-mobile .mobile-head .head-member p {font-size:14px; color:#4a4a4a;}
header .header-mobile .mobile-head .head-member p b {font-size:14px; font-weight:500; color:#00529C;}
header .header-mobile .mobile-head .head-member .logout {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#4a4a4a;}
header .header-mobile .mobile-head .head-member .logout:before {display:inline-block; content:""; width:16px; height:16px; margin:0 2px 0 0; background:url('../images/icon_header_logout.png') no-repeat center / cover;}
header .header-mobile .mobile-body .body-search {margin:24px 0 0;}
header .header-mobile .mobile-body .body-search form {display:flex; flex-wrap:wrap; align-items:center; overflow:hidden; background:#F6F6F6; border:1px solid #CED4DA; border-radius:8px;}
header .header-mobile .mobile-body .body-search form input {flex:1; min-width:0; height:46px; padding:0 12px; font-size:14px; font-weight:500; color:#a2a2a2; background:none;}
header .header-mobile .mobile-body .body-search form input::placeholder {color:#a2a2a2;}
header .header-mobile .mobile-body .body-search form .search {width:32px; height:32px; font-size:0; margin:0 8px 0 0; background:url('../images/icon_header_search.png') no-repeat center / cover;}
header .header-mobile .mobile-body .body-cate {padding:16px 0 0;}
header .header-mobile .mobile-body .body-cate ul li .link {display:flex; flex-wrap:wrap; align-items:center; height:43px; padding:0 24px; font-size:16px; font-weight:bold; color:#4a4a4a;}
header .header-mobile .mobile-body .body-cscenter {border-top:1px solid #d9d9d9; padding:24px 24px 0; margin:8px 0 0;}
header .header-mobile .mobile-body .body-cscenter b {display:block; font-size:16px; font-weight:bold; color:#1C1B1F;}
header .header-mobile .mobile-body .body-cscenter strong {display:block; font-size:26px; font-weight:800; color:#00529C; margin:3px 0 0;}
header .header-mobile .mobile-body .body-cscenter time {display:block; margin:5px 0 0; font-size:16px; font-weight:bold; color:#1C1B1F;}
header .header-mobile .mobile-body .body-cscenter small {display:block; font-size:14px; color:#1c1b1f; margin:3px 0 0;}
header .header-mobile .mobile-body .body-guide {border-top:1px solid #d9d9d9; margin:24px 0 0; padding:24px 24px 0;}
header .header-mobile .mobile-body .body-guide .guide {display:flex; flex-wrap:wrap; align-items:center; height:39px; font-size:16px; color:#4a4a4a;}
header .header-mobile .mobile-body .body-guide .guide:before {display:inline-block; content:""; width:16px; height:16px; margin:0 10px 0 0; font-size:0; background:url('../images/icon_header_guide.png') no-repeat center / cover;}
header.fixed .header-mobile {pointer-events:inherit; opacity:1;}
header.fixed .header-mobile .box.active {pointer-events:inherit; opacity:1;}
header.fixed .header-mobile .box[data-name="left"].active {left:0px;}
header.fixed .header-mobile .box[data-name="right"].active {right:0px;}
@media (max-width:1300px){
header .header-main .main-form {max-width:400px;}
}
@media (max-width:991px){
header .header-banner {display:none;}
header .header-category {display:none;}
header .header-main {padding:14px 0; position:fixed; left:0; top:0; width:100%; background:#fff; z-index:1000;}
header .header-main .main-form {display:none;}
header .header-main .main-bar {flex:1; min-width:0; display:block;}
header .header-main .main-bar .menu {display:block; font-size:0; width:24px; height:24px; background:url('../images/icon_header_menu.png') no-repeat center / cover;}
header .header-main .main-logo {flex:none;}
header .header-main .main-logo h1 a img {width:120px;}
header .header-main .main-button ul li {margin:0 0 0 6px;}
header .header-main .main-button ul li .link {height:29px; padding:0 12px; font-size:14px;}
header .header-main .main-member .member-pc {display:none;}
header .header-main .main-member .member-mo {display:block;}
header .header-main .main-member .member-mo .link {display:block; font-size:0;}
header .header-main .main-member .member-mo .link img {width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid #d9d9d9;}
header .header-main .main-member .logout {display:none;}
}

/* footer */
footer {border-top:1px solid #d9d9d9; padding:42px 0;}
footer .container {display:flex; flex-wrap:wrap;}
footer .footer-mobile {display:none;}
footer .footer-copyright {width:100%; margin:36px 0 0;}
footer .footer-copyright p {text-align:center; font-size:14px; font-weight:500; line-height:1.5; color:#757575;}
footer .footer-left {width:200px;}
footer .footer-left h2 img {width:159px;}
footer .footer-left ul {margin:24px 0 0; display:flex; flex-wrap:wrap; align-items:center;}
footer .footer-left ul li {margin:0 4px 0 0;}
footer .footer-left ul li:last-of-type {margin:0;}
footer .footer-left ul li .link {display:block; font-size:0; width:32px; height:32px; background-size:cover; background-position:center;}
footer .footer-left ul li.cate01 .link {background-image:url('../images/icon_footer_link_01.png');}
footer .footer-left ul li.cate02 .link {background-image:url('../images/icon_footer_link_02.png');}
footer .footer-left ul li.cate03 .link {background-image:url('../images/icon_footer_link_03.png');}
footer .footer-left ul li.cate04 .link {background-image:url('../images/icon_footer_link_04.png');}
footer .footer-right {flex:1; min-width:0;}
footer .footer-right .right-link ul {display:flex; flex-wrap:wrap; align-items:center;}
footer .footer-right .right-link ul li {margin:0 42px 0 0;}
footer .footer-right .right-link ul li:last-of-type {margin:0;}
footer .footer-right .right-link ul li .link {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; font-weight:500; color:#333;}
footer .footer-right .right-link ul li:nth-of-type(3) .link {color:#00529C;}
footer .footer-right .right-info {margin:36px 0 0;}
footer .footer-right .right-info ul li {margin:0 0 5px; display:flex; flex-wrap:wrap;}
footer .footer-right .right-info ul li:last-of-type {margin:0;}
footer .footer-right .right-info ul li p {font-size:14px; line-height:1.5; color:#757575; margin:0 24px 0 0;}
footer .footer-right .right-info ul li p:last-of-type {margin:0;}
@media (max-width:991px){
footer {border:0; padding:56px 0 36px; overflow:hidden;}
footer .footer-mobile {display:block; width:calc(100% + 30px); margin:0 -15px; background:#f6f6f6;}
footer .footer-mobile ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
footer .footer-mobile ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:43px; padding:0 6px; font-size:14px; color:#a2a2a2;}
footer .footer-mobile ul li:nth-of-type(3) a {color:#00529C;}
footer .footer-left {width:100%; margin:24px 0 0;}
footer .footer-left h2 img {width:121px; display:block; margin:0 auto;}
footer .footer-left ul {margin:22px 0 0; justify-content:center;}
footer .footer-right {flex:none; width:100%; padding:24px 0 0; margin:24px 0 0; border-top:1px solid #D9D9D9;}
footer .footer-right .right-link {display:none;}
footer .footer-right .right-info {margin:0;}
footer .footer-right .right-info ul li p {width:100%; margin:0 0 5px; text-align:center; font-size:12px;}
footer .footer-right .right-info ul li p a {font-size:12px; line-height:1.5; color:#757575;}
footer .footer-copyright {margin:24px 0 0;}
footer .footer-copyright p {font-size:12px;}
}

/* section */
section {padding:32px 0 0;}
section > .container {padding-top:10px; padding-bottom:200px;}
@media (max-width:991px){
section {padding:85px 0 0;}
section > .container {padding-top:0; padding-bottom:45px;}
}

/* sub-box */
.sub-box {display:flex; flex-wrap:wrap; align-items:flex-start;}
.sub-box .sub-left {width:214px; margin-right:60px;}
.sub-box .sub-left h2 {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 20px; font-size:18px; font-weight:bold; color:#1e1e1e;}
.sub-box .sub-left h2 .refresh {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#757575;}
.sub-box .sub-left h2 .refresh:after {display:inline-block; content:""; margin:0 0 0 4px; width:16px; height:16px; background:url('../images/icon_refresh.png') no-repeat center / cover;}
.sub-box .sub-left .sub-left-check ul li {border-bottom:1px solid #d9d9d9; padding:0 0 24px; margin:0 0 24px;}
.sub-box .sub-left .sub-left-check ul li h3 {margin:0 0 12px; font-size:16px; font-weight:500; color:#4a4a4a;}
.sub-box .sub-left .sub-left-check ul li .check {position:relative; overflow:hidden; margin:0 0 10px;}
.sub-box .sub-left .sub-left-check ul li .check:last-of-type {margin:0;}
.sub-box .sub-left .sub-left-check ul li .check input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.sub-box .sub-left .sub-left-check ul li .check label {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#4a4a4a;}
.sub-box .sub-left .sub-left-check ul li .check label:before {display:inline-block; content:""; width:18px; height:18px; margin:0 8px; background:url('../images/icon_check.png') no-repeat center / cover;}
.sub-box .sub-left .sub-left-check ul li .check input:checked ~ label:before {background-image:url('../images/icon_check_on.png');}
.sub-box .sub-left .sub-left-cate ul li {border-bottom:1px solid #d9d9d9;}
.sub-box .sub-left .sub-left-cate ul li .link {display:flex; flex-wrap:wrap; align-items:center; height:40px; font-size:16px; font-weight:500; color:#757575;}
.sub-box .sub-left .sub-left-cate ul li .link:before {display:inline-block; content:""; width:4px; height:4px; background:#757575; border-radius:50%; margin:0 8px 0 12px;}
.sub-box .sub-left .sub-left-cate ul li.active .link {color:#00529C;}
.sub-box .sub-left .sub-left-cate ul li.active .link:before {background:#00529C;}
.sub-box .sub-left .sub-left-cs {margin:32px 0 0; background:#f6f6f6; border:1px solid #d9d9d9; border-radius:12px; padding:24px;}
.sub-box .sub-left .sub-left-cs strong {display:block; font-size:16px; font-weight:bold; color:#1C1B1F;}
.sub-box .sub-left .sub-left-cs a {display:flex; flex-wrap:wrap; align-items:center; height:31px; font-size:26px; font-weight:800; color:#00529c;}
.sub-box .sub-left .sub-left-cs time {display:block; margin:10px 0 0; font-size:16px; font-weight:bold; color:#1c1b1f;}
.sub-box .sub-left .sub-left-cs p {font-size:14px; color:#1c1b1f; margin:3px 0 0;}
.sub-box .sub-left .sub-left-button {display:none;}
.sub-box .sub-right {flex:1; min-width:0;}
@media (max-width:991px){
.sub-box .sub-left {display:none;}
.sub-box.main .sub-left {display:block; width:100%; margin-right:0;}
.sub-box.main .sub-right {display:none;}
.sub-box.popup .sub-left {pointer-events:none; opacity:0; display:block; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:9999; transition:all ease 0.5s;}
.sub-box.popup .sub-left .inner {pointer-events:none; opacity:0; position:absolute; left:-100px; top:0; width:280px; height:100%; overflow-y:auto; background:#fff; transition:all ease 0.5s; padding:24px;}
.sub-box.popup.fixed .sub-left {pointer-events:inherit; opacity:1;}
.sub-box.popup.fixed .sub-left .inner {pointer-events:inherit; opacity:1; left:0;}
.sub-box.popup.fixed .sub-left .sub-left-cs {display:none;}
.sub-box.popup.fixed .sub-left .sub-left-button {display:block; margin:24px 0 0;}
.sub-box.popup.fixed .sub-left .sub-left-button a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:50px; border-radius:50px; font-size:16px; font-weight:500; color:#fff; background:#00529C;}
}

/* color */
.ft-orange {color:#FF975F !important;}

/* title-box */
.title-box {padding:10px; border-bottom:1px solid #D9D9D9;}
.title-box h2 {font-size:26px; font-weight:600; color:#1e1e1e;}
.title-box .back {display:none;}
@media (max-width:991px){
.title-box {border:0; padding:0; position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.title-box h2 {font-size:20px;}
.title-box .back {display:block; position:absolute; left:0; top:50%; transform:translateY(-50%); width:24px; height:24px; font-size:0; background:url('../images/icon_back.png') no-repeat center / cover;}
}

/* search-box */
.search-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
/* 모바일 대응 */
@media (max-width:991px) {  .search-box a {padding: 6px 20px;font-size: 13px;}  }
.search-box form {display:flex; flex-wrap:wrap; align-items:center; width:100%; max-width:390px; border-radius:6px; border:1px solid #ced4da; overflow:hidden;}
.search-box form select {height:36px; font-size:14px; color:#4a4a4a; padding:0 18px; appearance:auto;}
.search-box form input {flex:1; min-width:0; height:36px; padding:0 12px; font-size:14px; color:#4a4a4a;}
.search-box form input::placeholder {color:#4a4a4a;}
.search-box form .search {display:block; margin:0 8px 0 0; width:24px; height:24px; font-size:0; background:url('../images/icon_search.png') no-repeat center / cover;}
@media (max-width:991px){
.search-box form {max-width:100%;}
.search-box form select {padding:0 12px;}
.search-box .ask {width: 100%;text-align: center;padding: 12px 24px;font-size: 14px;margin-top:10px; }
}

/* table-box */
.table-box {overflow-x:auto; white-space:nowrap;}
.table-box table {border-top:1px solid #1C1B1F;}
.table-box table thead tr th {background:#F6F6F6; height:50px; font-size:14px; font-weight:600; color:#1C1B1F; border-bottom:1px solid #d9d9d9;}
.table-box table thead tr th.num {width:80px;}
.table-box table thead tr th.date {width:137px;}
.table-box table thead tr th.hit {width:100px;}
.table-box table tbody tr td {border-bottom:1px solid #d9d9d9; padding:16.5px 10px; font-size:14px; color:#4a4a4a;}
.table-box table tbody tr td .subject {width:600px; display:block; text-align:left; font-size:14px; color:#1e1e1e; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.table-box table tbody tr.notice td {background:#F3F9FF;}
.table-box table tbody tr.notice td:first-of-type {color:#00529C;}
.table-box table tbody tr td.mo {display:none;}
@media (max-width:1200px){
.table-box table tbody tr td .subject {width:400px;}
}
@media (max-width:991px){
.table-box table thead {display:none;}
.table-box table tbody tr td.pc {display:none;}
.table-box table tbody tr td.mo {display:table-cell; padding:0;}
.table-box table tbody tr td.mo .inner {display:block; padding:12px;}
.table-box table tbody tr td.mo .mo-subject {display:-webkit-box; font-size:14px; line-height:1.3; color:#4a4a4a; white-space:normal; text-align:left; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.table-box table tbody tr td.mo .mo-subject b {font-size:14px; line-height:1.3; color:#00529C; font-weight:500;}
.table-box table tbody tr td.mo .mo-info {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:12px 0 0;}
.table-box table tbody tr td.mo .mo-info time {font-size:14px; color:#4a4a4a;}
.table-box table tbody tr td.mo .mo-info b {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#4a4a4a;}
.table-box table tbody tr td.mo .mo-info b:before {display:inline-block; content:""; width:16px; height:16px; margin:0 4px 0 0; background:url('../images/icon_hit.png') no-repeat center / cover;}
}

/* paging-box */
.paging-box {margin:42px 0 0;}
.paging-box ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.paging-box ul li {margin:0 8px 0 0;}
.paging-box ul li:last-of-type {margin:0;}
.paging-box ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:32px; height:32px; font-size:16px; font-weight:600;}
.paging-box ul li.active a {background:#757575; color:#fff; border-radius:50%;}
.paging-box ul li.pg a {width:24px; height:24px; font-size:0; background-size:cover; background-position:center;}
.paging-box ul li.pg.first a {background-image:url('../images/icon_paging_first.png');}
.paging-box ul li.pg.prev a {background-image:url('../images/icon_paging_prev.png');}
.paging-box ul li.pg.next a {background-image:url('../images/icon_paging_next.png');}
.paging-box ul li.pg.last a {background-image:url('../images/icon_paging_last.png');}

/* more-box */
.more-box {margin:42px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.more-box a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex:1; min-width:0; height:50px; border-radius:6px; border:1px solid #d9d9d9; background:#fff; font-size:16px; font-weight:600; color:#757575;}

/* tab-box */
.tab-box {margin:10px 0 0;}
.tab-box ul {display:flex; flex-wrap:wrap; border-bottom:1px solid #E9ECEF;}
.tab-box ul li {width:16.66%;}
.tab-box ul li a {font-size:18px; font-weight:500; color:#1e1e1e; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; position:relative; height:53px;}
.tab-box ul li.active a {font-weight:bold; color:#00529C;}
.tab-box ul li.active a:after {position:absolute; left:0; bottom:0; width:100%; height:2px; background:#00529c; content:"";}
@media (max-width:991px){
.tab-box ul li {flex:1; min-width:0;}
.tab-box ul li a {height:50px; font-size:16px;}
}

/* category-box */
.category-box ul {display:flex; flex-wrap:wrap;}
.category-box ul li {border:1px solid #E9ECEF; margin:0 0 0 -1px;}
.category-box ul li:first-of-type {margin:0;}
.category-box ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:50px; padding:0 24px; font-size:14px; font-weight:500; color:#1e1e1e;}
.category-box ul li.active {border-color:#00529c;}
.category-box ul li.active a {background:#00529C; color:#fff;}
@media (max-width:991px){
.category-box ul {display:block; overflow-x:auto; white-space:nowrap; margin:0 -15px;}
.category-box ul li {display:inline-block; margin:0 0 0 -4px;}
.category-box ul li:first-of-type {margin-left:15px;}
.category-box ul li:last-of-type {margin-right:15px;}
.category-box ul li a {height:37px; padding:0 12px; font-size:14px;}
}

/* faq-box */
.faq-box {border-top:1px solid #1E1E1E;}
.faq-box ul li {border-bottom:1px solid #d9d9d9;}
.faq-box ul li .list-head a {display:flex; flex-wrap:wrap; align-items:center; padding:16px 10px;}
.faq-box ul li .list-head a p {font-size:16px; line-height:1.4; color:#1e1e1e; flex:1; min-width:0;}
.faq-box ul li .list-head a:after {display:inline-block; content:""; width:24px; height:24px; background:url('../images/icon_faq.png') no-repeat center / cover;}
.faq-box ul li .list-body {display:none; background:#F6F6F6; padding:24px; border-top:1px solid #d9d9d9;}
.faq-box ul li .list-body p {font-size:15px; line-height:1.5;}
.faq-box ul li.active .list-head a p {color:#00529C;}
.faq-box ul li.active .list-head a:after {background-image:url('../images/icon_faq_on.png');}
.faq-box ul li.active .list-body {display:block;}
@media (max-width:991px){
.faq-box ul li .list-head a {padding:16px 10px;}
.faq-box ul li .list-head a p {font-size:15px;}
.faq-box ul li .list-head a:after {width:20px; height:20px;}
.faq-box ul li .list-body {padding:20px 15px;}
.faq-box ul li .list-body p {font-size:14px;}
}

/* filter-box */
.filter-box {background:#F6F6F6; border:1px solid #D9D9D9; border-radius:10px; padding:42px 24px;}
.filter-box .filter-button ul {display:flex; flex-wrap:wrap; justify-content:center; margin:0 -6px -12px;}
.filter-box .filter-button ul li {margin:0 6px 12px;}
.filter-box .filter-button ul li a {padding:0 12px; font-size:16px; color:#4a4a4a; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:40px; background:#fff; border-radius:50px;}
.filter-box .filter-button ul li.active a {background:#FAA61A; border-color:#FAA61A; color:#fff;}
.filter-box .filter-search {margin:24px 0 0;}
.filter-box .filter-search form {border-radius:50px; overflow:hidden; background:#fff; display:flex; flex-wrap:wrap; align-items:center; border:1px solid #A2A2A2;}
.filter-box .filter-search form input {flex:1; min-width:0; height:50px; background:none; padding:0 24px; font-size:14px; font-weight:500; color:#111;}
.filter-box .filter-search form input::placeholder {color:#a2a2a2;}
.filter-box .filter-search form .search {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; background:#00529C; color:#fff; height:50px; padding:0 24px; font-size:14px; font-weight:600;}
.filter-box .filter-search form .search:before {display:inline-block; content:""; width:32px; height:32px; background:url('../images/icon_filter_search.png') no-repeat center / cover;}
.filter-box .filter-search div {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin:13px 0 0; padding:0 13px;}
.filter-box .filter-search div a {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#757575;}
.filter-box .filter-search div a:after {display:inline-block; content:""; width:16px; height:16px; margin:0 0 0 4px; background:url('../images/icon_refresh.png') no-repeat center / cover;}
.filter-more-box {display:none;}
@media (max-width:991px){
.filter-box {padding:24px 10px;}
.filter-box .filter-button ul {margin:0 -3px -6px;}
.filter-box .filter-button ul li {margin:0 3px 6px;}
.filter-box .filter-button ul li a {height:37px; padding:0 12px; font-size:14px;}
.filter-box .filter-search {margin:20px 0 0;}
.filter-box .filter-search form input {height:45px; padding:0 12px;}
.filter-box .filter-search form .search {padding:0 15px; height:45px;}
.filter-box .filter-search form .search:before {width:20px; height:20px;}
.filter-box .filter-search div {padding:0;}
.filter-more-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:18px 0 0;}
.filter-more-box a {background:#fff; flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:40px; border:1px solid #d9d9d9; border-radius:50px; font-size:14px; font-weight:500; color:#4a4a4a;}
.filter-more-box a:before {display:inline-block; content:""; width:20px; height:20px; margin:0 4px 0 0; background:url('../images/icon_filter.png') no-repeat center / cover;}
}

/* list-box */
.list-box .list-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 42px;}
.list-box .list-head p {font-size:16px; font-weight:400; color:#757575;}
.list-box .list-head p b {font-size:16px; font-weight:600; color:#4a4a4a;}
.list-box .list-head select {border:1px solid #ADB5BD; background:#fff url('../images/icon_select.png') no-repeat calc(100% - 8px) center / 18px; border-radius:6px; height:36px; padding:0 50px 0 18px; font-size:14px; color:#4a4a4a;}
.list-box .list-body ul {display:flex; flex-wrap:wrap; margin:0 -18px -42px;}
.list-box .list-body ul li {width:calc(33.33% - 36px); margin:0 18px 42px;}
.list-box .list-body ul li .inner {display:block;}
.list-box .list-body ul li .inner .list-image {display:block; background-size:cover; background-position:center; border-radius:8px;}
.list-box .list-body ul li .inner .list-image:after {display:block; content:""; padding-bottom:56.5%;}
.list-box .list-body ul li .inner .list-content {margin:12px 0 0;}
.list-box .list-body ul li .inner .list-content .sticker {display:flex; flex-wrap:wrap; margin:0 -2px -4px;}
.list-box .list-body ul li .inner .list-content .sticker span {padding:4px; font-size:12px; border-radius:4px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0 2px 4px;}
.list-box .list-body ul li .inner .list-content .sticker span.bu {background:#D8ECFF; color:#4DAAFF;}
.list-box .list-body ul li .inner .list-content .sticker span.gr {background:#D9D9D9; color:#1C1B1F;}
.list-box .list-body ul li .inner .list-content .subject {margin:4px 0 0;}
.list-box .list-body ul li .inner .list-content .subject p {display:-webkit-box; overflow:hidden; text-overflow:ellipsis; font-size:18px; font-weight:bold; line-height:1.3; color:#1e1e1e; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.list-box .list-body ul li .inner .list-content .info {margin:12px 0 0;}
.list-box .list-body ul li .inner .list-content .info dl dd {padding:2.5px 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 4px;}
.list-box .list-body ul li .inner .list-content .info dl dd:last-of-type {margin:0;}
.list-box .list-body ul li .inner .list-content .info dl dd b {font-size:16px; color:#4a4a4a;}
.list-box .list-body ul li .inner .list-content .info dl dd p {display:flex; flex-wrap:wrap; align-items:baseline; font-size:15px; font-weight:500; color:#757575;}
.list-box .list-body ul li .inner .list-content .info dl dd p em {font-size:14px; color:#757575;}
.list-box .list-body ul li .inner .list-content .state {margin:12px 0 0; padding:12px 0 0; border-top:1px solid #d9d9d9; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.list-box .list-body ul li .inner .list-content .state time {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; font-weight:500; color:#4a4a4a;}
.list-box .list-body ul li .inner .list-content .state time:before {display:inline-block; content:""; width:18px; height:18px; margin:0 2px 0 0; background:url('../images/icon_time.png') no-repeat center / cover;}
.list-box .list-body ul li .inner .list-content .state b {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#4a4a4a;}
.list-box .list-body ul li .inner .list-content .state b:before {display:inline-block; content:""; width:18px; height:18px; margin:0 2px 0 0; background:url('../images/icon_star.png') no-repeat center / cover;}
@media (max-width:991px){
.list-box .list-head {margin:0 0 24px;}
.list-box .list-head p {font-size:14px;}
.list-box .list-head p b {font-size:14px;}
.list-box .list-body ul {margin:0 -6px -24px;}
.list-box .list-body ul li {width:calc(50% - 12px); margin:0 6px 24px;}
.list-box .list-body ul li .inner .list-content {margin:8px 0 0;}
.list-box .list-body ul li .inner .list-content .subject p {font-size:16px;}
.list-box .list-body ul li .inner .list-content .info {margin:8px 0 0;}
.list-box .list-body ul li .inner .list-content .info dl dd b {font-size:12px;}
.list-box .list-body ul li .inner .list-content .info dl dd p em {font-size:13px;}
.list-box .list-body ul li .inner .list-content .state {margin:8px 0 0; padding:8px 0 0;}
}

/* step-box */
.step-box {display:flex; flex-wrap:wrap; align-items:center;}
.step-box .step-bar {flex:1; min-width:0; position:relative; overflow:hidden; border-radius:50px; background:#E9ECEF; height:16px;}
.step-box .step-bar .bar {position:absolute; left:0; top:0; height:100%; border-radius:50px; background:#FAA61A;}
.step-box .step-text {margin:0 0 0 24px;}
.step-box .step-text p {font-size:18px; color:#757575;}
.step-box .step-text p b {font-size:18px; color:#757575; font-weight:600;}
.step-box .step-guide {width:100%; margin:10px 0 0;}
.step-box .step-guide p {text-align:right; font-size:14px; line-height:1.3; color:#ff0000;}
@media (max-width:991px){
.step-box .step-bar {flex:none; width:100%; height:8px;}
.step-box .step-text {width:100%; margin:5px 0 0;}
.step-box .step-text p {text-align:right; font-size:16px;}
.step-box .step-text p b {font-size:16px;}
.step-box .step-guide {margin:7px 0 0;}
.step-box .step-guide p {font-size:13px;}
}

/* lecture-box */
.lecture-box {margin:24px 0 0;}
.lecture-box .list-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 24px;}
.lecture-box .list-head .list-grid-filter {display:flex; flex-wrap:wrap; align-items:center;}
.lecture-box .list-head .list-grid-filter ul {padding:6px 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:1px solid #d9d9d9; border-radius:50px;}
.lecture-box .list-head .list-grid-filter ul li {display:flex; flex-wrap:wrap; align-items:center;}
.lecture-box .list-head .list-grid-filter ul li:after {display:inline-block; content:""; width:1px; height:10px; background:#d9d9d9; margin:0 14px;}
.lecture-box .list-head .list-grid-filter ul li:last-of-type:after {display:none;}
.lecture-box .list-head .list-grid-filter ul li a {display:block; font-size:0; width:24px; height:24px; background-size:cover; background-position:center;}
.lecture-box .list-head .list-grid-filter ul li:nth-of-type(1) a {background-image:url('../images/icon_grid_filter_01.png');}
.lecture-box .list-head .list-grid-filter ul li:nth-of-type(2) a {background-image:url('../images/icon_grid_filter_02.png');}
.lecture-box .list-head .list-grid-filter ul li:nth-of-type(1).active a {background-image:url('../images/icon_grid_filter_on_01.png');}
.lecture-box .list-head .list-grid-filter ul li:nth-of-type(2).active a {background-image:url('../images/icon_grid_filter_on_02.png');}
.lecture-box .list-head .list-state-filter ul {display:flex; flex-wrap:wrap; align-items:center;}
.lecture-box .list-head .list-state-filter ul li {margin:0 14px 0 0;}
.lecture-box .list-head .list-state-filter ul li:last-of-type {margin:0;}
.lecture-box .list-head .list-state-filter ul li a {font-size:14px; font-weight:500; color:#4a4a4a; padding:0 18px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:36px; border-radius:50px; border:1px solid #d9d9d9;}
.lecture-box .list-head .list-state-filter ul li a:before {display:inline-block; content:""; width:19px; height:19px; margin:0 4px 0 0; background:url('../images/icon_state_filter.png') no-repeat center / cover;}
.lecture-box .list-head .list-state-filter ul li.active a {background:#4a4a4a; color:#fff; border-color:#4a4a4a;}
.lecture-box .list-head .list-state-filter ul li.active a:before {background-image:url('../images/icon_state_filter_on.png');}
.lecture-box .list-head .list-order-filter select {border:1px solid #ADB5BD; background:#fff url('../images/icon_select.png') no-repeat calc(100% - 8px) center / 18px; border-radius:6px; height:36px; padding:0 50px 0 18px; font-size:14px; color:#4a4a4a;}
.lecture-box .list-body ul li {margin:0 0 42px; display:flex; flex-wrap:wrap; align-items:center;}
.lecture-box .list-body ul li:last-of-type {margin:0;}
.lecture-box .list-body ul li .list-image {width:284px;}
.lecture-box .list-body ul li .list-image .image {background-size:cover; background-position:center; border-radius:8px;}
.lecture-box .list-body ul li .list-image .image:after {display:block; content:""; padding-bottom:60.5%;}
.lecture-box .list-body ul li .list-image .button {margin:20px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.lecture-box .list-body ul li .list-image .button a {height:45px; border-radius:6px; background:#fff; border:1px solid #d9d9d9; font-size:14px; font-weight:600; color:#4a4a4a; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex:1; min-width:0; margin:0 12px 0 0;}
.lecture-box .list-body ul li .list-image .button a:last-of-type {margin:0;}
.lecture-box .list-body ul li .list-image .button a.active {color:#fff; background:linear-gradient(to right,#00529C,#2392F5); border:0;}
.lecture-box .list-body ul li .list-image .button a.active:before {display:inline-block; content:""; width:16px; height:16px; margin:0 4px 0 0; background:url('../images/icon_write_white.png') no-repeat center / cover;}
.lecture-box .list-body ul li .list-image .content {display:none;}
.lecture-box .list-body ul li .list-content {flex:1; min-width:0; padding-left:24px;}
.lecture-box .list-body ul li .list-content .state {display:flex; flex-wrap:wrap; align-items:center;}
.lecture-box .list-body ul li .list-content .state p {border:1px solid #d9d9d9; border-radius:50px; height:35px; padding:0 18px; font-size:14px; color:#757575; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.lecture-box .list-body ul li .list-content .state p b {margin:0 0 0 8px; font-size:16px; font-weight:bold; color:#4a4a4a;}
.lecture-box .list-body ul li .list-content .state p.active {background:#00B792; color:#fff; border-color:#00B792;}
.lecture-box .list-body ul li .list-content .subject {margin:20px 0 0;}
.lecture-box .list-body ul li .list-content .subject p {font-size:20px; font-weight:bold; line-height:1.3; color:#1e1e1e; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.lecture-box .list-body ul li .list-content .step {margin:12px 0 0;}
.lecture-box .list-body ul li .list-content .info {margin:20px 0 0; border-top:1px solid #4a4a4a;}
.lecture-box .list-body ul li .list-content .info dl dd {padding:12px 0; margin:0 0 15px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; border-bottom:1px solid #d9d9d9;}
.lecture-box .list-body ul li .list-content .info dl dd:last-of-type {margin:0;}
.lecture-box .list-body ul li .list-content .info dl dd b {font-size:14px; color:#757575;}
.lecture-box .list-body ul li .list-content .info dl dd p {font-size:16px; font-weight:500; color:#757575;}
.lecture-box .list-body ul li .list-content .button {display:none;}
@media (max-width:991px){
.lecture-box .list-head .list-grid-filter {order:1;}
.lecture-box .list-head .list-state-filter {order:3; width:100%; margin:20px 0 0;}
.lecture-box .list-head .list-state-filter ul li {flex:1; min-width:0; margin:0 5px 0 0;}
.lecture-box .list-head .list-order-filter {order:2;}
.lecture-box .list-body ul li .list-image {width:100%; display:flex; flex-wrap:wrap; align-items:center;}
.lecture-box .list-body ul li .list-image .image {width:170px;}
.lecture-box .list-body ul li .list-image .button {display:none;}
.lecture-box .list-body ul li .list-image .content {flex:1; min-width:0; padding-left:12px; display:block;}
.lecture-box .list-body ul li .list-image .content time {display:block; text-align:right; display:flex; flex-wrap:wrap; align-items:center;}
.lecture-box .list-body ul li .list-image .content time small {font-size:13px; color:#757575; margin:0 8px 0 0;}
.lecture-box .list-body ul li .list-image .content time b {display:inline-block; font-size:14px; font-weight:bold; color:#4a4a4a;}
.lecture-box .list-body ul li .list-image .content p {margin:4px 0 0; font-size:16px; font-weight:bold; line-height:1.3; color:#1e1e1e; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.lecture-box .list-body ul li .list-content {flex:none; width:100%; padding:0; margin:15px 0 0;}
.lecture-box .list-body ul li .list-content .state {display:none;}
.lecture-box .list-body ul li .list-content .subject {display:none;}
.lecture-box .list-body ul li .list-content .step {margin:0;}
.lecture-box .list-body ul li .list-content .info dl dd {padding:8px 0; margin:0;}
.lecture-box .list-body ul li .list-content .info dl dd p {font-size:14px;}
.lecture-box .list-body ul li .list-content .button {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:15px 0 0;}
.lecture-box .list-body ul li .list-content .button a {height:45px; border-radius:6px; background:#fff; border:1px solid #d9d9d9; font-size:14px; font-weight:600; color:#4a4a4a; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex:1; min-width:0; margin:0 12px 0 0;}
.lecture-box .list-body ul li .list-content .button a:last-of-type {margin:0;}
.lecture-box .list-body ul li .list-content .button a.active {color:#fff; background:linear-gradient(to right,#00529C,#2392F5); border:0;}
.lecture-box .list-body ul li .list-content .button a.active:before {display:inline-block; content:""; width:16px; height:16px; margin:0 4px 0 0; background:url('../images/icon_write_white.png') no-repeat center / cover;}
}

/* lecture-view-box */
.lecture-view-box h2 {padding:10px; font-size:26px; font-weight:600; line-height:1.3; color:#1e1e1e; border-bottom:1px solid #d9d9d9; margin:0 0 24px;}
.lecture-view-box .view-head {display:flex; flex-wrap:wrap; align-items:center;}
.lecture-view-box .view-head .list-left {width:284px;}
.lecture-view-box .view-head .list-left .image .inner {position:relative; display:block; font-size:0; border-radius:8px; overflow:hidden; background-size:cover; background-position:center;}
.lecture-view-box .view-head .list-left .image .inner:after {display:block; content:""; padding-bottom:60.5%;}
.lecture-view-box .view-head .list-left .image .inner > div {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.4); display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.lecture-view-box .view-head .list-left .image .inner > div p {width:100%; text-align:center; font-size:24px; font-weight:bold; color:#fff;}
.lecture-view-box .view-head .list-left .image .inner > div:before {display:block; margin:0 auto 8px; width:44px; height:44px; content:""; background:url('../images/icon_play.png') no-repeat center / cover;}
.lecture-view-box .view-head .list-left .content {display:none;}
.lecture-view-box .view-head .list-left .state {margin:12px 0 0;}
.lecture-view-box .view-head .list-left .state > div {border:1px solid #d9d9d9; border-radius:8px; padding:10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.lecture-view-box .view-head .list-left .state > div p {font-size:16px; color:#757575;}
.lecture-view-box .view-head .list-left .state > div time {font-size:20px; font-weight:bold; color:#4a4a4a;}
.lecture-view-box .view-head .list-left .state > strong {background:#00B792; height:42px; border-radius:8px; font-size:16px; font-weight:600; color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.lecture-view-box .view-head .list-right {flex:1; min-width:0; padding:16px 0 0 24px;}
.lecture-view-box .view-head .list-right .info {margin:0 0 12px;}
.lecture-view-box .view-head .list-right .info ul li {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 25px;}
.lecture-view-box .view-head .list-right .info ul li:last-of-type {margin:0;}
.lecture-view-box .view-head .list-right .info ul li b {font-size:20px; font-weight:600; color:#4a4a4a;}
.lecture-view-box .view-head .list-right .info ul li p {font-size:24px; font-weight:500; color:#757575;}
.lecture-view-box .view-head .list-right .info ul li p span {font-size:24px; color:#757575;}
.lecture-view-box .view-head .list-right .button {margin:24px 0 0; display:flex; flex-wrap:wrap; align-items:center;}
.lecture-view-box .view-head .list-right .button a {margin:0 14px 0 0; height:50px; font-size:16px; font-weight:600; color:#4a4a4a; flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; border:1px solid #ADB5BD;}
.lecture-view-box .view-head .list-right .button a:last-of-type {margin:0;}
.lecture-view-box .view-head .list-right .button a:after {display:inline-block; content:""; width:16px; height:16px; background:url('../images/icon_button_more.png') no-repeat center / cover;}
.lecture-view-box .view-result {margin:24px 0 0; border:1px solid #d9d9d9; border-radius:12px; padding:30px 24px;}
.lecture-view-box .view-result ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.lecture-view-box .view-result ul li {position:relative; flex:1; min-width:0;}
.lecture-view-box .view-result ul li:after {position:absolute; right:0; top:50%; transform:translateY(-50%); content:""; width:1px; height:90px; background:#9A9EA3;}
.lecture-view-box .view-result ul li:last-of-type:after {display:none;}
.lecture-view-box .view-result ul li strong {display:block; text-align:center; font-size:20px; font-weight:600; color:#333;}
.lecture-view-box .view-result ul li strong:before {display:block; content:""; width:42px; height:42px; margin:0 auto 4px; background-size:cover; background-position:center;}
.lecture-view-box .view-result ul li strong:after {display:block; content:""; width:20px; height:2px; background:#d9d9d9; margin:12px auto;}
.lecture-view-box .view-result ul li p {text-align:center; font-size:16px; line-height:1.3; color:#757575;}
.lecture-view-box .view-result ul li:nth-of-type(1) strong:before {background-image:url('../images/icon_lecture_result_01.png');}
.lecture-view-box .view-result ul li:nth-of-type(2) strong:before {background-image:url('../images/icon_lecture_result_02.png');}
.lecture-view-box .view-result ul li:nth-of-type(3) strong:before {background-image:url('../images/icon_lecture_result_03.png');}
.lecture-view-box .view-total {margin:24px 0 0;}
.lecture-view-box .view-total .total-head a {border-radius:8px; background:#f6f6f6; border:1px solid #d9d9d9; padding:20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.lecture-view-box .view-total .total-head a p {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; color:#757575;}
.lecture-view-box .view-total .total-head a p strong {margin:0 0 0 10px; font-size:20px; font-weight:bold; color:#00529C;}
.lecture-view-box .view-total .total-head a span {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#4a4a4a;}
.lecture-view-box .view-total .total-head a span:after {display:inline-block; content:""; width:16px; height:16px; margin:0 0 0 10px; background:url('../images/icon_view_total_more.png') no-repeat center / cover;}
.lecture-view-box .view-total .total-body {margin:12px 0 0; border:1px solid #d9d9d9; border-radius:12px; padding:24px;}
.lecture-view-box .view-total .total-body table {table-layout:fixed; width:100%;}
.lecture-view-box .view-total .total-body table thead tr th {background:#f6f6f6; border:1px solid #d9d9d9; border-width:1px 0; height:54px; font-size:14px; font-weight:600; color:#757575;}
.lecture-view-box .view-total .total-body table tbody tr > * {border-bottom:1px solid #d9d9d9; padding:18px 10px; font-size:14px; font-weight:500; color:#1C1B1F;}
.lecture-view-box .view-total .total-body table tbody tr > th {background:#f6f6f6; color:#757575;}
.lecture-view-box .view-total.active .total-head a span:after {transform:rotate(180deg);}
.lecture-view-box .view-total.active .total-body {display:none;}
.lecture-view-box .view-guide {margin:42px 0 0; background:#f6f6f6; border:1px solid #d9d9d9; padding:24px;}
.lecture-view-box .view-guide strong {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; font-weight:600; color:#111; margin:0 0 15px;}
.lecture-view-box .view-guide strong:before {display:inline-block; content:""; width:18px; height:18px; margin:0 8px 0 0; background:url('../images/icon_guide.png') no-repeat center / cover;}
.lecture-view-box .view-guide ul {list-style:auto; padding:0 0 0 22px;}
.lecture-view-box .view-guide ul li {list-style:disc; margin:0 0 4px; font-size:14px; line-height:1.3; color:#4a4a4a; word-break:keep-all;}
.lecture-view-box .view-guide ul li:last-of-type {margin:0;}
.lecture-view-box .view-guide ul li.active {color:#FF0000;}
.lecture-view-box .view-tab {margin:42px 0 0;}
.lecture-view-box .view-tab .tab ul {display:flex; flex-wrap:wrap; align-items:center; border-bottom:1px solid #d9d9d9;}
.lecture-view-box .view-tab .tab ul li {flex:1; min-width:0;}
.lecture-view-box .view-tab .tab ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:50px; font-size:16px; font-weight:500; color:#757575;}
.lecture-view-box .view-tab .tab ul li.active a {background:#00529C; color:#fff;}
.lecture-view-box .view-tab .content {padding:24px 0;}
@media (max-width:991px){
.lecture-view-box {margin:24px 0 0;}
.lecture-view-box h2 {display:none;}
.lecture-view-box .view-head .list-left {width:100%; display:flex; flex-wrap:wrap; align-items:center;}
.lecture-view-box .view-head .list-left .image {width:170px;}
.lecture-view-box .view-head .list-left .image .inner > div p {font-size:18px;}
.lecture-view-box .view-head .list-left .image .inner > div:before {width:30px; height:30px;}
.lecture-view-box .view-head .list-left .content {flex:1; min-width:0; display:block; padding:0 0 0 12px;}
.lecture-view-box .view-head .list-left .content time {display:block; text-align:right; display:flex; flex-wrap:wrap; align-items:center;}
.lecture-view-box .view-head .list-left .content time small {font-size:13px; color:#757575; margin:0 8px 0 0;}
.lecture-view-box .view-head .list-left .content time b {display:inline-block; font-size:14px; font-weight:bold; color:#4a4a4a;}
.lecture-view-box .view-head .list-left .content p {margin:4px 0 0; font-size:16px; font-weight:bold; line-height:1.3; color:#1e1e1e; display:-webkit-box; overflow:hidden; text-overflow:ellipsis; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.lecture-view-box .view-head .list-left .state {display:none;}
.lecture-view-box .view-head .list-right {flex:none; width:100%; padding:0; margin:15px 0 0;}
.lecture-view-box .view-head .list-right .info {border-top:1px solid #4a4a4a;}
.lecture-view-box .view-head .list-right .info ul li {padding:8px 0; margin:0; border-bottom:1px solid #d9d9d9;}
.lecture-view-box .view-head .list-right .info ul li b {font-size:13px;}
.lecture-view-box .view-head .list-right .info ul li p {font-size:14px;}
.lecture-view-box .view-head .list-right .info ul li p span {font-size:14px;}
.lecture-view-box .view-head .list-right .button {margin:20px 0 0;}
.lecture-view-box .view-head .list-right .button a {margin:0 10px 0 0; height:40px; font-size:14px;}
.lecture-view-box .view-result {padding:20px 10px;}
.lecture-view-box .view-result ul li strong {font-size:16px;}
.lecture-view-box .view-result ul li strong:before {width:38px; height:38px;}
.lecture-view-box .view-result ul li p {font-size:14px;}
.lecture-view-box .view-total .total-head a {padding:10px;}
.lecture-view-box .view-total .total-head a p {font-size:14px;}
.lecture-view-box .view-total .total-head a p strong {font-size:16px;}
.lecture-view-box .view-total .total-body {border-radius:12px; padding:10px;}
.lecture-view-box .view-total .total-body table thead tr th {height:32px; font-size:14px;}
.lecture-view-box .view-total .total-body table tbody tr > * {padding:14px 10px; font-size:14px;}
.lecture-view-box .view-guide {margin:24px 0 0; padding:12px;}
.lecture-view-box .view-tab {margin:24px 0 0;}
.lecture-view-box .view-tab .tab ul li a {height:40px; font-size:15px;}
}

/* member-box */
.member-box {max-width:420px; margin:0 auto;}
.member-box .member-title {margin:0 0 42px;}
.member-box .member-title h2 {text-align:center; margin:0 0 24px; font-size:26px; font-weight:600;}
.member-box .member-title p {font-size:16px; font-weight:500; line-height:1.4; color:#757575; text-align:center; word-break:keep-all;}
@media (max-width:991px){
.member-box .member-title {margin:0 0 24px;}
.member-box .member-title h2 {margin:0 0 12px; font-size:20px;}
.member-box .member-title p {font-size:15px;}
}

/* write-box */
.write-box ul li {margin:0 0 24px;}
.write-box ul li:last-of-type {margin:0;}
.write-box ul li strong {display:block; margin:0 0 8px; font-size:16px; font-weight:500; line-height:1.3; color:#4a4a4a;}
.write-box ul li strong.req:after {display:inline-block; content:"*"; font-size:16px; font-weight:500; color:#ff0000; margin:0 0 0 3px;}

/* input-box */
.input-box input {display:block; width:100%; height:50px; border:1px solid #d9d9d9; padding:0 24px; font-size:16px; color:#000; border-radius:10px;}
.input-box input::placeholder {color:#9A9EA3;}
.input-box input:read-only {background:#F6F6F6;}
@media (max-width:991px){
.input-box input {padding:0 12px; font-size:14px;}
}

/* button-box */
.button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.button-box .btn {height:50px; border-radius:10px; font-size:14px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex:1; min-width:0;}
.button-box .btn-gray {background:#D9D9D9; color:#4a4a4a;}
.button-box .btn-blue {background:#00529C; color:#ffffff;}

/* message-box */
.message-box {margin:8px 0 0;}
.message-box p {font-size:14px; line-height:1.4;}
.message-box p.error {color:#ff0000;}
@media (max-width:991px){
.message-box p {font-size:13px;}
}

/* check-box */
.check-box {position:relative; overflow:hidden;}
.check-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.check-box label {display:flex; flex-wrap:wrap; align-items:center; font-size:14px; color:#4a4a4a;}
.check-box label:before {display:inline-block; content:""; width:18px; height:18px; margin:0 8px; background:url('../images/icon_check.png') no-repeat center / cover;}
.check-box input:checked ~ label:before {background-image:url('../images/icon_check_on.png');}

/* video-box */
.video-box {display:flex; flex-wrap:wrap; align-items:flex-start; overflow:hidden;}
.video-box .video-left {flex:1; min-width:0; height:100%;}
.video-box .video-left .left-top {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:12px 20px; background:#4A4A4A;}
.video-box .video-left .left-top h2 {flex:1; min-width:0; padding-right:15px; font-size:20px; font-weight:600; line-height:1.3; color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.video-box .video-left .left-top a {border-radius:10px; background:#2e2e2e; color:#fff; padding:10.5px 12px; font-size:14px; color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.video-box .video-left .left-top a:before {display:block; content:""; width:16px; height:16px; background:url('../images/icon_logout.png') no-repeat center / cover;}
.video-box .video-left .left-bottom {background:#fff; border-top:1px solid #d9d9d9; box-shadow:0 -4px 4px rgba(0,0,0,0.1); padding:20px; display:flex; flex-wrap:wrap; align-items:center;}
.video-box .video-left .left-bottom:after {display:block; content:""; flex:1; min-width:0;}
.video-box .video-left .left-bottom .cate {flex:1; min-width:0;}
.video-box .video-left .left-bottom .cate .toggle {display:none;}
.video-box .video-left .left-bottom .cate ul {display:flex; flex-wrap:wrap; align-items:center;}
.video-box .video-left .left-bottom .cate ul li {display:flex; flex-wrap:wrap; align-items:center;}
.video-box .video-left .left-bottom .cate ul li:after {display:inline-block; content:""; width:1px; height:10px; background:rgba(74, 74, 74, 0.5); margin:0 10px;}
.video-box .video-left .left-bottom .cate ul li:nth-of-type(3):after {display:none;}
.video-box .video-left .left-bottom .cate ul li a {display:flex; flex-wrap:wrap; align-items:center; height:37px; font-size:14px; font-weight:500; color:#4a4a4a; opacity:0.5;}
.video-box .video-left .left-bottom .cate ul li a:before {display:inline-block; content:""; width:16px; height:16px; margin:0 8px 0 0; background-size:cover; background-position:center;}
.video-box .video-left .left-bottom .cate ul li.data a:before {background-image:url('../images/icon_lecture_01.png');}
.video-box .video-left .left-bottom .cate ul li.profile a:before {background-image:url('../images/icon_lecture_02.png');}
.video-box .video-left .left-bottom .cate ul li.qa a:before {background-image:url('../images/icon_lecture_03.png');}
.video-box .video-left .left-bottom .cate ul li.logout a:before {background-image:url('../images/icon_lecture_04.png');}
.video-box .video-left .left-bottom .cate ul li.chatbot a:before {background-image:url('../images/icon_lecture_robot.svg');}
.video-box .video-left .left-bottom .cate ul li.logout {display:none;}
.video-box .video-left .left-bottom .cate ul li a:hover {opacity:1;}
.video-box .video-left .left-bottom .cate ul li.active a {opacity:1;}
.video-box .video-left .left-bottom .button {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.video-box .video-left .left-bottom .button a {padding:10.5px 12px; font-size:14px; font-weight:500; color:#2e2e2e; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0 24px 0 0;}
.video-box .video-left .left-bottom .button a:last-of-type {margin:0;}
.video-box .video-left .left-bottom .button a.prev:before {display:inline-block; content:""; width:16px; height:16px; background:url('../images/icon_lecture_prev.png') no-repeat center / cover;}
.video-box .video-left .left-bottom .button a.next:after {display:inline-block; content:""; width:16px; height:16px; background:url('../images/icon_lecture_next.png') no-repeat center / cover;}
/*.video-box .video-left .left-video {overflow:hidden; padding:56px 18px;}*/
.video-box .video-left .left-video .video {height:100%; position:relative; overflow:hidden;}
.video-box .video-left .left-video .video .div-empty-img,
.video-box .video-left .left-video .video video {position:absolute; left:0; top:0; width:100%; height:100%;}
.video-box .video-right {width:420px; background:#F6F6F6; padding:24px; height:100%;}
.video-box .video-right .right-step {background:#fff; border-radius:12px; padding:12px;}
.video-box .video-right .right-step .title {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0 0 4px;}
.video-box .video-right .right-step .title strong {font-size:20px; font-weight:600; color:#757575;}
.video-box .video-right .right-step .title p {font-size:16px; color:#757575;}
.video-box .video-right .right-step .title p b {font-size:16px; color:#757575; font-weight:600;}
.video-box .video-right .right-step .bar {position:relative; height:18px; border-radius:50px; overflow:hidden; background:#E9ECEF;}
.video-box .video-right .right-step .bar > div {position:absolute; left:0; top:0; height:100%; border-radius:50px; background:#FAA61A;}
.video-box .video-right .right-step .text {margin:12px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.video-box .video-right .right-step .text p {font-size:16px; color:#757575;}
.video-box .video-right .right-step .text time {font-size:16px; font-weight:500; color:#757575;}
.video-box .video-right .right-list {height:calc(100% - 119px); overflow:hidden; margin:25px 0 0; background:#fff; padding:24px 12px; border-radius:12px;}
.video-box .video-right .right-list h2 {padding:0 0 12px; font-size:20px; font-weight:600; color:#757575;}
.video-box .video-right .right-list ul {height:calc(100% - 32px); overflow-y:auto;}
.video-box .video-right .right-list ul::-webkit-scrollbar {width:8px; background:#d9d9d9; border-radius:50px;}
.video-box .video-right .right-list ul::-webkit-scrollbar-thumb {background:#A2A2A2; border-radius:50px;}
.video-box .video-right .right-list ul li .inner {display:block; padding:12px;}
.video-box .video-right .right-list ul li .inner b {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; color:#757575;}
.video-box .video-right .right-list ul li .inner b:before {display:inline-block; content:""; width:18px; height:18px; margin:0 4px 0 0; background:url('../images/icon_lecture_check.png') no-repeat center / cover;}
.video-box .video-right .right-list ul li .inner p {margin:4px 0 0; padding:0 0 0 22px; font-size:16px; font-weight:600; color:#757575; line-height:1.3;}
.video-box .video-right .right-list ul li.active .inner b:before {background-image:url('../images/icon_lecture_check_on.png');}
.video-box .video-right .right-list ul li .page-list {
    border-top: 1px solid #efefef;
    max-height: 0;
    overflow: hidden;
    visibility: hidden; /* 숨겨진 상태에서 공간을 차지하지 않도록 */
    opacity: 0;
    transition: all 1s ease; /* 모든 속성에 트랜지션 적용 */
}

/* 활성화된 차시는 페이지 목록 표시 */
.video-box .video-right .right-list ul li.active-pages .page-list {
    max-height: none; /* 자동 높이 적용 */
    height: auto; /* 내용물에 맞춰 자동 조정 */
    visibility: visible;
    opacity: 1;
}

/* 페이지 항목 스타일 */
.video-box .video-right .right-list ul li .page-list li {
    border-bottom: 1px solid #efefef;
    margin-bottom: 0;
}

/* 페이지 링크 스타일 */
.video-box .video-right .right-list ul li .page-list li .page-link {
    display: flex;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: #757575;
    text-decoration: none;
}

/* 페이지 번호 스타일 */
.video-box .video-right .right-list ul li .page-list li .page-number {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    background: #efefef;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* 페이지 제목 스타일 */
.video-box .video-right .right-list ul li .page-list li .page-title {
    flex-grow: 1;
    line-height: 1.3;
    font-weight: 500;
}

/* 페이지 완료 상태 아이콘 */
.video-box .video-right .right-list ul li .page-list li .page-status {
    width: 18px;
    height: 18px;
    background: url('../images/icon_lecture_check.png') no-repeat center / cover;
}

/* 완료된 페이지 스타일 */
.video-box .video-right .right-list ul li .page-list li.complete .page-link {
    color: #333;
}

/* 완료된 페이지 상태 아이콘 */
.video-box .video-right .right-list ul li .page-list li.complete .page-status {
    background-image: url('../images/icon_lecture_check_on.png');
}

/* 현재 보고 있는 페이지 스타일 */
.video-box .video-right .right-list ul li .page-list li.current {
    background-color: #f5f5f5;
}

/* 현재 보고 있는 페이지의 페이지 번호 스타일 */
.video-box .video-right .right-list ul li .page-list li.current .page-number {
    background-color: #2196F3;
    color: white;
}

@media (max-width:1500px){
.video-box .video-left .left-bottom:after {display:none;}
.video-box .video-right {width:320px; padding:24px 15px;}
}
@media (max-width:991px){
.video-box .video-left {flex:none; width:100%; height:auto !important;}
.video-box .video-left .left-top {padding:10px 15px;}
.video-box .video-left .left-top h2 {font-size:15px;}
.video-box .video-left .left-top a {font-size:13px; display:none;}
.video-box .video-left .left-bottom {padding:0 15px;}
.video-box .video-left .left-bottom .cate {width:100%; flex:none; position:fixed; left:0; bottom:0; width:100%; z-index:1000; transition:all ease 0.5s; background:#fff; border-radius:12px 12px 0 0; box-shadow:0 -2px 4px rgba(0,0,0,0.25);}
.video-box .video-left .left-bottom .cate .toggle {display:block; position:absolute; left:50%; transform:translateX(-50%); top:-36px; font-size:0; width:92px; height:28px; border-radius:50px; background:#FAA61A url('../images/icon_lecture_toggle.png') no-repeat center / 24px;}
.video-box .video-left .left-bottom .cate ul {justify-content:center; padding:0 12px;}
.video-box .video-left .left-bottom .cate ul li {flex:1; min-width:0; justify-content:center;}
.video-box .video-left .left-bottom .cate ul li:after {display:none;}
.video-box .video-left .left-bottom .cate ul li.logout {display:block;}
.video-box .video-left .left-bottom .cate ul li a {width:100%; height:65px; text-align:center; align-content:center; justify-content:center; opacity:1;}
.video-box .video-left .left-bottom .cate ul li a:before {width:100%; height:24px; margin:0 0 4px; background-size:24px; background-repeat:no-repeat;}
.video-box .video-left .left-bottom .cate.active {bottom:-55px;}
.video-box .video-left .left-bottom .cate.active .toggle {transform:translateX(-50%) rotate(180deg);}
.video-box .video-left .left-bottom .button {width:100%; justify-content:center;}
.video-box .video-left .left-video {padding:0; height:auto !important;}
.video-box .video-left .left-video .video {height:auto;}
.video-box .video-left .left-video .video:after {display:block; content:""; padding-bottom:56.5%;}
.video-box .video-right {width:100%; padding:10px 15px 0;}
.video-box .video-right .right-step {border-radius:8px;}
.video-box .video-right .right-step .title strong {font-size:16px;}
.video-box .video-right .right-step .title p {font-size:14px;}
.video-box .video-right .right-step .title p b {font-size:14px;}
.video-box .video-right .right-step .bar {height:10px; margin:10px 0 0;}
.video-box .video-right .right-step .text p {font-size:14px;}
.video-box .video-right .right-step .text time {font-size:14px;}
.video-box .video-right .right-list {border-radius:8px; padding:12px; margin:10px 0 0; height:calc(100% - 96px);}
.video-box .video-right .right-list h2 {font-size:16px; display:none;}
.video-box .video-right .right-list ul {height:100%;}
.video-box .video-right .right-list ul li .inner {padding:12px 0;}
}

/* 드롭다운 메뉴 기본 스타일 */
.dropdown-btn {
    padding: 10px 15px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 135px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dropdown-btn:hover {
    background: #f8f9fa;
}

/* 드롭다운 리스트 스타일 */
.certificate-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 135px;
    max-height: 300px;
    overflow-y: auto;
}

.certificate-list li {
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.certificate-list li:last-child {
    border-bottom: none;
}

.certificate-list li:hover {
    background-color: #f0f7ff;
    color: #2563eb;
}

/* 스크롤바 스타일링 */
.certificate-list::-webkit-scrollbar {
    width: 6px;
}

.certificate-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.certificate-list::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}

/* 드롭다운 메뉴 기본 스타일 */
.dropdown-btn {
    padding: 10px 15px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 135px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dropdown-btn:hover {
    background: #f8f9fa;
}

/* 드롭다운 리스트 스타일 */
.certificate-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 135px;
    max-height: 300px;
    overflow-y: auto;
}

.certificate-list li {
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.certificate-list li:last-child {
    border-bottom: none;
}

.certificate-list li:hover {
    background-color: #f0f7ff;
    color: #2563eb;
}

/* 스크롤바 스타일링 */
.certificate-list::-webkit-scrollbar {
    width: 6px;
}

.certificate-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.certificate-list::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}

/* 드롭다운 메뉴 기본 스타일 */
.dropdown-btn {
    padding: 10px 15px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 135px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dropdown-btn:hover {
    background: #f8f9fa;
}

/* 드롭다운 리스트 스타일 */
.certificate-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 135px;
    max-height: 300px;
    overflow-y: auto;
}

.certificate-list li {
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.certificate-list li:last-child {
    border-bottom: none;
}

.certificate-list li:hover {
    background-color: #f0f7ff;
    color: #2563eb;
}

/* 스크롤바 스타일링 */
.certificate-list::-webkit-scrollbar {
    width: 6px;
}

.certificate-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.certificate-list::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}

/* 드롭다운 메뉴 기본 스타일 */
.dropdown-btn {
    padding: 10px 15px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 135px;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.dropdown-btn:hover {
    background: #f8f9fa;
}

/* 드롭다운 리스트 스타일 */
.certificate-list {
    list-style: none;
    padding: 0;
    margin: 4px 0 0 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    width: 135px;
    max-height: 300px;
    overflow-y: auto;
}

.certificate-list li {
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.certificate-list li:last-child {
    border-bottom: none;
}

.certificate-list li:hover {
    background-color: #f0f7ff;
    color: #2563eb;
}

/* 스크롤바 스타일링 */
.certificate-list::-webkit-scrollbar {
    width: 6px;
}

.certificate-list::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.certificate-list::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}

.video-box .video-right .right-list ul li.exam-item {
    padding: 10px 0;
}

.video-box .video-right .right-list ul li .exam-btn {
    width: 100%;
    padding: 15px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
}

.video-box .video-right .right-list ul li .exam-btn:hover {
    background-color: #e9ecef;
}

.video-box .video-right .right-list ul li.current .inner {
    background-color: #e2e8f0;
}

.video-box .video-right .right-list ul li:not(.current):hover .inner {
    background-color: #e2e8f0; /* 베이지 색상 */
    transition: background-color 0.2s ease; /* 부드러운 변화 효과 */
}

/* 평가 버튼은 다른 hover 효과 유지 */
.video-box .video-right .right-list ul li.exam-item:hover .exam-btn {
    background-color: #e9ecef;
}

/* 기본 플레이어 영역 */
.player-area {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 10;
}

/* 공통 스타일 */
.rowflex {
    display: flex;
}

/* PC 버전 */
@media screen and (min-width: 769px) {
    .player-area {
        bottom: 0;
    }

    .player-center {
        width: 1366px;
        margin: 0 auto;
    }

    /* 프로그레스바 */
    .progress-area {
        position: relative;
        height: 9px;
    }

    .progress-area .progress-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 3px;
        background-color: rgba(225, 225, 225, 0.8);
        cursor: pointer;
    }

    .progress-area progress {
        position: absolute;
        left: 0;
        top: 0;
        height: 3px;
        cursor: pointer;
        -webkit-appearance: none;
    }

    .progress-area progress.progress::after {
        content: "";
        display: block;
        position: absolute;
        right: -3px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 50%;
        cursor: pointer;
    }

    .progress-area ::-webkit-progress-bar {
        background-color: #fff;
    }

    /* 컨트롤 영역 */
    .controll-area {
        height: 60px;
        font-size: 20px;
        color: #fff;
        justify-content: space-between;
        align-items: center;
    }

    /* 재생 버튼 */
    .play-box .play-btn {
        width: 25px;
        margin-right: 25px;
        cursor: pointer;
    }

    .play-box .time-box > span {
        font-weight: 700;
    }

    /* 페이지 네비게이션 */
    .page-box .left-page {
        margin-right: 30px;
        cursor: pointer;
        transition: all 0.5s;
    }

    .page-box .left-page:hover {
        transform: scale(1.3);
    }

    .page-box .page-txt-viwe-box {
        position: relative;
        cursor: pointer;
    }

    .page-txt-viwe-box span {
        display: inline-block;
        font-weight: 700;
    }

    .page-txt-viwe-box .view-txt-box {
        width: 130px;
    }

    .page-txt-viwe-box .down-page5-btn {
        width: 20px;
    }

    .page-txt-viwe-box .down-page5-btn img {
        vertical-align: middle;
    }

    .page-txt-viwe-box .page-txt-list {
        display: none;
        position: absolute;
        bottom: 35px;
        left: 50%;
        width: 180px;
        background-color: rgba(0, 0, 0, 0.7);
        transform: translateX(-50%);
        text-align: center;
    }

    .page-txt-list li {
        padding: 10px 0;
    }

    .page-txt-list li:hover {
        color: #890000;
    }

    .page-box .page-number-box {
        margin-left: 50px;
    }

    .page-box .right-page {
        margin-left: 30px;
        cursor: pointer;
        transition: all 0.5s;
    }

    .page-box .right-page:hover {
        transform: scale(1.3);
    }

    /* 볼륨 컨트롤 */
    .volume-full-box {
        height: 100%;
        align-items: center;
    }

    .volume-box {
        padding-left: 30px;
        height: 100%;
        position: relative;
        align-items: center;
        cursor: pointer;
    }

    .volume-box .vol-bar {
        position: absolute;
        right: 60px;
        width: 0;
        display: flex;
        align-items: center;
        height: 100%;
        overflow: hidden;
    }

    .vol-bar input[type=range] {
        width: 100%;
    }

    .vol-bar input[type=range]:focus {
        outline: none;
    }

    .vol-bar input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 5px;
        cursor: pointer;
        background: #fff;
    }

    .vol-bar input[type=range]::-webkit-slider-thumb {
        height: 15px;
        width: 15px;
        border-radius: 50%;
        background-color: #fff;
        -webkit-appearance: none;
        margin-top: -5px;
    }

    .volume-box .volume-btn {
        position: relative;
        width: 35px;
    }

    .volume-btn .vol-none {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 0;
        background-color: #fff;
        transform: translate(-50%, -50%) rotate(45deg);
        border-radius: 45px;
    }

    .volume-full-box .full-btn {
        width: 28px;
        margin-left: 35px;
        transition: all 0.5s;
        cursor: pointer;
    }

    .full-btn:hover {
        transform: scale(1.2);
    }

    /* 블러 효과 */
    .blur-box {
        position: absolute;
        left: 0;
        bottom: -20px;
        height: 100px;
        width: 200%;
        background-color: rgba(0, 0, 0, 0.8);
        filter: blur(25px);
        z-index: -1;
    }
}