@import 'reset-css.css';
@import 'font-pretendard.css';
@import 'font-eliceDXNeolli.css';

:root {
    --black: rgba(24, 29, 36, 1);
    --D-black: rgba(0, 0, 0, 1);
    --gray50: rgba(243, 248, 250, 1);
    --gray100: rgba(226, 232, 240, 1);
    --gray200: rgba(201, 212, 225, 1);
    --gray250: rgba(181, 194, 211, 1);
    --gray300: rgba(170, 184, 203, 1);
    --gray400: rgba(136, 149, 168, 1);
    --gray500: rgba(101, 110, 122, 1);
    --sta01: rgba(255, 23, 33, 1);
    --pri01: rgba(0, 0, 143, 1);
    --pri02: rgba(111, 111, 208, 1);
    --pri03: rgba(0, 173, 198, 1);
    --sec01: rgba(31, 31, 156, 1);
    --sec02: rgba(2, 113, 128, 1);
    --sec-p04: rgba(244, 107, 112, 1);
    --pubple50: rgba(245, 245, 255, 1);
}

body, html {
    margin: 0; padding: 0;
    font-size: 16px; font-family: 'Pretendard', 'Malgungothic', serif;
    font-weight: 400;
}
@media screen and (max-width: 374px) {
    body, html {
        font-size: 14px;
    }
}

header {
    display: flex;
    height: 56px;
    padding: 0 8px 0 20px;
    box-sizing: border-box;
    align-items: center;
}
header a > img {
    width: 32px;
}
header button {
    width: 50px; height: 50px;
    border: none;
    background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 24px;
    color: transparent;
}
header button.headerCall {
    margin-left: auto;
    background-image: url('../images/header_call.png');
}
header button.headerCouncel {
    background-image: url('../images/header_counsel.png');
}
#content-area hgroup {
    margin-top: 16px; padding: 0 20px;
    font-family: 'EliceNeoli', 'Malgungothic', serif;
}
#content-area hgroup h1 {
    font-size: 1.875rem; color: var(--D-black);
    line-height: 1.5;
}
#content-area hgroup h3 {
    font-size: 0.75rem; color: var(--gray500);
    line-height: 1.5;
}
#content-area hgroup h3 span {
    color: var(--sta01)
}
#content-area hgroup h3 strong {
    display: none;
}
#content-area hgroup h3 em {
    color: var(--gray300); font-weight: 300;
}

#benefit-area {
    margin: 16px 20px;
}
#benefit-area > li {
    display: flex;
    position: relative;
    border-radius: 20px 0 20px 20px;
    background: transparent;
    box-sizing: border-box;
    flex-wrap: wrap;
}
#benefit-area > li > a {
    display: flex;
    flex: 0 1 100%;
    height: 62px;
    padding: 0 20px;
    border-radius: 20px;
    align-items: center;
    font-size: 1.25rem; font-weight: 500;
    font-family: 'EliceNeoli', 'Malgungothic', serif;
    color: white;
    line-height: 1.5; text-decoration: none;
    box-sizing: border-box;
}
#benefit-area > li > a:before {
    display: inline-block;
    width: 24px; height: 24px;
    margin-right: 8px;
    background-size: cover; background-image: url(../images/icon_oil.png);
    content: '';
}
#benefit-area > li + li > a:before {
    background-image: url(../images/icon_hybrid.png);
}
#benefit-area .benefit-lists {
    display: flex;
    flex: 0 0 100%;
    min-height: 0;
    margin-top: -20px; padding-bottom: 24px;
    color: white;
}
#benefit-area .benefit-lists ul {
    width: 100%;
    padding: 4px 20px;
    box-sizing: border-box;
}
#benefit-area .benefit-lists ul li {
    display: flex;
    padding: 16px 0;
    align-items: center;
}
#benefit-area .benefit-lists ul li:before {
    display: block;
    flex: 0 0 48px; height: 48px;
    margin-right: 8px; border-radius: 26px;
    background-color: white; background-position: center; background-repeat: no-repeat; background-size: 20px;
    content: '';
}
#benefit-area .benefit-lists ul li.hybrid0:before { background-image: url('../images/icon_hybrid_icon_m00.png') }
#benefit-area .benefit-lists ul li.hybrid1:before { background-image: url('../images/icon_hybrid_icon_m01.png') }
#benefit-area .benefit-lists ul li.hybrid2:before { background-image: url('../images/icon_hybrid_icon_m02.png') }
#benefit-area .benefit-lists ul li.hybrid3:before { background-image: url('../images/icon_hybrid_icon_m03.png') }
#benefit-area .benefit-lists ul li.hybrid4:before { background-image: url('../images/icon_hybrid_icon_m04.png') }
#benefit-area .benefit-lists ul li.hybrid5:before { background-image: url('../images/icon_hybrid_icon_m05.png') }
#benefit-area .benefit-lists ul li.oil0:before { background-image: url('../images/icon_oil_icon_m00.png') }
#benefit-area .benefit-lists ul li.oil1:before { background-image: url('../images/icon_oil_icon_m01.png') }
#benefit-area .benefit-lists ul li.oil2:before { background-image: url('../images/icon_oil_icon_m02.png') }
#benefit-area .benefit-lists ul li.oil3:before { background-image: url('../images/icon_oil_icon_m03.png') }
#benefit-area .benefit-lists ul li.oil4:before { background-image: url('../images/icon_oil_icon_m04.png') }
#benefit-area .benefit-lists ul li.oil5:before { background-image: url('../images/icon_oil_icon_m05.png') }
#benefit-area .benefit-lists ul li > div > h2 {
    margin-bottom: 6px;
    font-size: 1.125rem; font-weight: 500;;
}
#benefit-area .benefit-lists ul li > div > p {
    font-size: 0.75rem; font-weight: 300;
    color: var(--gray100);
}
#benefit-area .benefit-lists ul li > p {
    margin-left: auto;
    font-size: 1.125rem;
}
#benefit-area .benefit-lists ul li > p strong {
    font-size: 1.5rem;
    font-weight: 700;
}
#benefit-area .benefit-lists ul p.max::before,
#benefit-area .benefit-lists ul p.avg::before,
#benefit-area .benefit-lists ul p.min::before {
    display: block;
    width: 48px;
    margin: 0 auto 4px; padding: 4px 12px; border-radius: 10px; background: rgba(0, 0, 0, .15);
    font-size: 0.75rem;
    line-height: 1; box-sizing: border-box;
}
#benefit-area .benefit-lists ul p.max::before {
    content: '최대'
}
#benefit-area .benefit-lists ul p.avg::before {
    content: '평균'
}
#benefit-area .benefit-lists ul p.min::before {
    content: '최소'
}


