@charset "utf-8";

html, body {
    height: 100%;
}

button {
    color: #000;
}

.fp-viewing-pg2 header .menu1 a,
.fp-viewing-pg3 header .menu2 a,
.fp-viewing-pg4 header .menu3 a,
.fp-viewing-pg5 header .menu4 a {
    color: #F37321;
}

.hw_font {
    font-family: 'Hanwha';
}

/*@media screen and (max-width: 1500px) {*/
/*    html {*/
/*        font-size: 15px;*/
/*    }*/
/*}*/

/*@media screen and (max-width: 1300px) {*/
/*    html {*/
/*        font-size: 14px;*/
/*    }*/
/*}*/

/*@media screen and (max-width: 1024px) {*/
/*    html {*/
/*        font-size: 13px;*/
/*    }*/
/*}*/

.main-popup {
    position: absolute;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    width: 400px;
    height: 580px;
    top: 100px;
    right: 123px;
}

/*.main-popup.pop_1 {*/
/*    top: 100px;*/
/*    right:  548px;*/
/*}*/
/*.main-popup.pop_2 {*/
/*    top: 100px;*/
/*    right: 123px;*/
/*}*/
.main-popup .main-popup-image {
    flex: 1;
    min-width: 400px;
    object-fit: contain;
    width: 100%;
    height: 520px;
}

.main-popup .main-popup-footer {
    background-color: #FFFFFF;
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.main-popup .main-popup-footer input {
    display: none;
}

.main-popup .main-popup-footer .close-24h {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 15px;
    font-family: "Apple SD Gothic Neo";
}

.main-popup .main-popup-footer .close-24h div {
    margin-right: 15px;
    width: 21px;
    height: 21px;
    border: 1px solid #b1b1b1;
    border-radius: 50%;
}

.main-popup .main-popup-footer .main-popup-btn__close {
    background-color: transparent;
    border: none;
    width: 21px;
    height: 21px;
}

@media screen and (max-width: 768px) {
    .main-popup {
        width: 100%;
    }

    .main-popup.pop_1,
    .main-popup.pop_2 {
        top: 0;
        left: 0;
        transform: none;
    }

    .main-popup .main-popup-image {
        width: 100%;
        min-width: 0;
    }
}

header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 99;
    padding: 0 60px;
    border-bottom: 1px solid #E1E1E1;;
}

header .head_in {
    position: relative;
}

header h1 {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -14px;
}

header h1 a {
    display: block;
    background: url(../../images/web/logo_kr.png) no-repeat center;
    background-size: contain;
    width: 105px;
    height: 28px;
}

header .gnb {
    display: flex;
    justify-content: center;
}

header .gnb li {
    margin: 0 40px;
    text-align: center;
}

header .gnb li a {
    font-size: 1rem;
    line-height: 55px;
    color: #272727;
    transition: 0.3s;
}

header .gnb li a:hover {
    color: #F37321;
}

header .menu {
    position: absolute;
    right: 0;
    top: 12px;
}

/*header .menu a {*/
/*    display: inline-block;*/
/*    color: #888888;*/
/*    padding-right: 20px;*/
/*    background: url(../../images/web/gr-arr.svg) no-repeat right center;*/
/*    font-weight: 400;*/
/*}*/

.reg-corp {
    width: 104px;
    height: 33px;
    background: #2F2A2E;
    border-radius: 17px;
    color: white;
    text-align: center;
    line-height: 33px;
    font-size: 14px;
}

/*header .menu{position: absolute;right: 0;top: 11px;}*/
/*header .menu a{display: inline-block;}*/
/*header .menu a ~ a{margin-left: 25px;}*/
/*header .menu{position: absolute;right: 0;top: 20px;}*/
/*header .menu a{display: inline-block;*/
/*    color: #888888;*/
/*    padding-right: 20px;*/
/*    background: url(../../images/web/gr-arr.svg) no-repeat right center;*/
/*    font-weight: 400;}*/
/*header .menu a ~ a{margin-left: 25px;}*/
header .menu span {
    display: inline-block;
    font-size: 0.7rem;
    line-height: 18px;
    padding-top: 16px;
}

header .menu .my span {
    color: #F37321;
    background: url(../../images/web/my-icon.png) no-repeat top center;
}

header .menu .sign span {
    color: #F37321;
    background: url(../../images/web/sign-icon.png) no-repeat top center;
}

header .menu .logout span {
    color: #888888;
    background: url(../../images/web/log-icon.png) no-repeat top center;
}

header .nav_btn {
    display: none;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -8px;
}

header .nav_btn span {
    display: block;
    width: 20px;
    height: 2px;
    background-color: #272727;
}

header .nav_btn span ~ span {
    margin-top: 5px;
}

nav {
    position: fixed;
    top: 0;
    right: -80%;
    width: 75%;
    height: 100%;
    overflow-y: auto;
    z-index: 120;
    background-color: #fff;
    font-weight: 300;
    transition: 0.5s;
}

nav .nav_top {
    height: 50px;
    position: relative;
}

nav .nav_logo {
    background: url(../../images/web/logo_kr.svg) no-repeat center;
    background-size: contain;
    width: 105px;
    height: 28px;
    position: absolute;
    left: 20px;
    top: 11px;
}

nav .nav_close {
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -16px;
    width: 32px;
    height: 32px;
    background: url(../../images/web/nav-close.svg) no-repeat;
    background-size: contain;
}

nav .user {
    padding: 15px 10px;
    background-color: #F37321;
}

nav .user_name {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
}

nav .user_icon {
    width: 32px;
    height: 32px;
}

nav .user_name p {
    margin-left: 10px;
    padding-bottom: 5px;
}

nav .user_name p strong {
    color: #fff;
    font-size: 1.429rem;
    font-weight: 400;
}

nav .user_name p span {
    color: #fff;
    font-size: 1.143rem;
    font-weight: 300;
    padding-left: 3px;
}

nav .user_log {
    display: flex;
}

nav .user_log li {
    width: calc(50% - 5px);
}

nav .user_log li ~ li {
    margin-left: 10px;
}

nav .user_log li a {
    display: block;
    text-align: center;
    color: #fff;
    font-weight: 400;
    line-height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 30px;
}

nav .nav_menu > ul > li {
    border-bottom: 1px solid #ddd;
}

nav .nav_menu > ul > li > a {
    display: block;
    line-height: 55px;
    color: #272727;
    font-size: 1.143rem;
    position: relative;
    padding: 0 20px;
}

nav .nav_menu > ul > li.depth1 > a::before {
    content: "";
    width: 11px;
    height: 7px;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -3px;
    background: url(../../images/web/nav-icon.svg) no-repeat;
    background-size: contain;
}

nav .nav_menu .depth2 {
    display: none;
    background-color: #F9F9F9;
    border-top: 1px solid #ddd;
}

nav .nav_menu .depth2 li {
    padding: 0 20px;
}

nav .nav_menu .depth2 li a {
    display: block;
    line-height: 48px;
}

.head_bot {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 20px;
    z-index: 100;
    background-color: #fff;
    border-top: 1px solid #ddd;
    display: none;
}

.head_bot ul {
    width: 100%;
    position: relative;
}

.head_bot ul::after {
    content: "";
    display: block;
    clear: both;
}

.head_bot ul li {
    width: 25%;
    float: left;
    text-align: center;
}

.head_bot ul li a {
    display: block;
    padding: 10px 0;
}

.head_bot ul li a span {
    display: block;
    color: #666;
    font-size: 0.846rem;
    padding-top: 28px;
    background-repeat: no-repeat;
    background-position: center top;
}

.head_bot ul li.menu1 a span {
    background-image: url(../../images/web/headbot-icon1.svg);
}

.head_bot ul li.menu2 a span {
    background-image: url(../../images/web/headbot-icon2.svg);
}

.head_bot ul li.menu3 a span {
    background-image: url(../../images/web/headbot-icon3.svg);
}

.head_bot ul li.menu4 a span {
    background-image: url(../../images/web/headbot-icon4.svg);
}

.head_bot ul li.on a {
    color: #272727;
}

.head_bot ul li.menu1.on a span {
    background-image: url(../../images/web/headbot-icon1-on.svg);
}

.head_bot ul li.menu2.on a span {
    background-image: url(../../images/web/headbot-icon2-on.svg);
}

.head_bot ul li.menu3.on a span {
    background-image: url(../../images/web/headbot-icon3-on.svg);
}

.head_bot ul li.menu4.on a span {
    background-image: url(../../images/web/headbot-icon4-on.svg);
}

@media screen and (max-width: 1024px) {
    header {
        padding: 0 20px;
    }

    header .head_in {
        height: 50px;
    }

    header h1 a {
        background-image: url(../../images/web/logo_kr.svg);
    }

    header .gnb {
        padding-top: 50px;
        display: none;
    }

    header .menu {
        display: none;
    }

    header .nav_btn {
        display: block;
    }

    nav.on {
        right: 0;
    }

    .dim {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 110;
    }

    .head_bot {
        display: block;
    }
}

aside {
    position: fixed;
    right: 0;
    top: 50%;;
    z-index: 90;
    margin-top: -240px;
}

aside button {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(204, 204, 204, 1) 100%);
    border: none;
    width: 80px;
    height: 80px;
    margin-right: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    transition: width 0.4s;
    overflow: hidden;
}

aside button p {
    font-size: 16px;
    opacity: 0;
    transition: all 0.4s;
    flex-shrink: 0;
}

aside button:hover {
    width: 218px;
}

aside button:hover p {
    opacity: 1;
}

aside button img {
    width: 80px;
    height: 80px;
}

aside ul li a {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #272727;
    width: 80px;
    height: 80px;
    position: relative;
    transition: 0.5s;
    margin: 0 auto;
    margin-right: 0;
}

aside ul li:last-child a {
    border-bottom: none;
}

aside ul li a:hover {
    background-color: #F37321;
    width: 170px;
}

aside ul li a span {
    color: #eee;
    font-size: 0.75rem;
    position: absolute;
    bottom: 15px;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%, 0);
    transition: 0.5s;
    font-weight: 200;
}

aside ul li a:hover span {
    font-size: 1rem;
    transform: translate(0, 50%);
    left: 30px;
    bottom: 50%;
}

aside ul li a img {
    width: 32px;
    position: absolute;
    right: 24px;
    top: 14px;
    transition: 0.5s;
}

aside ul li a:hover img {
    width: 26px;
    margin-top: -13px;
    top: 50%;
    right: 30px;
}

@media screen and (max-width: 1024px) {
    aside {
        display: none;
    }
}

.btn_area {
    position: relative;
    /*margin-top: 50px;*/
}

.btn_area ul {
    display: flex;
    justify-content: center;
}

.btn_area ul li ~ li {
    /*margin-left: 12px;*/
}

.btn_area ul li a,
.btn_area ul li button {
    display: block;
    width: 200px;
    border-radius: 30px;
    padding: 0 30px;
    position: relative;
    height: 56px;
    line-height: 56px;
    border: none;
}

.btn_area ul li a::before,
.btn_area ul li button::before {
    content: "";
    display: block;
    width: 7px;
    height: 11px;
    position: absolute;
    right: 30px;
    top: 50%;
    margin-top: -6px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0;
    transition: 0.5s;
}

.btn_area ul li a span,
.btn_area ul li button span {
    display: inline-block;
    line-height: 54px;
    font-size: 1rem;
    font-weight: 300;
    transition: 0.5s;
    transform: translate(-50%, 0);
    position: absolute;
    left: 50%;
    top: 0;
    white-space: nowrap;
}

.btn_area ul li a:hover span,
.btn_area ul li button:hover span {
    left: 30px;
    transform: translate(0, 0);
}

.btn_area ul li a:hover::before,
.btn_area ul li button:hover::before {
    opacity: 1;
}

.btn_area ul .btn_wh a,
.btn_area ul .btn_wh button {
    background-color: #fff;
    color: #272727;
    border: 1px solid #fff;
}

.btn_area ul .btn_wh a::before,
.btn_area ul .btn_wh button::before {
    background-image: url(../../images/web/btnarr-co.png);
}

.btn_area ul .btn_bo a,
.btn_area ul .btn_bo button {
    background-color: #fff;
    color: #272727;
    border: 1px solid #ddd;
}

.btn_area ul .btn_bo a::before,
.btn_area ul .btn_bo button::before {
    background-image: url(../../images/web/btnarr-co.png);
}

.btn_area ul .btn_co a,
.btn_area ul .btn_co button {
    background-color: #F37321;
    color: #fff;
    border: 1px solid #F37321;
}

.btn_area ul .btn_co a::before,
.btn_area ul .btn_co button::before {
    background-image: url(../../images/web/btnarr-wh.png);
}

.btn_area ul .btn_bl a,
.btn_area ul .btn_bl button {
    background-color: #272727;
    color: #fff;
    border: 1px solid #272727;
}

.btn_area ul .btn_bl a::before,
.btn_area ul .btn_bl button::before {
    background-image: url(../../images/web/btnarr-wh.png);
}

.btn_area .lef_btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
    text-align: center;
}

.btn_area .lef_btn a {
    color: #F37321;
    font-weight: 600;
    padding-right: 20px;
    background: url(../../images/web/or-arr.svg) no-repeat right center;
}

.co_bor_btn a,
.co_bor_btn button {
    display: inline-block;
    border: 1px solid #F37321;
    line-height: 34px;
    border-radius: 30px;
    width: 100px;
    transition: 0.3s;
}

.co_bor_btn a span,
.co_bor_btn button span {
    font-size: 0.875rem;
    color: #F37321;
    font-weight: 400;
    padding-right: 18px;
    background: url(../../images/web/or-arr.svg) no-repeat right center;
    transition: 0.3s;
}

.co_bor_btn a:hover span,
.co_bor_btn button:hover span {
    padding-right: 25px;
}

@media screen and (max-width: 1023px) {
    .btn_area ul li ~ li {
        margin-left: 10px;
    }

    /*.btn_area ul li a,*/
    /*.btn_area ul li button {*/
    /*    width: 140px;*/
    /*    height: 45px;*/
    /*}*/

    .btn_area ul li a span,
    .btn_area ul li button span {
        line-height: 45px;
    }

    .btn_area .lef_btn {
        position: static;
        transform: translate(0, 0);
        margin-top: 30px;
    }

    .co_bor_btn a span,
    .co_bor_btn button span {
        font-size: 1rem;
    }

    /*220803 - 수정 추가*/
    .btn_area ul li a:hover span,
    .btn_area ul li button:hover span {
        left: 50%;
        transform: translate(-50%, 0);
    }

    .btn_area ul li a:hover::before,
    .btn_area ul li button:hover::before {
        opacity: 0;
    }

    /*220803 - 수정 추가*/
}

footer {
    background-color: #101010;
    padding: 35px 20px 100px;
    text-align: center;
}

footer .top {
    margin-bottom: 55px;
    transition: 0.3s;
    transition-delay: 0.2s;
}

footer .top button {
    border: none;
    width: 32px;
    height: 32px;
    background: url(../../images/web/top-arr.png) no-repeat;
    background-size: contain;
    transition: 0.5s;
}

footer .top button:hover {
    transform: translate(0, -10px);
    background-image: url(../../images/web/top-arr-wh.png);
}

footer .foot_logo {
    margin-bottom: 80px;
    transition: 0.3s;
    transition-delay: 0.2s;
}

footer .foot_logo span {
    display: inline-block;
    background: url(../../images/web/logo_en.svg) no-repeat;
    background-size: contain;
    width: 213px;;
    height: 36px;
}

footer .foot_menu {
    margin-bottom: 70px;
    transition: 0.3s;
    transition-delay: 0.4s;
}

footer .foot_menu ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

footer .foot_menu ul li {
    padding: 0 4%;
}

footer .foot_menu ul li ~ li {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

footer .foot_menu ul li a {
    color: #fff;
    font-size: 1.1rem;
    display: block;
}

footer .family_site {
    position: relative;
    margin-bottom: 70px;
    transition: 0.3s;
    transition-delay: 0.6s;
}

footer .family_site .sel {
    display: block;
    width: 320px;
    margin: 0 auto;
    position: relative;
}

footer .family_site .sel span {
    display: block;
    line-height: 62px;
    text-align: left;
    border-bottom: 2px solid #fff;
    font-size: 0.875rem;
    color: #fff;
    font-weight: 300;
    padding: 0 20px;
    position: relative;
}

footer .family_site .sel span::after {
    content: "";
    display: block;
    width: 9px;
    height: 6px;
    background: url(../../images/web/btnarr-gr.svg) no-repeat;
    background-size: contain;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -3px;
    transform: rotate(180deg);
}

footer .family_site .sel .scroll {
    height: 0;
    position: absolute;
    bottom: 62px;
    left: 0;
    width: 100%;
    transition: 0.3s;
    overflow: hidden;
}

footer .family_site .sel .scroll ul {
    border-bottom: none;
    padding: 10px 0;
    background-color: #101010;
}

footer .family_site .sel .scroll li a {
    display: block;
    color: #fff;
    line-height: 40px;
    font-weight: 300;
    font-size: 0.875rem;
    text-align: left;
    padding: 0 20px;
    transition: 0.3s;
}

footer .family_site .sel:hover .scroll {
    height: 170px;
    overflow-y: scroll;
    border: 1px solid #666;
    border-bottom: none;
}

footer .family_site .sel .scroll li a:hover {
    color: #F37321;
}

footer .family_site .sel .scroll::-webkit-scrollbar-track {
    background-color: transparent;
}

footer .family_site .sel .scroll::-webkit-scrollbar {
    width: 5px;
    background-color: transparent;
}

footer .family_site .sel .scroll::-webkit-scrollbar-thumb {
    background-color: #444;
}

footer .family_site .sel .scroll:hover::-webkit-scrollbar-thumb,
footer .family_site .sel .scroll:focus::-webkit-scrollbar-thumb {
    background-color: #dadada;
}

footer .foot_term {
    margin-bottom: 40px;
    /*transition: 0.3s;*/
    /*transition-delay: 0.8s;*/
}

footer .foot_term ul {
    display: flex;
    justify-content: center;
}

footer .foot_term ul li {
    padding: 0 15px;
}

footer .foot_term ul li a {
    color: #f7f7f7;
    font-size: 14px;
    font-weight: 200;
}

footer .foot_sns {
    margin-bottom: 40px;
    /*transition: 0.3s;*/
    /*transition-delay: 0.8s;*/
}

footer .foot_sns ul {
    display: flex;
    justify-content: center;
}

footer .foot_sns ul li {
    margin-right: 25px;
}

footer .foot_sns ul li:last-of-type {
    margin-right: 0;
}

footer address {
    color: #666;
    font-size: 0.875rem;
    font-weight: 300;
    /*transition: 0.3s;*/
    /*transition-delay: 1s;*/
}

#section5 footer .top,
#section5 footer .foot_logo,
#section5 footer .foot_menu,
#section5 footer .family_site,
#section5 footer .foot_term,
#section5 footer .foot_sns,
#section5 footer address {
    /*opacity: 0;*/
    /*transform: translate(0, 20px);*/
}

#section5.active footer .top,
#section5.active footer .foot_logo,
#section5.active footer .foot_menu,
#section5.active footer .family_site,
#section5.active footer .foot_term,
#section5.active footer .foot_sns,
#section5.active footer address {
    /*opacity: 1;*/
    /*transform: translate(0, 0);*/
}

@media screen and (max-width: 1024px) {
    footer {
        padding: 25px 20px 60px;
    }

    footer .top {
        margin-bottom: 20px;
    }

    footer .top button {
        width: 26px;
        height: 26px;
    }

    footer .foot_logo {
        margin-bottom: 30px;
    }

    footer .foot_logo span {
        width: 178px;
        height: 30px;
    }

    footer .foot_menu {
        margin-bottom: 30px;
    }

    footer .foot_menu ul li {
        width: 50%;
        padding: 0;
    }

    footer .foot_menu ul li ~ li {
        border: none;
    }

    footer .foot_menu ul li:nth-child(n + 3) {
        margin-top: 25px;
    }

    footer .foot_menu ul li:nth-child(2n) {
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }

    footer .family_site {
        margin-bottom: 40px;
    }

    footer .family_site .sel {
        width: 100%;
    }

    footer .family_site .sel span {
        line-height: 50px;
    }

    footer .family_site .sel:hover .scroll {
        bottom: 50px;
    }

    footer .foot_term ul {
        justify-content: space-between;
    }

    footer .foot_term ul li {
        padding: 0 5px;
    }

    footer address {
        font-size: 0.786rem;
    }
}


/*#section7 {*/
/*    background-color: #fafafa;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    text-align: center;*/
/*    font-family: "Apple SD Gothic Neo";*/
/*    padding: 130px 64px 70px;*/
/*}*/

/*#section7 h1 {*/
/*    font-size: 45px;*/
/*    line-height: 60px;*/
/*    color: black;*/
/*    font-weight: 500;*/
/*    margin-bottom: 15px;*/
/*}*/

/*#section7 h2 {*/
/*    font-size: 25px;*/
/*    line-height: 60px;*/
/*    color: #585858;*/
/*    margin-bottom: 90px;*/
/*    font-weight: 400;*/
/*}*/

/*#section7 h2.mobile {*/
/*    display: none;*/
/*}*/

/*#section7 .ins-container {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 100%;*/
/*}*/

/*#section7 .ins-container .insurance {*/
/*    width: 100%;*/
/*    max-width: 543px;*/
/*}*/

/*#section7 .ins-container .insurance .ins-label {*/
/*    width: 100%;*/
/*    padding: 0 26px;*/
/*}*/

/*#section7 .ins-container .insurance .ins-label div {*/
/*    width: 100%;*/
/*    max-width: 410px;*/
/*    height: 55px;*/
/*    margin: 0 auto;*/
/*    background-color: #404040;*/
/*    border-radius: 36px;*/
/*    font-family: "Apple SD Gothic Neo";*/
/*    font-size: 20px;*/
/*    line-height: 55px;*/
/*    font-weight: bold;*/
/*    color: white;*/
/*    margin-bottom: 21px;*/
/*}*/

/*@media screen and (max-width: 1024px) {*/
/*    #section7 {*/
/*        background-color: #fafafa;*/
/*        display: flex;*/
/*        flex-direction: column;*/
/*        align-items: center;*/
/*        justify-content: center;*/
/*        text-align: center;*/
/*        font-family: "Apple SD Gothic Neo";*/
/*        padding: 130px 64px 70px;*/
/*    }*/

/*    #section7 h1 {*/
/*        font-size: 45px;*/
/*        line-height: 60px;*/
/*        color: black;*/
/*        font-weight: 500;*/
/*        margin-bottom: 25px;*/
/*    }*/

/*    #section7 h2 {*/
/*        margin-bottom: 0;*/
/*        line-height: 32px;*/
/*    }*/

/*    #section7 h2.mobile:last-of-type {*/
/*        margin-bottom: 86px;*/
/*    }*/

/*    #section7 h2.desktop {*/
/*        display: none;*/
/*    }*/

/*    #section7 h2.mobile {*/
/*        display: block;*/
/*    }*/

/*    #section7 .ins-container {*/
/*        display: flex;*/
/*        align-items: center;*/
/*        justify-content: center;*/
/*        width: 100%;*/
/*    }*/

/*    #section7 .ins-container .insurance {*/
/*        width: 100%;*/
/*        max-width: 543px;*/
/*    }*/

/*    #section7 .ins-container .insurance .ins-label {*/
/*        width: 100%;*/
/*        padding: 0 26px;*/
/*    }*/

/*    #section7 .ins-container .insurance .ins-label div {*/
/*        height: 59px;*/
/*        font-size: 20px;*/
/*        line-height: 59px;*/
/*    }*/
/*}*/

/*@media screen and (max-width: 768px) {*/
/*    #section7 {*/
/*        background-color: #fafafa;*/
/*        display: flex;*/
/*        flex-direction: column;*/
/*        align-items: center;*/
/*        justify-content: center;*/
/*        text-align: center;*/
/*        font-family: "Apple SD Gothic Neo";*/
/*        padding: 130px 64px 70px;*/
/*    }*/

/*    #section7 h1 {*/
/*        font-size: 35px;*/
/*        line-height: 40px;*/
/*        margin-bottom: 25px;*/
/*    }*/

/*    #section7 h2 {*/
/*        margin-bottom: 0;*/
/*        font-size: 16px;*/
/*        line-height: 20px;*/
/*    }*/

/*    #section7 h2.mobile:last-of-type {*/
/*        margin-bottom: 45px;*/
/*    }*/

/*    #section7 h2.desktop {*/
/*        display: none;*/
/*    }*/

/*    #section7 h2.mobile {*/
/*        display: block;*/
/*    }*/

/*    #section7 .ins-container {*/
/*        flex-direction: column;*/
/*    }*/

