@charset "utf-8";

.policyWrap {position:relative; padding:8rem 0;}
.policyWrap h2 {font-size:3.4rem; color:var(--color-gray-800); font-weight:700; letter-spacing:-0.05em; line-height:4.4rem; text-align: center;}

.policyWrap .policyTabList {width:100%; margin-top:4rem;}
.policyWrap .policyTabList .list {width:100%; display:flex; justify-content: center;}
.policyWrap .policyTabList .list ul {display:flex; gap:1.6rem;}
.policyWrap .policyTabList .list ul li a {display: block; font-size:1.8rem; color:var(--color-gray-500); font-weight:500; letter-spacing:-0.02em; line-height:2.8rem; background-color:var(--color-gray-100); padding:1rem 2.4rem; border-radius:0.8rem;}
.policyWrap .policyTabList .list ul li.hit a {background-color:var(--color-action); color:var(--color-white);}

.policyWrap .policyContent {width:100%; margin-top:6rem;}
.policyWrap .policyContent .p_editor_box {width:100%; font-size:1.3rem; color:var(--color-gray-700); font-weight:600; letter-spacing:-0.02em; border:1px solid var(--color-gray-200); padding:4rem; border-radius:1.6rem;}
.policyWrap .policyContent .p_editor_box * {word-break: keep-all;}

@media (hover: hover) {
    .policyWrap .policyTabList .list ul li a {transition:all 0.2s;}
    .policyWrap .policyTabList .list ul li:not(.hit) a:hover {background-color:var(--color-gray-200);}
}
@media (max-width: 1300px) {
    .policyWrap h2 {font-size:3.2rem; line-height:4.2rem;}
}
@media (max-width: 1200px) {
    .policyWrap {padding:7rem 0;}
    .policyWrap h2 {font-size:3rem; line-height:4rem;}
    .policyWrap .policyTabList {margin-top:3.6rem;}
    .policyWrap .policyTabList .list ul li a {font-size:1.7rem; line-height:2.7rem; padding:0.8rem 2.4rem;}
    .policyWrap .policyContent {margin-top:5.6rem;}
    .policyWrap .policyContent .p_editor_box {padding:3rem;}
}
@media (max-width: 1023px) {
    .policyWrap {padding:2.4rem 0; padding-bottom:6rem;}
    .policyWrap h2 {font-size:2.8rem; line-height:3.8rem;}
    .policyWrap .policyTabList {margin-top:3.2rem;}
    .policyWrap .policyTabList .list ul li a {font-size:1.6rem; line-height:2.4rem; padding:0.8rem 2rem;}
    .policyWrap .policyContent {margin-top:4.6rem;}
    .policyWrap .policyContent .p_editor_box {padding:2.4rem; border-radius:1.2rem;}
}
@media (max-width: 900px) {
    #content .sInner {width:100%;}

    .policyWrap {padding:0; padding-bottom:6rem;}
    .policyWrap h2 {display:none;}
    .policyWrap .policyTabList {margin:0; border-bottom:1px solid var(--color-gray-200);}
    .policyWrap .policyTabList .list ul {width:100%; padding:0 3rem;}
    .policyWrap .policyTabList .list ul li {flex-grow: 1; display:flex; justify-content: center;}
    .policyWrap .policyTabList .list ul li a {padding:0 0.4rem; padding-bottom:1.6rem; border-radius:0; background-color:transparent; position: relative;}
    .policyWrap .policyTabList .list ul li.hit a {background-color:transparent; color:var(--color-gray-800); font-weight:700;}
    .policyWrap .policyTabList .list ul li.hit a::before {content:""; width:100%; height:2px; background-color:var(--color-gray-800); position: absolute; bottom:0; left:0;}

    .policyWrap .policyContent {margin:0; padding:0 3rem; padding-top:4rem;}
    .policyWrap .policyContent .p_editor_box {padding:0; border-radius:0; border:0;}

    @media (hover: hover) {
        .policyWrap .policyTabList .list ul li:not(.hit) a:hover {background-color:transparent;}
    }
}
@media (max-width: 767px) {
    .policyWrap {padding-bottom:5rem;}
    .policyWrap .policyTabList .list ul li a {font-size:1.5rem; line-height:2.5rem; padding-bottom:1.4rem;}
    .policyWrap .policyContent {padding-top:3.6rem;}
}
@media (max-width: 600px) {
    .policyWrap {padding-bottom:4.2rem;}
}
@media (max-width: 479px) {
    .policyWrap {padding-bottom:3.6rem;}
    .policyWrap .policyTabList {margin:0; border-bottom:1px solid var(--color-gray-200);}
    .policyWrap .policyTabList .list {display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
    .policyWrap .policyTabList .list::-webkit-scrollbar {display: none;}
    .policyWrap .policyTabList .list ul {width: max-content; flex-wrap:nowrap; gap:1.6rem; padding:0 2.2rem;}
    .policyWrap .policyTabList .list ul li {flex-grow:initial; display:flex; justify-content: center;}
    .policyWrap .policyTabList .list ul li a {padding:0 0.2rem; padding-bottom:1.4rem;}
    .policyWrap .policyContent {margin:0; padding:0 2.2rem; padding-top:3rem;}

}
@media (max-width: 420px) {
    .policyWrap {padding-bottom:3.2rem;}
    .policyWrap .policyTabList .list ul {padding:0 2rem;}
    .policyWrap .policyContent {padding:0 2rem; padding-top:2.4rem;}

}