/* to embed a font : https://fonts.google.com/ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');


/* document --------------------------- */
*, *::after, *::before {
    box-sizing: border-box;
}

body, html {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    /* web font + system font */
    font-family: 'Roboto', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* font-size: 80%; */
    font-size: 62.5%;
    font-weight: 400;
    letter-spacing: -.02rem;
    background-color: var(--white01);
    color: var(--black);
    /* smoothing font */
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* typography --------------------------- */
h1, h2, h3, h4, h5, h6 {
    clear: both;
    margin: 0;
    padding: 0;
}

b, strong {
    /* add the correct font weight in Chrome, Edge, and Safari */
    font-weight: 700;
}


/* list style --------------------------- */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}


/* embedded content --------------------------- */
img {
    /* remove the border on images inside links in IE 10 */
    border-style: none;
}


/* form --------------------------- */
button, input, textarea, select, option {
    /* web font + system font */
    font-family: 'Roboto', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    /* Remove the inheritance of text transform in Edge, Firefox and IE. */
    text-transform: none;
    background-color: transparent;
    /* Show the overflow in Edge and IE. */
    overflow: visible;
    cursor: pointer;
    -webkit-tap-highlight-color:transparent;
}

button:disabled, input:disabled {
    cursor: not-allowed;
}

button, [type='button'], [type='reset'], [type='submit'] {
    /* correct the inability to style clickable types in iOS and Safari */
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
}

[type='checkbox'], [type='radio'] {
    /* remove the padding in IE 10 */
    padding: 0;
}

textarea {
    width: 100%;
    /* remove the default vertical scrollbar in IE 10+ */
    overflow: auto;
    resize: none;
}


/* link --------------------------- */
a {
    color: var(--black);
    text-decoration: none;
    /* remove the gray background on active links in IE 10 */
    background-color: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color:transparent;
}

a:visited, a:hover, a:focus, a:active {
    color: var(--black);
    outline: 0;
    text-decoration: none;
}

:focus {
    outline: none;
}


/* misc --------------------------- */
[hidden] {
    /* add the correct display in IE 10 */
    display: none;
}

/* clearfix --------------------------- */
.clearfix {/*  IE 6,7 */ zoom: 1;}
.clearfix::before,
.clearfix::after {content: ''; display: table;}
.clearfix::after {clear: both;}

/* root --------------------------- */
:root {
    /* sac */
    --sac-red: #FF535E;
    --sac-blue: #1372D0;
    --sac-green: #17C9A9; /* emerald-green */
    --sac-violet: #5A1DA8;
    --sac-brown: #6C3518; /* dark-brown */
    --sac-gold: #93804E;
    --sac-gray: #B3B3A6; /* warm-gray */
    --sac-silver: #909093;
    --sac-new-blue: #1D91A5;
    /* membership */
    --mem-corp: #000;
    --mem-gold: #D29E35;
    --mem-blue: #163C98;
    --mem-green: #3A8645;
    --mem-basic: #FA4A55;
    --mem-sac: #17C9A9;
    --mem-nobel: #84754E;
    /* black, gray */
    --white01: #fff;
    --white02: #fff;
    --black: #1A1A1A;
    --gray01: #888A8D;
    --gray02: #B8BBC0;
    --gray03: #E8E8E8;
    --gray04: #F6F6F6;
    --opa-light-white: rgba(255,255,255,.1);
    --opa-bold-white: rgba(255,255,255,.8);
    --opa-white: rgba(255,255,255,.6);
    --opa-black: rgba(0,0,0,.6);
    --opa-bold-black: rgba(0,0,0,.8);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* sac */
        --sac-blue: #2C81D4;
        --sac-violet: #7C47C0;
        --sac-brown: #8B5437;
        /* membership */
        --mem-blue: #315ABD;
        /* black, gray */
        --white01: #1A1A1A;
        --white02: #1F1F1F;
        --black: #fff;
        --gray01: #888A8D;
        --gray02: #5A5B5E;
        --gray03: #3B3C40;
        --gray04: #2A2B2E;
        /* --opa-light-white: rgba(255,255,255,.1);
        --opa-bold-white: rgba(255,255,255,.8);
        --opa-white: rgba(255,255,255,.6);
        --opa-black: rgba(0,0,0,.6);
        --opa-bold-black: rgba(0,0,0,.8); */
    }
}