/*    #section7 .ins-container .insurance {*/
/*        width: 100%;*/
/*        max-width: 300px;*/
/*    }*/

/*    #section7 .ins-container .insurance:first-of-type {*/
/*        margin-bottom: 24px;*/
/*    }*/

/*    #section7 .ins-container .insurance .ins-label {*/
/*        padding: 0 46px;*/
/*        marign-bottom: 20px;*/
/*    }*/

/*    #section7 .ins-container .insurance .ins-label div {*/
/*        max-width: 200px;*/
/*        height: 30px;*/
/*        font-size: 12px;*/
/*        line-height: 30px;*/
/*    }*/
/*}*/

/*.req__page .req__btns .req__btn {*/
/*    width: 100%;*/
/*    max-width: 510px;*/
/*    height: 440px;*/
/*    background: white;*/
/*    box-shadow: 0px 0px 15px #A7A7A729;*/
/*    border-radius: 20px;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*}*/
/*.req__page .req__btns .req__btn img{*/
/*    height: 131px;*/
/*    margin-bottom: 32px;*/
/*}*/
/*.req__page .req__btns .req__btn p:first-of-type {*/
/*    font-size: 40px;*/
/*    line-height: 60px;*/
/*    margin-bottom: 24px;*/
/*    color: #404040;*/
/*    font-weight: 600;*/
/*}*/
/*.req__page .req__btns .req__btn p:first-of-type span {*/
/*    font-family: Hanwha;*/
/*    font-weight: 500;*/
/*}*/
/*.req__page .req__btns .req__btn p:last-of-type {*/
/*    font-size: 20px;*/
/*    color: #585858;*/
/*    font-weight: 300;*/
/*}*/
/*.req__page .req__btns .req__btn.hanwha {*/
/*    margin-right: 20px;*/
/*}*/
/*.req__page .req__btns .req__btn div {*/
/*    height: 56px;*/
/*    padding: 0 32px;*/
/*    border-radius: 36px;*/
/*    color: white;*/
/*    font-size: 20px;*/
/*    line-height: 60px;*/
/*    font-weight: 300;*/
/*    width: max-content;*/
/*    margin: 0 auto 30px;*/
/*}*/
/*.req__page .req__btns .req__btn.hanwha div{*/
/*    background: #FF7403;*/
/*}*/
/*.req__page .req__btns .req__btn.me div{*/
/*    background: #404040;*/
/*}*/
/*.req__page .req__btns .req__btn div span{*/
/*    font-weight: 400;*/
/*}*/
/*.mobile_text {*/
/*    display: none;*/
/*}*/



.con_tit.wh h2 {
    color: #fff;
}

.con_tit p {
    margin-top: 20px;
    color: #272727;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 300;
}

