#wrap > .container {width: 100% !important;padding: 0 0 !important;}

.case__list {}
.xans-product-menupackage + .xans-product-normalpackage.case__list { margin-top: 0; }
.case__list-head {display: grid; grid-template-columns: 20% 25% 20% 20% 15%; padding: 20rem 0;border-bottom: 1rem solid var(--color-neutral-9);}
.case__list-head > div {font-size: 18rem;text-align: center;}

.case__list-cont {}

.case-item {display: grid;grid-template-columns: 20% 25% 20% 20% 15%; align-items: center; padding: 20rem 0; border-bottom: 1rem solid var(--color-neutral-3);font-size: 16rem; line-height: 1.4;color: var(--color-neutral-7);}
.case-item .tit {display: none;}
.case-item span {font-size: inherit !important;}
.case-item .number {text-align: center;}
.case-item .thumb {position: relative;font-size: 0;}
.case-item .thumb > figure {width: 100rem;margin: 0 auto;padding: 5rem;border: 1rem solid #ddd;}
.case-item .thumb > figure > img {width: 100%;}
.case-item .thumb .show {display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30rem;line-height: 35rem; border-radius: 3rem;background: rgba(0,0,0,.7);text-align: center;color: #fff;cursor: pointer;}
.case-item .thumb .show > svg {width: 20rem;vertical-align: middle;}
.case-item .name {}
.case-item .penalty {text-align: center;}
.case-item .penalty > div {display: inline-block;padding: 0 10rem; line-height: 38rem;border: 2rem solid #FF6737;border-radius: 3rem;color: #FF6737;font-weight: 600;}
.case-item .penalty-date {text-align: center;}
.case-item .step {text-align: center;}

.case-item .argument > div {display: flex;}
/*
.case-item .argument {padding-left: 30rem;}
.case-item .argument-desc {width: calc(100% - 140rem);}
*/
.case-item .argument-btn {width: 140rem;padding: 0 30rem;}
.case-item .argument-btn > a {display: block;width: 100%;line-height: 38rem; background-color: #231F20; font-weight: 600; color: var(--color-primary); text-align: center ;border-radius: 3rem;}
.case-item .argument-btn > a:nth-child(1) { color: #fff;margin-bottom: 5rem;}


.case__popup {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%); width: 100%;max-width: 500rem; padding: 0 10rem;opacity: 0;visibility: hidden;transition: .5s;z-index: 301;}
.case__popup.on {opacity: 1;visibility: visible;}
.case__popup .close {width: 30rem;margin-left: auto;margin-bottom: 15rem;cursor: pointer;color: #fff;}
.case__popup .close > svg {width: 30rem;}
.case__popup-view {font-size: 0;max-height: 80vh; border-radius: 10rem;overflow-y: scroll;}
.case__popup-view::-webkit-scrollbar {display: none;}
.case__popup-view > img {width: 100%;}

.case-item .item-flex .con { justify-content: center; text-align: center; }
.case-item .item-flex .disposition-desc { display: inline-flex; padding: 5px 9px; border-radius: 4px; background-color: #F7E6E6; color: #CA6464; }
.ms-case-list .titleArea { padding-top: 136px; }
.ms-case-list .titleArea::after { display: none; }
.ms-case-list .titleArea h2 { font-weight: bold; font-size: 48px; color: #111; letter-spacing: -0.016em;  }

.ms-case-list .case__list-head { border-bottom: none; border-radius: 8px; background-color: #F8F9FA; }
.ms-case-list .case__list-head > div { font-weight: 600; font-size: 16px; color: #666; line-height: 1.2em; letter-spacing: -0.01em; }
.ms-case-list .case__list-cont { display: flex; margin-top: 12px; flex-direction: column; gap: 12px; }
.ms-case-list .case-item { border-bottom: none; border-radius: 8px; background-color: #F8F9FA; padding: 18px 0; }

.ms-case-list .ms-paginate > ol > li a,
.ms-case-list .ms-paginate > ul > li a { border-radius: 50%; background-color: transparent; font-size: 16px; color: rgba(17, 17, 17, 0.8); }
.ms-case-list .ms-paginate > ol > li a.this,
.ms-case-list .ms-paginate > ul > li span.current { font-weight: 700; color: #111; } 
.ms-case-list .ms-paginate > a { margin: 0 6px; }
.ms-case-list .ms-paginate > a svg { height: 22px; stroke: #6D747B; opacity: 1; }

@media all and (max-width:1023px) {
    .case__list-head {display: none;}
    .case-item {display: flex;flex-direction: column;align-items: flex-start;position: relative;padding-left: 120rem;font-size: 14rem;}
    .case-item .item-flex {display: flex;}
    .case-item .item-flex .tit {display: block;width: 100rem;}
    /*.case-item .item-flex .con {width: calc(100% - 100rem);}*/
    .case-item .thumb {position: absolute;top: 20rem;left: 0;width: 100rem;}
    .case-item .thumb > figure {margin-bottom: 10rem;width: 100%;}
    .case-item .thumb .show {position: static;transform: translate(0,0);width: 100%;line-height: 30rem;}
    .case-item .thumb .show > svg {width: 15rem;}
    .case-item > div {text-align: left !important;}
    .case-item > div:not(.thumb) {padding: 10rem 8px 10rem 0; border-bottom: 1rem solid #ddd;width: 100%;}
    .case-item .penalty {order: -1;}
    .case-item .penalty > div {line-height: 27rem;}
    .case-item .argument {}
    .case-item .argument .con {display: block;}
    .case-item .argument-desc {width: 100%; }
    .case-item .argument-btn {display: flex; gap: 10rem;width: 100%;padding: 0 0;}
    .case-item .argument-btn > a {width: 50%;max-width: 200rem; margin-bottom: 0 !important;line-height: 27rem;}
    
    
    .ms-case-list .titleArea { padding-top: 90px; }
    .ms-case-list .titleArea h2 { font-size: 40px; }
    
    .ms-case-list .case__list-head { }
    .ms-case-list .case__list-head > div {  font-size: 14px; }
    .ms-case-list .case__list-cont { margin-top: 10px; gap: 10px; }
    .ms-case-list .case-item { }
}


@media all and (max-width:660px) {
    .case-item {font-size: 13rem;}
    .case-item .item-flex {flex-direction: column;}
    .case-item .item-flex .tit {display: block;width: 100%;margin-bottom: 5rem;}
    .case-item .item-flex .con {width: 100%; text-align: left; }
    .case-item .thumb {}
    .case-item .thumb .show {line-height: 28rem;}
    .case-item .thumb .show > svg {width: 13rem;}
    .case-item > div.penalty {padding-top: 0;;border-bottom: 0;}
    .case-item .penalty > div {line-height: 24rem;}
    .case-item .argument-desc {}
    .case-item .argument-btn {gap: 5rem;}
    .case-item .argument-btn > a {line-height: 24rem;}
    
    .ms-case-list .titleArea { padding-top: 60px; }
    .ms-case-list .titleArea h2 { font-size: 32px; }
    
    .ms-case-list .case__list-head > div {  font-size: 13px; }
    .ms-case-list .case__list-cont { margin-top: 8px; gap: 8px; }
    
    .ms-case-list .ms-paginate > ol > li a { font-size: 14px; }
    .ms-case-list .ms-paginate > a { margin: 0 4px; }
    .ms-case-list .ms-paginate > a svg { height: 18px; }
}





/* detail */
.case-detail {padding-top: 100rem !important;}
.case-detail__head {position: relative;margin-bottom: 30rem;border-bottom: 1rem solid var(--color-neutral-8);padding-bottom: 30rem;padding-right: 100rem;}
.case-detail__head-title {font-size: 28rem;font-weight: 500;line-height: 1.4;}
.case-detail__head-date {position: absolute;top: 10rem;right: 0;font-size: 16rem;color: #ddd;}
.case-detail__content {max-width: 800rem;margin: 0 auto;}
.case-detail__content-img {max-width: 700rem; margin:0 auto 80rem;}
.case-detail__content-desc {font-size: 18rem;line-height: 1.615;}
.case-detail__control {border-top: 1rem solid var(--color-neutral-8);padding-top: 15rem;margin: 100rem 0 0 !important;}
.case-detail__control > ul {display: flex;justify-content: space-between;border: 0 !important;}
.case-detail__control > ul > li {border: 0 !important;padding: 0 0 !important;}
.case-detail__control > ul > li > a {display: flex; align-items: center;gap: 15rem;width: max-content;}
.case-detail__control > ul > li > a > span {display: block;width: 35rem;line-height: 35rem;background: #f0f0f0;text-align: center;}
.case-detail__control > ul > li > a > span > svg {width: 20rem;vertical-align: middle;}

@media all and (max-width:1023px) {
    .case-detail__head-title {font-size: 23rem;}
}

@media all and (max-width:660px) {
    .case-detail {padding-top: 40rem !important;}
    .case-detail__head {padding: 0 0 15rem;}
    .case-detail__head-date {display: block;position: static; margin-bottom: 10rem; font-size: 13rem;}
    .case-detail__head-title {font-size: 16rem;}
    .case-detail__content-img {margin-bottom: 50rem;}
    .case-detail__content-desc {font-size: 14rem;}
    .case-detail__control > ul > li > a {gap: 10rem;}
    .case-detail__control > ul > li > a > span {width: 30rem;line-height: 30rem;}
    .case-detail__control > ul > li > a > span > svg {font-size: 14rem;}
}