#benefit-area > li > a + button {
    position: absolute;
    top: 19px; right: 20px;
    width: 32px; height: 24px;
    border-radius: 12px; border: none;
    background: var(--sec01);
    margin-left: auto;
    color: transparent;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
}
#benefit-area > li > a + button::before {
    display: block;
    width: 6px; height: 6px;
    margin: 6px auto;
    border-right: 1px solid white; border-bottom: 1px solid white;
    transform: rotate(45deg);
    content: '';
}
#benefit-area > li + li {
    margin-top: -20px;
}
#benefit-area > li + li > div {
    padding-bottom: 0;
    border-radius: 0 0 20px 20px;
}
#benefit-area > li > a,
#benefit-area .benefit-lists {
    background: var(--pri01);
}
#benefit-area > li + li > a,
#benefit-area > li + li .benefit-lists {
    background: var(--pri03);
}
#benefit-area > li + li .benefit-lists {
    padding-bottom: 10px;
}
#benefit-area > li + li > button {
    background: var(--sec02);
}
#benefit-area > li.on > a + button::before {
    margin-top: 10px;
    transform: rotate(-135deg);
}
#banner-area {
    display: flex;
    height: 140px;
    margin: 24px 20px; padding: 20px; border-radius: 20px;
    background: var(--pubple50) url('../images/bg_banner_event.png') no-repeat calc(100% - 20px) center / 88px;
    flex-direction: column; align-items: start; justify-content: center;
    box-sizing: border-box;
}
#banner-area h1 {
    font-size: 1.25rem; font-family: 'EliceNeoli', 'Malgungothic', serif;
}
#banner-area h1 span {
    color: var(--pri02);
}
#banner-area button {
    display: flex;
    height: 38px;
    margin-top: 16px; padding: 0 16px; border: none; border-radius: 19px;
    background-color: var(--pri02);color: white;
    align-items: center;
}
#banner-area button div {
    display: inline-block;
    position: relative;
    width: 6px; height: 6px;
    margin-left: 8px;
    border-top: 1px solid white; border-right: 1px solid white;
}
#banner-area button div:after {
    display: block;
    width: 8px; height: 1px;
    background: white;
    content: '';
    transform: rotate(-45deg);
    transform-origin: calc(100% - 2px) 2px;
}
#notice-area {
    padding: 32px 20px;
    background-color: var(--gray50);
}
#notice-area.white {
    background-color: white;
}
#notice-area > h2 {
    display: flex;
    font-size: 1.25rem; color: var(--balck); font-weight: 500;
    align-items: center;
}
#notice-area > h2::before {
    display: flex;
    width: 24px; height: 24px;
    border-radius: 12px;
    margin-right: 8px;
    text-align: center;
    background: var(--gray200);
    content: '!';
    align-items: center;
    justify-content: center;
    font-size: 1rem; font-weight: 700; color: white;
}
#notice-area > ol {
    margin: 16px 0 0 16px;
    color: var(--gray500);
    list-style: decimal;
}
#notice-area > ol h3,
#notice-area > ol h4 {
    font-weight: 500;
}
#notice-area > ol h4,
#notice-area > ol p {
    margin-top: 8px;
    font-size: 1rem;
    color: var(--gray400);
}
#notice-area > ol > li + li {
    margin-top: 16px;
}
#notice-area > ol > li > ul {
    margin-top: 8px;
    color: var(--gray400);
}
#notice-area > ol > li > ul > li {
    position: relative;
    padding-left: 9px;
    font-weight: 300;
}
#notice-area > ol > li > ul > li:before {
    position: absolute;
    left: 0; top: 8px;
    width: 4px; height: 4px;
    border-radius: 2px;
    background: var(--gray400);
    content: '';
}
#notice-area > ol ul li + li {
    margin-top: 4px;
}
#notice-area > ol ul ul {
    margin-top: 4px;
}
#notice-area > ol ul ul > li {
    padding-left: 8px;
    font-size: 0.875rem; color: var(--gray250);
    text-indent: -8px; line-height: 1.3;
}
#notice-area > ol ul ul > li:before {
    content: '* '
}
#notice-area > p {
    margin-top: 16px;
    color: var(--gray400); font-weight: 300;
}