.inner_14 {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.inner_12 {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.bot_area.wh {
    background-color: #fff;
}

.bot_area.gr {
    background-color: #F9F9F9;
}

.bot_area {
    border-top: 1px solid #EBEBEB;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

.bot_area > div {
    display: inline-block;
    line-height: 120px;
}

.bot_area.wh > div {
    padding-right: 45px;
    background: url(../../images/web/pdf-icon.svg) no-repeat right center;
}

.bot_area.gr > div {
    padding-right: 105px;
    background: url(../../images/web/coupon-icon.svg) no-repeat right center;
}

.bot_area p {
    font-weight: 300;
    color: #666;
    font-size: 1.125rem;
    padding-right: 15px;
    display: inline;
}

.bot_area a {
    position: relative;
}

.bot_area a strong {
    color: #F37321;
    font-size: 1.125rem;
}

.bot_area a span {
    position: absolute;
    padding: 5px 10px;
    background-color: #272727;
    display: inline-block;
    line-height: 1em;
    border-radius: 4px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 300;
    bottom: 30px;
    left: 3px;
    transition: 0.3s;
}

.bot_area a span::after {
    content: "";
    display: block;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #272727;
    position: absolute;
    left: 50%;
    bottom: -5px;
    margin-left: -4px;
    transition: 0.3s;
}

.bot_area a:hover span {
    background-color: #F37321;
    bottom: 35px;
}

.bot_area a:hover span::after {
    border-top: 5px solid #F37321;
}

/*popup*/
.popup {
    font-weight: 300;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    display: none;
}

.pop_dim {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    padding: 20px;
}

.pop_wrap {
    background-color: #fff;
    max-width: 490px;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.pop_tit {
    background-color: #F4F4F4;
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

.pop_tit > div {
    position: relative;
}

.pop_tit p {
    line-height: 24px;
    color: #272727;
    font-size: 1.125rem;
    font-weight: 400;
}

.pop_tit button {
    width: 24px;
    height: 24px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    border: none;
}

.pop_tit .close {
    background-image: url(../../images/web/pop-close.svg);
    right: 0;
}

.pop_tit .prev {
    background-image: url(../../images/web/pop-prev.svg);
    left: 0;
    display: none;
}

.pop_tit .prev.show {
    display: block;
}

.pop_con {
    height: calc(100% - 65px);
    position: relative;
}

.pop_conwrap {
    padding: 20px;
}

.pop_step {
    height: 100%;
    width: 100%;
    overflow-y: auto;
    display: flex;
    align-items: center;
}

.pop_step > li {
    display: none;
    width: 100%;
    max-height: 100%;
}

.pop_step > li.on {
    display: block;
}

.pop_step > li.step4 {
    overflow-y: auto;
    max-height: calc(100% - 100px);
    margin-bottom: 100px;
}

.pop_conwrap .tit {
    margin-bottom: 40px;
}

.pop_conwrap .tit p {
    color: #272727;
    font-size: 1.75rem;
    font-weight: 300;
}

.pop_conwrap .tit p strong {
    font-weight: 600;
}

.pop_conwrap .tit span {
    display: block;
    margin-top: 20px;
    font-size: 0.875rem;
    line-height: 1.3rem;
}

.pop_bot {
    background-color: #272727;
    padding: 22px 30px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pop_bot dl {
    text-align: left;
}

.pop_bot dl dt {
    color: #fff;
    font-weight: 400;
    margin-bottom: 10px;
}

.pop_bot dl dt span {
    font-size: 0.75rem;
    font-weight: 300;
}

.pop_bot dl dd {
    color: #fff;
    font-size: 1.625rem;
}

.pop_bot dl dd strong {
    font-weight: 600;
}

.pop_bot dl dd strong span {
    color: #F37321;
}

.pop_bot .pop_btn {
    display: flex;
}

.pop_bot .pop_btn .down {
    margin-right: 10px;
}

.pop_bot .pop_btn .down a {
    display: block;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff url(../../images/web/down-icon.svg) no-repeat center;
    transition: 0.3s;
}

.pop_bot .pop_btn .down a:hover {
    background-image: url(../../images/web/down-icon-on.svg);
}

.calculator .pop_dim,
.login_pop .pop_dim,
.find .pop_dim,
.term_pop .pop_dim {
    padding: 0;
}

.calculator .pop_wrap {
    max-width: 640px;
    margin: 0 auto;
    height: 87%;
    width: 100%;
}

.calculator .pop_conwrap {
    padding: 0 60px;
}

.calculator .place {
    padding-bottom: 50px;
}

.calculator .place li ~ li {
    margin-top: 10px;
}

.calculator .place li label {
    display: block;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    width: 100%;
    text-align: left;
    overflow: hidden;
}

.calculator .place li label input[type=radio] {
    display: none;
}

.calculator .place li.plc_btn1 label p {
    background-image: url(../../images/web/place-icon1.svg);
}

.calculator .place li.plc_btn2 label p {
    background-image: url(../../images/web/place-icon2.svg);
}

.calculator .place li.plc_btn3 label p {
    background-image: url(../../images/web/place-icon3.svg);
}

.calculator .place li.plc_btn4 label p {
    background-image: url(../../images/web/place-icon4.svg);
}

.calculator .place li.plc_btn5 label p {
    background-image: url(../../images/web/place-icon5.svg);
}

.calculator .place li label p {
    display: flex;
    align-items: center;
    padding: 29px 40px;
    background-repeat: no-repeat;
    background-position: right 40px center;
    transition: 0.3s;
}

.calculator .place li label strong {
    color: #272727;
    font-size: 1.25rem;
    padding-right: 10px;
    font-weight: 400;
    transition: 0.2s;
}

.calculator .place li label span {
    color: #666;
    transition: 0.2s;
}

.calculator .place li label:hover p,
.calculator .place li label input[type=radio]:checked ~ p {
    background-color: #F37321;
}

.calculator .place li.plc_btn1 label:hover p,
.calculator .place li.plc_btn1 label input[type=radio]:checked ~ p {
    background-image: url(../../images/web/place-icon-on1.svg);
}

.calculator .place li.plc_btn2 label:hover p,
.calculator .place li.plc_btn2 label input[type=radio]:checked ~ p {
    background-image: url(../../images/web/place-icon-on2.svg);
}

.calculator .place li.plc_btn3 label:hover p,
.calculator .place li.plc_btn3 label input[type=radio]:checked ~ p {
    background-image: url(../../images/web/place-icon-on3.svg);
}

.calculator .place li.plc_btn4 label:hover p,
.calculator .place li.plc_btn4 label input[type=radio]:checked ~ p {
    background-image: url(../../images/web/place-icon-on4.svg);
}

.calculator .place li.plc_btn5 label:hover p,
.calculator .place li.plc_btn5 label input[type=radio]:checked ~ p {
    background-image: url(../../images/web/place-icon-on5.svg);
}

.calculator .place li label:hover strong,
.calculator .place li label:hover span,
.calculator .place li label input[type=radio]:checked ~ p strong,
.calculator .place li label input[type=radio]:checked ~ p span {
    color: #fff;
}

.calculator .area_tab ul {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.calculator .area_tab ul::after {
    content: "";
    display: block;
    clear: both;
}

.calculator .area_tab ul li {
    float: left;
    width: 16.66%;
    border-right: 1px solid #ddd;
}

.calculator .area_tab ul li:nth-child(6n) {
    border-right: none;
}

.calculator .area_tab ul li:nth-child(n + 7) {
    border-top: 1px solid #ddd;
}

.calculator .area_tab ul li label {
    display: block;
    width: 100%;
}

.calculator .area_tab ul li label input[type=radio] {
    display: none;
}

.calculator .area_tab ul li label span {
    display: block;
    width: 100%;
    line-height: 46px;
    color: #000;
    font-size: 1.125rem;
    transition: 0.2s;
}

.calculator .area_tab ul li label:hover span,
.calculator .area_tab ul li label input[type=radio]:checked ~ span {
    color: #fff;
    background-color: #F37321;
}

.calculator .area {
    padding: 0 30px 30px;
    margin-top: 40px;
}

.calculator .area svg {
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 290px;
}

.calculator .area svg path {
    cursor: pointer;
    transition: 0.1s;
}

.calculator .area svg path.map[data-ho="on"],
.calculator .area svg path.map[type="on"] {
    fill: #F37321;
}

.calculator .area svg path.map_txt_bg[data-ho="on"],
.calculator .area svg path.map_txt_bg[type="on"] {
    fill: #fff;
    stroke: #ddd;
    stroke-miterlimit: 10;
    stroke-width: 1px;
}

.calculator .area svg path.map_txt[data-ho="on"],
.calculator .area svg path.map_txt[type="on"] {
    fill: #272727;
}

.calculator .cal_sel ul li ~ li {
    margin-top: 10px;
}

.calculator .cal_sel ul li label input[type=radio] {
    display: none;
}

.calculator .cal_sel ul li label p {
    border: 1px solid #ddd;
    padding: 65px 40px;
    text-align: left;
    border-radius: 8px;
    background-repeat: no-repeat;
    background-position: right 40px center;
    transition: 0.1s;
}

.calculator .cal_sel ul li.sel1 label p {
    background-image: url(../../images/web/calsel-icon1.svg);
}

.calculator .cal_sel ul li.sel2 label p {
    background-image: url(../../images/web/calsel-icon2.svg);
}

.calculator .cal_sel ul li label p span {
    color: #272727;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5em;
    transition: 0.1s;
}

.calculator .cal_sel ul li label p:hover {
    background-color: #F37321;
    border-color: #F37321;
}

.calculator .cal_sel ul li label p:hover span {
    color: #fff;
}

.calculator .slider ul li {
    padding: 20px 40px;
    border-radius: 8px;
}

.calculator .slider ul li ~ li {
    margin-top: 10px;
}

.calculator .slider ul li .bar_box {
    display: flex;
    justify-content: space-between;
}

.calculator .slider ul li .bar_box > div {
    width: calc(50% - 10px);
}

.calculator .slider .bar_value {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calculator .slider .bar_value p {
    color: #272727;
    font-size: 1.25rem;
    font-weight: 400;
}

.calculator .slider .bar_value p em {
    vertical-align: middle;
}

.calculator .slider .bar_value span {
    color: #272727;
    font-size: 1.25rem;
    letter-spacing: 0px;
}

.calculator .slider .bar_value span strong {
    color: #F37321;
    font-weight: 600;
}

.calculator .slider .bar_value span .direct_in {
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #F37321;
    font-weight: 600;
    text-align: center;
    width: 55px;
}

.calculator .slider .slider_range {
    border-radius: 5px;
    background-color: #eee;
    height: 10px;
    position: relative;
    margin-top: 20px;
}

.calculator .slider .slider_range .ui-slider-handle {
    display: inline-block;
    background-color: #F37321;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0%;
    top: 50%;
    margin-top: -12px;
    margin-left: -12px;
    border-radius: 50%;
    outline: none;
}

.calculator .slider .slider_range .ui-slider-range {
    background-color: #F37321;
    height: 100%;
    border-radius: 5px;
    position: absolute;
}

.calculator .slider .bar_price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
}

.calculator .slider .bar_price span {
    font-size: 0.875rem;
    line-height: 1.1rem;
}

.calculator .slider .bar_price.degree_txt span {
    width: 20%;
}

.calculator .slider .bar_price.degree_txt span:first-child {
    width: auto;
}

.calculator .slider .bar_price.degree_txt span:last-child {
    width: auto;
}

.calculator .slider .degree {
    display: flex;
    justify-content: space-between;
}

.calculator .slider .degree > div {
    margin-top: -7px;
}

.calculator .slider .degree label {
    display: block;
}

.calculator .slider .degree label input[type=radio] {
    display: none;
}

.calculator .slider .degree label span {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #ddd;
    position: relative;
}

.calculator .slider .degree label span::before {
    content: "";
    width: 12px;
    height: 12px;
    background-color: #F37321;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -6px;
    margin-left: -6px;
    opacity: 0;
}

.calculator .slider .degree label input[type=radio]:checked ~ span {
    border-color: #F37321;
}

.calculator .slider .degree label input[type=radio]:checked ~ span::before {
    opacity: 1;
}

.calculator .slider ul li.notice {
    background-color: #FFF5EE;
    padding: 35px 40px;
}

.calculator .slider ul li.notice .bar_value p,
.calculator .slider ul li.notice .bar_value span {
    font-size: 1.5rem;
}

.calculator .slider ul li.notice .bar_price {
    text-align: left;
}

.calculator .slider .disabled .bar_value p,
.calculator .slider .disabled .bar_value span,
.calculator .slider .disabled .bar_value span strong {
    color: #ccc;
}

.calculator .slider .disabled .slider_range .ui-slider-range,
.calculator .slider .disabled .slider_range .ui-slider-handle {
    background-color: #ddd;
}

.calculator .slider .bar3 .slider_range .ui-slider-handle::before {
    color: #fff;
    font-size: 0.875rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.calculator .slider .bar3-1 .slider_range .ui-slider-handle::before {
    content: "개";
}

.calculator .slider .bar3-2 .slider_range .ui-slider-handle::before {
    content: "폐";
}

.calculator .slider .bar3-1 .slider_range .ui-slider-range {
    right: 0;
}

/*설치 견적계산-운영관리 -주차공간 개방 시간 start*/
.calculator .slider .bar11 .slider_range .ui-slider-handle::before {
    color: #fff;
    font-size: 0.875rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.calculator .slider .bar11-1 .slider_range .ui-slider-handle::before {
    content: "개";
}

.calculator .slider .bar11-2 .slider_range .ui-slider-handle::before {
    content: "폐";
}

.calculator .slider .bar11-1 .slider_range .ui-slider-range {
    right: 0;
}

/*설치 견적계산-운영관리 -주차공간 개방 시간 end */
.calculator .count_box {
    background-color: #FFF5EE;
    padding: 20px 60px;
    margin-bottom: 40px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.calculator .count_box dl {
    display: flex;
    align-items: center;
    text-align: left;
    justify-content: space-between;
}

.calculator .count_box dl ~ dl {
    margin-top: 10px;
}

.calculator .count_box dl dt {
    color: #272727;
    font-weight: 400;
    width: 30%;
}

.calculator .count_box dl dd {
    width: 70%;
}

.calculator .count_box dl dd .count_inp {
    display: flex;
    align-items: center;
    font-size: 1.625rem;
    color: #272727;
}

.calculator .count_box dl dd .count_inp input[type="text"] {
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 50px;
    height: 50px;
    outline: none;
    text-align: center;
    font-weight: 600;
    color: #F37321;
    margin: 0 5px;
}

.calculator .count_box dl dd .count_inp strong {
    font-weight: 600;
}

.calculator .lab_chk p {
    color: #666;
}

.calculator .lab_chk .or_box {
    background-color: #F37321;
    color: #fff;
    font-size: 0.75rem;
    line-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    margin-left: 10px;
}

.calculator .option_sel dl {
    display: flex;
    align-items: center;
}

.calculator .option_sel dl ~ dl {
    margin-top: 30px;
}

.calculator .option_sel dl dt {
    color: #272727;
    width: 28%;
    font-size: 1.25rem;
    font-weight: 400;
    text-align: left;
}

.calculator .option_sel dl dt em {
    vertical-align: middle;
}

.calculator .option_sel dl dd {
    width: 72%;
}

.calculator .option_sel dl dd ul {
    display: flex;
    align-items: center;
}

.calculator .option_sel dl dd ul li {
    width: calc(50% - 5px);
}

.calculator .option_sel dl dd ul li ~ li {
    margin-left: 10px;
}

.calculator .option_sel dl dd ul li label {
    display: block;
}

.calculator .option_sel dl dd ul li label input {
    display: none;
}

.calculator .option_sel dl dd ul li label p {
    border: 1px solid #ddd;
    border-radius: 8px;
}

.calculator .option_sel dl dd ul li label p span {
    display: inline-block;
    font-size: 1.125rem;
    line-height: 62px;
}

.calculator .option_sel dl dd ul li label.sel_icon p span {
    padding-right: 50px;
    background-position: right center;
    background-repeat: no-repeat;
}

.calculator .option_sel dl dd ul li .sel_icon1 p span {
    background-image: url(../../images/web/sel_icon1.svg);
}

.calculator .option_sel dl dd ul li .sel_icon2 p span {
    background-image: url(../../images/web/sel_icon2.svg);
}

.calculator .option_sel dl dd ul li .sel_icon3 p span {
    background-image: url(../../images/web/sel_icon3.svg);
}

.calculator .option_sel dl dd ul li .sel_icon4 p span {
    background-image: url(../../images/web/sel_icon4.svg);
}

.calculator .option_sel dl dd ul li .sel_icon5 p span {
    background-image: url(../../images/web/sel_icon5.svg);
}

.calculator .option_sel dl dd ul li .sel_icon6 p span {
    background-image: url(../../images/web/sel_icon3.svg);
}

.calculator .option_sel dl dd ul li label input:checked ~ p {
    border: 2px solid #F37321;
}

.calculator .option_sel dl dd ul li label input:checked ~ p span {
    color: #F37321;
    font-weight: 600;
    line-height: 60px;
}

.calculator .option_sel dl dd ul.slider li {
    width: 80px;
}

.calculator .option_sel dl dd ul.slider li.bar8 {
    width: calc(100% - 180px);
}

.calculator .option_sel dl dd ul.slider li .bar_side {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calculator .option_sel dl dd ul.slider li .bar_side p span {
    display: block;
    font-size: 1rem;
    padding-top: 40px;
    background-position: center top;
    background-repeat: no-repeat;
}

.calculator .option_sel .space_design {
    display: none;
    margin-top: 30px;
}

.calculator .option_sel .space_design.on {
    display: block;
}

.calculator .option_sel .space_design ul::after {
    content: "";
    display: block;
    clear: both;
}

.calculator .option_sel .space_design ul li {
    width: calc(33.33% - 8px);
    float: left;
}

.calculator .option_sel .space_design ul li ~ li {
    margin-left: 12px;
}

.calculator .option_sel .space_design p {
    margin-top: 20px;
    text-align: left;
}

.calculator .option_sel .space_design p span {
    display: flex;
    line-height: 1.25em;
}

.calculator .option_sel .space_design p span ~ span {
    margin-top: 3px
}

.calculator .option_sel .space_design p span::before {
    content: "※";
    display: inline-block;
    padding-right: 3px;
}

.calculator .option_sel .space_design .ch_box {
    width: 100%;
}

.calculator .option_sel .space_design .ch_box .wide {
    display: none;
}

.calculator .option_sel .space_design .ch_box span {
    margin: 0 auto;
    margin-top: 10px;
}

.calculator .option_info {
    margin-top: 30px;
    display: none;
}

.calculator .option_info button {
    border: none;
    background: none;
}

.calculator .option_info button em {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../../images/web/or-bot-arr.svg) no-repeat left center;
    background-size: contain;
    vertical-align: middle;
    transition: 0.3s;
}

.calculator .option_info button span {
    padding-left: 10px;
    font-size: 1.125rem;
    font-weight: 400;
    color: #F37321;
    line-height: 24px;
    vertical-align: middle;
}

.calculator .option_info.up button em {
    transform: rotate(180deg);
}

.calculator .option_box {
    display: none;
    margin-top: 30px;
}

.calculator .result_box {
    background-color: #F9F9F9;
    padding: 40px 60px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin-top: 40px;
}

.calculator .result_box strong.or {
    width: 8px;
    height: 8px;
    background-color: #F37321;
    border-radius: 50%;
    display: block;
}

.calculator .result_box strong.gr {
    width: 8px;
    height: 8px;
    background-color: #00C974;
    border-radius: 50%;
    display: block;
}

/*검은색 추가*/
.calculator .result_box strong.br {
    width: 8px;
    height: 8px;
    background-color: #000000;
    border-radius: 50%;
    display: block;
}

.calculator .result_box strong.or_txt {
    color: #F37321;
    font-weight: 600;
    font-size: 0.675rem;
}

.calculator .result_box strong.gr_txt {
    color: #00C974;
    font-weight: 600;
    font-size: 0.675rem;
}

/*검은색 추가*/
.calculator .result_box strong.or_txt {
    color: #F37321;
    font-weight: 600;
    font-size: 0.875rem;
}

.calculator .result_box strong.gr_txt {
    color: #00C974;
    font-weight: 600;
    font-size: 0.875rem;
}

.calculator .result_tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.calculator .result_tit > p {
    color: #000;
    font-weight: 600;
    font-size: 1.5rem;
}

.calculator .result_tit ul {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 12px;
    background-color: #fff;
}

.calculator .result_tit ul li {
    display: flex;
    align-items: center;
}

.calculator .result_tit ul li ~ li {
    margin-left: 10px;
}

.calculator .result_tit ul li p {
    color: #000;
    font-size: 0.875rem;
    margin-left: 5px;
}

.calculator .result_tbl ul {
    padding: 15px 0;
    display: flex;
}

.calculator .result_tbl ul ~ ul {
    border-top: 1px solid #ddd;
}

.calculator .result_tbl ul li {
    width: 10%;
}

.calculator .result_tbl .kind li {
    padding-top: 40px;
    background-position: center top;
    background-repeat: no-repeat;
}

.calculator .result_tbl .kind li.icon1 {
    background-image: url(../../images/web/result-icon1.png?ver=1);
}

.calculator .result_tbl .kind li.icon2 {
    background-image: url(../../images/web/result-icon2.png);
}

.calculator .result_tbl .kind li.icon3 {
    background-image: url(../../images/web/result-icon3.png);
}

.calculator .result_tbl .kind li.icon4 {
    background-image: url(../../images/web/result-icon4.png);
}

.calculator .result_tbl .kind li.icon5 {
    background-image: url(../../images/web/result-icon5.png);
}

.calculator .result_tbl .kind li.icon6 {
    background-image: url(../../images/web/result-icon6.png);
}

.calculator .result_tbl .kind li.icon7 {
    background-image: url(../../images/web/result-icon7.png);
}

.calculator .result_tbl .kind li.icon8 {
    background-image: url(../../images/web/result-icon8.png);
}

.calculator .result_tbl .kind li.icon9 {
    background-image: url(../../images/web/result-icon9.png);
}

.calculator .result_tbl .kind li p {
    color: #272727;
    font-size: 0.875rem;
    line-height: 1.071em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.calculator .result_tbl .count .tit {
    display: block;
    font-weight: 300;
    font-size: 0.75rem;
    color: #272727;
    text-align: left;
    line-height: 1.167em;
}

.calculator .result_tbl .count li {
    display: flex;
    align-items: center;
    justify-content: center;
}

.calculator .result_tbl .count li p {
    color: #272727;
    font-size: 0.75rem;
    line-height: 1em;
    line-height: 1.167em;
}

.calculator .result_tbl .count li p span {
    font-size: 0.625rem;
}

.calculator .result_notice {
    border: 1px solid #D32F2F;
    border-radius: 50px;
    background-color: #FFF5EE;
    padding: 14px 15px;
    margin-top: 15px;
}

.calculator .result_notice span {
    padding-left: 30px;
    color: #D32F2F;
    font-size: 0.875rem;
    background: url(../../images/web/regi-icon.svg) no-repeat left center;
    line-height: 20px;
    display: inline-block;
}

.calculator .sales {
    padding: 40px 60px;
    display: flex;
    justify-content: space-between;
}

.calculator .sales dl {
    text-align: left;
}

.calculator .sales dl dt {
    color: #000;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.calculator .sales dl dd {
    font-size: 0.75rem;
    color: #666;
}

.calculator .sales p {
    color: #000;
    font-size: 1.625rem;
    flex-grow: 1;
    text-align: right;
}

.calculator .sales p strong {
    margin-right: 5px;
    color: #F37321;
    font-weight: 600;
}

.quantity {
    padding: 60px 0;
}

.estimate {
    padding: 60px 0 0;
}

.help_btn {
    display: inline-block;
    border: none;
    background: #fff url(../../images/web/help-icon.svg) no-repeat center;
    background-size: contain;
    width: 24px;
    height: 25px;
    vertical-align: middle;
    margin-left: 10px;
}

.login_pop .pop_wrap,
.find .pop_wrap {
    max-width: 600px;
    height: 70%;
}

.term_pop.popup .pop_wrap {
    height: 80%;
    max-width: 1300px;
}

.term_pop.popup .pop_cen {
    display: block;
}

.space_pop .pop_wrap {
    max-width: 1400px;
}

.space_pop .pop_wrap .pop_con img {
    width: 100%;
}

.popup .pop_cen {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 20px;
    overflow-y: auto;
}

.popup .login {
    max-width: 480px;
    width: 100%;
    max-height: 100%;
}

.popup .login .log_wrap {
    margin-bottom: 40px;
}

.popup .log_form p {
    margin-bottom: 30px;
    font-size: 0.875rem;
    line-height: 1.429em;
}

.popup .log_form p span {
    color: #F37321;
    font-weight: 300;
}

.popup .log_form ul {
    margin-bottom: 12px;
}

.popup .log_form ul li ~ li {
    margin-top: 10px;
}

.popup .log_form ul li input[type=text],
.popup .log_form ul li input[type=password] {
    border: 1px solid #ddd;
    height: 50px;
    padding: 0 20px;
    width: 100%;
    border-radius: 4px;
    outline: none;
}

.popup .log_form ul li input[type=text]::placeholder,
.popup .log_form ul li input[type=password]::placeholder {
    color: #aaa;
}

.popup .log_form div {
    color: #D32F2F;
    text-align: start;
}

.popup .log_form_wrap {
    display: flex;
    flex-wrap: wrap;
}

.popup .log_form_wrap.type1 span {
    width: 100%;
}

.popup .log_form_wrap.type2 span:nth-child(1) {
    width: calc(100% - 110px);
}

.popup .log_form_wrap.type2 span:nth-child(2) {
    width: 110px;
    padding-left: 10px;
}

.popup .log_form_wrap.type3 span:nth-child(1) {
    width: 45%;
}

.popup .log_form_wrap.type3 span:nth-child(2) {
    width: 90px;
    padding-left: 10px;
}

.popup .log_form_wrap.type4 span:nth-child(1) {
    width: 70%;
    padding-right: 10px;
}

.popup .log_form_wrap.type4 span:nth-child(2) {
    width: 30%;
}

.popup .log_chk {
    margin: 20px 0 30px;
}

.popup .log_chk ul {
    display: flex;
}

.popup .log_chk ul li ~ li {
    margin-left: 20px;
}

.popup .log_chk .lab_chk p {
    color: #666;
}

.popup .log_btn_area {
    margin: 0;
    padding: 0;
    border-bottom: none;
}

.popup .log_btn_area ul li a {
    max-width: none;
}

.popup .find_link {
    margin-bottom: 40px;
}

.popup .find_link ul::after {
    content: "";
    display: block;
    clear: both;
}

.popup .find_link ul li {
    float: left;
    width: 33.33%;
    text-align: center;
}

.popup .find_link ul li ~ li {
    border-left: 1px solid #ccc;
}

.popup .find_link ul li a {
    display: block;
    color: #000;
    line-height: 18px;
}

.popup .log_btn_sns p {
    color: #272727;
}

.find .pop_cen {
    padding-bottom: 80px;
}

.popup .notice_txt {
    width: 100%;
    padding: 40px 0 20px;
}

.popup .notice_txt p {
    color: #272727;
    line-height: 1.75em;
    margin-bottom: 55px;
}

.popup .notice_txt p strong {
    font-weight: 600;
}

.popup .notice_txt p .co {
    color: #F37321;
}

.popup .notice_txt .ori {
    font-size: 0.875rem;
    color: #666;
    line-height: 1.4em;
}

.popup .notice_txt .btn_area {
    margin-top: 30px;
}

.popup .pop_sel {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.popup .pop_sel li {
    width: 180px;
}

.popup .pop_sel li ~ li {
    margin-left: 10px;
}

.popup .pop_sel li label {
    display: block;
}

.popup .pop_sel li label span {
    background-repeat: no-repeat;
    background-position: 20px center;
    line-height: 60px;
    display: block;
    background-size: 30px auto;
    border: 1px solid #ddd;
    padding: 0 25px 0 65px;
    border-radius: 8px;
}

.popup .pop_sel li.card_credit label span {
    background-image: url(../../images/web/card-credit.svg);
}

.popup .pop_sel li.card_ring label span {
    background-image: url(../../images/web/card-ring.svg);
}

.popup .pop_sel li input[type=radio] {
    display: none;
}

.popup .pop_sel li span {
    color: #272727;
}

.popup .pop_sel li input[type=radio]:checked + span {
    color: #F37321;
    font-weight: 600;
    border-color: #F37321;
}

.popup .term {
    padding: 20px 80px 30px;
    text-align: left;
}

.popup .term .agree_box.fst {
    border: none;
    padding-top: 0;
    margin-top: 0;
}

.popup .term .agree_box {
    border-top: 1px solid #e1e1e1;
    padding-top: 30px;
    margin-top: 30px;
}

.popup .term .agree_txt {
    font-size: 0.875rem;
    color: #666;
    font-weight: 200;
    line-height: 1.5em;
}

.popup .term .agree_txt table th,
.popup .term .agree_txt table td {
    padding: 5px 10px;
}

.popup .term .agree_txt table,
.popup .term .agree_txt th,
.popup .term .agree_txt td {
    border: 1px solid #666;
    border-collapse: collapse;
}

.popup .term .agree_txt table thead tr th {
    text-align: center;
}

.popup .term .agree_tit {
    display: block;
    font-size: 1rem;
    color: #222;
    font-weight: 500;
    line-height: 1.5em;
}

@media screen and (max-width: 1024px) {
    .pop_tit {
        padding: 15px;
    }

    .pop_con {
        height: calc(100% - 55px);
    }

    .pop_step > li {
        padding: 30px 0;
    }

    .pop_step > li.step4 {
        margin-bottom: 77px;
        max-height: calc(100% - 77px);
    }

    .pop_conwrap .tit {
        margin-bottom: 30px;
    }

    .pop_conwrap .tit p {
        font-size: 1.5rem;
    }

    .pop_conwrap .tit span {
        margin-top: 10px;
    }

    .popup .notice_txt {
        padding: 20px 0;
    }

    .popup .notice_txt p {
        margin-bottom: 40px;
    }

    .popup .pop_sel {
        display: block;
    }

    .popup .pop_sel li {
        width: 100%;
    }

    .popup .pop_sel li ~ li {
        margin-left: 0;
        margin-top: 10px;
    }

    .popup .pop_sel li label span {
        line-height: 50px;
        background-size: 25px auto;
        padding: 0;
    }

    .popup .term {
        padding: 0;
    }

    .popup .term .agree_txt {
        font-size: 0.846rem;
    }

    .popup .term .agree_tit {
        font-size: 1.077rem;
    }

    .pop_bot {
        padding: 20px;
    }

    .pop_bot dl dt {
        font-size: 0.9rem;
    }

    .pop_bot dl dd {
        font-size: 1.2rem;
    }

    .pop_bot .pop_btn .down {
        margin-right: 5px;
    }

    .pop_bot .pop_btn .down a {
        width: 35px;
        height: 35px;
        background-size: 18px auto;
    }

    .popup .btn_area ul li button {
        height: 35px;
        width: 120px;
    }

    .popup .btn_area ul li button span {
        line-height: 33px;
    }

    .calculator .pop_wrap {
        max-width: none;
        height: 100%;
    }

    .login_pop .pop_wrap,
    .find .pop_wrap,
    .term_pop.popup .pop_wrap {
        height: 100%;
    }

    .calculator .pop_conwrap {
        padding: 0 20px;
    }

    .calculator .place li label p {
        padding: 20px;
        background-size: 36px;
        background-position: right 15px center;
    }

    .calculator .place li label strong {
        font-size: 1.1rem;
        padding-right: 5px;
    }

    .calculator .place li label span {
        font-size: 0.9rem;
    }

    .calculator .area_tab ul li label span {
        font-size: 1rem;
        line-height: 35px
    }

    .calculator .area {
        margin-top: 30px;
    }

    .calculator .cal_sel ul li label p {
        padding: 40px 30px;
        background-size: auto 100px;
        background-position: right 20px center;
    }

    .calculator .cal_sel ul li label p span {
        font-size: 1.2rem;
    }

    .calculator .slider ul li {
        padding: 10px;
    }

    .calculator .slider ul li.notice {
        padding: 20px;
    }

    .calculator .slider .bar_value p,
    .calculator .slider .bar_value span {
        font-size: 1.1rem;
    }

    .calculator .slider ul li .bar_box > div {
        width: calc(50% - 5px);
    }

    .calculator .slider ul li.notice .bar_value p,
    .calculator .slider ul li.notice .bar_value span {
        font-size: 1.2rem;
    }

    .calculator .slider .bar_price {
        margin-top: 10px;
    }

    .calculator .slider .bar_price span {
        font-size: 0.8rem;
    }

    .calculator .slider .slider_range {
        height: 8px;
    }

    .calculator .slider .slider_range .ui-slider-handle {
        width: 18px;
        height: 18px;
        margin-top: -9px;
        margin-left: -9px;
    }

    .calculator .slider .bar3 .slider_range .ui-slider-handle::before {
        font-size: 0.7rem;
    }

    .calculator .slider .degree > div {
        margin-top: -5px;
    }

    .calculator .slider .degree label span {
        width: 18px;
        height: 18px;
    }

    .calculator .slider .degree label span::before {
        width: 8px;
        height: 8px;
        margin-top: -4px;
        margin-left: -4px;
    }

    .calculator .count_box {
        padding: 10px 20px;
        top: -30px;
    }

    .calculator .count_box dl ~ dl {
        margin-top: 10px;
    }

    .calculator .count_box dl dt {
        width: auto;
        font-size: 0.95rem;
        flex-shrink: 0;
    }

    .calculator .count_box dl dd {
        width: auto;
    }

    .calculator .count_box dl dd .count_inp {
        font-size: 1.2rem;
    }

    .calculator .count_box dl dd .count_inp input[type="text"] {
        width: 30px;
        height: 30px;
    }

    .calculator .lab_chk p {
        font-size: 0.95rem;
        padding-left: 5px;
    }

    .calculator .lab_chk .or_box {
        padding: 0 5px;
        margin-left: 5px;
        line-height: 22px;
    }

    .calculator .option_sel dl {
        display: block;
    }

    .calculator .option_sel dl dt {
        width: 100%;
        margin-bottom: 15px;
    }

    .calculator .option_sel dl dd {
        width: 100%;
    }

    .calculator .option_sel dl dd ul li label p span {
        line-height: 50px;
    }

    .calculator .option_sel dl dd ul li label input:checked ~ p span {
        line-height: 48px;
    }

    .calculator .option_sel dl dd ul li label.sel_icon p span {
        background-size: 26px auto;
        padding-right: 40px;
    }

    .calculator .option_sel dl dd ul.slider li {
        width: 70px;
    }

    .calculator .option_sel dl dd ul.slider li.bar8 {
        width: calc(100% - 140px);
    }

    .calculator .option_sel dl dd ul.slider li label p {
        height: 85px;
        padding-top: 15px;
    }

    .calculator .option_sel dl dd ul.slider li label p span {
        padding-right: 0;
        padding-top: 35px;
    }

    .calculator .option_sel dl dd ul.slider li label input:checked ~ p {
        padding-top: 14px;
    }

    .calculator .option_info button span {
        padding-left: 5px;
    }

    .calculator .option_info button em {
        width: 20px;
        height: 20px;
    }

    .calculator .result_box {
        padding: 30px 20px;
    }

    .calculator .result_tit ul {
        padding: 0;
        border: none;
        background-color: #F9F9F9;
    }

    .calculator .result_tit ul li p {
        font-size: 1rem;
    }

    .calculator .result_tbl {
        display: flex;
    }

    .calculator .result_tbl ul {
        display: block;
        width: 33.33%;
    }

    .calculator .result_tbl ul ~ ul {
        border-top: none;
        border-left: 1px solid #ddd;
    }

    .calculator .result_tbl ul li {
        width: 100%;
        height: 10%;
    }

    .calculator .result_tbl ul li:first-child {
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
    }

    .calculator .result_tbl .kind li {
        background: none !important;
        padding: 15px 0;
    }

    .calculator .result_tbl .kind li p {
        display: block;
        text-align: left;
        font-size: 1rem;
    }

    .calculator .result_tbl .count .tit {
        text-align: center;
        font-size: 1rem;
        display: flex;
        padding-bottom: 15px;
    }

    .calculator .result_tbl .count li p,
    .calculator .result_tbl .count li p span {
        font-size: 1rem;
    }

    .calculator .result_box strong.or_txt,
    .calculator .result_box strong.gr_txt {
        font-size: 1rem;
    }

    /*검은색 추가*/
    .calculator .result_box strong.br_txt {
        font-size: 1rem;
    }

    /*반응형 사이즈에 맞체 css 수정 kmj
    .calculator .result_box .count strong.or_txt{text-indent: -9999px;width: 8px;height: 8px;background-color: #F37321;border-radius: 50%;display: block;}
    .calculator .result_box .count strong.gr_txt{text-indent: -9999px;width: 8px;height: 8px;background-color: #00C974;border-radius: 50%;display: block;}
    */
    .calculator .result_box .count strong.or_txt {
        text-indent: -9999px;
        width: 8px;
        height: 8px;
        background-color: #F37321;
        border-radius: 50%;
        display: block;
    }

    .calculator .result_box .count strong.gr_txt {
        text-indent: -9999px;
        width: 8px;
        height: 8px;
        background-color: #00C974;
        border-radius: 50%;
        display: block;
    }

    /*검은색 추가, 반응형 사이즈에 맞체 css 수정 kmj*/
    /*.calculator .result_box .count strong.br_txt{text-indent: -9999px;width: 8px;height: 8px;background-color: #000000;border-radius: 50%;display: block;}*/
    .calculator .result_box .count strong.br_txt {
        width: 100px;
        height: 8px;
        display: block;
        text-align: center;
    }

    .calculator .result_notice {
        margin-top: 30px;
        padding: 10px;
    }

    .calculator .result_notice span {
        background-size: 18px auto;
        padding-left: 25px;
    }

    .calculator .sales {
        padding: 30px 20px;
    }

    .quantity,
    .estimate {
        padding: 0;
    }

    .help_btn {
        width: 18px;
        height: 19px;
        margin-left: 5px;
    }

    .popup .login {
        padding-bottom: 100px;
    }

    .popup .log_form ul li input[type=text],
    .popup .log_form ul li input[type=password] {
        height: 40px;
    }

    .popup .login .log_wrap,
    .popup .find_link {
        margin-bottom: 30px;
    }

    .popup .log_form_wrap.type2 span:nth-child(1) {
        width: calc(100% - 80px);
    }

    .popup .log_form_wrap.type2 span:nth-child(2) {
        width: 80px;
        padding-left: 5px;
    }

    .popup .log_form_wrap.type3 span:nth-child(1) {
        width: calc(100% - 90px);
    }

    .popup .log_form_wrap.type4 span:nth-child(1) {
        width: 100%;
        padding-right: 0;
    }

    .popup .log_form_wrap.type4 span:nth-child(2) {
        width: 100%;
        margin-top: 10px;
    }
}

/*main*/
.vis,
.vis .swiper-container {
    height: 100%;
}

.vis {
    padding: 0 100px;
}

.vis .swiper-slide {
    width: 100%;
}

.vis .vis_txt {
    height: 100%;
    display: flex;
    align-items: center;
    text-align: left;
    padding-top: 50px;
    max-width: 1400px;
    margin: 0 auto;
}

.vis .vis_txt .tit1 {
    font-size: 2.313rem;
    color: #fff;
    margin-bottom: 12px;
    font-weight: 300;
    /*opacity: 0;*/
    /*transition: 0.8s;*/
    /*transition-delay: 1s;*/
}

.vis .vis_txt .tit2 {
    font-family: 'hanwha';
    font-size: 3.313rem;
    color: #fff;
    margin-bottom: 100px;
    /*opacity: 0;*/
    /*transition: 0.8s;*/
    /*transition-delay: 1.3s;*/
}

.vis .vis_txt .tit2 span {
    color: #FF7F00;
    /*display: inline-block;*/
    /*width: 0;*/
    /*vertical-align: middle;*/
    /*transition: 0.5s;*/
    /*transition-delay: 1.6s;*/
}

.vis .vis_txt .btn_area {
    /*opacity: 0;*/
    /*transition: 0.8s;*/
    /*transition-delay: 2.2s;*/
}

.vis .vis_txt .btn_area ul {
    justify-content: flex-start;
}

.vis .vis_txt .btn_area ul li a,
.vis .vis_txt .btn_area ul li button {
    width: 200px;
    height: 50px;
    border-radius: 25px;
    font-size: 16px;
}

/*.vis .vis_txt .btn_area ul li a span {*/
/*    line-height: 50px;*/
/*}*/

/*.why_con {*/
/*    padding-bottom: 130px;*/
/*    max-width: 890px;*/
/*    margin: 0 auto;*/
/*}*/

/*.why_con .w_c:hover.w1 strong {*/
/*    background-image: url(../../images/web/why-icon-co1.svg);*/
/*}*/

/*.why_con .w_c:hover.w2 strong {*/
/*    background-image: url(../../images/web/why-icon-co2.svg);*/
/*}*/

/*.why_con .w_c:hover.w3 strong {*/
/*    background-image: url(../../images/web/why-icon-co3.svg);*/
/*}*/

/*.why_con .w_c:hover.w4 strong {*/
/*    background-image: url(../../images/web/why-icon-co4.svg);*/
/*}*/

/*.why_con .w_c:hover.w5 strong {*/
/*    background-image: url(../../images/web/why-icon-co5.svg);*/
/*}*/

.bg_cir1 {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 50%;
    padding: 60px;
    position: absolute;
    top: -230px;
    left: -235px;
    z-index: -2;
    animation: bg_cir1 5s ease infinite;
}

.bg_cir1 span {
    display: block;
    width: 720px;
    height: 720px;
    background-color: #eee;
    border-radius: 50%;
}

.bg_cir2 {
    border: 1px solid rgba(238, 238, 238, 0.5);
    padding: 60px;
    border-radius: 50%;
    position: absolute;
    right: -80px;
    bottom: 40px;
    z-index: -2;
    animation: bg_cir2 5s ease infinite;
}

.bg_cir2 span {
    display: block;
    width: 600px;
    height: 600px;
    background: rgba(243, 115, 33, 0.1);
    border-radius: 50%;
}

@keyframes bg_cir1 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, 60px);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes bg_cir2 {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(0, -60px);
    }
    100% {
        transform: translate(0, 0);
    }
}

.charge {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.charge > div {
    width: 100%;
}

.charge_con {
    max-width: 1740px;
    margin: 0 auto;
    position: relative;
    padding: 0 100px
}

.charge_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.charge .charge_slow,
.charge .charge_rapidity {
    width: 335px;
    height: 435px;
    padding-bottom: 70px;
    position: relative;
}

.charge .swiper-container {
    width: 100%;
    height: 100%;
}

.charge .box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.charge .box img {
    max-width: 100%;
    max-height: 100%;
}

.charge_cont {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.charge_cont button {
    width: 32px;
    height: 32px;
    background: url(../../images/web/page-arr.svg) no-repeat;
    background-size: contain;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
}

.charge_cont .charge_next {
    transform: rotate(180deg);
}

.charge_pagination {
    text-align: center;
    display: flex;
    padding: 0 10px;
}

.charge_pagination .swiper-pagination-bullet {
    margin: 0 5px;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    opacity: 1;
    background-color: #fff;
    border: 1px solid #ddd;
}

.charge_pagination .swiper-pagination-bullet-active {
    background-color: #F37321;
    border-color: #F37321;
}

.benefits ul {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
}

.benefits ul li {
    width: calc(33.33% - 26.66px);
}

.benefits ul li ~ li {
    margin-left: 40px;
}

.benefits ul li .img {
    text-align: center;
    padding-bottom: 20px;
    transition: 0.5s;
    position: relative;
}

.benefits ul li .img img {
    position: relative;
    bottom: 0;
    transition: 0.5s;
}

.benefits ul li .img span {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #F37321;
    padding: 10px 15px;
    color: #fff;
    font-size: 0.625rem;
    letter-spacing: 1.5px;
    font-weight: 300;
}

.benefits ul li.bf1 .img {
    background-color: #FBF3E8;
}

.benefits ul li.bf2 .img {
    background-color: #E6F6F6;
}

.benefits ul li.bf3 .img {
    background-color: #F4F4FD;
}

.benefits ul li:hover .img {
    background-color: #F37321;
}

.benefits ul li:hover .img img {
    bottom: 40px;
}

.benefits ul li dl {
    margin-top: 40px;
}

.benefits ul li dl dt {
    color: #272727;
    margin-bottom: 20px;
    font-size: 1.75rem;
}

.benefits ul li dl dd {
    font-size: 1rem;
    line-height: 1.5em;
    font-weight: 300;
}

svg {
    display: block;
}

.svg path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.svg circle {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.svg line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.svg text {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.svg tspan {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}

.svg path,
.svg polyline,
.svg circle,
.svg rect,
.svg line,
.svg text,
.svg tspan {
    transition: all 2s;
    transition-delay: 1.5s;
}

.active .svg path,
.active .svg polyline,
.active .svg circle,
.active .svg rect,
.active .svg line,
.active .svg text,
.active .svg tspan {
    stroke-dashoffset: 0 !important;
}

/*sub*/
.wrap {
    font-weight: 300;
    min-height: 100%;
}

.wrap .btn_area ul li a span,
.wrap .btn_area ul li button span,
.popup .btn_area ul li a span,
.popup .btn_area ul li button span {
    font-weight: 600;
}

.sub_top {
    padding-top: 56px;
}

.sub_top.m_type1 {
    margin-bottom: 60px;
}

.sub_top .svis {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 60px 0;
}

.sub_top.install .svis {
    background-image: url(../../images/web/install_vis.jpg);
}

.sub_top.notice .svis {
    background-image: url(../../images/web/notice_vis.jpg);
}

.sub_top.mypage .svis {
    background-image: url(../../images/web/mypage_vis.jpg);
}

.sub_top.infouse .svis {
    background-image: url(../../images/web/infouse_vis.jpg);
}

.sub_top .sub_tit {
    text-align: center;
    font-size: 2.25rem;
    font-weight: 300;
    color: #272727;
    line-height: 1.5em;
}

.sub_top .sub_tit.wh {
    color: #fff;
}

.content {
    padding: 60px 20px 120px;
    position: relative;
}

.content.top_none {
    padding-top: 0;
}

.content.bot {
    padding-bottom: 300px;
}

.tab {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 40px;
    position: relative;
}

.tab.tab8 {
    margin-bottom: 60px;
}

.tab.tab8 .m_sel {
    display: none;
}

.tab ul {
    display: flex;
    flex-wrap: wrap;
}

.tab ul li {
    border: 1px solid #ddd;
    flex-grow: 1;
    overflow: hidden;
}

.tab.tab2 ul li {
    width: 50%;
}

.tab.tab3 ul li {
    width: 33.33%;
}

.tab.tab8 ul li {
    width: 12.5%;
}

.tab ul li ~ li {
    border-left: none;
}

.tab ul li a {
    display: block;
    text-align: center;
    line-height: 55px;
    color: #000;
    background-color: #fff;
}

.tab ul li.on {
    border: 1px solid #F37321 !important;
    background-color: #F37321;
}

.tab ul li.on a {
    color: #fff;
    background-color: #F37321;
    font-weight: 600;
}

.tab.type1 li:first-child {
    border-radius: 4px 0px 0px 4px;
}

.tab.type1 li:last-child {
    border-radius: 0px 4px 4px 0px;
}

.top_ori {
    margin-bottom: 30px;
}

.top_ori i {
    color: #D32F2F;
    font-weight: 400;
    font-size: 1.25rem;
    font-style: normal;
    vertical-align: middle;
    padding-right: 3px;
}

.form_ori {
    margin-top: 8px;
    font-size: 0.75rem;
    padding-left: 20px;
}

.fo_btn {
    background-color: #fff;
    color: #F37321;
    font-weight: 600;
    border: 1px solid #F37321;
    border-radius: 4px;
    width: 100%;
    line-height: 48px;
    height: 50px;
    text-align: center;
    transition: 0.3s;
}

.fo_btn:hover {
    background-color: #F37321;
    color: #fff;
}

.con_tit {
    font-family: "Apple SD Gothic Neo";
    margin-bottom: 40px;
    color: #272727;
    font-size: 1.5rem;
    font-weight: 600;
    text-align: center;
}

.con_txt {
    color: #F37321;
    padding-left: 15px;
    position: relative;
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 30px;
}

.con_txt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -3.5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #F37321;
}

.__form {
    max-width: 750px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.__form dl {
    display: flex;
    align-items: center;
}

.__form dl ~ dl {
    margin-top: 20px;
}

.__form dl dt {
    width: 20%;
    color: #272727;
    font-weight: 400;
}

.__form dl dt i {
    color: #D32F2F;
    font-weight: 400;
    font-size: 1.25rem;
    font-style: normal;
    vertical-align: top;
    padding-left: 3px;
}

.__form dl dd {
    width: 80%;
}

.form_wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.form_wrap ~ .form_wrap {
    margin-top: 10px;
}

.form_wrap li {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.form_wrap.type1 li {
    width: 100%;
}

.form_wrap.type2 li:nth-child(1) {
    width: calc(100% - 110px);
}

.form_wrap.type2 li:nth-child(2) {
    width: 110px;
    padding-left: 10px;
}

.form_wrap.type3 li {
    width: calc(50% - 15px);
}

.form_wrap.type3 li:nth-child(2) {
    margin-left: 30px;
}

.form_wrap.type4 li:nth-child(1) {
    max-width: 180px;
    width: calc(100% - 110px);
}

.form_wrap.type4 li:nth-child(2) {
    width: 110px;
    padding-left: 10px;
}

.form_wrap.type5 li {
    width: calc(25% - 12px);
}

.form_wrap.type5 li.eq {
    width: 16px;
    justify-content: center;
}

.form_wrap.type6 li {
    width: calc(50% - 5px);
}

.form_wrap.type6 li ~ li {
    margin-left: 10px;
}

.form_wrap.type7 li:nth-child(1) {
    width: calc(100% - 260px);
}

.form_wrap.type7 li:nth-child(2) {
    width: 110px;
    padding-left: 10px;
}

.form_wrap.type7 li:nth-child(3) {
    width: 150px;
    padding-left: 10px;
}

.__form input[type="text"],
.__form input[type="password"], /*회원가입 입력페이지 css추가 kmj 20220420*/
.__form select,
.__form textarea {
    width: 100%;
    padding: 0 20px;
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
    resize: none;
}

.__form input[type="text"]::placeholder,
.__form select,
.__form textarea::placeholder {
    color: #aaa;
}

.__form textarea {
    line-height: 1.5em;
    height: 200px;
    padding: 10px 20px;
}

.__form input[type="text"]:disabled,
.__form input[type="file"]:disabled {
    background-color: #fff;
    opacity: 1;
}

.__form input[type="text"].dis {
    background-color: #F4F4F4;
}

.__form input[type="text"]:focus,
.__form select:focus,
.__form textarea:focus {
    border: 2px solid #272727;
}

.__form select {
    background: url(../../images/web/form-sel-icon.svg) no-repeat right 20px center;
    padding-right: 40px;
}

.__form .amount {
    display: flex;
    align-items: center;
    width: 100%;
}

.__form .amount strong {
    padding-right: 10px;
    color: #272727;
    font-weight: 400;
}

.__form .amount .amount_box {
    max-width: 222px;
    width: 100%;
}

.__form .amount span {
    padding-left: 10px;
}

.ch_box {
    display: flex;
    align-items: center;
    width: 18%;
}

.ch_box input[type=radio] {
    display: none;
}

.ch_box span {
    display: block;
    border: 1px solid #DDD;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    position: relative;
    transition: 0.2s;
}

.ch_box span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: #F37321;
    margin-top: -6px;
    margin-left: -6px;
    border-radius: 50%;
    opacity: 0;
    transition: 0.2s;
}

.ch_box input[type=radio]:checked + span {
    border-color: #F37321;
}

.ch_box input[type=radio]:checked + span::before {
    opacity: 1;
}

.ch_box p {
    padding-left: 10px;
}

.ch_box.box2 {
    width: 23%;
}

.__form .sel_box {
    width: 46%;
    align-items: center;
    padding-left: 5px;
    display: none;
}

.__form .sel_box.on {
    display: flex;
}

.__form .sel_box em {
    padding: 0 10px;
}

.__form .file_form {
    display: none;
}

.__form .num input[type=text] {
    width: 22.75%;
}

.__form .num em {
    width: 3%;
    font-size: 0.875rem;
    text-align: center;
}

/*220720 - 개인정보 동의 부분*/
.term_agree {
    margin-top: 80px;
}

.term_agree .tit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd;
}

.term_agree .tit p {
    color: #272727;
    font-size: 1.4rem;
    font-weight: 400;
}

.term_agree .tit button {
    border: none;
    background: url(../../images/web/form-sel-icon.svg) no-repeat right center;
    color: #444;
    padding-right: 20px;
}

.term_agree .txt {
    line-height: 1.5em;
    margin-bottom: 50px;
    display: none;
}

.term_agree .txt strong {
    color: #444;
    font-weight: 400;
    font-size: 1.25rem;
    display: block;
    margin-bottom: 10px;
}

.term_agree.open .txt {
    display: block;
}

.agree_btn strong {
    display: block;
    padding-left: 35px;
    color: #D32F2F;
    margin-top: 15px;
    font-size: 0.875rem;
    font-weight: 300;
}

.pa_top {
    padding-top: 160px;
}

/*//220720 - 개인정보 동의 부분*/

.list_tbl1 table {
    width: 100%;
    border-top: 2px solid #272727;
    table-layout: fixed;
}

.list_tbl1 table tr {
    border-bottom: 1px solid #ddd;
    position: relative;
}

.list_tbl1 table th {
    color: #272727;
    font-weight: 400;
    padding: 20px 5px;
    text-align: center;
}

.list_tbl1 table td {
    padding: 20px 5px;
    text-align: center;
}

.list_tbl1 table tfoot {
    background-color: #F9F9F9;
    position: relative;
}

.list_tbl1 table tfoot tr {
    border-bottom: none;
}

.list_tbl1 table tfoot td {
    color: #272727;
    font-weight: 400;
    border-top: 1px solid #272727;
}

.list_tbl1 table td.tit {
    text-align: left;
    padding-left: 20px;
}

.list_tbl1 table td.tit a {
    display: flex;
}

.list_tbl1 table td.tit p {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list_tbl1 table td.tit span {
    color: #F37321;
    margin-left: 5px;
}

.list_tbl1 table .tbl_btn_area {
    padding: 13px 5px;
}

.list_tbl1 table .changes {
    color: #F37321;
    font-weight: 400;
}

.list_tbl1 table .remaining {
    color: #533c3c;
    font-weight: 600;
}

.list_tbl1 table .or {
    color: #F37321
}

.list_tbl1 table td .tbl1_tit {
    color: #272727;
    font-weight: 400;
    padding-right: 10px;
    display: inline-block;
    width: 58px;
}

.list_tbl1 table td .tbl1_tit.line {
    display: block;
    margin-bottom: 4px;
    padding-right: 0;
}

.list_tbl1 table .__q {
    cursor: pointer;
}

.list_tbl1 table .__a {
    background-color: #F9F9F9;
    display: none;
}

.list_tbl1 table .__a td {
    padding: 5px 0;
}

.list_tbl1 table .__a dl {
    display: flex;
    padding: 25px 0;
    position: relative;
}

.list_tbl1 table .__a dl ~ dl::before {
    content: "";
    border-top: 1px dashed #ccc;
    position: absolute;
    width: calc(100% - 80px);
    top: 0;
    left: 40px;
}

.list_tbl1 table .__a dl dt {
    width: 10%;
    color: #272727;
    font-weight: 400;
    line-height: 1.3em;
}

.list_tbl1 table .__a dl dd {
    width: 90%;
    text-align: left;
    padding-left: 20px;
    line-height: 1.3em;
}

.list_tbl1 table .__a dl dd strong {
    color: #272727;
    font-weight: 400;
    padding-right: 5px;
}

.list_tbl1 table .__a dl dd .modify_area {
    margin-top: 15px;
    display: flex;
}

.list_tbl1 table .__a dl dd .modify_area button {
    background: none;
    border: none;
    font-size: 0.875rem;
    color: #666;
    line-height: 1;
}

.list_tbl1 table .__a dl dd .modify_area button ~ button {
    border-left: 1px solid #ddd;
    padding-left: 5px;
    margin-left: 5px;
}

.list_tbl1 table .__a.on {
    display: table-row;
}

.list_tbl2 table {
    width: 100%;
}

.list_tbl2 table th {
    background-color: #F9F9F9;
    color: #272727;
    font-weight: 400;
    border-bottom: 1px solid #ddd;
    text-align: left;
    padding: 20px 0 20px 30px;
    line-height: 1.2em;
}

.list_tbl2 table th i {
    color: #D32F2F;
    font-weight: 400;
    font-size: 1.25rem;
    font-style: normal;
    vertical-align: top;
    padding-left: 3px;
}

.list_tbl2 table tr:first-child th {
    border-top: 1px solid #ddd;
}

.list_tbl2 table td {
    border-bottom: 1px solid #ddd;
    text-align: left;
    padding: 10px 0 10px 30px;
    line-height: 1.2em;
    color: #272727;
}

.list_tbl2 table tr:first-child td {
    border-top: 1px solid #ddd;
}

.list_tbl2 table td b {
    font-weight: 400;
    color: #272727;
}

.list_tbl2 table .col1 {
    width: 170px;
}

.list_tbl2 table td .tit {
    padding-left: 5px;
    color: #666;
    font-weight: 200;
}

.list_tbl2 table td .tit strong {
    color: #00A961;
    font-weight: 600;
    padding: 0 5px;
}

.list_tbl2 .tbl_wrap {
    display: flex;
}

.list_tbl2 .tbl_wrap.btn {
    width: 70px;
}

.list_tbl2 .__form {
    max-width: 610px;
    margin: 0;
}

.list_tbl2 .__form.max {
    max-width: none;
}

table .tbl_btn_area .tbl_btn {
    border: none;
    color: #fff;
    font-weight: 300;
    line-height: 28px;
    border-radius: 20px;
    font-size: 0.875rem;
}

table .tbl_btn_area .tbl_btn.bl {
    width: 60px;
    background-color: #272727;
}

table .tbl_btn_area .tbl_btn.or {
    width: 100px;
    background-color: #F37321;
}

.tbl_search {
    margin-bottom: 20px;
}

.tbl_search > ul {
    display: flex;
    justify-content: flex-end;
}

.tbl_search > ul > li {
    display: flex;
}

.tbl_search > ul > li ul {
    display: flex;
    width: 100%;
    align-items: center;
}

.tbl_search > ul > li input[type = text],
.tbl_search > ul > li select {
    height: 50px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 20px;
    width: 100%;
    color: #666;
    font-weight: 200;
}

.tbl_search > ul > li select {
    background: url(../../images/web/form-sel-icon.svg) no-repeat right 20px center;
}

.tbl_search > ul > li.date_btn {
    width: 325px;
    padding-left: 20px;
}

.tbl_search > ul > li.date_btn li {
    width: 25%;
}

.tbl_search > ul > li.date_btn li button {
    width: 100%;
    background-color: #fff;
    border: 1px solid #ddd;
    height: 100%;
    height: 50px;
    color: #272727;
}

.tbl_search > ul > li.date_btn li ~ li button {
    border-left: none;
}

.tbl_search > ul > li.date_btn li:first-child button {
    border-radius: 4px 0 0 4px;
}

.tbl_search > ul > li.date_btn li:last-child button {
    border-radius: 0 4px 4px 0;
}

.tbl_search > ul > li.date_btn li.on button {
    border: 1px solid #272727;
    font-weight: 600;
}

.tbl_search > ul > li.date_sel {
    width: 330px;
    padding-left: 10px;
}

.tbl_search > ul > li.date_sel li.start,
.tbl_search > ul > li.date_sel li.end {
    width: calc(50% - 10px);
}

.tbl_search > ul > li.date_sel li input[type = text] {
    padding: 0 10px;
    padding-left: 55px;
    background-repeat: no-repeat;
    background-position: 20px center;
    letter-spacing: -1.5px;
}

.tbl_search > ul > li.date_sel li.start input[type = text] {
    background-image: url(../../images/web/data-icon1.svg);
}

.tbl_search > ul > li.date_sel li.end input[type = text] {
    background-image: url(../../images/web/data-icon2.svg);
}

.tbl_search > ul > li.date_sel li.start input[type = text]::placeholder {
    color: #aaa;
}

.tbl_search > ul > li.date_sel li em {
    width: 20px;
    display: block;
    text-align: center;
}

.tbl_search > ul > li.submit_btn {
    width: 80px;
    padding-left: 10px;
}

.tbl_search > ul > li.down_btn {
    width: 70px;
    padding-left: 20px;
}

.tbl_search > ul > li.down_btn button {
    width: 100%;
    height: 50px;
    border: 1px solid #272727;
    border-radius: 50%;
    background: url(../../images/web/down-icon.svg) no-repeat center;
}

.tbl_search > ul > li.inquiry_btn {
    width: 120px;
    padding-left: 20px;
}

.tbl_search > ul > li.inquiry_btn button {
    width: 100%;
    color: #fff;
    background-color: #F37321;
    border: none;
    border-radius: 4px;
    height: 50px;
}

.tbl_search > ul > li.sch_area1 {
    width: 140px;
}

.tbl_search > ul > li.sch_area2 {
    width: 280px;
}

.tbl_search > ul > li.sch_area3 {
    width: 160px;
}

.tbl_search > ul > li.sch_area4 {
    width: 410px;
    padding-left: 10px;
}

.pagination {
    margin-top: 30px;
}

.pagination ul {
    display: flex;
    justify-content: center;
}

.pagination ul li {
    margin: 0 3px;
}

.pagination ul li a {
    display: block;
    width: 40px;
    line-height: 40px;
    height: 40px;
    text-align: center;
    font-size: 0.875rem;
}

.pagination ul li.on a {
    color: #F37321;
    font-weight: 600;
}

.pagination ul li.first {
    background: url(../../images/web/page-arr2.svg) no-repeat;
    background-size: contain;
    border: 1px solid #ddd;
    border-radius: 50%;
}

.pagination ul li.prev {
    background: url(../../images/web/page-arr.svg) no-repeat;
    background-size: contain;
    border: 1px solid #ddd;
    border-radius: 50%;
}

.pagination ul li.next {
    background: url(../../images/web/page-arr.svg) no-repeat;
    background-size: contain;
    border: 1px solid #ddd;
    border-radius: 50%;
    transform: rotate(180deg);
}

.pagination ul li.last {
    background: url(../../images/web/page-arr2.svg) no-repeat;
    background-size: contain;
    border: 1px solid #ddd;
    border-radius: 50%;
    transform: rotate(180deg);
}

.search_area {
    max-width: 650px;
    margin: 0 auto;
    margin-top: 40px;
}

.search_area ul {
    display: flex;
}

.search_area ul li ~ li {
    margin-left: 10px;
}

.search_area ul li input[type=text],
.search_area ul li select {
    border: 1px solid #DDD;
    border-radius: 4px;
    height: 50px;
    padding: 0 20px;
    width: 100%;
    outline: none;
}

.search_area ul li input[type=text]::placeholder {
    color: #aaa
}

.search_area ul li select {
    color: #666;
    background: url(../../images/web/form-sel-icon.svg) no-repeat right 20px center;
    padding-right: 40px;
}

.search_area ul li:nth-child(1) {
    width: 160px;
}

.search_area ul li:nth-child(2) {
    width: calc(100% - 250px);
}

.search_area ul li:nth-child(3) {
    width: 70px;
}

.menu_tab ul::after {
    content: "";
    display: block;
    clear: both;
}

.menu_tab ul li {
    float: left;
    position: relative;
}

.menu_tab.tab4 ul li {
    width: 25%;
}

.menu_tab ul li a {
    display: block;
    text-align: center;
    line-height: 55px;
    color: #272727;
    border-bottom: 1px solid #272727;
}

.menu_tab ul li a em {
    padding: 0 2px;
    opacity: 0.7;
}

.menu_tab ul li.on::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background-color: #F37321;
}

.menu_tab ul li.on a {
    font-weight: 600;
    color: #F37321;
}

.faq_list dl {
    border-bottom: 1px solid #ddd;
}

.faq_list dl dt {
    padding: 30px 120px;
    position: relative;
    cursor: pointer;
}

.faq_list dl dt::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    background: url(../../images/web/q-icon.svg) no-repeat center;
    background-size: contain;
}

.faq_list dl dt::after {
    content: "";
    position: absolute;
    right: 40px;
    top: 50%;
    margin-top: -7px;
    width: 14px;
    height: 14px;
    background: url(../../images/web/faq-icon1.svg) no-repeat center;
    background-size: contain;
}

.faq_list dl dt p {
    line-height: 1.3em;
}

.faq_list dl.open dt::after {
    background-image: url(../../images/web/faq-icon2.svg);
}

.faq_list dl dd {
    background-color: #F9F9F9;
    padding: 30px 120px;
    border-top: 1px solid #ddd;
    line-height: 1.5em;
    position: relative;
    display: none;
}

.faq_list dl dd::before {
    content: "";
    position: absolute;
    left: 40px;
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
    background: url(../../images/web/a-icon.svg) no-repeat center;
    background-size: contain;
}

.faq_list dl.open dd {
    display: block;
}

.event ul::after {
    content: "";
    display: block;
    clear: both;
}

.event ul li {
    float: left;
    width: calc(33.33% - 26.66px);
    margin-left: 40px;
}

.event ul li:nth-child(3n + 1) {
    margin-left: 0;
}

.event ul li:nth-child(n+4) {
    margin-top: 30px;
}

.event ul li a {
    display: block;
    padding-bottom: 30px;
}

.event_img {
    display: block;
    padding-bottom: 71%;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.event_img span {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: 1.5s;
}

.event ul li a:hover .event_img span {
    transform: scale(1.1);
}

.event_img.end {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.event_info {
    margin-top: 20px;
}

.event_info .event_tit {
    display: block;
    margin-bottom: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.25rem;
    color: #272727;
    font-weight: 400;
}

.event_info .event_term {
    display: flex;
    align-items: center;
}

.event_info .event_term strong {
    color: #F37321;
    font-size: 0.875rem;
    font-weight: 300;
    padding-right: 10px;
    font-family: 'hanwhaGothic';
}

.event_info .event_term span {
    font-size: 0.875rem;
    font-weight: 300;
    font-family: 'hanwhaGothic';
}

.board_view {
    margin-bottom: 55px;
}

.board_view .view_top {
    padding: 40px;
    border-top: 2px solid #272727;
    border-bottom: 1px solid #ddd;
}

.board_view .view_top .tit {
    color: #272727;
    margin-bottom: 20px;
    font-size: 1.5rem;
    font-weight: 400;
}

.board_view .view_top p {
    display: flex;
}

.board_view .view_top p .date {
    margin-right: 20px;
    display: block;
}

.board_view .view_top p .date strong {
    color: #272727;
    font-weight: 400;
    padding-right: 5px;
    font-size: 0.875rem;
}

.board_view .view_top p .date span {
    font-size: 0.875rem;
}

.board_view .view_con {
    padding: 40px;
}

.board_view .view_con .txt {
    line-height: 1.75em;
}

.board_view .view_con img + .txt {
    margin-top: 40px;
}

.board_view .view_bot {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: 0 50px;
}

.board_view .view_bot a {
    display: inline-block;
    line-height: 62px;
    font-size: 0.875rem;
    position: relative;
}

.board_view .view_bot a::before {
    content: "";
    width: 10px;
    height: 6px;
    position: absolute;
    background: url(../../images/web/form-sel-icon.svg) no-repeat;
    background-size: contain;
    margin-top: -3px;
}

.board_view .view_bot a.prev {
    padding-left: 25px;
}

.board_view .view_bot a.prev::before {
    transform: rotate(90deg);
    left: 0;
    top: 50%;
}

.board_view .view_bot a.next {
    padding-right: 25px;
}

.board_view .view_bot a.next::before {
    transform: rotate(-90deg);
    right: 0;
    top: 50%;
}

.card_issued {
    padding-bottom: 80px;
    border-bottom: 2px solid #ddd;
}

.card_issued ul::after {
    content: "";
    display: block;
    clear: both;
}

.card_issued ul li {
    float: left;
    width: 25%;
    text-align: center;
    position: relative;
}

.card_issued ul li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-right: -16px;
    width: 32px;
    height: 33px;
    background: url(../../images/web/bl-arr.png) no-repeat center;
    background-size: contain;
}

.card_issued ul li:last-child::before {
    display: none;
}

.card_issued ul li em {
    display: block;
    color: #F37321;
    margin-bottom: 20px;
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 1.5px;
}

.card_issued ul li p {
    color: #272727;
    font-size: 1.5rem;
    font-weight: 400;
}

.card_issued ul li i {
    display: block;
    height: 155px;
    background-repeat: no-repeat;
    background-position: center;
}

.card_issued ul li.step1 i {
    background-image: url(../../images/web/joinchoice-icon1.svg);
}

.card_issued ul li.step2 i {
    background-image: url(../../images/web/card-num.svg);
}

.card_issued ul li.step3 i {
    background-image: url(../../images/web/card-sign.svg);
}

.card_issued ul li.step4 i {
    background-image: url(../../images/web/card-mem.svg);
}

.card_issued ul li .post_icon {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    padding-top: 30px;
    background: url(../../images/web/truck-icon.svg) no-repeat 60% top;
    text-align: center;
    transform: translate(50%, -120%);
}

.card_issued ul li .post_icon strong {
    color: #F37321;
    line-height: 1.5em;
}

.card_issued ul li .post_icon span {
    font-size: 0.875rem;
    line-height: 1.5em;
}

.use_step {
    padding: 80px 0 40px;
}

.use_step dl {
    display: flex;
    align-items: center;
}

.use_step dl ~ dl {
    margin-top: 20px;
}

.use_step dl dt {
    width: 180px;
    height: 180px;
    background-color: #f4f4f4;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.use_step dl dt p strong {
    display: block;
    color: #272727;
    font-size: 1.25rem;
    margin-bottom: 13px;
    font-weight: 400;
}

.use_step dl dt p span {
    display: block;
    color: #272727;
    font-weight: 400;
}

.use_step dl dd {
    padding: 0 60px;
    flex-grow: 1;
}

.use_step dl dd ul::after {
    content: "";
    display: block;
    clear: both;
}

.use_step dl dd ul li {
    float: left;
    position: relative;
    width: 33.33%;
    text-align: center;
}

.use_step dl dd ul li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    margin-right: -16px;
    margin-top: -16px;
    width: 32px;
    height: 33px;
    background: url(../../images/web/bl-arr.png) no-repeat center;
    background-size: contain;
}

.use_step dl dd ul li:last-child:before {
    display: none;
}

.use_step dl dd ul li p {
    color: #272727;
    font-weight: 400;
    padding-top: 110px;
    background-repeat: no-repeat;
    background-position: center top;
}

.use_step dl dd ul li.step1 p {
    background-image: url(../../images/web/card-cho1.svg);
}

.use_step dl dd ul li.step2 p {
    background-image: url(../../images/web/card-cho2.svg);
}

.use_step dl dd ul li.step3 p {
    background-image: url(../../images/web/card-payment1.svg);
}

.use_step dl dd ul li.step4 p {
    background-image: url(../../images/web/card-payment2.svg);
}

.use_step dl dd ul li.step5 p {
    background-image: url(../../images/web/connector.svg);
}

.joinchoice {
    display: table;
    width: 100%;
    max-width: 870px;
    margin: 0 auto;
}

.joinchoice .box {
    padding: 40px 0 55px;
    display: table-cell;
    vertical-align: top;
    text-align: center;
}

.joinchoice .box:last-child {
    border-left: 1px solid #ddd;
}

.joinchoice .box .ico {
    margin-bottom: 40px;
}

.joinchoice .jc_tit {
    color: #272727;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 30px;
}

.joinchoice .jc_txt {
    margin-bottom: 40px;
    line-height: 1.5em;
}

.joinchoice .group_go {
    margin-top: 30px;
}

.joinchoice .group_go a {
    color: #F37321;
    padding-right: 20px;
    background: url(../../images/web/or-arr.svg) no-repeat right center;
    font-weight: 400;
}

.login {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.login .log_wrap {
    margin-bottom: 50px;
}

.log_btn_area {
    margin-bottom: 50px;
    padding-bottom: 50px;
    border-bottom: 1px solid #ddd;
}

.log_btn_area p {
    margin-bottom: 20px;
}

.log_btn_area ul li ~ li {
    margin-top: 15px;
}

.log_btn_area ul li a {
    display: block;
    width: 100%;
    max-width: 285px;
    margin: 0 auto;
    line-height: 54px;
    border-radius: 40px;
    font-weight: 600;
}

.log_btn_area ul li a span {
    display: inline-block;
    height: 100%;
}

.log_btn_area ul li.log_btn a {
    color: #fff;
    background-color: #F37321;
    border: 1px solid #F37321;
}

.log_btn_sns p {
    margin-bottom: 20px;
}

.log_btn_sns ul {
    display: flex;
    justify-content: center;
}

.log_btn_sns ul li ~ li {
    margin-left: 20px;
}

.log_btn_sns ul li a {
    display: block;
    width: 56px;
    height: 56px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.log_btn_sns ul li.kakao_btn a {
    background-color: #FFDF01;
    background-image: url(../../images/web/kakao-icon.svg);
}

.log_btn_sns ul li.naver_btn a {
    background-color: #36AC37;
    background-image: url(../../images/web/naver-icon.svg);
}

.log_btn_sns ul li.apple_btn a {
    background-color: #050708;
    background-image: url(../../images/web/apple-icon.svg);
}

.log_btn_sns ul li.google_btn a {
    border: 1px solid #ddd;
    background-image: url(../../images/web/google-icon.svg);
}

.lab_chk label {
    display: inline-flex;
    align-items: center;
}

.lab_chk input[type='checkbox'] {
    display: none;
}

.lab_chk span {
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    display: inline-block;
    width: 24px;
    height: 24px;
    transition: 0.3s;
}

.lab_chk input[type='checkbox']:checked ~ span {
    border-color: #F37321;
    background-image: url(../../images/web/lab_chk.svg);
}

.lab_chk p {
    color: #000;
    padding-left: 10px;
    line-height: 1.3em;
}

.lab_chk p strong {
    font-weight: 600;
    padding-right: 5px;
}

.agree {
    margin-bottom: 40px;
}

.agree_box {
    margin-bottom: 20px;
}

.agree_box .lab {
    background-color: #F9F9F9;
    border: 1px solid #ddd;
    padding: 15px 30px;
}

.agree_box .area {
    border: 1px solid #ddd;
    border-top: none;
    height: 180px;
    padding: 20px;
    font-size: 0.875rem;
    line-height: 1.429em;
    overflow-y: auto;
    word-break: break-all;
}

.agree_box .area table th,
.agree_box .area table td {
    padding: 5px 10px;
}

.agree_box .area table,
.agree_box .area th,
.agree_box .area td {
    border: 1px solid #666;
    border-collapse: collapse;
}

.agree_box .area table thead tr th {
    text-align: center;
}

.result {
    text-align: center;
    margin-bottom: 40px;
}

.result dl {
    margin-top: 40px;
}

.result dl dt {
    color: #272727;
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3em;
}

.result dl dd {
    line-height: 1.5em;
}

.result dl dd strong {
    color: #F37321;
}

.__form.gr_sch {
    max-width: 640px;
}

.__form.gr_sch dl dt {
    width: 13%;
}

.__form.gr_sch dl dd {
    width: 87%;
}

.__form.gr_sch dl dd .form_wrap.type2 li:nth-child(1) {
    width: calc(100% - 80px);
}

.__form.gr_sch dl dd .form_wrap.type2 li:nth-child(2) {
    width: 80px;
}

.group_search {
    border-top: 2px solid #272727;
    margin-top: 30px;
}

.group_search ul li {
    padding: 20px;
    border-bottom: 1px solid #ddd;
}

.group_search .lab_chk p {
    color: #666;
}

.group_search .lab_chk input[type='checkbox']:checked ~ p {
    color: #F37321;
    font-weight: 600;
}

.or_box {
    background-color: #FFF5EE;
    padding: 40px;
}

.or_box.gr_regi {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.or_box.gr_regi p {
    padding-left: 30px;
    color: #D32F2F;
    line-height: 1.5em;
    background: url(../../images/web/regi-icon.svg) no-repeat left center;
}

.or_box.form_or {
    padding: 20px 40px;
    margin-top: 0;
    margin-bottom: 40px;
    max-width: 100%;
    text-align: center;
}

.or_box.form_or p {
    display: inline-block;
}

.or_box.form_or p a {
    text-decoration: underline;
    text-underline-position: under;
}

.co_box {
    border: 1px solid #EBD4C5;
    border-radius: 5px;
    background-color: #FFFCFB;
    height: 100%;
    overflow: hidden;
}

.co_box .co_top {
    border-bottom: 1px solid #EBD4C5;
    background-color: #FFEEE1;
    color: #272727;
    font-weight: 400;
    text-align: center;
    font-size: 1.125rem;
    padding: 15px 20px;
}

.co_box .co_bot {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 49px);
}

.co_box .co_bot p {
    color: #272727;
    font-size: 2.5rem;
}

.co_box .co_bot p strong {
    font-weight: 600;
    color: #F37321;
}

.co_box .co_bot table th {
    color: #272727;
    font-weight: 400;
    padding: 5px 4px;
}

.co_box .co_bot table th strong {
    font-weight: 600;
}

.co_box .co_bot table td {
    color: #272727;
    padding: 5px 4px;
}

.co_box .co_bot table td strong {
    font-weight: 600;
    font-size: 1.5rem;
    color: #F37321;
    vertical-align: middle;
    padding: 0 3px;
    padding-bottom: 2px;
    display: inline-block;
}

.co_box_area {
    margin-bottom: 40px;
}

.co_box_area ul {
    display: flex;
    justify-content: space-between;
}

.co_box_area.box1 ul li {
    width: 100%;
}

.co_box_area.box1 .co_box .co_bot {
    height: 100%;
    padding: 40px 20px;
}

.co_box_area.box2 ul li {
    width: calc(50% - 10px);
}

.charge_box {
    display: flex;
}

.charge_box .lef_box {
    width: calc(50% - 20px);
    margin-right: 40px;
}

.charge_box .rig_box {
    width: calc(50% - 20px);
}

.charge_box .rig_box .tit {
    color: #272727;
    font-size: 1.5rem;
    padding: 40px 0;
    text-align: center;
}

.charge_box .list_tbl2 table td {
    color: #666;
}

.charge_box .list_tbl2 table tr:first-child th,
.charge_box .list_tbl2 table tr:first-child td {
    border-top: 1px solid #272727;
}

.charge_gauge p {
    text-align: center;
    margin: 25px 0 40px;
    color: #272727;
    font-size: 2rem;
    font-weight: 600;
}

.charge_gauge .ball {
    height: 320px;
    width: 320px;
    background: #272727;
    border-radius: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    isolation: isolate;
}

.charge_gauge .ball .water {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    height: 0%;
}

.charge_gauge .ball .water_wave {
    width: 200%;
    position: absolute;
    bottom: 100%;
    margin-bottom: -1px;
}

.charge_gauge .ball .water_wave_back {
    right: 0;
    fill: #90E900;
    animation: wave-back 2.8s infinite linear;
}

.charge_gauge .ball .water_wave_front {
    left: 0;
    fill: #90E900;
    animation: wave-front 1.4s infinite linear;
}

.charge_gauge .ball .water_bg1 {
    background: linear-gradient(0deg, #00C974 37.66%, #90E900 100%);
    width: 100%;
    height: 100%;
    opacity: 0.4;
    position: absolute;
    left: 0;
    bottom: 0;
}

.charge_gauge .ball .water_bg2 {
    background: linear-gradient(0deg, #00C974 37.66%, #90E900 100%);
    width: 100%;
    height: 100%;
    opacity: 0.9;
    position: absolute;
    left: 0;
    bottom: 0;
}

.charge_gauge .ball .ball_txt {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.charge_gauge .ball .percent ul {
    position: relative;
}

.charge_gauge .ball .percenticon {
    height: 36px;
    background: url(../../images/web/percent-icon.png) no-repeat center;
    margin-bottom: 10px;
}

.charge_gauge .ball .percentNum {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}

.charge_gauge .ball .percentNum span {
    font-size: 4rem;
    margin-right: 5px;
}

.charge_gauge .ball .percenttxt {
    color: #fff;
    font-size: 0.875rem;
    margin-top: 20px;
    font-weight: 600;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
    letter-spacing: 1px;
}

@keyframes wave-front {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}

@keyframes wave-back {
    0% {
        right: 0;
    }
    100% {
        right: -100%;
    }
}

.setting {
    max-width: 640px;
    margin: 0 auto;
}

.setting dl ~ dl {
    margin-top: 20px;
}

.setting dl dt {
    background-color: #F9F9F9;
    color: #000;
    padding: 20px 30px;
    border: 1px solid #ddd;
    border-radius: 5px 5px 0 0;
}

.setting dl dd {
    border: 1px solid #ddd;
    border-top: none;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 0 0 5px 5px;
}

.setting dl dd p {
    padding-right: 10px;
}

.setting dl dd p strong {
    display: block;
    color: #272727;
    font-weight: 400;
    font-size: 1.25rem;
}

.setting dl dd p span {
    display: block;
    font-size: 0.875rem;
    margin-top: 10px;
    line-height: 1.2em;
}

.setting dl dd .app_ver {
    color: #F37321;
    font-size: 1.25rem;
}

.setting .set_btn {
    background-color: #ddd;
    width: 56px;
    height: 32px;
    border-radius: 30px;
    padding: 2px;
    overflow: hidden;
    transition: 0.3s;
    flex-shrink: 0;
}

.setting .set_btn button {
    position: relative;
    border: none;
    width: 100%;
    height: 100%;
    background: none;
}

.setting .set_btn button .handle {
    display: block;
    width: 28px;
    height: 28px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
}

.setting .set_btn.on button .handle {
    left: 100%;
    margin-left: -28px;
    box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.2);
}

.setting .set_btn.on {
    background-color: #F37321;
}

.notice_box {
    border: 10px solid #EBEBEB;
    text-align: center;
    padding: 80px 0 70px;
}

.notice_box p {
    margin-top: 40px;
    color: #666;
    font-size: 1.5rem;
    line-height: 1.5em;
}

.notice_box p span {
    color: #F37321;
}

/*충전소 검색 - start*/
.chk_box input[type=radio] {
    display: none;
}

.chk_box .box {
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    line-height: 46px;
    height: 48px;
    text-align: center;
}

.chk_box .box span {
    color: #666;
    font-size: 0.875rem;
}

.chk_box input[type=radio]:checked + .box {
    border: 2px solid #F37321;
    line-height: 44px;
}

.chk_box input[type=radio]:checked + .box span {
    color: #000;
}

/* bsc-srtart */
.chk_box input[type=checkbox] {
    display: none;
}

.chk_box input[type=checkbox]:checked + .box {
    border: 2px solid #F37321;
    line-height: 44px;
}

.chk_box input[type=checkbox]:checked + .box span {
    color: #000;
}

/* bsc-end */
.chk_box.operator1 .box {
    background-image: url(../../images/web/sch-logo1.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.chk_box.operator2 .box {
    background-image: url(../../images/web/sch-logo2.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.chk_box.operator3 .box {
    background-image: url(../../images/web/sch-logo3.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.chk_box.operator1 input[type=radio]:checked + .box {
    background-image: url(../../images/web/sch-logo-on1.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.chk_box.operator2 input[type=radio]:checked + .box {
    background-image: url(../../images/web/sch-logo-on2.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.chk_box.operator3 input[type=radio]:checked + .box {
    background-image: url(../../images/web/sch-logo-on3.svg);
    background-repeat: no-repeat;
    background-position: center;
}

/* bsc-srtart */
.chk_box.operator1 input[type=checkbox]:checked + .box {
    background-image: url(../../images/web/sch-logo-on1.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.chk_box.operator2 input[type=checkbox]:checked + .box {
    background-image: url(../../images/web/sch-logo-on2.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.chk_box.operator3 input[type=checkbox]:checked + .box {
    background-image: url(../../images/web/sch-logo-on3.svg);
    background-repeat: no-repeat;
    background-position: center;
}

/* bsc-end */
.sch {
    height: 100%;
    width: 100%;
    padding-top: 55px;
    position: relative;
    overflow: hidden;
}

.sch.off .sch_area {
    left: -360px;
}

.sch.off .sch_area .sch_btn::before {
    transform: rotate(180deg);
}

.sch.active .sch_area .info {
    left: 100%;
}

.sch.active .sch_area .sch_btn {
    left: 200%;
}

.sch_area {
    height: 100%;
    width: 360px;
    padding-top: 55px;
    position: fixed;
    top: 0;
    left: 0;
    transition: 0.3s;
    z-index: 40;
}

.sch_area .sec {
    background-color: #f4f4f4;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 15;
}

.sch_area .sec .top {
    padding: 30px 20px 40px;
}

.sch_area .sec .top .head {
    display: flex;
}

.sch_area .sec .top .head input[type=text] {
    border: 1px solid #ddd;
    border-right: none;
    border-radius: 4px 0 0 4px;
    height: 48px;
    padding-left: 20px;
    outline: none;
    width: calc(100% - 48px);
    font-weight: 300;
}

.sch_area .sec .top .head .clear {
    width: 40px;
    border: none;
    background: #fff url(../../images/web/search-close.svg) no-repeat center;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    display: none;
}

.sch_area .sec .top .head input[type=text]:valid {
    width: calc(100% - 88px);
}

.sch_area .sec .top .head input[type=text]:valid ~ .clear {
    display: block;
}

.sch_area .sec .top .head .submit {
    width: 48px;
    border: none;
    border-radius: 0 4px 4px 0;
    background: #F37321 url(../../images/web/search-wh.svg) no-repeat center;
}

.sch_area .sec .top .ft {
    margin-top: 20px;
}

.sch_area .sec .top .ft p {
    color: #272727;
    font-size: 0.75rem;
    margin-bottom: 10px;
}

.sch_area .sec .top .ft ul.hz {
    display: flex;
}

.sch_area .sec .top .ft ul.hz li ~ li {
    margin-left: 10px;
}

.sch_area .sec .top .ft ul.hz label {
    display: block;
}

.sch_area .sec .top .ft ul.hz2 li {
    width: calc(50% - 10px);
}

.sch_area .sec .top .ft ul.hz3 li {
    width: calc(33.33% - 7px);
}

.sch_area .sec .top .ft .lg li ~ li {
    margin-top: 10px;
}

.sch_area .sec .top .ft .lg li select {
    color: #aaa;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 20px;
    width: 100%;
    height: 48px;
    background: #fff url(../../images/web/form-sel-icon.svg) no-repeat right 20px center;
    font-weight: 300;
}

.sch_area .sec .top .lab_chk p {
    font-size: 0.875rem;
}

.sch_area .sec .bot {
    flex-grow: 1;
    height: 0;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
    border-radius: 24px 24px 0px 0px;
}

.sch_area .sec .bot .tab_list {
    margin-bottom: 10px;
    padding: 0 20px;
}

.sch_area .sec .bot .tab_list ul {
    display: flex;
}

.sch_area .sec .bot .tab_list ul li {
    width: 33.33%;
    border: 1px solid #ddd;
    overflow: hidden;
}

.sch_area .sec .bot .tab_list ul li ~ li {
    border-left: none;
}

.sch_area .sec .bot .tab_list ul li:nth-child(1) {
    border-radius: 4px 0px 0px 4px;
}

.sch_area .sec .bot .tab_list ul li:nth-child(3) {
    border-radius: 0px 4px 4px 0px;
}

.sch_area .sec .bot .tab_list ul li button {
    display: block;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    height: 40px;
    font-size: 0.75rem;
    color: #666;
}

.sch_area .sec .bot .tab_list ul li.on button {
    background-color: #F37321;
    color: #fff;
}

.sch_area .sec .bot .tab_con {
    overflow-y: auto;
    height: 100%;
    padding: 20px;
}

.sch_area .sec .bot .tab_con > ul {
    height: 100%;
}

.sch_area .sec .bot .tab_con > ul > li {
    display: none;
    height: 100%;
}

.sch_area .sec .bot .tab_con > ul > li.on {
    display: block;
}

.sch_area .sec .bot .tab_con::-webkit-scrollbar {
    width: 6px;
}

.sch_area .sec .bot .tab_con::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 10px;
}

.sch_area .sec .bot .tab_con::-webkit-scrollbar-track {
    background-color: #f7f7f7;
}

.sch_area .sec .notview {
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sch_area .sec .notview span {
    color: #aaa;
    padding-top: 70px;
    background: url(../../images/web/ico-dot.png) no-repeat center top;
}

.sch_area .sec .bot .area_list ul li {
    border: 1px solid rgba(0, 0, 0, 0);
    border-bottom: 1px solid #ddd;
}

.sch_area .sec .bot .area_list ul li.on {
    background-color: #FFF3EB;
    border: 1px solid #EBD4C5;
    border-radius: 4px;
}

.sch_area .sec .bot .area_list ul li button {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 0;
}

.sch_area .sec .bot .area_list dl {
    display: flex;
    align-items: center;
}

.sch_area .sec .bot .area_list dl dt strong {
    display: block;
    padding: 6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.sch_area .sec .bot .area_list dl dt strong span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 3px solid #fff;
    color: #fff;
    font-size: 0.875rem;
    line-height: 30px;
    font-weight: 300;
}

.sch_area .sec .bot .area_list dl dt.blue strong {
    background-color: rgba(50, 100, 233, 0.1);
}

.sch_area .sec .bot .area_list dl dt.blue strong span {
    background-color: #3264E9;
    box-shadow: 0px 0px 4px rgba(50, 100, 233, 0.5);
}

.sch_area .sec .bot .area_list dl dt.green strong {
    background-color: rgba(0, 201, 116, 0.1);
}

.sch_area .sec .bot .area_list dl dt.green strong span {
    background-color: #00C974;
    box-shadow: 0px 0px 4px rgba(0, 201, 116, 0.5);
}

/* 2022.06.15 BSC 충전소 목록 gray, orange 누락 추가 Start */
.sch_area .sec .bot .area_list dl dt.gray strong {
    background-color: rgba(170, 170, 170, 0.5);
}

.sch_area .sec .bot .area_list dl dt.gray strong span {
    background-color: #aaa;
    box-shadow: 0px 0px 4px rgba(170, 170, 170, 0.5);
}

.sch_area .sec .bot .area_list dl dt.or strong {
    background-color: rgba(243, 115, 33, 0.5);
}

.sch_area .sec .bot .area_list dl dt.or strong span {
    background-color: #F37321;
    box-shadow: 0px 0px 4px rgba(243, 115, 33, 0.5);
}

/* 2022.06.15 BSC 충전소 목록 gray, orange 누락 추가 End */
.sch_area .sec .bot .area_list dl dt p {
    margin-top: 5px;
    font-size: 0.625rem;
}

.sch_area .sec .bot .area_list dl dt.blue p {
    color: #3264E9;
}

.sch_area .sec .bot .area_list dl dt.green p {
    color: #00C974;
}

/* 2022.06.15 BSC 충전소 목록 gray, orange 누락 추가 Start */
.sch_area .sec .bot .area_list dl dt.gray p {
    color: #aaa;
}

.sch_area .sec .bot .area_list dl dt.or p {
    color: #F37321;
}

/* 2022.06.15 BSC 충전소 목록 gray, orange 누락 추가 End */
.sch_area .sec .bot .area_list dl dd {
    padding-left: 20px;
    text-align: left;
}

.sch_area .sec .bot .area_list dl dd .name {
    color: #272727;
    font-size: 0.875rem;
    margin-bottom: 20px;
}

.sch_area .sec .bot .area_list dl dd .name span {
    color: #F37321;
    padding-left: 5px;
}

.sch_area .sec .bot .area_list dl dd .sum {
    color: #272727;
    font-size: 0.75rem;
}

.sch_area .sec .bot .area_list dl dd .sum ~ .sum {
    margin-top: 10px;
}

.sch_area .sec .bot .area_list dl dd .sum span {
    color: #666;
    padding-right: 10px;
}

.sch_area .info {
    height: 100%;
    width: 360px;
    position: absolute;
    top: 0;
    left: 0%;
    z-index: 10;
    background-color: #F4F4F4;
    border-left: 1px solid #ddd;
    padding-top: 55px;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.15);
    transition: 0.3s;
}

.sch_area .info .head {
    padding: 40px 20px;
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid #ddd;
}

.sch_area .info .head .tit {
    position: relative;
    padding: 0 14px;
}

.sch_area .info .head .tit p {
    color: #272727;
    font-size: 1.25rem;
    line-height: 23px;
}

.sch_area .info .head .tit .star {
    position: absolute;
    left: 0;
    top: 0;;
    background: url(../../images/web/star-icon.svg) no-repeat center;
    width: 22px;
    height: 21px;
    border: none;
    background-size: contain;
}

.sch_area .info .head .tit .star.on {
    background-image: url(../../images/web/star-icon-on.svg);
}

.sch_area .info .head .tit .txt {
    display: none;
    overflow: hidden;
    margin-top: 10px;
}

.sch_area .info .head .tit .txt dl {
    float: left;
    display: flex;
}

.sch_area .info .head .tit .txt dl ~ dl {
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #ccc;
}

.sch_area .info .head .tit .txt dl dt {
    margin-right: 5px;
    color: #F37321;
    font-size: 0.923rem
}

.sch_area .info .head .tit .txt dl dd {
    font-size: 0.923rem;
}

.sch_area .info .head .close {
    background: url(../../images/web/info-close.svg) no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    right: 15px;
    top: 15px;
    border: none;
}

.sch_area .info h4 {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sch_area .info h4 p {
    color: #272727;
    font-size: 0.875rem;
}

.sch_area .info h4 button {
    border: 1px solid #ddd;
    border-radius: 40px;
    background-color: #fff;
    height: 30px;
    padding: 0 10px;
    font-size: 0.75rem;
    color: #666;
    transition: 0.3s;
}

.sch_area .info h4 button:hover {
    background-color: #272727;
    color: #fff;
    border-color: #272727;
}

.sch_area .info .info_station {
    background-color: #FFF3EB;
    margin: 5px 0;
    border-bottom: 1px solid #ddd;
    padding: 20px;
}

.sch_area .info .info_station table {
    width: 100%;
}

.sch_area .info .info_station table th,
.sch_area .info .info_station table td {
    text-align: left;
    font-size: 0.75rem;
    padding: 5px 0;
}

.sch_area .info .info_station table th {
    color: #666;
}

.sch_area .info .info_station table td {
    color: #272727;
}

.sch_area .info .info_station .ori {
    color: #272727;
    font-size: 0.75rem;
    margin-top: 15px;
}

.sch_area .info .info_charger {
    padding-top: 20px;
    background-color: #fff;
    flex-grow: 1;
    height: 0;
}

.sch_area .info .info_charger h4 {
    padding: 0 20px;
}

.sch_area .info .info_charger ul {
    padding: 0 20px;
    overflow-y: auto;
    height: calc(100% - 25px);
}

.sch_area .info .info_charger ul::-webkit-scrollbar {
    width: 6px;
}

.sch_area .info .info_charger ul::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
    border-radius: 10px;
}

.sch_area .info .info_charger ul::-webkit-scrollbar-track {
    background-color: #f7f7f7;
}

.sch_area .info .info_charger ul li {
    border-bottom: 1px solid #ddd;
}

.sch_area .info .info_charger ul li.on {
    padding-bottom: 12px;
}

.sch_area .info .info_charger .info_area {
    display: flex;
    align-items: center;
}

.sch_area .info .info_charger .info_btn {
    background-color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    text-align: center;
    padding: 13px 0;
    padding-right: 30px;
}

.sch_area .info .info_charger .info_btn dl dt {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    padding: 3px;
    margin: 0 6px;
}

.sch_area .info .info_charger .info_btn dl.blue dt {
    background-color: rgba(50, 100, 233, 0.1);
}

.sch_area .info .info_charger .info_btn dl.green dt {
    background-color: rgba(0, 201, 116, 0.1);
}

.sch_area .info .info_charger .info_btn dl.gray dt {
    background-color: rgba(170, 170, 170, 0.1);
}

.sch_area .info .info_charger .info_btn dl.or dt {
    background-color: rgba(243, 115, 33, 0.1);
}

.sch_area .info .info_charger .info_btn dl dt span {
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    border-radius: 50%;
}

.sch_area .info .info_charger .info_btn dl.blue dt span {
    background-color: #3264E9;
    box-shadow: 0px 0px 2px rgba(50, 100, 233, 0.5);
}

.sch_area .info .info_charger .info_btn dl.green dt span {
    background-color: #00C974;
    box-shadow: 0px 0px 2px rgba(0, 201, 116, 0.5);
}

.sch_area .info .info_charger .info_btn dl.gray dt span {
    background-color: #aaa;
    box-shadow: 0px 0px 2px rgba(170, 170, 170, 0.5);
}

.sch_area .info .info_charger .info_btn dl.or dt span {
    background-color: #F37321;
    box-shadow: 0px 0px 2px rgba(243, 115, 33, 0.5);
}

.sch_area .info .info_charger .info_btn dl dd {
    font-size: 0.625rem;
    margin-top: 5px;
}

.sch_area .info .info_charger .info_btn dl.blue dd {
    color: #3264E9;
}

.sch_area .info .info_charger .info_btn dl.green dd {
    color: #00C974;
}

.sch_area .info .info_charger .info_btn dl.gray dd {
    color: #aaa;
}

.sch_area .info .info_charger .info_btn dl.or dd {
    color: #F37321;
}

.sch_area .info .info_charger .info_btn p {
    font-size: 0.875rem;
    color: #666;
}

.sch_area .info .info_charger .info_area .report {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 30px;
    height: 30px;
    font-size: 0.75rem;
    padding: 0 10px;
    color: #666;
    transition: 0.3s;
}

.sch_area .info .info_charger .info_area .report:hover {
    background-color: #272727;
    color: #fff;
    border-color: #272727;
}

.sch_area .info .info_charger .info_box {
    background-color: #F4F4F4;
    padding: 20px;
    border-radius: 4px;
    display: none;
}

.sch_area .info .info_charger .box.on .info_box {
    display: block;
}

.sch_area .info .info_charger .info_box .ico {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sch_area .info .info_charger .info_box .ico span {
    display: block;
    margin: 0 5px;
    width: 48px;
    height: 48px;
    background-color: #fff;
    border: 1px solid #EBEBEB;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
}

.sch_area .info .info_charger .info_box .ico span.i1 {
    background-image: url(../../images/web/info_ico1.svg);
}

.sch_area .info .info_charger .info_box .ico span.i2 {
    background-image: url(../../images/web/info_ico2.svg);
}

.sch_area .info .info_charger .info_box .ico span.i3 {
    background-image: url(../../images/web/info_ico3.svg);
}

.sch_area .info .info_charger .info_box .ico span.i4 {
    background-image: url(../../images/web/info_ico4.svg);
}

.sch_area .info .info_charger .info_box p {
    margin-top: 15px;
    font-size: 0.75rem;
}

.sch_area .info .info_charger .info_box p strong {
    color: #272727;
    padding-right: 5px;
}

.sch_area .info .info_charger .info_box p span {
    color: #666;
}

.sch_area .sch_btn {
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -24px;
    z-index: 20;
    width: 20px;
    height: 48px;
    box-shadow: 2px 0px 2px rgba(0, 0, 0, 0.15);
    border-radius: 0px 4px 4px 0px;
    border: none;
    background-color: #272727;
    transition: 0.3s;
}

.sch_area .sch_btn::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 10px;
    background: url(../../images/web/wh-arr.svg) no-repeat center;
}

.sch_area .gps {
    position: fixed;
    right: 20px;
    bottom: 40px;
    width: 48px;
    height: 48px;
    background: #fff url(../../images/web/gps-icon.svg) no-repeat center;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    border: none;
}

.sch .use_type {
    position: absolute;
    top: 65px;
    right: 10px;
    z-index: 5;
}

.sch .use_type ul {
    display: flex;
    background-color: #fff;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    padding: 10px;
}

.sch .use_type ul li {
    display: flex;
    align-items: center;
}

.sch .use_type ul li ~ li {
    margin-left: 10px;
}

.sch .use_type ul li span {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
}

.sch .use_type ul li.blue span {
    background-color: #3264E9;
}

.sch .use_type ul li.green span {
    background-color: #00C974;
}

.sch .use_type ul li.gray span {
    background-color: #aaa;
}

.sch .use_type ul li.or span {
    background-color: #F37321;
}

.sch .use_type ul li p {
    font-size: 0.813rem;
    color: #272727;
}

.sch_area .ch_status {
    padding-bottom: 35px;
    position: relative;
    z-index: 15;
    background-color: #fff;
    height: calc(100% - 34px);
}

.sch_area .ch_status .tit {
    padding: 0 30px;
}

.sch_area .ch_status dl {
    background: url(../../images/web/chstatus-icon.svg) no-repeat right center;
}

.sch_area .ch_status dl dt {
    font-size: 1.692rem;
    color: #272727;
}

.sch_area .ch_status dl dd {
    font-size: 0.923rem;
    margin-top: 10px;
    color: #666;
}

.sch_area .ch_status dl dd span {
    color: #00C974;
}

.sch_area .ch_status ul {
    margin-top: 35px;
    display: flex;
}

.sch_area .ch_status ul li {
    width: 50%;
    text-align: center;
}

.sch_area .ch_status ul li ~ li {
    border-left: 1px solid #ddd;
}

.sch_area .ch_status ul li p {
    margin-bottom: 10px;
    font-size: 1.077rem;
}

.sch_area .ch_status ul li strong {
    display: block;
    font-size: 2.462rem;
    color: #272727;
    letter-spacing: 1px;
}

.sch_area .ch_status ul li strong span {
    color: #00C974;
}

.sch .marker {
    position: absolute;
    z-index: 10;
}

/* 2022.06.16 BSC marker_ball padding 제거 Start */
/* 2022.06.16 BSC marker_ball padding 제거 before */
/* .sch .marker .marker_ball{padding:6px;border-radius:50%;cursor:pointer;} */
/* 2022.06.16 BSC marker_ball padding 제거 after */
.sch .marker .marker_ball {
    border-radius: 50%;
    cursor: pointer;
}

/* 2022.06.16 BSC marker_ball padding 제거 End */
.sch .marker .marker_ball span {
    display: block;;
    border: 3px solid #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    font-size: 0.875rem;
    letter-spacing: 0px;
    font-weight: 300;
}

.sch .marker.type1 .marker_ball {
    background-color: rgba(50, 100, 233, 0.1);
}

.sch .marker.type1 .marker_ball span {
    background-color: #3264E9;
    box-shadow: 0px 0px 2px rgb(50 100 233 / 50%);
}

.sch .marker.type2 .marker_ball {
    background-color: rgba(0, 201, 116, 0.1);
}

.sch .marker.type2 .marker_ball span {
    background-color: #00C974;
    box-shadow: 0px 0px 2px rgb(0 201 116 / 50%);
}

.sch .marker.type3 .marker_ball {
    background-color: rgba(170, 170, 170, 0.1);
}

.sch .marker.type3 .marker_ball span {
    background-color: #aaa;
    box-shadow: 0px 0px 2px rgb(170 170 170 / 50%);
}

.sch .marker.type4 .marker_ball {
    background-color: rgba(243, 115, 33, 0.1);
}

.sch .marker.type4 .marker_ball span {
    background-color: #F37321;
    box-shadow: 0px 0px 2px rgb(243 115 33 / 50%);
}

.sch .marker .marker_txt {
    position: absolute;
    top: -10px;
    left: 50%;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    background-color: #fff;
    transform: translate(-50%, -100%);
    display: none;
}

.sch .marker.on {
    z-index: 20;
}

.sch .marker.on .marker_txt {
    display: block;
}

.sch .marker .marker_txt > div {
    position: relative;
}

.sch .marker .marker_txt > div::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    bottom: -5px;
    margin-left: -6px;
    border-top: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.sch .marker .marker_txt .txt_wrap {
    padding: 15px;
}

.sch .marker .marker_txt .txt_wrap p {
    color: #000;
    font-size: 0.875rem;
    white-space: nowrap;
}

.sch .marker .marker_txt .txt_info {
    margin-top: 10px;
    display: none;
}

.sch .marker .marker_txt .txt_wrap dl {
    display: flex;
}

.sch .marker .marker_txt .txt_wrap dl ~ dl {
    margin-top: 5px;
}

.sch .marker .marker_txt .txt_wrap dl dt {
    padding-right: 5px;
    color: #F37321;
    font-size: 0.75rem;
}

.sch .marker .marker_txt .txt_wrap dl dd {
    color: #666;
    font-size: 0.75rem;
    white-space: nowrap;
}

.sch .marker .marker_txt button {
    display: none;
    width: 100%;
    height: 30px;
    color: #888;
    border: none;
    border-top: 1px solid #ddd;
    font-size: 0.688rem;
    background-color: transparent;
}

/*충전소 검색 - end*/

/*datepicker*/
.ui-datepicker {
    background-color: #fff;
    box-shadow: 0 0 8px rgb(0 0 0 / 30%);
    border-radius: 4px;
    width: 250px;
    overflow: hidden;
}

.ui-datepicker .ui-widget-header {
    padding: 10px 5px 5px;
    color: #fff;
    background-color: #F37321;
    position: relative;
}

.ui-datepicker .ui-datepicker-title {
    display: flex;
    justify-content: center;
    font-size: 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    width: 80px;
    height: 26px;
    line-height: 26px;
    background: rgba(0, 0, 0, 0.15) url(../../images/web/datepicker-arr.png) 100% -27px no-repeat;
    margin: 0 5px;
    padding: 0 10px;
    border: 0;
    font-size: 13px;
    border-radius: 3px;
    color: #fff;
}

.ui-datepicker-title .ui-datepicker-year option,
.ui-datepicker-title .ui-datepicker-month option {
    background: #fff;
    color: #333;
}

.ui-datepicker .ui-datepicker-prev {
    position: absolute;
    top: 10px;
    left: 5px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 10px;
    right: 5px;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
}

.ui-datepicker .ui-datepicker-prev .ui-icon {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../../images/web/datepicker-arr.png) 0 0 no-repeat;
    text-indent: -99999px;
}

.ui-datepicker .ui-datepicker-next .ui-icon {
    display: block;
    width: 16px;
    height: 16px;
    background: url(../../images/web/datepicker-arr.png) -16px 0 no-repeat;
    text-indent: -99999px;
}

.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
    background: rgba(0, 0, 0, 0.1);
}

.ui-datepicker-calendar {
    width: 100%;
    padding-bottom: 10px;
}

.ui-datepicker-calendar tbody tr:first-child td {
    padding-top: 10px;
}

.ui-datepicker-calendar tr th:first-child,
.ui-datepicker-calendar tr td:first-child {
    padding-left: 5px;
}

.ui-datepicker-calendar tr th:last-child,
.ui-datepicker-calendar tr td:last-child {
    padding-right: 5px;
}

.ui-datepicker-calendar thead {
    background-color: #F37321;
}

.ui-datepicker-calendar thead th {
    color: #fff;
    font-size: 13px;
    line-height: 35px;
    font-weight: 300;
}

.ui-datepicker-calendar tbody td .ui-state-default {
    display: block;
    border-radius: 5px;
    font-size: 13px;
    color: #333;
    font-weight: 300;
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin: 0 auto;
    text-align: center;
}

.ui-datepicker-calendar tbody td.ui-datepicker-current-day .ui-state-default {
    border: 1px solid #F37321;
    color: #F37321;
    font-weight: 500;
}

/*태블릿 레이아웃 - start*/
/*@media screen and (max-width: 1500px) {*/
/*    .vis,*/
/*    .con_wrap {*/
/*        padding: 0 100px 0 20px;*/
/*    }*/

/*    .charge_con {*/
/*        padding: 0 100px 0 20px;*/
/*    }*/
/*}*/

/*@media screen and (max-width: 1650px) and (min-width: 1025px) {*/
/*    .price ul {*/
/*        width: 600px;*/
/*    }*/

/*    .price ul li dl dd strong {*/
/*        font-size: 3.6rem;*/
/*    }*/
/*}*/

/*@media screen and (max-width: 1300px) and (min-width: 1025px) {*/
/*    .why_con {*/
/*        padding-bottom: 0;*/
/*    }*/

/*    .why_con .w_c .why_list {*/
/*        padding: 25px 5px 50px;*/
/*        height: 280px;*/
/*    }*/

/*    .why_con .w_c a {*/
/*        line-height: 40px;*/
/*    }*/

/*    .why_con .w_c strong {*/
/*        background-size: 80px auto;*/
/*        padding-top: 100px;*/
/*        margin-bottom: 10px;*/
/*    }*/

/*    .why_con .w_c p {*/
/*        font-size: 0.875rem*/
/*    }*/

/*    .charge .charge_slow, .charge .charge_rapidity {*/
/*        width: 220px;*/
/*        height: 310px;*/
/*    }*/

/*    .price ul {*/
/*        width: 550px;*/
/*    }*/
/*}*/

/*태블릿 레이아웃 - end*/

@media screen and (max-width: 1024px) {

    /*.bot_area > div {*/
    /*    line-height: 55px;*/
    /*}*/

    /*.bot_area.wh > div {*/
    /*    background-size: 18px auto;*/
    /*    padding-right: 30px;*/
    /*}*/

    /*.bot_area.gr > div {*/
    /*    background-size: 45px auto;*/
    /*    padding-right: 55px;*/
    /*}*/

    /*.bot_area p {*/
    /*    padding-right: 10px;*/
    /*    font-size: 1.1rem;*/
    /*}*/

    /*.bot_area a strong {*/
    /*    font-size: 1.1rem;*/
    /*}*/

    /*.bot_area a span {*/
    /*    display: none;*/
    /*}*/



    .content {
        padding: 50px 20px 80px;
    }

    .content.bot {
        padding-bottom: 80px;
    }

    .content.top {
        padding-top: 0;
    }

    .sub_top {
        padding-top: 50px;
    }

    .sub_top.m_type1 {
        margin-bottom: 0;
    }

    .sub_top .svis {
        padding: 50px 0;
        background: none !important;
    }

    .sub_top .sub_tit {
        font-size: 2rem;
    }

    .sub_top .sub_tit.wh {
        color: #272727;
    }

    .top_ori {
        margin-bottom: 20px;
    }

    .form_ori {
        padding-left: 10px;
    }

    .fo_btn {
        height: 40px;
        line-height: 38px;
    }

    .tab,
    .tab.tab8 {
        margin-bottom: 30px;
    }

    .tab ul li a {
        line-height: 40px;
    }

    .tab ul li:nth-child(n + 4) {
        border-top: none;
    }

    .tab ul li:nth-child(3n + 1) {
        border-left: 1px solid #ddd;
    }

    .tab.tab8 ul {
        display: none;
        box-shadow: 3px 3px 5px rgb(204 204 204 / 30%);
        position: absolute;
        top: 40px;
        left: 0;
        width: 100%;
        background-color: #fff;
        z-index: 10;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

    .tab.tab8 ul li {
        width: 100%;
        border: none;
        border-bottom: 1px solid #ddd;
    }

    .tab.tab8 ul li a {
        line-height: 35px;
    }

    .tab.tab8 ul li.on a {
        color: #000;
        background-color: #fff;
        font-weight: 300;
    }

    .tab.tab8 .m_sel {
        display: block;
        width: 100%;
        height: 40px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 4px;
        position: relative;
        font-weight: 500;
        color: #272727;
    }

    .tab.tab8 .m_sel::before {
        content: "";
        width: 10px;
        height: 6px;
        background: url(../../images/web/form-sel-icon.svg) no-repeat center;
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: -3px;
        transition: 0.3s;
    }

    .tab.tab8 .m_sel.open::before {
        transform: rotate(180deg);
    }

    .con_tit {
        margin-bottom: 25px;
    }

    .con_txt {
        margin-bottom: 20px;
    }

    .__form dl {
        display: block;
    }

    .__form dl ~ dl {
        margin-top: 20px;
    }

    .__form dl dt {
        width: 100%;
        margin-bottom: 10px;
    }

    .__form dl dd {
        width: 100%;
    }

    .form_wrap ~ .form_wrap {
        margin-top: 5px;
    }

    .form_wrap.type2 li:nth-child(1) {
        width: calc(100% - 80px);
    }

    .form_wrap.type2 li:nth-child(2) {
        width: 80px;
        padding-left: 5px;
    }

    .form_wrap.type3 li {
        width: 100%;
    }

    .form_wrap.type3 li:nth-child(2) {
        margin-left: 0;
        margin-top: 5px;
    }

    .form_wrap.type4 li:nth-child(2) {
        width: 80px;
        padding-left: 5px;
    }

    .form_wrap.type4 li:nth-child(1) {
        width: calc(100% - 80px);
    }

    .form_wrap.type5 li {
        width: calc(25% - 9px);
    }

    .form_wrap.type5 li.eq {
        width: 12px;
    }

    .form_wrap.type6 li ~ li {
        margin-left: 5px;
    }

    .form_wrap.type7 li:nth-child(1) {
        width: calc(100% - 80px);
    }

    .form_wrap.type7 li:nth-child(2) {
        width: 80px;
        padding-left: 5px;
    }

    .form_wrap.type7 li:nth-child(3) {
        padding-left: 0;
        width: 100%;
        margin-top: 5px;
    }

    .__form input[type="text"],
    .__form input[type="password"], /*회원가입 입력페이지 css추가 kmj 20220420*/
    .__form select {
        height: 40px;
        padding: 0 10px;
    }

    .__form select {
        background-position: right 10px center;
        padding-right: 25px;
    }

    .__form textarea {
        height: 160px;
        padding: 10px;
    }

    .__form .amount .amount_box {
        max-width: calc(100% - 57px);
    }

    .ch_box {
        width: 33.33%;
    }

    .ch_box span {
        width: 18px;
        height: 18px;
    }

    .ch_box span::before {
        width: 8px;
        height: 8px;
        margin-top: -4px;
        margin-left: -4px;
    }

    .ch_box p {
        padding-left: 5px;
    }

    .ch_box.box2 {
        width: 50%;
    }

    .__form .sel_box {
        padding-left: 0;
        width: 100%;
        margin-top: 10px;
    }

    .__form .sel_box em {
        padding: 0 5px;
    }

    .__form .num li:nth-child(1) {
        width: 100%;
        justify-content: space-between;
    }

    .__form .num li:nth-child(2) {
        width: 100%;
        padding-left: 0;
        margin-top: 5px;
    }

    .__form .num input[type=text] {
        width: 24%;
    }

    .__form .num em {
        display: none;
    }

    .list_tbl1 table colgroup {
        display: none;
    }

    .list_tbl1 table thead {
        display: none;
    }

    .list_tbl1 table tr {
        display: flex;
        flex-wrap: wrap;
        padding: 15px 10px;
    }

    .list_tbl1 table th,
    .list_tbl1 table td,
    .list_tbl1 table .tbl_btn_area {
        padding: 0;
    }

    .list_tbl1 table td.tit {
        padding-left: 0;
        padding-bottom: 10px;
        width: 100%;
    }

    .list_tbl1 table td.m_full {
        width: 100%;
        text-align: left;
    }

    .list_tbl1 table td.m_full ~ .m_full {
        margin-top: 8px;
    }

    .list_tbl1 table td.m_full.lef {
        padding-right: 70px;
    }

    .list_tbl1 table td.m_full.tit {
        padding-bottom: 0;
    }

    .list_tbl1 table td.m_full.date {
        font-size: 0.846rem;
        margin-top: 5px;
    }

    .list_tbl1 table tfoot {
        border-top: 1px solid #272727;
    }

    .list_tbl1 table tfoot td {
        border-top: none;
    }

    .list_tbl1 table .changes,
    .list_tbl1 table .remaining {
        margin-top: 15px;
    }

    .list_tbl1 table .changes {
        padding-right: 16px;
        position: relative;
    }

    .list_tbl1 table .changes::before {
        content: "";
        background-color: #ddd;
        height: 100%;
        width: 1px;
        position: absolute;
        right: 8px;
        top: 0;
    }

    .list_tbl1 table .changes strong,
    .list_tbl1 table .remaining strong {
        display: inline;
        padding-right: 5px;
    }

    .list_tbl1 table .tbl_btn_area {
        position: absolute;
        right: 10px;
        top: 50%;
        margin-top: -13px;
    }

    .list_tbl1 table .tbl_btn_area.top {
        top: 15px;
        margin-top: 0;
    }

    .list_tbl1 table .__a {
        padding: 5px 10px;
    }

    .list_tbl1 table .__a td {
        padding: 0;
    }

    .list_tbl1 table .__a dl {
        padding: 15px 0;
    }

    .list_tbl1 table .__a dl ~ dl::before {
        width: 100%;
        left: 0;
    }

    .list_tbl1 table .__a dl dt {
        display: none;
    }

    .list_tbl1 table .__a dl dd {
        width: 100%;
        padding-left: 0;
    }

    .list_tbl1 table .__a dl dd .modify_area {
        margin-top: 10px;
    }

    .list_tbl1 table .__a.on {
        display: flex;
    }

    .list_tbl2 table th {
        padding: 15px 5px 15px 15px;
    }

    .list_tbl2 table td {
        padding: 10px 5px 10px 15px;
    }

    .list_tbl2 table .col1 {
        width: 30%;
    }

    .list_tbl2 table td .tit {
        padding-left: 0;
    }

    table .tbl_btn_area .tbl_btn.bl {
        width: 60px;
        line-height: 26px;
    }

    table .tbl_btn_area .tbl_btn.or {
        width: 75px;
    }

    .tbl_search > ul {
        flex-wrap: wrap;
    }

    .tbl_search > ul > li {
        flex-grow: 1;
    }

    .tbl_search > ul > li ~ li {
        margin-top: 10px;
    }

    .tbl_search > ul > li.date_btn li button,
    .tbl_search > ul > li select,
    .tbl_search > ul > li input[type = text] {
        height: 40px;
        padding: 0 10px;
    }

    .tbl_search > ul > li select {
        background-position: right 10px center;
        padding-right: 25px;
    }

    .tbl_search > ul > li.date_btn,
    .tbl_search > ul > li.inquiry_btn,
    .tbl_search > ul > li.date_sel {
        width: 100%;
        padding-left: 0;
    }

    .tbl_search > ul > li.sch_area1,
    .tbl_search > ul > li.sch_area3 {
        width: calc(35% - 5px);
    }

    .tbl_search > ul > li.sch_area2 {
        width: 100%;
        margin-top: 0;
    }

    .tbl_search > ul > li.sch_area4 {
        width: 65%;
        margin-top: 0;
        padding-left: 5px;
    }

    .tbl_search > ul > li.submit_btn {
        width: calc(100% - 50px);
        padding-left: 0;
    }

    .tbl_search > ul > li.submit_btn .fo_btn {
        background-color: #F37321;
        color: #fff;
    }

    .tbl_search > ul > li.submit_btn .fo_btn.ho_no {
        background-color: #fff;
        color: #F37321;
    }

    .tbl_search > ul > li.down_btn {
        width: 50px;
        padding-left: 10px;
    }

    .tbl_search > ul > li.down_btn button {
        height: 40px;
        background-size: 18px auto;
    }

    .tbl_search > ul > li.inquiry_btn button {
        height: 40px;
    }

    .tbl_search > ul > li.date_sel li input[type = text] {
        padding-left: 35px;
        background-size: 18px auto;
        background-position: 10px center;
    }

    .pagination ul li a {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .search_area ul li ~ li {
        margin-left: 5px;
    }

    .search_area ul li:nth-child(1) {
        width: 90px;
    }

    .search_area ul li:nth-child(2) {
        width: calc(100% - 160px);
    }

    .search_area ul li:nth-child(3) {
        width: 60px;
    }

    .search_area ul li input[type=text],
    .search_area ul li select {
        height: 40px;
        padding: 0 10px;
    }

    .search_area ul li select {
        background-position: right 10px center;
        padding-right: 25px;
    }

    .menu_tab ul li a {
        line-height: 45px;
    }

    .faq_list dl dt {
        padding: 15px 30px 15px 50px;
    }

    .faq_list dl dt::before {
        width: 30px;
        height: 30px;
        margin-top: -15px;
        left: 10px;
    }

    .faq_list dl dt::after {
        right: 10px;
        width: 12px;
        height: 12px;
        margin-top: -6px;
    }

    .faq_list dl dd {
        padding: 15px 30px 15px 50px;
    }

    .faq_list dl dd::before {
        width: 30px;
        height: 30px;
        margin-top: 0;
        left: 10px;
        top: 10px;
    }

    .event ul li {
        width: calc(50% - 5px);
        margin-left: 10px;
    }

    .event ul li:nth-child(3n + 1) {
        margin-left: 10px;
    }

    .event ul li:nth-child(2n - 1) {
        margin-left: 0;
    }

    .event ul li:nth-child(n+4) {
        margin-top: 0;
    }

    .event ul li:nth-child(n+3) {
        margin-top: 20px;
    }

    .event ul li a {
        padding-bottom: 10px;
    }

    .event_info {
        margin-top: 15px;
    }

    .event_info .event_tit {
        font-size: 1rem;
        margin-bottom: 5px;
    }

    .event_info .event_term strong {
        display: none;
    }

    .event_info .event_term span {
        font-size: 0.8rem;
    }

    .board_view {
        margin-bottom: 40px;
    }

    .board_view .view_top {
        padding: 15px;
    }

    .board_view .view_top .tit {
        font-size: 1.4rem;
        margin-bottom: 15px;
    }

    .board_view .view_top p {
        display: block;
    }

    .board_view .view_top p .date {
        margin-right: 0;
    }

    .board_view .view_top p .date ~ .date {
        margin-top: 5px;
    }

    .board_view .view_top p .date strong,
    .board_view .view_top p .date span {
        font-size: 0.8rem;
    }

    .board_view .view_con {
        padding: 30px 15px;
    }

    .board_view .view_con img + .txt {
        margin-top: 20px;
    }

    .board_view .view_bot {
        padding: 0 15px;
    }

    .board_view .view_bot a {
        line-height: 50px;
    }

    .board_view .view_bot a.prev {
        padding-left: 15px;
    }

    .board_view .view_bot a.next {
        padding-right: 15px;
    }

    .card_issued {
        border-bottom: none;
        padding-bottom: 30px;
    }

    .card_issued ul li {
        float: none;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 40px;
    }

    .card_issued ul li:last-child {
        padding-bottom: 0;
    }

    .card_issued .step_con {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        text-align: left;
    }

    .card_issued .step_con > div {
        padding-left: 15px;
    }

    .card_issued ul li i {
        width: 75px;
        height: 75px;
        background-size: 65px auto;
    }

    .card_issued ul li p {
        font-size: 1.2rem;
    }

    .card_issued ul li em {
        margin-bottom: 10px;
    }

    .card_issued ul li::before {
        top: auto;
        bottom: 20px;
        left: 50%;
        width: 20px;
        height: 20px;
        margin-bottom: -10px;
        margin-left: -10px;
        transform: rotate(90deg);
    }

    .card_issued ul li .post_icon {
        padding-top: 0;
        padding-left: 30px;
        background-position: left center;
        background-size: 25px auto;
        top: auto;
        bottom: 20px;
        right: 20px;
        transform: translate(0, 50%);
    }

    .card_issued ul li .post_icon strong,
    .card_issued ul li .post_icon span {
        font-size: 0.923rem;
    }

    .use_step {
        padding: 30px 0 0;
    }

    .use_step dl {
        display: none;
    }

    .use_step dl.on {
        display: block;
    }

    .use_step dl dt {
        display: none;
    }

    .use_step dl dd {
        padding: 0 20px;
    }

    .use_step dl dd ul li {
        float: none;
        width: 100%;
        padding-bottom: 40px;
    }

    .use_step dl dd ul li:last-child {
        padding-bottom: 0;
    }

    .use_step dl dd ul li::before {
        top: auto;
        bottom: 20px;
        left: 50%;
        width: 20px;
        height: 20px;
        margin-bottom: -10px;
        margin-left: -10px;
        transform: rotate(90deg);
    }

    .use_step dl dd ul li p {
        padding: 30px 0 30px 85px;
        background-position: left center;
        font-size: 1.231rem;
        text-align: left;
        background-size: 65px auto;
    }

    .use_step dl dd ul li p span {
        color: #F37321;
    }

    .joinchoice {
        display: block;
    }

    .joinchoice .box {
        display: block;
        padding: 30px 0;
    }

    .joinchoice .box:first-child {
        padding-top: 0;
    }

    .joinchoice .box:last-child {
        border-left: none;
        border-top: 1px solid #ddd;
    }

    .joinchoice .box .ico {
        margin-bottom: 20px;
    }

    .joinchoice .box .ico img {
        width: 65px;
    }

    .joinchoice .jc_tit {
        margin-bottom: 20px;
    }

    .joinchoice .jc_txt {
        margin-bottom: 30px;
    }

    .joinchoice .group_go {
        margin-top: 20px;
    }

    .login .log_wrap {
        margin-bottom: 30px;
    }

    .log_btn_area {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .log_btn_area p {
        margin-bottom: 15px;
    }

    .log_btn_area ul li a {
        line-height: 43px;
    }

    .log_btn_sns p {
        margin-bottom: 15px;
    }

    .log_btn_sns ul li ~ li {
        margin-left: 15px;
    }

    .log_btn_sns ul li a {
        width: 45px;
        height: 45px;
    }

    .lab_chk span {
        width: 20px;
        height: 20px;
        background-size: 12px auto;
    }

    .agree_box .lab {
        padding: 10px 15px;
    }

    .agree_box .area {
        padding: 15px;
    }

    .agree_box .area table th,
    .agree_box .area table td {
        padding: 5px 10px;
    }

    .agree_box .area table,
    .agree_box .area th,
    .agree_box .area td {
        border: 1px solid #666;
        border-collapse: collapse;
    }

    .agree_box .area table thead tr th {
        text-align: center;
    }

    .result .ico img {
        width: 65px;
    }

    .result dl {
        margin-top: 30px;
    }

    .__form.gr_sch dl dt {
        width: 15%;
    }

    .__form.gr_sch dl dd {
        width: 100%;
    }

    .group_search {
        margin-top: 20px;
    }

    .group_search ul li {
        padding: 10px;
    }

    .or_box.gr_regi {
        padding: 20px;
        display: block;
    }

    .or_box.gr_regi p {
        margin-bottom: 15px;
        background-size: 18px auto;
        padding-left: 25px;
    }

    .or_box.form_or {
        padding: 15px;
        margin-bottom: 30px
    }

    .or_box.form_or p {
        background-size: 16px auto;
    }

    .co_box .co_top {
        padding: 10px 20px;
    }

    .co_box .co_bot {
        padding: 15px 20px;
    }

    .co_box_area.box1 .co_box .co_bot {
        padding: 20px 10px;
    }

    .co_box_area {
        margin-bottom: 30px;
    }

    .co_box_area ul {
        display: block;
    }

    .co_box_area ul li ~ li {
        margin-top: 15px;
    }

    .co_box_area.box2 ul li {
        width: 100%;
    }

    .charge_box {
        display: block;
    }

    .charge_box .lef_box {
        width: 100%;
        margin-right: 0;
    }

    .charge_box .rig_box {
        width: 100%;
        margin-top: 40px;
    }

    .charge_box .rig_box .tit {
        padding: 20px 0;
    }

    .charge_gauge p {
        margin: 0 0 20px;
        font-size: 1.8rem;
    }

    .charge_gauge .ball {
        width: 230px;
        height: 230px;
    }

    .charge_gauge .ball .percenticon {
        height: 28px;
        background-size: contain;
        margin-bottom: 5px;
    }

    .charge_gauge .ball .percentNum span {
        font-size: 3.8rem;
    }

    .charge_gauge .ball .percenttxt {
        margin-top: 15px;
    }

    .setting dl dt {
        padding: 15px;
    }

    .setting dl dd {
        padding: 20px 15px;
    }

    .setting dl dd p span {
        margin-top: 5px;
    }

    .setting .set_btn {
        height: 26px;
        width: 44px;
    }

    .setting .set_btn button .handle {
        height: 22px;
        width: 22px;
    }

    .setting .set_btn.on button .handle {
        margin-left: -22px;
    }

    .notice_box {
        padding: 70px 0;
    }

    .notice_box img {
        width: 65px;
    }

    .notice_box p {
        font-size: 1.3rem;
        margin-top: 25px;
    }

    /*충전소 검색 - start*/
    .sch_head,
    .sch_area .sch_btn,
    .sch_area .info .head .tit .star,
    .sch_area .info .head .close,
    .sch_area .info .info_station,
    .sch_area .sec .top .head .clear {
        display: none;
    }

    .sch .marker .marker_txt .txt_info,
    .sch .marker .marker_txt button {
        display: block;
    }

    .sch,
    .sch_area .info {
        padding-top: 0;
    }

    .sch_area,
    .sch_area .sec,
    .sch_area .info {
        width: 100%;
        height: auto;
        top: auto;
        bottom: 0;
    }

    .sch_area {
        left: 0 !important;
        padding-top: 0;
    }

    .sch_area .sch_area_btn {
        padding: 10px 0 20px;
        text-align: center;
        position: relative;
        z-index: 10;
        box-shadow: 0px 0px 30px rgb(0 0 0 / 20%);
        border-radius: 24px 24px 0px 0px;
        background-color: #fff;
    }

    .sch_area .sch_area_btn em {
        display: block;
        margin: 0 auto;
        width: 36px;
        height: 4px;
        border-radius: 5px;
        background-color: #aaa;
    }

    .sch_area .sec {
        background-color: transparent;
        display: block;
        position: static;
        overflow: visible;
    }

    .sch_area .sec .top {
        padding: 20px 20px 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    .sch_area .sec .bot {
        background-color: #fff;
        height: auto;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        display: none;
        padding-top: 0;
        height: 100%;
        position: relative;
        z-index: 10;
    }

    .sch_area .sec .top .head {
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
        border-radius: 4px;
    }

    .sch_area .sec .top .head input[type=text] {
        width: calc(100% - 48px);
        border: none;
        padding: 0 20px;
    }

    .sch_area .sec .top .head .clear {
        border: none;
    }

    .sch_area .sec .top .schp {
        display: none;
    }

    .sch_area .sec .top.sching {
        background-color: #f4f4f4;
        height: 100%;
    }

    .sch_area .sec .top.sching .schp {
        display: block;
    }

    .sch_area .sec .top .sching_cl {
        position: absolute;
        left: 0;
        bottom: 30px;
        width: 100%;
        border-top: 1px solid #ddd;
    }

    .sch_area .sec .top .sching_cl button {
        width: 100%;
        background: none;
        border: none;
        color: #272727;
        height: 50px;
    }

    .sch_area .sec .notview span {
        padding-top: 60px;
        background-size: 45px;
    }

    .sch_area .info {
        display: none;
        position: relative;
        box-shadow: none;
        border-left: none;
        height: calc(100% - 34px);
        overflow-y: auto;
        background-color: #fff;
    }

    .sch_area .info h4 {
        display: none;
    }

    .sch_area .info .head {
        padding: 10px 20px 20px;
        border-bottom: none;
    }

    .sch_area .info .head .tit {
        padding-left: 25px;
    }

    .sch_area .info .head .tit p {
        font-size: 1.538rem;
    }

    .sch_area .info .head .tit .txt {
        display: block;
    }

    .sch_area .info .info_charger {
        height: auto;
        padding-top: 0;
    }

    .sch_area .info .info_charger ul {
        height: auto;
        overflow-y: hidden;
    }

    .sch_area .info .info_charger .info_btn {
        padding: 10px 0;
        padding-right: 25px;
    }

    .sch_area .info .info_charger .info_btn p {
        font-size: 1.077rem
    }

    .sch_area .info .info_charger .info_area .report {
        font-size: 0.846rem;
        background-color: #272727;
        border-color: #272727;
        color: #fff;
    }

    .sch_area .info .info_charger .info_box p {
        font-size: 0.923rem
    }

    .sch_area .sec .bot {
        overflow-y: auto;
    }

    .sch_area .sec .bot .tab_list ul li button {
        height: 35px;
        font-size: 0.923rem;
    }

    .sch_area .sec .bot .tab_con {
        height: auto;
        overflow-y: hidden;
    }

    .sch_area .sec .bot .area_list dl dt strong {
        padding: 5px;
        width: 39px;
        height: 39px;
    }

    .sch_area .sec .bot .area_list dl dt strong span {
        line-height: 25px;
        border: 2px solid #fff;
    }

    .sch_area .sec .bot .area_list dl dd .name {
        font-size: 1.077rem;
        margin-bottom: 10px;
    }

    .sch_area .sec .bot .area_list dl dd .sum {
        font-size: 0.923rem;
    }

    .sch_area .sec .bot .area_list dl dd .sum ~ .sum {
        margin-top: 5px;
    }

    .sch_area .gps {
        position: absolute;
        right: 20px;
        top: -70px;
    }

    .sch_area .gps.none {
        display: none;
    }

    .sch_area .sec .notview {
        padding: 60px 0
    }

    .sch .use_type {
        top: 80px;
        right: 20px;
    }

    .sch .use_type ul {
        padding: 0;
        box-shadow: none;
        background-color: transparent;
    }

    .sch .use_type ul li span {
        border: 1px solid #fff;
        width: 8px;
        height: 8px;
    }

    .sch .use_type ul li p {
        font-size: 0.923rem;
        text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
    }

    .sch.active .sch_area .info {
        left: auto;
    }

    .sch.sec_on .sch_area {
        height: 60%;
    }

    .sch.sec_on .sch_area .sec {
        height: calc(100% - 35px);
    }

    .sch.sec_on .sch_area .sec .bot {
        display: block;
    }

    .sch.info_on .sch_area {
        height: 55%;
    }

    .sch.info_on .sch_area .info {
        display: block;
    }

    .sch.sec_on .sch_area .ch_status,
    .sch.info_on .sch_area .ch_status {
        display: none;
    }

    /*.sch .sch_area.hide{height: 90px;}*/
    /*20220810 추가된 부분 - start*/
    .sch_area {
        height: 230px;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /*.sch .sch_area.init {*/
    /*    height: 0;*/
    /*}*/
    .sch .sch_area.fold {
        height: 0 !important;
    }

    /*20220810 추가된 부분 - end*/
    .sch.sec_on .sch_area.auto_h,
    .sch.info_on .sch_area.auto_h {
        height: auto;
    }

    .sch_area.ui-draggable-dragging {
        transition: 0s;
    }

    .sch .sch_area.drag_bot {
        top: auto !important;
        height: 90px !important;
    }

    .sch .sch_area.drag_top {
        top: auto !important;
        height: calc(100% - 180px) !important;
    }

    /*충전소 검색 - end*/
}

/* 설치신청 선택 */
.req__page {
    width: 100%;
    height: auto;
    min-height: 100%;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: "Apple SD Gothic Neo";
    padding: 130px 64px 70px;
}

.req__page h1 {
    font-size: 45px;
    line-height: 60px;
    color: black;
    font-weight: 500;
    margin-bottom: 15px;
}

.req__page h2 {
    font-size: 25px;
    line-height: 60px;
    color: #585858;
    margin-bottom: 63px;
    font-weight: 400;
}

.req__page .req__btns {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.req__page .req__btns .req__btn {
    width: 100%;
    min-width: 440px;
    max-width: 510px;
    height: 440px;
    background: white;
    box-shadow: 0px 0px 15px #A7A7A729;
    border-radius: 20px;
}

.req__page .req__btns .req__btn {
    width: 100%;
    max-width: 510px;
    height: 440px;
    background: white;
    box-shadow: 0px 0px 15px #A7A7A729;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.req__page .req__btns .req__btn .logo_img {
    height: 131px;
    margin-bottom: 32px;
}

.req__page .req__btns .req__btn p:first-of-type {
    font-size: 40px;
    line-height: 60px;
    margin-bottom: 24px;
    color: #404040;
    font-weight: 600;
}

.req__page .req__btns .req__btn p:first-of-type span {
    font-family: Hanwha;
    font-weight: 500;
}

.req__page .req__btns .req__btn p:last-of-type {
    font-size: 20px;
    color: #585858;
    font-weight: 300;
}

.req__page .req__btns .req__btn.hanwha {
    margin-right: 20px;
}

/*.req__page .req__btns .req__btn.me {*/
/*    position: relative;*/
/*}*/
.req__page .req__btns .me-wrapper {
    position: relative;
}

.req__page .req__btns .me-wrapper #me_help {
    position: absolute;
    width: 41px;
    height: 41px;
    top: 30px;
    right: 30px;
    border: none;
    background: transparent;
    outline: none;
}

.req__page .req__btns .req__btn div {
    height: 56px;
    padding: 0 32px;
    border-radius: 36px;
    color: white;
    font-size: 20px;
    line-height: 60px;
    font-weight: 300;
    width: max-content;
    margin: 0 auto 30px;
}

.req__page .req__btns .req__btn.hanwha div {
    background: #FF7403;
}

.req__page .req__btns .req__btn.me div {
    background: #404040;
}

.req__page .req__btns .req__btn div span {
    font-weight: 400;
}

.mobile_text {
    display: none;
}

/**
설치 신청 폼
 */
.help-type {
    position: relative;
}

.help-tooltip {
    display: none;
    position: absolute;
    top: -88px;
    left: -12px;
    padding: 16px;
    font-size: 16px;
    line-height: 20px;
    border-radius: 8px;
    background: white;
    box-shadow: 0px 4px 16px -2px rgba(27, 33, 44, 0.12);
    width: max-content;
}

.help-type:hover > .help-tooltip {
    display: block;
}

.help-type:hover > .help-tooltip::after {
    display: block;
    content: '';
    width: 18px;
    height: 8px;
    background-image: url(../../images/web/reqinstall/tooltip.svg);
    position: absolute;
    bottom: -8px;
}

.help-annot {
    font-size: 14px;
    margin-top: 20px;
}

.help-annot-1 {
    display: none;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .help-type {
        display: none;
    }

    .help-annot-1 {
        display: block;
        font-size: 12px;
        line-height: 16px;
        margin-top: 20px;
    }

    .help-annot {
        margin-top: 6px;
        font-size: 12px;
        line-height: 16px;
    }

    .req__page {
        padding: 130px 60px 70px;
    }

    .req__page h1 {
        line-height: 100%;
        font-size: 35px;
        margin-bottom: 23px;
    }

    .req__page h2 {
        font-size: 20px;
        line-height: 100%;
        margin-bottom: 85px;
    }

    .req__page .req__btns .req__btn {
        width: 320px;
        height: 320px;
        min-width: unset;
        max-width: unset;
    }

    .req__page .req__btns .req__btn .logo_img {
        height: 95px;
        margin-bottom: 22px;
    }

    .req__page .req__btns .req__btn p:first-of-type {
        font-size: 25px;
        line-height: 41px;
        margin-bottom: 21px;
    }

    .req__page .req__btns .req__btn p:last-of-type {
        font-size: 11px;
    }

    .req__page .req__btns .req__btn.hanwha {
        margin-right: 17px;
    }

    .req__page .req__btns .me-wrapper #me_help {
        width: 30px;
        height: 30px;
        top: 20px;
        right: 20px;
    }

    .req__page .req__btns .req__btn div {
        height: 34px;
        padding: 0 22px;
        font-size: 12px;
        line-height: 34px;
    }
}

@media screen and (max-width: 768px) {
    .help-type {
        display: none;
    }

    .help-annot-1 {
        display: block;
        font-size: 12px;
        line-height: 16px;
        margin-top: 20px;
    }

    .help-annot {
        margin-top: 6px;
        font-size: 12px;
        line-height: 16px;
    }

    .req__page {
        /*padding-top: 80px;*/
        padding: 130px 0 35px;
    }

    .req__page h1 {
        line-height: 100%;
        font-size: 35px;
        margin-top: 0;
        margin-bottom: 23px;
    }

    .req__page h2 {
        font-size: 20px;
        line-height: 100%;
        margin-bottom: 32px;

    }

    .req__page .req__btns {
        flex-direction: column;
        margin-bottom: 32px;
    }

    .req__page .req__btns .req__btn {
        width: 290px;
        height: 250px;
        min-width: unset;
        max-width: unset;
    }

    .req__page .req__btns .req__btn .logo_img {
        height: 86px;
        margin-bottom: 14px;
    }

    .req__page .req__btns .req__btn p:first-of-type {
        font-size: 20px;
        line-height: 36px;
        margin-bottom: 9px;
    }

    .req__page .req__btns .req__btn p:last-of-type {
        font-size: 10px;
    }

    .req__page .req__btns .req__btn.hanwha {
        margin-right: 0;
        margin-bottom: 12px;
    }

    .req__page .req__btns .me-wrapper #me_help {
        width: 30px;
        height: 30px;
        top: 20px;
        right: 20px;
    }

    .req__page .req__btns .req__btn div {
        height: 31px;
        padding: 0 20px;
        font-size: 11px;
        line-height: 31px;
        margin-bottom: 19px;
    }

    .mobile_text {
        display: block;
        font-size: 15px;
        font-family: "Apple SD Gothic Neo";
        color: #585858;
        font-weight: 300;
        /*margin-bottom: 35px;*/
    }
}

/* main renewal */
/* section0 styling */
#section0 #calculator_btn {
    position: relative;
}

#section0 #calculator_btn::after {
    opacity: 0;
    content: "";
    position: absolute;
    top: -55px;
    left: -50px;
    width: 220px;
    height: 50px;
    background: url(../../images/web/main/calculator_tooltip.svg) no-repeat center / cover;
    pointer-events: none;
    transition: opacity 0.2s;
}
#section0 #calculator_btn:hover::after {
    opacity:1;
    /*transition: opacity 0.2s;*/
    /*width: 220px;*/
    /*height: 50px;*/
    /*transition-property: opacity, width, height;*/
    /*transition-duration: 0.2s;*/
    /*content: "";*/
    /*position: absolute;*/
    /*top: -55px;*/
    /*left: -50px;*/
    /*width: 220px;*/
    /*height: 50px;*/
    /*background: url(../../images/web/main/calculator_tooltip.svg) no-repeat center / cover;*/
}

/* section1 styling */
#section1 {
    position: relative;
    background: transparent;
}

#section1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../images/web/main/main_2.jpg) no-repeat center/cover;
    opacity: 0.2;
}

/*#section1 .con_wrap {*/
/*    padding-top: 55px;*/
/*}*/

#section1 .con_wrap {
    transition: 1s;
    transition-delay: 1s;
}

#section1.active .con_wrap {
    /*background-color: rgba(0, 0, 0, 0.3);*/
}

#section1.active .why_con .w_c {
    opacity: 1;
    transform: translate(0, 0);
}



/* section2 styling */
#section2 {
    position: relative;
    background: white;
    /*background: url(../../images/web/main/main_3.jpg) no-repeat center/cover;*/
}





.slide_button {
    padding: 0 56px;
    height: 50px;
    color: white;
    background: #2F2A2E;
    border-radius: 30px;
    margin: 0 auto;
    display: block;
    line-height: 50px;
    width: max-content;
    text-align: center;
}



/*#section3.fp-completely .install_step ul li {*/
/*    opacity: 1;*/
/*    !*transform: translate(0, 0);*!*/
/*}*/
/*#section3.fp-completely .install_step ul li:nth-child(2) {*/
/*    transition-delay: 0.2s;*/
/*}*/
/*#section3.fp-completely .install_step ul li:nth-child(3) {*/
/*    transition-delay: 0.4s;*/
/*}*/
/*#section3.fp-completely .install_step ul li:nth-child(4) {*/
/*    transition-delay: 0.6s;*/
/*}*/
/*
section4 styling
 */
#section4 {
    position: relative;
    background: transparent;
}

#section4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../../images/web/main/main_5.jpg) no-repeat center/cover;
    opacity: 0.2;
}

/*#section4.active .why_con .slick-dots {*/
/*    opacity: 1;*/
/*}*/

/*#section4 .con_wrap {*/
/*    transition: 0.6s;*/
/*    !*transition-delay: 0.4s;*!*/
/*}*/

/*#section4.active .con_wrap {*/
/*    !*background-color: rgba(0, 0, 0, 0.3);*!*/
/*}*/

/*#section4.active .why_con .w_c {*/
/*    opacity: 1;*/
/*    transform: translate(0, 0);*/
/*}*/

/*#section4 .con_wrap {*/
/*    padding-top: 55px;*/
/*}*/

/* respoinsive */
/* mobile */
/* common */
b {
    color: #FF7F00;
}
.button_bk {
    background: #2F2A2E;
    color: white;
    font-weight: 300;
    text-align: center;
    cursor: pointer;
    display: block;
    width: 150px;
    height: 45px;
    border-radius: 22.5px;
    font-size: 16px;
    line-height: 45px;
    padding: 0;
    margin: 0 auto;
    /*opacity: 0;*/
    /*transform: translateY(50px);*/
    /*transition-delay: 200ms;*/
    transition: all 1s;
}
.section.active .button_bk {
    /*transform: translateY(0);*/
    /*opacity: 1;*/
    /*transition-delay: 200ms;*/
    /*transition: all 1s;*/
}
.section {
    padding-top: 50px;
    display: table;
    table-layout: fixed;
    width: 100%;
    overflow: hidden;
    position: relative;
}
.con_wrap {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    /*padding: 0 100px;*/
}
/*.con_tit {*/
/*    opacity: 0;*/
/*    transform: translateY(50px);*/
/*    transition: all 1s;*/
/*}*/
.con_tit h2 {
    font-size: 32px;
    text-align: center;
    font-weight: 600;
    color: #272727;
    margin-bottom: 12px;
    line-height: 38px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s;
}
.con_tit h3 {
    font-size: 20px;
    font-weight: 200;
    color: #272727;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s 200ms;
}
.section.active .con_tit h2{
    transform: translateY(0);
    opacity: 1;
    transition: all 0.8s 200ms;
}
.section.active .con_tit h3 {
    transform: translateY(0);
    opacity: 1;
    transition: all 0.8s 300ms;
}
.con_tit h3 span {
    color: #FF7F00;
}

/* slide 0 */
#section0 {
    background: linear-gradient(107deg, rgba(0, 0, 0, 0.6) 0%, rgba(81, 81, 81, 0.04) 65%, #54545400 100%), url(../../images/web/main/main_1_large.jpg) no-repeat 50% 0% / cover;
    display: block;
    transition: 1s;
}
.vis .vis_txt {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 50px;
    max-width: 1400px;
    margin: 0 auto;
}
.vis .vis_txt .tit1 {
    font-size: 20px;
    color: #fff;
    margin-bottom: 8px;
    font-weight: 300;
}
.vis .vis_txt .tit2 {
    font-family: 'hanwha';
    font-size: 32px;
    color: #fff;
    margin-bottom: 94px;
}
.vis .vis_txt .tit2 span {
    color: #FF7F00;
}
.vis .vis_txt .btn_area {
    width: max-content;
}
.vis .vis_txt .btn_area ul {
    justify-content: flex-start;
}
.vis .vis_txt .btn_area ul li a,
.vis .vis_txt .btn_area ul li button {
    width: 150px;
    height: 45px;
    border-radius: 28px;
    font-size: 14px;
    line-height: 45px;
    font-weight: 200;
    background: white;
    display: block;

}
#section0 #calculator_btn {
    position: relative;
}
#section0 #calculator_btn::after {
    opacity: 0;
    content: "";
    position: absolute;
    top: -48px;
    left: -10px;
    width: 154px;
    height: 42px;
    background: url(../../images/web/main/calculator_tooltip.svg) no-repeat center / cover;
    pointer-events: none;
    transition: opacity 0.2s;
}
#section0 #calculator_btn:hover::after {
    opacity:1;
}

/* slide 1 */
/*.why_con {*/
/*    padding-top: 20px;*/
/*    padding-bottom: 60px;*/
/*    width: 100%;*/
/*    margin: 0 auto;*/
/*    opacity: 0;*/
/*    transform: translateY(50px);*/
/*    transition: all 1s;*/
/*}*/
/*.section.active .why_con {*/
/*    transform: translateY(0);*/
/*    opacity: 1;*/
/*    transition-delay: 200ms;*/
/*    transition: all 1s;*/
/*}*/
/*.why_con .slick-list {*/
/*    !*margin: 0 10px;*!*/
/*    overflow: visible;*/
/*}*/
/*.why_con .slick-slide {*/
/*    width: 215px;*/
/*    margin: 0 10px;*/
/*}*/
/*.why_con .w_c {*/
/*    text-align: center;*/
/*}*/
.why_con {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.why_con .why_list {
    padding: 18px 20px;
    border-radius: 25px;
    background-color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    width: 310px;
    height: 100px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s, transform 0.8s;
}
.why_con .why_list img {
    width: 58px;
    height: 58px;
    object-fit: contain;
}
.why_con .why_list strong {
    color: #404040;
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
    font-weight: 300;
}
.why_con .why_list p {
    color: #585858;
    font-size: 12px;
    line-height: 15px;
    font-weight: 200;
}
/*.why_con .w_c strong {*/
/*    display: block;*/
/*    color: #404040;*/
/*    font-size: 22px;*/
/*    margin-bottom: 14px;*/
/*    font-weight: 400;*/
/*    !*text-align: center;*!*/
/*}*/
.section.active .why_con .why_list.w1 {
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.8s, transform 0.8s;
}
.section.active .why_con .why_list.w2 {
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.8s 200ms, transform 0.8s 200ms;
}
.section.active .why_con .why_list.w3 {
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.8s 400ms, transform 0.8s 400ms;
}
.section.active .why_con .why_list.w4 {
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.8s 600ms, transform 0.8s 600ms;
}
/*.why_con .w_c img {*/
/*    height: 80px;*/
/*    margin: 0 auto 35px;*/
/*    object-fit: contain;*/
/*}*/
/*.why_con .w_c p {*/
/*    color: #585858;*/
/*    line-height: 1.5em;*/
/*    font-size: 12px;*/
/*    font-weight: 200;*/
/*    letter-spacing: -0.8px;*/
/*}*/

/* slide 2 */
.bg_circle {
    position: absolute;
    width: 250px;
    height: 250px;
    background: #FF7600;
    opacity: 0.2;
    filter: blur(50px);
}
.bg_circle_1 {
    top: 60px;
    left: -200px;
}
.bg_circle_2 {
    bottom: 10px;
    right: -200px;
}
.price {
    padding-top: 20px;
    opacity: 0;
    transform: translateY(50px);
    margin-bottom: 60px;
    transition: opacity 1s, transform 1s;
}
.section.active .price {
    transform: translateY(0);
    opacity: 1;
    transition-delay: 200ms;
    transition: opacity 1s, transform 1s;
}
.price ul {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.price ul li {
    /*float: left;*/
    /*width: 50%;*/
    background: white;
    border-radius: 30px;
    width: 153px;
    box-shadow: 0px 0px 30px #A7A7A729;
    text-align: center;
    padding: 45px 0;
}
.price ul li dl dt {
    color: #404040;
    font-size: 22px;
    margin-bottom: 10px;
    line-height: 24px;
}
.price ul li dl dd strong {
    font-size: 23px;
    line-height: 28px;
    color: #FF7F00;
    margin-bottom: 10px;
    display: block;
}
.price ul li dl dd p {
    font-weight: 100;
    color: #555555;
    font-size: 12px;
    /*margin-top: 36px;*/
    /*line-height: 25px;*/
}

/* slide 3 */
.install_container {
    display: block;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.8s, transform 0.8s;
}
.section.active .install_container {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s 200ms, transform 0.8s 200ms;
}
.install_step {
    display: none;
}
/*.install_step {*/
/*    !*width: 50%;*!*/
/*    !*padding-left: 230px;*!*/
/*}*/

/*.install_step ul {*/
/*    !*display: flex;*!*/
/*}*/

/*.install_step ul li {*/
/*    display: flex;*/
/*    gap: 29px;*/
/*    position: relative;*/
/*    !*width: 25%;*!*/
/*    !*text-align: center;*!*/
/*    !*position: relative;*!*/
/*    !*opacity: 0;*!*/
/*    !*transition: 0.5s;*!*/
/*    !*transform: translate(-20px, 0);*!*/
/*    !*padding-top: 135px;*!*/
/*    !*background-repeat: no-repeat;*!*/
/*    !*background-position: center top;*!*/
/*}*/

/*.install_step ul li:not(:last-of-type)::before {*/
/*    content: "";*/
/*    display: block;*/
/*    position: absolute;*/
/*    width: 3px;*/
/*    height: 100%;*/
/*    background: black;*/
/*    top: 36px;*/
/*    left: 18px;*/
/*}*/

/*.install_step ul li span {*/
/*    display: block;*/
/*    width: 36px;*/
/*    height: 36px;*/
/*    background: #2F2A2E;*/
/*    border-radius: 50%;*/
/*    line-height: 36px;*/
/*    color: white;*/
/*    font-size: 18px;*/
/*    text-align: center;*/
/*    !*display: block;*!*/
/*    !*color: #F37321;*!*/
/*    !*font-size: 0.875rem;*!*/
/*    !*margin-bottom: 40px;*!*/
/*    !*letter-spacing: 2px;*!*/
/*}*/

/*.install_step ul li strong {*/
/*    display: block;*/
/*    font-size: 24px;*/
/*    line-height: 44px;*/
/*    font-weight: 300;*/
/*    color: #2F2A2E;*/
/*    margin-bottom: 6px;*/
/*}*/

/*.install_step ul li p {*/
/*    display: none;*/
/*    !*color: #666;*!*/
/*    !*font-size: 14px;*!*/
/*    !*line-height: 1.5em;*!*/
/*    !*font-weight: 300;*!*/
/*    !*display: block;*!*/
/*    !*padding-bottom: 32px;*!*/
/*}*/
#install_step_img {
    /*width: 548px;*/
    /*height: 316px;*/
    width: 314px;
    height: 180px;
    display: block;
    margin: 0 auto 52px;
    /*width: 100%;*/
    border-radius: 25px;
}
.install_img .btn_area {
    margin-bottom: 25px;
}
.install_img .btn_area ul li a {
    width: 150px;
    height: 45px;
    border-radius: 22.5px;
    line-height: 45px;
}
.install_notice {
    font-size: 12px;
    font-weight: 200;
    text-align: center;
}
/*#section3 .inner_14,*/
/*#section4 .inner_12 {*/
/*    !*margin-bottom: 70px;*!*/
/*}*/
/*#section3 .btn_area {*/
/*    width: 548px;*/
/*    margin-top: 0;*/
/*}*/

/* slide 5 */
.card_slide {
    /*max-width: 1000px;*/
    /*margin: 0 auto 32px;*/
    /*display: flex;*/
    /*align-items: center;*/
    /*gap: 10px;*/
    /*overflow-x: hidden;*/
    padding-top: 20px;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s, transform 0.8s;
}
.section.active .card_slide {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s 200ms, transform 0.8s 200ms;
}
.card_slide .swiper-container {
    width: 100%;
    height: 100%;
}

.card_slide .swiper-wrapper {
    transition-timing-function: linear;
}

.card_slide .swiper-slide {
    width: 152px;
    height: 237px;
}

.card-img {
    width: 152px;
    height: 237px;
    user-drag: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    pointer-events: none;
}

/*#section7 .button_bk {*/
/*    display: block;*/
/*    margin: 0 auto;*/
/*    width: 200px;*/
/*    height: 50px;*/
/*    line-height: 50px;*/
/*    border-radius: 25px;*/
/*}*/

/* slide 6 */
#section6 {
    /*background: linear-gradient(180deg, #FF9D00 0%, #FF7600 80%, #FF8900 100%) 0% 0% no-repeat;*/
    /*display: flex;*/
    /*justify-content: center;*/
    /*align-items: center;*/
}
#section6 .app_container {

}
/*#section6 .app_container > .btn_area {*/
/*    margin: 0 auto;*/
/*}*/
#section6 .app_container > .btn_area {
    padding-top: 15px;
    margin-top: 0;
    margin-bottom: 50px;
}
#section6 .app_txt {
    display: none;
}
#section6 .app_img {
    width: 240px;
    display: block;
    margin: 0 auto;
}
#section6 .bg_circle {
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

#section6 a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 150px;
    height: 45px;
    border-radius: 22.5px;
    padding: 0;
}

#section6 .app-icon {
    width: 16px;
}

/* tablet */
@media screen and (min-width: 600px) {
    /* common */
    .button_bk {
        width: 200px;
        height: 50px;
        line-height: 50px;
        border-radius: 25px;
        font-size: 16px;
    }
    .con_tit h2 {
        font-size: 40px;
    }
    .con_tit h3 {
        font-size: 24px;
    }
    /* slide 0 */
    .vis .vis_txt .tit1 {
        font-size: 28px;
        color: #fff;
        margin-bottom: 9px;
        line-height: 32px;
        font-weight: 300;
    }
    .vis .vis_txt .tit2 {
        font-family: 'hanwha';
        font-size: 40px;
        color: #fff;
        margin-bottom: 90px;
    }
    .vis .vis_txt .btn_area ul {
        justify-content: center;
    }
    .vis .vis_txt .btn_area ul li a,
    .vis .vis_txt .btn_area ul li button {
        width: 200px;
        height: 50px;
        border-radius: 25px;
        font-size: 16px;
        line-height: 50px;
        font-weight: 200;
    }
    #section0 #calculator_btn::after {
        top: -60px;
        left: -10px;
        width: 188px;
        height: 51px;
    }

    /* slide 1 */
    .why_con {
        /*padding-bottom: 130px;*/
        width: 440px;
        margin: 0 auto;
        /*display: flex;*/
        flex-direction: row;
        flex-wrap: wrap;
        row-gap: 10px;
        column-gap: 10px;
    }
    .why_con .why_list {
        padding: 40px 18px;
        border-radius: 25px;
        background-color: #fff;
        display: block;
        /*align-items: center;*/
        /*gap: 10px;*/
        position: relative;
        width: 215px;
        height: 265px;
        text-align: center;
    }
    .why_con .why_list img {
        width: unset;
        height: 85px;
        margin-bottom: 28px;
    }
    .why_con .why_list strong {
        font-size: 22px;
        margin-bottom: 14px;
    }
    .why_con .why_list p {
        color: #585858;
        font-size: 12px;
        line-height: 15px;
        font-weight: 200;
    }
    /*.why_con .slick-list {*/
    /*    width: 440px;*/
    /*    display: flex;*/
    /*    flex-wrap: wrap;*/
    /*    margin: 0 auto;*/
    /*}*/
    /*.why_con .slick-slide {*/
    /*    height: max-content;*/
    /*    margin: 0 0 10px;*/
    /*}*/
    /*.why_con .slick-slide:nth-of-type(odd) {*/
    /*    margin-right: 10px;*/
    /*}*/
    /*.why_con .w_c {*/
    /*    width: 215px;*/
    /*}*/
    /*.why_con .w_c .why_list {*/
    /*    box-shadow: none;*/
    /*}*/

    /* slide 2 */
    .price ul {
        display: flex;
        justify-content: center;
        gap: 125px;
    }
    .price ul li {
        /*float: left;*/
        /*width: 50%;*/
        background: transparent;
        border-radius: 0;
        width: max-content;
        box-shadow: none;
        text-align: center;
        /*padding: 45px 0;*/
    }
    .price ul li dl dt {
        color: #404040;
        font-size: 28px;
        margin-bottom: 24px;
        line-height: 24px;
    }
    .price ul li dl dd strong {
        font-size: 40px;
        line-height: 28px;
        color: #FF7F00;
        margin-bottom: 28px;
        display: block;
    }
    .price ul li dl dd p {
        font-weight: 100;
        color: #555555;
        font-size: 16px;
        /*margin-top: 36px;*/
        /*line-height: 25px;*/
    }
    /* slide 3 */
    #section3 .con_tit h3 br {
        display: none;
    }
    .install_step {
        padding-top: 7px;
        display: block;
    }
    .install_step > ul {
        width: 440px;
        padding-left: 82px;
        margin: 0 auto;
    }
    .install_step > ul li {
        display: flex;
        gap: 22px;
        position: relative;
        /*width: 25%;*/
        /*text-align: center;*/
        /*position: relative;*/
        /*opacity: 0;*/
        /*transition: 0.5s;*/
        /*transform: translate(-20px, 0);*/
        /*padding-top: 135px;*/
        /*background-repeat: no-repeat;*/
        /*background-position: center top;*/
    }
    .install_step > ul li:not(:last-of-type)::before {
        content: "";
        display: block;
        position: absolute;
        width: 3px;
        height: 100%;
        background: black;
        top: 36px;
        left: 18px;
    }
    .install_step > ul li span {
        display: block;
        width: 36px;
        height: 36px;
        background: #2F2A2E;
        border-radius: 50%;
        line-height: 36px;
        color: white;
        font-size: 18px;
        text-align: center;
        /*display: block;*/
        /*color: #F37321;*/
        /*font-size: 0.875rem;*/
        /*margin-bottom: 40px;*/
        /*letter-spacing: 2px;*/
    }
    .install_step > ul li strong {
        display: block;
        font-size: 24px;
        line-height: 36px;
        font-weight: 300;
        color: #2F2A2E;
        margin-bottom: 6px;
    }
    .install_step > ul li p {
        /*display: none;*/
        color: #666;
        font-size: 14px;
        line-height: 1.5em;
        font-weight: 300;
        display: block;
        padding-bottom: 24px;
    }
    .install_step .btn_area {
        margin-top: 30px;
    }
    .install_img {
        display: none;
    }

    /* slide 5 */
    .card_slide {
        /*max-width: 1000px;*/
        /*margin: 0 auto 32px;*/
        /*display: flex;*/
        /*align-items: center;*/
        /*gap: 10px;*/
        /*overflow-x: hidden;*/
        max-width: 800px;
        padding-top: 40px;
        margin: 0 auto 50px;
    }

    /* slide 6 */
    #section6 .app_container > .btn_area {
        padding-top: 25px;
    }
    #section6 .app_img {
        width: 320px;
    }
    #section6 a {
        width: 200px;
        height: 50px;
        line-height: 50px;
        border-radius: 25px;
        font-size: 16px;
    }
}

/* desktop small */
@media screen and (min-width: 1024px) {
    /* common */
    .con_tit h2 {
        line-height: 48px;
    }
    .btn_area ul {
        gap: 10px;
    }
    /*#section3 .btn_area ul, #section6 .btn_area ul {*/
    /*    gap: 10px;*/
    /*}*/

    /* slide 0 */
    #section0 {
        background-position: 20% 0%;
    }
    .vis {
        max-width: 1280px;
        margin: 0 auto;
    }
    .vis .vis_txt {
        text-align: left;
        justify-content: flex-start;
    }
    .vis .vis_txt .tit2 {
        margin-bottom: 80px;
    }
    .vis .vis_txt .btn_area ul {
        gap: 10px;
    }
    .vis .vis_txt .btn_area ul li a,
    .vis .vis_txt .btn_area ul li button {
        width: 200px;
        height: 50px;
        border-radius: 28px;
        font-size: 16px;
    }
    .vis .vis_txt .btn_area ul li a span {
        line-height: 50px;
    }
    #section0 #calculator_btn::after {
        top: -52px;
        left: -32px;
    }

    /* slide 1 */
    .why_con {
        /*padding-bottom: 130px;*/
        width: 890px;
        /*margin: 0 auto;*/
        gap: 10px;
    }
    .why_con .slick-list {
        width: 100%;
        display: flex;
        flex-wrap: unset;
        row-gap: unset;
        column-gap: unset;
    }
    .why_con .slick-list .slick-track {
        transform: translateY(0) !important;
    }
    .why_con .slick-slide:nth-of-type(odd) {
        margin: 0 5px;
    }
    .why_con .slick-slide {
        width: 215px;
        margin: 0 5px;
    }
    .why_con .w_c .why_list {
        padding: 42px 20px 34px;
        width: 215px;
    }
    .why_con .w_c img {
        height: 80px;
        margin: 0 auto 35px;
        object-fit: contain;
    }
    .why_con .w_c strong {
        display: block;
        color: #404040;
        font-size: 22px;
        margin-bottom: 14px;
        font-weight: 400;
    }
    .why_con .w_c p {
        color: #585858;
        line-height: 20px;
        font-size: 12px;
        font-weight: 200;
    }

    /* slide 3 */
    #section3 .con_tit h3 br {
        display: none;
    }
    .install_container {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 90px;
    }
    .install_step {
        padding-top: 7px;
        display: block;
    }
    .install_step > ul {
        width: max-content;
        padding-left: 140px;
    }
    .install_step > ul li {
        display: flex;
        gap: 22px;
        position: relative;
    }
    .install_step > ul li div {
        margin-top: -7px;
    }
    .install_step > ul li p {
        color: #2F2A2E;
        line-height: 23px;
        padding-bottom: 32px;
    }
    .install_step .btn_area {
        display: none;
    }
    .install_img {
        display: block;
    }
    .install_img #install_step_img {
        width: 436px;
        height: 252px;
    }
    .install_img .install_notice {
        display: none;
    }
    .install_img .btn_area ul li a {
        width: 200px;
        height: 50px;
        border-radius: 25px;
        line-height: 50px;
    }

    /* slide 5 */
    #section7 .con_tit {
        margin-bottom: 40px;
    }
    .card_slide {
        padding-top: 15px;
        max-width: 848px;
    }

    .card_slide .swiper-slide {
        width: 198px;
        height: 310px;
    }

    .card-img {
        width: 198px;
        height: 310px;
    }

    /* slide 6 */
    .app_container {
        display: flex;
        align-items: center;
        width: max-content;
        justify-content: center;
        margin: 0 auto;
        gap: 140px;
    }
    #section6 .app_txt {
        display: block;
        width: max-content;
        color: black;
    }
    #section6 .app_txt strong {
        font-size: 36px;
        margin-bottom: 10px;
        display: block;
        line-height: 43px;
    }
    #section6 .app_txt > p {
         font-size: 26px;
        color: #555555;
        font-weight: 200;
        margin-bottom: 50px;
    }
    .app_container > .btn_area {
        display: none;
    }
    /*.app_txt > .btn_area {*/
    /*    margin-top: 50px;*/
    /*}*/
    #section6 .bg_circle_3 {
        left: 60%;
    }
}