/* align */
.position-center {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.position-center-top {position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.position-center-left {position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%);}

ul.flex {display: flex; align-items: center; grid-gap: .8rem 1.6rem;}

/* text overflow */
.ellipsis {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} /* 한 줄 말줄임, width 지정 필요 */
.ellipsis.double {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /* 두 줄 말줄임 */

/* font style */
.semi-bold {font-weight: 500!important;}
.bold {font-weight: 700!important;}

.underline {text-decoration: underline;}

/* font color */
.red {color: var(--sac-red)!important;}
.gold {color: var(--sac-gold)!important;}
.blue {color: var(--sac-blue)!important;}
.green {color: var(--sac-green)!important;}
.mem-gold {color: var(--mem-gold)!important;}
.mem-blue {color: var(--mem-blue)!important;}
.mem-green {color: var(--mem-green)!important;}
.black {color: var(--black)!important;}
.white {color: var(--white01)!important;}
.gray {color: var(--gray01)!important;}

/* scroll */
::-webkit-scrollbar,
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track {opacity: 0; width: 0; height: 0; z-index: 99999;}

.overflow::-webkit-scrollbar {opacity: 1; width: .4rem;}
.overflow::-webkit-scrollbar-track {background-color: transparent;} 
.overflow::-webkit-scrollbar-thumb {background-color: var(--gray03);}

/* input: text password */
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='password'] {width: 100%; height: 4.8rem; line-height: normal; padding: 0 1.2rem; color: var(--black); border: 1px solid var(--gray03); border-radius: .4rem; font-size: 1.4rem; cursor: auto;}
input[type='text']::placeholder,
input[type='password']::placeholder {color: var(--gray02);}
input[type='text'].sm {width: 22rem; height: 3.6rem; font-size: 1.3rem;}
input[type='email'].sm {width: 22rem; height: 3.6rem; font-size: 1.3rem;}

/* input: date */
input[type='date'], input[type='datetime-local'] {width: 100%; height: 4.8rem; padding: 0 1.2rem; border: 1px solid var(--gray03); border-radius: .4rem; font-size: 1.4rem; cursor: pointer;}
input[type='date']::-webkit-calendar-picker-indicator, input[type='datetime-local']::-webkit-calendar-picker-indicator {width: 2rem; height: 2rem; background-image: url(/resource/img/ico/icon-cal-20-6ac47d52caa9f8782f3b4ae9443334d2.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
input[type='date']:valid, input[type='datetime-local']:valid {color: var(--gray02);}

/* input: checkbox */
input[type='checkbox'] {display: none;}
input[type='checkbox'] + label {display: flex; align-items: center; width: fit-content; cursor: pointer;}
input[type='checkbox'] + label::before {content: ''; width: 2rem; height: 2rem; background-image: url(/resource/img/ico/icon-checkbox-46ef571ad46fd73795dc062cfa2232ca.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
input[type='checkbox']:checked + label::before {background-image: url(/resource/img/ico/icon-checkbox-ov-780289ae49bf38ec99cad57d4c4bace3.svg);}
input[type='checkbox'] + label > span {font-size: 1.4rem; padding-left: .8rem; line-height: 1.4; word-break: keep-all;}
input[type='checkbox']:disabled + label {cursor: default;}
input[type='checkbox']:disabled + label > span {color: var(--gray02);}

input[type='checkbox'].circle + label::before {background-image: url(/resource/img/ico/icon-check-won-43ed74037e42d0d077d58069f7906ac4.svg); border-radius: 100%;}
input[type='checkbox'].circle:checked + label::before {background-image: url(/resource/img/ico/icon-check-won-ov-877a88ea2331508d1982d46632c7c54f.svg);}

/* input: radio */
input[type='radio'] {display: none;}
input[type='radio'] + label {display: flex; align-items: center; width: fit-content; cursor: pointer;}
input[type='radio'] + label::before {content: ''; width: 2rem; height: 2rem; border-radius: 100%; background-image: url(/resource/img/ico/icon-radio-43ed74037e42d0d077d58069f7906ac4.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
input[type='radio']:checked + label::before {background-image: url(/resource/img/ico/icon-radio-ov-28f5f7bf320dcf3166d71606d7fdbe22.svg);}
input[type='radio'] + label > span {font-size: 1.4rem; padding-left: .4rem;}

@media (prefers-color-scheme: dark) {
    input[type='checkbox'].circle + label::before,
    input[type='radio'] + label::before,
    input[type='checkbox'] + label::before {filter: invert(.5);}
    input[type='checkbox'].circle:checked + label::before,
    input[type='radio']:checked + label::before,
    input[type='checkbox']:checked + label::before {filter: none;}
}


/* textarea */
textarea {width: 100%; height: 12rem; color: var(--black); padding: 1.2rem; border: 1px solid var(--gray03); border-radius: .4rem; font-size: 1.4rem; line-height: 1.6; cursor: auto;}
textarea::placeholder {color: var(--gray02);}
textarea + ul {position: absolute; bottom: 1.2rem; right: 1.2rem; display: flex; align-items: center; text-align: right; font-size: 1.2rem; color: var(--gray01);}
textarea + ul > li + li::before {content: '/'; padding: 0 .4rem;}

/* select */
select {width: 100%; height: 4.8rem; line-height: 1; padding: 0 4.4rem 0 1.2rem; border: 1px solid var(--gray03); border-radius: .4rem; font-size: 1.4rem; color: var(--black); background-image: url(/resource/img/ico/icon-arrow-down-20-068c54267437b17e0403f7ed33b23087.svg); background-repeat: no-repeat; background-size: 2rem; background-position: right 1.2rem center; cursor: pointer; -webkit-appearance: none; appearance: none;}
select::-ms-expand {display: none;/*for IE10,11*/}

.filter-align {display: flex; align-items: center; justify-content: flex-end; margin-bottom: 2rem;}
.filter-align select {width: fit-content; height: fit-content; padding: 0 1.4rem 0 0; border: 0; font-size: 1.3rem; font-weight: 500; background-image: url(/resource/img/ico/icon-arrow-down-12-bl-7b00808b9af7b76b8fd73e7b64c81ccf.svg); background-size: 1.2rem; background-position: right center;}
.filter-align span {display: flex; align-items: center; font-size: 1.3rem; font-weight: 500;}
.filter-align span > i {margin-left: .4rem;}

@media (prefers-color-scheme: dark) {
    .filter-align select {background-image: url(/resource/img/ico/icon-arrow-down-12-wh-7a8b99c6026c7587555a9b4f4d8333af.svg);}
}

/* button */
button {display: flex; align-items: center; column-gap: .4rem; white-space: nowrap; justify-content: center; width: 100%; height: 5.2rem; margin: 0; padding: 0; line-height: 1; border: none; border-radius: .4rem; background-color: var(--sac-red); border: 1px solid var(--sac-red); font-size: 1.5rem; font-weight: 500; color: #fff; cursor: pointer; vertical-align: middle;}
button:disabled {border-color: var(--gray03)!important; background-color: var(--opa-white)!important; color: #C4C4C4!important;}
button.md {height: 4.8rem;}
button.sm {width: 11rem; height: 4.8rem;}
button.thin {height: 3.6rem; padding: 0 1.2rem; justify-content: space-between;}
button.thin > i {margin-right: 0;}

button.round {display: flex; align-items: center; justify-content: center; width: fit-content; height: 2.8rem; padding: .6rem 1.2rem .5rem; border-radius: 2rem; font-size: 1.2rem; font-weight: 500; background-color: var(--sac-red); color: #fff; border: 1px solid var(--sac-red);}
button.round > i {margin-right: .2rem;}
button.round.lg {height: 3.6rem; padding: 0 1.8rem; font-size: 1.5rem;}
button.round.sm {height: 2rem; padding: 0 .6rem; font-size: 1.2rem;}
button.round.sm > i {margin-right: 0;}

button.gold {background-color: var(--mem-gold); border-color: var(--mem-gold); color: #fff!important;}
button.blue {background-color: var(--mem-blue); border-color: var(--mem-blue); color: #fff!important;}
button.green {background-color: var(--mem-green); border-color: var(--mem-green); color: #fff!important;}
button.red {background-color: var(--sac-red); border-color: var(--sac-red); color: #fff!important;}
button.blue {background-color: var(--sac-blue); border-color: var(--sac-blue); color: #fff!important;}
button.black {background-color: var(--black); border-color: var(--black); color: var(--white01)!important;}
button.gray {background-color: var(--gray01); border-color: var(--gray01); color: #fff!important;}
button.gray:disabled {background-color: var(--gray01)!important; border-color: var(--gray01)!important; color: #fff!important;}
button.light-gray {background-color: var(--gray03); border-color: var(--gray03); color: var(--gray01)!important;}
button.trans {background-color: transparent; border-color: transparent; color: var(--gray01)!important; width: fit-content; height: fit-content; font-size: 1.3rem;}
button.trans:disabled {opacity: .3;}
button.line {background-color: transparent; color: var(--black); border-color: var(--gray03);}
button.line-red {background-color: transparent; color: var(--sac-red); border-color: var(--sac-red);}
button.line-white {background-color: rgba(255, 255, 255, .3); color: #fff; border-color: #fff;}
button.line-black {background-color: transparent; color: var(--black); border-color: var(--black);}
button.line-blue {background-color: transparent; color: var(--mem-blue); border-color: var(--mem-blue);}
button.line-gray {background-color: transparent; color: var(--gray01); border-color: var(--gray01);}
button.line-light-gray {background-color: transparent; color: var(--black); border-color: var(--gray03);}
button.line-dashed-gray {background-color: transparent; color: var(--gray01); border-color: var(--gray01);}
button.line-gray:disabled {opacity: .3;}
button.line-black:disabled {opacity: .3;}

@media (prefers-color-scheme: dark) {
    button.black {background-color: var(--sac-red); border-color: var(--sac-red); color: #fff!important;}
}

/* count */
.num-count {display: grid; grid-template-columns: repeat(3, 3.6rem); column-gap: .2rem; align-items: center;}
.num-count > li input {width: 100%; height: 3.6rem; text-align: center; padding: 0; font-size: 1.6rem; font-weight: 600; border: 0;}
.num-count > li button {width: 100%; height: 3.6rem; background-color: var(--white01); border: 1px solid var(--gray03);}

/* label */
.label {display: inline-block; width: 4.8rem; height: 2rem; line-height: 1.9rem; border-radius: .2rem; text-align: center; font-size: 1.1rem; font-weight: 500; border: 1px solid;}
.label.red {border-color: var(--sac-red); color: var(--sac-red);}
.label.red-bg {border-color: var(--sac-red); color: #fff; background-color: var(--sac-red);}
.label.gold {border-color: var(--sac-gold); color: var(--sac-gold);}
.label.blue {border-color: var(--sac-blue); color: var(--sac-blue);}
.label.green {border-color: var(--sac-green); color: var(--sac-green);}
.label.violet {border-color: var(--sac-violet); color: var(--sac-violet);}

/* tag */
.tag {display: inline-flex!important; align-items: center; justify-content: center; column-gap: .4rem; width: fit-content; height: 3rem; padding: 0 1.2rem; text-align: center; font-size: 1.3rem; border: 1px solid; border-radius: 3rem;}
.tag.sm {width: 4rem; height: 2rem; padding: 0; font-size: 1.2rem; justify-content: center;}
.tag > span {font-weight: 500;}
.tag.black {background-color: var(--black); color: var(--white01)!important; border: none;}
.tag.red {background-color: var(--sac-red); color: #fff!important; border: none;}
.tag.line-gray {border-color: var(--gray02); color: var(--gray02)!important;}
.tag.line-gray > i.delete-tag {width: 1rem; height: 1rem; background-image: url(/resource/img/ico/icon-delete-10-gr-989a14261abc40723446440758c721a7.svg);}
.tag.line-dashed-gray {border: 1px dashed var(--gray02); color: var(--gray02)!important; }
.tag.line-red {border-color: var(--sac-red); color: var(--sac-red)!important;}
.tag.line-red > i.delete-tag {width: 1rem; height: 1rem; background-image: url(/resource/img/ico/icon-delete-10-a35e61b3a1cfbb455cb499fee34f3768.svg);}

/* like toggle button */
.like-btn {display: flex; align-items: center; justify-content: center; width: fit-content; height: 2.8rem; line-height: 2.7rem; padding: 0 1.2rem; border-radius: 2rem; font-size: 1.4rem; background-color: transparent; color: var(--black); border: 1px solid var(--black);}
.like-btn > i {width: 1.6rem; height: 1.6rem; margin-right: .2rem; background-image: url(/resource/img/ico/icon-like-16-line-892afd2a1009e035499f26e7a3a3f651.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: relative; top: -.1rem;}
.like-btn.active {background-color: var(--black); color: var(--white01);}
.like-btn.active > i {background-image: url(/resource/img/ico/icon-like-16-c580a26369a55fa4ee73628c1ab55278.svg);}

@media (prefers-color-scheme: dark) {
    .like-btn.active > i {filter: invert(1);}
}

/* toggle */
.toggle {position: relative; display: inline-block; width: 4.8rem; height: 2.4rem; vertical-align:middle;}

.toggle-btn {border-radius: 2rem; background-color: var(--gray02); -webkit-transition: .3s; transition: .3s; position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer;}
.toggle-btn::before {content: ''; width: 2rem; height: 2rem; border-radius: 100%; background-color: #F6F6F6; -webkit-transition: .3s; transition: .3s; position: absolute; left: .2rem; bottom: .2rem;}

input[type='checkbox']:checked + .toggle-btn {background-color: var(--sac-red);}
input[type='checkbox']:checked + .toggle-btn::before {-webkit-transform: translateX(2.4rem); -ms-transform: translateX(2.4rem); transform: translateX(2.4rem);}

/* star score */
.score {display: flex; align-items: center;}
.score i {width: 1.6rem; height: 1.6rem; background-image: url(/resource/img/ico/icon-star-16-gr-7d0253d4cab2bee31fe3887b2ce04a5a.svg); background-repeat: no-repeat; background-size: contain; background-position: center;}
.score i.on {background-image: url(/resource/img/ico/icon-star-16-yl-512f6c8e66b85ead000686243edb47ad.svg);}

@media (prefers-color-scheme: dark) {
    .score i {filter: invert(.7);}
    .score i.on {filter: none;}
}


/* table */
table {width: 100%; border-collapse: collapse; border-spacing: 0; border-top: 1px solid var(--black);}
table th {border-bottom: 1px solid var(--gray03); padding: 1.6rem 0; text-align: center; font-size: 1.4rem; color: var(--gray01); font-weight: 500;}
table td {border-bottom: 1px solid var(--gray03); padding: 1.6rem 0; text-align: center; font-size: 1.4rem;}

table.line-table {border-left: 1px solid var(--gray03); border-top: 1px solid var(--gray03); table-layout: fixed;}
table.line-table th {background-color: var(--gray04); line-height: 1; padding: 1.2rem 0; text-align: center; font-size: 1.2rem; font-weight: 700; border-right: 1px solid var(--gray03); border-bottom: 1px solid var(--gray03); color: var(--black);}
table.line-table td {padding: .8rem 1rem; text-align: left; font-size: 1.2rem; line-height: 1.6; border-right: 1px solid var(--gray03); border-bottom: 1px solid var(--gray03); background-color: var(--white01);}
table.line-table .bold {font-size: 1.3rem; color: var(--sac-blue); text-decoration: underline;}
table.line-table + p {margin-top: 1.2rem;}

/* tab */
.tab {width: 100%; height: 4rem; z-index: 10; display: flex; align-items: center; background-color: var(--white01); border-bottom: 1px solid var(--gray04); position: fixed; top: -1px; z-index: 100; border-top: 1px solid var(--white01);}
.tab > li {text-align: center; font-size: 1.5rem; font-weight: 500; color: var(--gray01);}
.tab > li > span {position: relative; width: fit-content; height: 4rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.tab > li.active {color: var(--black); font-weight: 700;}
.tab > li.active > span::before {content: ''; width: 100%; height: .2rem; display: block; background-color: var(--sac-red); position: absolute; bottom: 0;}
.tab > li:first-child:nth-last-child(2), .tab > li:first-child:nth-last-child(2) ~ li {width: calc(100% / 2);}
.tab > li:first-child:nth-last-child(3), .tab > li:first-child:nth-last-child(3) ~ li {width: calc(100% / 3);}
.tab > li:first-child:nth-last-child(4), .tab > li:first-child:nth-last-child(4) ~ li {width: calc(100% / 4);}
.tab > li:first-child:nth-last-child(5), .tab > li:first-child:nth-last-child(5) ~ li {width: calc(100% / 5);}

.tab-cont {display: none; margin-top: 3.9rem;}
.tab-cont.active {display: block;}

@media (prefers-color-scheme: dark) {
    .tab {border-bottom-color: var(--gray03);}
}

/* sub tab */
.sub-title .sub-tab {margin-bottom: 0;}

.sub-tab {display: flex; align-items: center; justify-content: flex-end; margin-bottom: 2rem;}
.sub-tab > li {position: relative; font-size: 1.3rem; font-weight: 500; color: var(--gray01); cursor: pointer;}
.sub-tab > li.active {color: inherit; font-weight: 700;}
.sub-tab > li + li {margin-left: 1.6rem;}
.sub-tab > li + li::before {content: ''; display: block; width: 1px; height: .8rem; background-color: var(--gray02); position: absolute; top: 50%; left: -.8rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.sub-cont {display: none;}
.sub-cont.active {display: block;}

/* title */
.main-title {position: relative; margin-top: 1.6rem; margin-bottom: 3.6rem;}
.main-title h2 {font-size: 2.3rem; line-height: 1.4;}
.main-title > i {position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.main-title > img {width: 10.7rem; height: 8.4rem; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.main-title > button {position: absolute; bottom: 0; right: 0;}
.main-title + p {font-size: 1.4rem; line-height: 1.6; word-break: keep-all; margin-top: -2rem; margin-bottom: 3.6rem; color: var(--gray01);}

.sub-title {position: relative; margin-top: 1.6rem; margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between;}
.sub-title h4 {font-size: 1.8rem; font-weight: 700; line-height: 1.4; display: flex; align-items: center; word-break: keep-all; column-gap: 1rem;}
.sub-title h4 > select {width: fit-content; height: 3rem; padding: 0 1.6rem 0 0; font-size: 1.8rem; font-weight: 600; border-radius: 0; border: 0; border-bottom: 2px solid var(--black); background-image: url(/resource/img/ico/ic-title-select-4262cc5c2e9248cc83b19ec363007829.svg); background-size: 1rem; background-position: center right;}
.sub-title h4 > span {display: block; margin-left: .8rem; font-size: 1.3rem; font-weight: initial; color: var(--gray01);}
.sub-title > i {position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.sub-title p {font-size: 1.3rem; font-weight: 500; color: var(--gray01); word-break: keep-all; cursor: pointer; display: flex; align-items: center; column-gap: .6rem;}
.sub-title p:nth-child(1):nth-last-child(1) {margin-left: auto;}
.sub-title .more {padding-right: 1.6rem; font-size: 1.3rem; font-weight: 500; color: var(--gray01); background-image: url(/resource/img/ico/icon-arrow-right-12-gr-2eeebea278f2af95f3ba05d05d00fdef.svg); background-repeat: no-repeat; background-size: 1.2rem; background-position: right center; cursor: pointer;}
.sub-title .tooltip {display: flex; align-items: center; font-size: 1.3rem; font-weight: 500; color: var(--gray01);}
.sub-title .tooltip > i {margin-left: .6rem;}
.sub-title + p {font-size: 1.3rem!important; color: var(--gray01); margin-bottom: 1.2rem!important; line-height: 1.4!important;}

@media (prefers-color-scheme: dark) {
    .sub-title h4 > select {background-image: url(/resource/img/ico/ic-title-select-wh-ad6f72a4a601c612347e774925a60ad9.svg);}
}

/* more zip */
.box > .more {margin-top: 2rem; text-align: right; padding: 0 2.4rem; font-size: 1.4rem; font-weight: 500; background-image: url(/resource/img/ico/icon-arrow-right-16-gr-bad09494675fad41c2a0264370aa878b.svg); background-repeat: no-repeat; background-size: 16px; background-position: right center; cursor: pointer;}

/* bottom button area */
.bottom-wrap::before {content: ''; display: block; width: 100%; height: 8.6rem; opacity: 0;}
.bottom-wrap.none-before::before {content: none;}
.bottom-wrap .btn-bottom {width: 100%; position: fixed; left: 0; bottom: -.1rem; padding: 0 1.6rem 3.5rem; background-color: var(--white01); border-bottom: 1px solid var(--white01); border-top: 0.6rem solid transparent; z-index: 10;}
.bottom-wrap .btn-bottom button {height: 5.2rem;}
.bottom-wrap .btn-bottom .double-btn {position: relative; display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; width: 100%; height: 5.2rem; border: none; border-radius: .4rem; background-color: var(--sac-red); text-align: center; font-size: 1.5rem; font-weight: 500; color: var(--white01); cursor: pointer;}
.bottom-wrap .btn-bottom .double-btn::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--opa-white); position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.bottom-wrap .btn-bottom .double-btn > li {color: #fff; cursor: pointer;}
.bottom-wrap .btn-bottom .double-btn > li.disabled {color: var(--opa-white);}

.bottom-wrap .btn-bottom-full {width: 100%; position: fixed; left: 0; bottom: 0; display: flex;}
.bottom-wrap .btn-bottom-full button {height: fit-content; padding: 1.6rem 0 4.8rem; border-radius: 0;}
.bottom-wrap .btn-bottom-full button:first-child:nth-last-child(2), .bottom-wrap .btn-bottom-full button:first-child:nth-last-child(2) ~ button {width: 50%;}

.bottom-wrap.banner-60::before {height: 9.4rem;}
.bottom-wrap.banner-100::before {height: 13.4rem;}
.bottom-wrap.banner-150::before {height: 18.4rem;}
.bottom-wrap .banner-bottom {width: 100%; line-height: 0; position: fixed; left: 0; bottom: 0; padding: 0 1.6rem 3.4rem; background-color: var(--white01); text-align: center;}
.bottom-wrap .banner-bottom img {width: 100%;}

.bottom-banner-swiper {position: relative;}
.bottom-banner-swiper .swiper-pagination {width: fit-content; font-size: 1.3rem; font-weight: 600; color: #ffffff; display: flex; align-items: center; column-gap: .2rem; position: absolute; top: auto; left: auto; bottom: .6rem; right: 1rem;}
.bottom-banner-swiper .swiper-pagination span {display: flex; font-size: 1.3rem; font-weight: 600; color: #ffffff; line-height: initial;}

@media screen and (min-width: 768px) {
    .bottom-wrap .banner-bottom img {width: 34.3rem;}
}

/* banner area */
.container > .banner {width: 100%; margin-top: 2rem;}
.cont-box > .banner {width: 100%; margin-top: 3.6rem;}
.banner img {width: 100%;}

.banner-swiper01 {height: fit-content;}
.banner-swiper01 .swiper-pagination {width: fit-content; left: auto; bottom: 1rem; right: 1rem; color: #fff; letter-spacing: -.08rem;}

/* notice warning */
.banner + .notice {margin-top: 2rem;}
.box > .notice:first-child {margin-top: -2.8rem; margin-bottom: 2rem;}
.notice {width: 100vw; margin: 3.6rem -1.6rem 0; padding: 2rem 1.6rem; background-color: var(--gray04);}
.notice h6 {display: flex; align-items: center; margin-bottom: .8rem; font-size: 1.3rem; font-weight: 500; color: var(--gray01);}
.notice h6 > i {margin-right: .4rem;}
.notice p {font-size: 1.3rem; color: var(--gray01); line-height: 1.5; word-break: keep-all;}

/* paragraph area */
.para-wrap {margin-top: 3.6rem;}
.para-wrap * + * {margin-top: 1.6rem;}
.para-wrap p {font-size: 1.3rem; color: var(--gray01); line-height: 1.8; word-break: keep-all;}
.para-wrap ol > li {font-size: 1.3rem; color: var(--gray01); line-height: 1.8; word-break: keep-all; text-indent: -1.4rem; padding-left: 1.4rem;}

/* folding list */
.folding-list > li {margin-top: 2rem;}
.folding-list > li + li {border-top: 1px solid var(--gray03); padding-top: 2rem;}
.folding-list > li .title {margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; background-image: url(/resource/img/ico/icon-arrow-down-16-bl-ae1a90841a706541bbe91620dc79f2b3.svg); background-repeat: no-repeat; background-size: 1.6rem; background-position: right center;}
.folding-list > li .title > h6 {font-size: 1.4rem; vertical-align: middle; font-weight:700;}
.folding-list > li .cont {display: none;}
.folding-list > li .cont + .cont {margin-top: 1.2rem;}
.folding-list > li .cont > span {font-size: 1.3rem; line-height: 1.6; color: var(--sac-red);}
.folding-list > li .cont > h6 {font-size: 1.4rem; line-height: 1.6; font-weight: 500;}
.folding-list > li .cont > * + h6 {margin-top: 2rem!important;}
.folding-list > li .cont > h6 + * {margin-top: .4rem;}
.folding-list > li .cont > p + * {margin-top: .8rem;}
.folding-list > li .cont > p {font-size: 1.4rem; line-height: 1.6;}
.folding-list > li .cont > p > span {color: var(--sac-blue); font-weight: 500;}
.folding-list > li .cont > ul > li {font-size: 1.3rem; line-height: 1.6; color: var(--gray01);}
.folding-list > li .cont > ul > li::before {content: '-'; margin-right: .8rem;}
.folding-list > li .cont .sub {margin: 2rem -1.6rem 0; padding: 2rem 1.6rem; background-color: var(--gray04);}
.folding-list > li .cont .sub > h6 {font-size: 1.3rem; font-weight: 500; color: var(--gray01); margin-bottom: .8rem;}
.folding-list > li .cont .sub > ul > li {font-size: 1.3rem; color: var(--gray01); line-height: 1.6; text-indent: -1.2rem; padding-left: 1.2rem;}
.folding-list > li .cont .sub > ul > li::before {content: '-'; margin-right: .8rem;}
.folding-list > li .cont .sub > ul > li + li {margin-top: .4rem;}
.folding-list > li .cont .sub > ul > li a {color: var(--gray01);}

.folding-list > li.active .title {background-image: url(/resource/img/ico/icon-arrow-up-16-bl-e76db746f74cff680f8db6509f9be79e.svg);}
.folding-list > li.active .cont {display: block;}

.folding-list > li:first-child:nth-last-child(1) .title {background-image: none;}
.folding-list > li:first-child:nth-last-child(1) .cont {display: block;}

@media (prefers-color-scheme: dark) {
    .folding-list > li .title {background-image: url(/resource/img/ico/icon-arrow-down-16-wh-49cd7af182eeffc6173a06ba44915b12.svg);}
    .folding-list > li.active .title {background-image: url(/resource/img/ico/icon-arrow-up-16-wh-2aaf2462b691df020bb50d0242aad8e7.svg);}
}

/* alert cont */
.main-cont .alert-cont.trans {padding: 0;}
.alert-cont {width: 100%; min-height: 11rem; background-color: var(--gray04); border-radius: .4rem; text-align: center; padding: 4.5rem 0;}
.alert-cont.trans {background-color: transparent;}
.alert-cont i {margin: 0 auto;}
.alert-cont i + * {margin-top: 2rem;}
.alert-cont h6 {font-size: 1.4rem; font-weight: 500; text-align: center; line-height: 1.6;}
.alert-cont p {text-align: center; font-size: 1.4rem; line-height: 1.6;}
.alert-cont h6 + p {margin-top: 1.6rem;}

.alert-cont-full {padding: 8rem 0 6rem; text-align: center;}
.alert-cont-full i {margin-bottom: 3rem;}
.alert-cont-full h6 {font-size: 2rem;}
.alert-cont-full p {margin-top: 2rem; font-size: 1.4rem; line-height: 1.6;}
.alert-cont-full + p {text-align: center;}

.alert-cont-full-100 {height: calc(100vh - .8rem - 2rem - 3.4rem - 8.6rem); text-align: center; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.alert-cont-full-100 i {margin-bottom: 3rem;}
.alert-cont-full-100 h6 {font-size: 2rem;}
.alert-cont-full-100 p {margin-top: 2rem; font-size: 1.4rem; line-height: 1.6;}

.alert-cont-full-100.photo-ticket-empty {height: calc(100vh - .8rem - 2rem - 3.4rem - 3.6rem - 10.3rem);}

/* search cont */
.search-wrap {position: relative;}
.search-wrap + * {margin-top: 2.4rem;}
.search-wrap > i {width: 2rem; height: 2rem; background-image: url(/resource/img/ico/icon-search-20-1d03d677e8701df8c479fc8b801433c2.svg); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; top: 50%; right: 1.2rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer;}

/* popup */
#pop {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: var(--opa-black); z-index: 999;}
#pop .pop-wrap {width: calc(100vw - 3.2rem); padding: 2rem 1.6rem; background-color: var(--white01); border-radius: .4rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#pop .pop-tit {margin-top: 1.6rem;}
#pop .pop-tit > h4 {text-align: center; font-size: 1.5rem; font-weight: 500; margin-bottom: 2rem;}
#pop .pop-tit + .pop-cont {padding-top: 0;}
#pop .pop-cont {padding-top: 3rem;}
#pop .pop-cont > p {text-align: center; font-size: 1.4rem; line-height: 1.6; font-weight: 500;}
#pop .pop-cont > ul > li {font-size: 1.4rem; line-height: 1.6; position: relative; padding-left: 1rem;}
#pop .pop-cont > ul > li::before {content: ''; width: .4rem; height: .4rem; background-color: var(--black); border-radius: 100%; position: absolute; left: 0; top: .8rem}
#pop .pop-cont > ul > li + li {margin-top: 2rem;}
#pop .pop-btn {margin-top: 3.6rem; display: flex; align-items: center;}
#pop .pop-btn > button:first-child:nth-last-child(1) {width: calc((100% - (.8rem * 1)) / 2); margin: 0 auto;}
#pop .pop-btn > button:first-child:nth-last-child(2), .pop-btn > button:first-child:nth-last-child(2) ~ button {width: calc((100% - (.8rem * 1)) / 2);}
#pop .pop-btn > button + button {margin-left: .8rem;}

#desc-pop {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: var(--opa-black); z-index: 999;}
#desc-pop .pop-wrap {width: calc(100vw - 3.2rem); padding: 2.4rem 2rem; background-color: var(--white02); border-radius: .4rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#desc-pop .pop-tit {position: relative;}
#desc-pop .pop-tit > h4 {text-align: center; font-size: 1.8rem; font-weight: 700;}
#desc-pop .pop-tit > p {padding-top: 1.2rem; text-align: center; font-size: 1.3rem; font-weight: 500; color: var(--gray01);}
#desc-pop .pop-tit .icon-close-24 {position: absolute; top: -.4rem; right: 0;}
#desc-pop .pop-cont {margin-top: 2rem; max-height: 50rem; overflow-y: auto;}
#desc-pop .pop-cont > p {text-align: left; font-size: 1.4rem; line-height: 1.6;}
#desc-pop .pop-cont > ul > li {display: flex; align-items: flex-start; font-size: 1.4rem; line-height: 1.8;}
#desc-pop .pop-cont > ul > li h6 {width: 5.6rem;}
#desc-pop .pop-cont > ul > li p {width: calc(100% - 5.8rem); word-break: keep-all; text-indent: -.6rem; padding-left: .6rem;}

#tab-pop {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: var(--opa-black); z-index: 999;}
#tab-pop .pop-wrap {width: calc(100vw - 3.2rem); background-color: var(--white02); border-radius: .4rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#tab-pop .pop-tit {position: relative; padding: 2.4rem 0; margin: 0 2rem;}
#tab-pop .pop-tit > h4 {text-align: center; font-size: 1.8rem;}
#tab-pop .pop-tit .icon-close-24 {position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
#tab-pop .tab {top: 6.6rem;}
#tab-pop .tab-cont {max-height: 50rem; margin-top: 4rem; padding: 3.6rem 2.4rem; overflow-y: auto;}

#common-popup {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: var(--opa-black); z-index: 999;}
#common-popup .pop-wrap {width: calc(100vw - 3.2rem); padding: 2rem 1.6rem; background-color: var(--white01); border-radius: .4rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#common-popup .pop-tit {margin-top: 1.6rem;}
#common-popup .pop-tit > h4 {text-align: center; font-size: 1.5rem; font-weight: 500; margin-bottom: 2rem;}
#common-popup .pop-tit + .pop-cont {padding-top: 0;}
#common-popup .pop-cont {padding-top: 3rem;}
#common-popup .pop-cont > p {text-align: center; font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}
#common-popup .pop-cont > ul > li {font-size: 1.4rem; line-height: 1.6; position: relative; padding-left: 1rem;}
#common-popup .pop-cont > ul > li::before {content: ''; width: .4rem; height: .4rem; background-color: var(--black); border-radius: 100%; position: absolute; left: 0; top: .8rem}
#common-popup .pop-cont > ul > li + li {margin-top: 2rem;}
#common-popup .pop-btn {margin-top: 3.6rem; display: flex; align-items: center;}
#common-popup .pop-btn > button:first-child:nth-last-child(1) {width: calc((100% - (.8rem * 1)) / 2); margin: 0 auto;}
#common-popup .pop-btn > button:first-child:nth-last-child(2), .pop-btn > button:first-child:nth-last-child(2) ~ button {width: calc((100% - (.8rem * 1)) / 2);}
#common-popup .pop-btn > button + button {margin-left: .8rem;}

#common-popup-test {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: var(--opa-black); z-index: 999;}
#common-popup-test .pop-wrap {width: calc(100vw - 3.2rem); padding: 2rem 1.6rem; background-color: var(--white01); border-radius: .4rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
#common-popup-test .pop-tit {margin-top: 1.6rem;}
#common-popup-test .pop-tit > h4 {text-align: center; font-size: 1.5rem; font-weight: 500; margin-bottom: 2rem;}
#common-popup-test .pop-tit + .pop-cont {padding-top: 0;}
#common-popup-test .pop-cont {padding-top: 3rem;}
#common-popup-test .pop-cont > p {text-align: center; font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}
#common-popup-test .pop-cont > ul > li {font-size: 1.4rem; line-height: 1.6; position: relative; padding-left: 1rem;}
#common-popup-test .pop-cont > ul > li::before {content: ''; width: .4rem; height: .4rem; background-color: var(--black); border-radius: 100%; position: absolute; left: 0; top: .8rem}
#common-popup-test .pop-cont > ul > li + li {margin-top: 2rem;}
#common-popup-test .pop-btn {margin-top: 3.6rem; display: flex; align-items: center;}
#common-popup-test .pop-btn > button:first-child:nth-last-child(1) {width: calc((100% - (.8rem * 1)) / 2); margin: 0 auto;}
#common-popup-test .pop-btn > button:first-child:nth-last-child(2), .pop-btn > button:first-child:nth-last-child(2) ~ button {width: calc((100% - (.8rem * 1)) / 2);}
#common-popup-test .pop-btn > button + button {margin-left: .8rem;}

@media screen and (min-width: 768px) {
    #pop .pop-wrap, #desc-pop .pop-wrap {width: 34.3rem;}
    #tab-pop .pop-wrap {width: calc(100vw - 7.2rem);}
}

/* layer */
#layer {width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: var(--opa-black); z-index: 999;}
.layer-wrap {width: 100vw; background-color: var(--white01); position: absolute;}
.layer-wrap.top {top: 0;}
.layer-wrap.bottom {bottom: 0; border-radius: 3rem 3rem 0 0; padding: 3.9rem 0 3.4rem; background-image: url(/resource/img/ico/slide-line-69c251bae628a7885827f43505922aee.svg); background-repeat: no-repeat; background-size: 4.3rem; background-position: center top 1.6rem;}
.layer-wrap .layer-title {padding-bottom: .4rem;}
.layer-wrap .layer-title > h6 {font-size: 1.5rem; font-weight: 500; text-align: center;}
.layer-wrap .layer-cont {padding: 1.6rem 1.6rem 0;}
.layer-wrap .layer-btn {padding: 3.6rem 1.6rem 0;}

/* loading */
.loading-wrap {position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 99999;}
.loading-wrap .loading {display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.loading-wrap .loading .loading-dot {width: 1rem; height: 1rem; border-radius: 100%; background-color: var(--sac-red); opacity: 0; -webkit-animation: loadingFade 1s infinite; -moz-animation: loadingFade 1s infinite; animation: loadingFade 1s infinite;}
.loading-wrap .loading .loading-dot + .loading-dot {margin-left: 1rem;}
.loading-wrap .loading .loading-dot:nth-child(1) {-webkit-animation-delay: 0s; -moz-animation-delay: 0s; animation-delay: 0s;}
.loading-wrap .loading .loading-dot:nth-child(2) {-webkit-animation-delay: 0.1s; -moz-animation-delay: 0.1s; animation-delay: 0.1s;}
.loading-wrap .loading .loading-dot:nth-child(3) {-webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s;}
@-webkit-keyframes loadingFade {0% {opacity: 0;} 50% {opacity: 0.8;} 100% {opacity: 0;}}
@-moz-keyframes loadingFade {0% {opacity: 0;} 50% {opacity: 0.8;} 100% {opacity: 0;}}
@keyframes loadingFade {0% {opacity: 0;} 50% {opacity: 0.8;} 100% {opacity: 0;}}