/* 퍼포먼스용 별도 세팅 */
#benefit-area li .benefit-lists {
    transition: max-height .3s ease-in-out;
}
#benefit-area li .benefit-lists ul {
    transition: opacity .5s ease-in;
    opacity: 1;
}
#benefit-area li:not(.on) .benefit-lists {
    overflow: hidden;
    box-sizing: unset;
}
#benefit-area li:not(.on) .benefit-lists[data-type="hybrid"] {
    max-height: 0;
}
#benefit-area li:not(.on) .benefit-lists[data-type="oil"] {
    max-height: 15px;
}
#benefit-area li.on .benefit-lists {
    max-height: 420px;
}
#benefit-area li:not(.on) .benefit-lists ul {
    opacity: 0;
    margin-top: 20px;
}


#fixed_bottom {
    position: sticky;
    display: flex;
    flex-direction: column;
    /* bottom: -82px; */
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px 20px 12px;
    box-sizing: border-box;
}
#fixed_bottom button {
    width: 100%; height: 58px;
    border: none; border-radius: 29px;
    font-size: 1.125rem; font-family: 'EliceNeoli', 'Malgungothic', serif; color: white;
}
#fixed_bottom button.doCalc {
    display: flex;
    background-color: var(--D-black);
    justify-content: center; align-items: center;
    animation: changeColor 1.8s infinite;
}
@keyframes changeColor {
    0% { background-color: var(--D-black); }
    1% { background-color: var(--sec-p04); }
    25% { background-color: var(--sec-p04); }
    26% { background-color: var(--D-black); }
    50% { background-color: var(--D-black); }
    51% { background-color: var(--sec-p04); }
    75% { background-color: var(--sec-p04); }
    76% { background-color: var(--D-black); }
}
#fixed_bottom button.doCalc:after {
    display: inline-block;
    width: 10px; height: 10px;
    margin-left: 8px;
    border-top: 2px solid white; border-right: 2px solid white;
    transform: rotate(45deg);
    content: '';
}
#fixed_bottom button.doCall {
    background-color: var(--pri02);
}
#fixed_bottom button + button {
    margin-top: 8px;
}
footer {
    padding-bottom: 24px;
}
footer * {
    text-align: center;
}

footer div {
    padding-bottom: 24px;
    font-size: .75rem; color: var(--gray250);
}

footer address,
footer p {
    color: var(--black);
    font-size: 0.875rem;
}

footer address {
    margin: 0 20px; border-top: 1px solid rgba(226, 232, 240, 1); padding-top: 16px;
    letter-spacing: -.03em; line-height: 1.5;
}