/* desktop large */
@media screen and (min-width: 1280px) {
    /* common */
    #section3 .btn_area ul, #section6 .btn_area ul {
        gap: 12px;
    }

    .con_tit h2 {
        font-size: 50px;
        line-height: 60px;
        margin-bottom: 12px;
    }
    .con_tit h3 {
        font-size:30px;
    }
    /* slide 0 */
    .vis .vis_txt .btn_area ul {
        justify-content: flex-start;
    }

    .vis .vis_txt .btn_area ul li a,
    .vis .vis_txt .btn_area ul li button {
        width: 200px;
        height: 50px;
        border-radius: 25px;
        font-size: 16px;
    }

    .vis .vis_txt .btn_area ul li a span {
        line-height: 50px;
    }

    /* slide 1 */
    .why_con {
        width: 1116px;
        /*margin: 0 auto;*/
        gap: 12px;
    }
    .why_con .why_list {
        padding: 51px 20px 42px;
        width: 268px;
        height: 335px;
    }
    /*.why_con .w_c .why_list {*/
    /*    width: 268px;*/
    /*}*/

    .why_con .why_list img {
        height: 100px;
        margin: 0 auto 35px;
        object-fit: contain;
    }

    .why_con .why_list strong {
        display: block;
        color: #404040;
        font-size: 26px;
        margin-bottom: 19px;
        font-weight: 400;
        line-height: 40px;
    }

    .why_con .why_list p {
        color: #585858;
        line-height: 25px;
        font-size: 16px;
        font-weight: 200;
    }

    /* slide 2 */
    .price {
        /*padding-bottom: 100px;*/
    }
    .price ul {
        display: flex;
        justify-content: center;
        gap: 320px;
    }
    .price ul li {
        background: transparent;
        border-radius: 0;
        width: max-content;
        box-shadow: none;
        text-align: center;
    }
    .price ul li dl dt {
        color: #404040;
        font-size: 35px;
        margin-bottom: 28px;
        line-height: 60px;
    }
    .price ul li dl dd strong {
        font-size: 50px;
        line-height: 60px;
        color: #FF7F00;
        margin-bottom: 35px;
        display: block;
    }
    .price ul li dl dd p {
        font-weight: 100;
        color: #555555;
        font-size: 21px;
    }
    /*#section2 .button_bk {*/
    /*    width: 200px;*/
    /*    height: 50px;*/
    /*    line-height: 50px;*/
    /*    border-radius: 25px;*/
    /*    font-size: 16px;*/
    /*}*/
    .bg_circle {
        width: 300px;
        height: 300px;
        filter: blur(80px);
    }
    .bg_circle_1 {
        top: 140px;
        left: -130px;
    }
    .bg_circle_2 {
        bottom: 60px;
        right: -100px;
    }
}