@media screen and (max-width: 1023px) {
    #benefit-area .benefit-lists > ul > li:not(.moView) {
        display: none;
    }
    #benefit-area .benefit-lists > ul > li.moView + .moView,
    #benefit-area .benefit-lists > ul > li:not(.moView):not(:first-child) + .moView {
        border-top: 1px solid rgba(255, 255, 255, .3);
    }
    footer .pcNumber { display: none; }
}
@media screen and (min-width: 1024px) {
    header { max-width: 1024px; height: 48px; margin: 20px auto 0; }
    header a img { width: 48px; }
    header button { background-size: 32px; }
    #content-area { max-width: 1024px; margin: 0 auto; }
    #notice-area > h2,
    #notice-area > ol,
    #notice-area > p,
    #fixed_bottom { margin-left: auto; margin-right: auto; }
    #notice-area > h2,
    #notice-area > p{ max-width: 984px; }
    #notice-area > ol { max-width: 948px; }
    #benefit-area li .benefit-lists ul {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 16px
    }
    #content-area hgroup h1 {
        font-size: 3rem;
    }
    #content-area hgroup h3 {
        font-size: 1.25rem;
    }
    #content-area hgroup h3 strong {
        display: inline;
    }
    #content-area hgroup h3 em {
        color: var(--gray300); font-size: 1rem; font-weight: 300;
    }
    #benefit-area li a {
        height: 68px;
        font-size: 1.5rem;
    }
    #benefit-area li.on .benefit-lists ul {
        margin-top: 20px;
    }
    #benefit-area li:not(.on) .benefit-lists ul {
        opacity: 0;
    }
    #benefit-area li .benefit-lists li div h2 {
        font-size: 1.25rem;
    }
    #benefit-area li .benefit-lists li > p {
        font-size: 1.375rem;
    }
    #benefit-area li .benefit-lists li > p:before,
    #benefit-area li .benefit-lists li > div p {
        font-size: 0.875rem;
    }
    #benefit-area li .benefit-lists li > p strong {
        font-size: 2rem;
    }
    #benefit-area li .benefit-lists li {
        overflow: hidden;
        flex: 1 1 calc(50% - 1px);
        box-sizing: border-box;
    }
    #benefit-area li .benefit-lists li + li {
        padding-left: 24px;
        border-left: 1px solid rgba(255, 255, 255, .3);
    }
    #benefit-area li .benefit-lists li:nth-child(1),
    #benefit-area li .benefit-lists li:nth-child(2n + 1) {
        margin-left: 0; padding-right: 24px; padding-left: 0; border-left: none;
    }
    #benefit-area li .benefit-lists li:nth-child(n + 3) {
        margin-top: 24px;
    }
    #benefit-area li .benefit-lists li:before {
        flex: 0 0 64px;
        height: 64px;
        margin-right: 12px; border-radius: 32px; background-size: 32px;
    }
    #fixed_bottom { flex-direction: row; max-width: 1024px; bottom: 0; }
    #fixed_bottom button {
        flex: 1 1 50%;
        height: 70px;
        border-radius: 35px;
        font-size: 1.25rem;
    }
    #fixed_bottom button + button { margin-top: 0; margin-left: 24px; }
    #banner-area {
        flex-direction: row;
        align-items: center;
        justify-content: start;
        background-size: 172px;
    }
    #banner-area button {
        overflow: hidden;
        position: relative;
        flex: 0 0 36px;
        margin: 0 2px; padding: 0;
        color: transparent;
        transform: scale(.6);
        opacity: .6;
    }
    #banner-area h1 { font-size: 1.5rem; }
    #banner-area button div {
        position: absolute;
        top: 50%; left: 50%;
        margin: 0;
        transform: scale(1.6) translate(-30%, -30%);
    }
    footer .moNumber { display: none; }
    footer address { margin: 0; }

    #benefit-area .benefit-lists ul li.hybrid0:before { background-image: url('../images/icon_hybrid_icon_00.png') }
    #benefit-area .benefit-lists ul li.hybrid1:before { background-image: url('../images/icon_hybrid_icon_01.png') }
    #benefit-area .benefit-lists ul li.hybrid2:before { background-image: url('../images/icon_hybrid_icon_02.png') }
    #benefit-area .benefit-lists ul li.hybrid3:before { background-image: url('../images/icon_hybrid_icon_03.png') }
    #benefit-area .benefit-lists ul li.hybrid4:before { background-image: url('../images/icon_hybrid_icon_04.png') }
    #benefit-area .benefit-lists ul li.hybrid5:before { background-image: url('../images/icon_hybrid_icon_05.png') }
    #benefit-area .benefit-lists ul li.oil0:before { background-image: url('../images/icon_oil_icon_00.png') }
    #benefit-area .benefit-lists ul li.oil1:before { background-image: url('../images/icon_oil_icon_01.png') }
    #benefit-area .benefit-lists ul li.oil2:before { background-image: url('../images/icon_oil_icon_02.png') }
    #benefit-area .benefit-lists ul li.oil3:before { background-image: url('../images/icon_oil_icon_03.png') }
    #benefit-area .benefit-lists ul li.oil4:before { background-image: url('../images/icon_oil_icon_04.png') }
    #benefit-area .benefit-lists ul li.oil5:before { background-image: url('../images/icon_oil_icon_05.png') }
}