body,
html {
    overflow-x: hidden
}

body.fix,
html.fix {
    overflow-y: hidden
}

.location .item+.item {
    margin-top: 3.125em
}

.location .map-box {
    position: relative
}

.location .map-box:after {
    content: "";
    display: block;
    padding-bottom: 34.25em
}

.location .map-box .root_daum_roughmap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.location .map-box .root_daum_roughmap .wrap_map {
    width: 100%;
    height: 100% !important
}

.location .map-box .root_daum_roughmap .wrap_controllers {
    display: none
}

@media screen and (max-width:576px) {
    .location .map-box:after {
        padding-bottom: 19.5714285714em
    }
}

.location .txt-box .tit {
    font-size: 1.25em;
    line-height: 1.3;
    color: #000;
    font-weight: 500;
    position: relative;
    padding-left: 20px;
    margin-top: 1em
}

.location .txt-box .tit:before {
    content: "";
    display: block;
    width: 14px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 0.25em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

@media screen and (max-width:576px) {
    .location .txt-box .tit:before {
        top: 3px
    }
}

.location .txt-box .tit.icon--1:before {
    background-image: url(../images/brand/location_icon1.png)
}

.location .txt-box .tit.icon--2:before {
    background-image: url(../images/brand/location_icon2.png)
}

.location .txt-box .tit.icon--3:before {
    background-image: url(../images/brand/location_icon3.png)
}

.location .txt-box .tit .txt {
    font-size: 0.9em;
    color: #666;
    font-weight: 300;
    display: block;
    margin-top: 0.2777777778em
}

.guide-step .item:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 16px solid #FDD000;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    margin: 1.25em auto
}

.guide-step .item:last-child:after {
    display: none
}

.guide-step .item .inner {
    text-align: center;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    padding: 2.5em 1.25em
}

.guide-step .txt-box .sub-title {
    font-size: 1em;
    line-height: 1;
    font-weight: 500;
    color: #888;
    font-family: "Montserrat", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
}

.guide-step .txt-box .title {
    font-size: 1.25em;
    line-height: 1.3;
    color: #000;
    margin-top: 0.5em
}

.guide-step .img-box {
    margin-top: 1.875em
}

.section-story>.container {
    padding: 0 2.375rem;
    margin-top: 2.8125rem;
    margin-bottom: 2.1875em
}

@media screen and (max-width:768px) {
    .section-story>.container {
        padding: 0 1.25rem
    }
}

.section-story>.container .page-title {
    margin-bottom: 0
}

.story .speech-bubble {
    font-size: 1.75em;
    line-height: 1.3;
    color: #111;
    font-weight: 500;
    max-width: 22.8571428571em;
    padding: 1.0714285714em 1.4285714286em;
    border-radius: 0.6428571429em;
    background-color: #fff;
    text-align: center;
    margin: 0 auto;
    position: relative
}

.story .speech-bubble:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 100%
}

.story .speech-bubble.left-bottom:after {
    border-bottom: 20px solid transparent;
    border-right: 20px solid transparent;
    border-left: 25px solid #fff;
    left: 0.8214285714em
}

.story .speech-bubble.right-bottom:after {
    border-bottom: 20px solid transparent;
    border-right: 25px solid #fff;
    border-left: 20px solid transparent;
    right: 0.8214285714em
}

.story .speech-bubble+.speech-bubble {
    margin-top: 2.1428571429em
}

.story .underline {
    display: inline;
    background: url(../images/brand/underline.jpg) repeat-x 0 100%;
    padding-bottom: 5px
}

@media screen and (max-width:1024px) {
    .story .underline {
        background: url(../images/brand/underline--lg.jpg) repeat-x 0 100%;
        padding-bottom: 3px
    }
}

@media screen and (max-width:1024px) {
    .story .speech-bubble {
        font-size: 1.3333333333em;
        max-width: 21.3333333333em;
        padding: 0.75em 1em;
        border-radius: 0.45em
    }

    .story .speech-bubble.left-bottom:after {
        border-bottom: 0.5em solid transparent;
        border-right: 0.5em solid transparent;
        border-left: 0.625em solid #fff;
        left: 0.575em
    }

    .story .speech-bubble.right-bottom:after {
        border-bottom: 0.5em solid transparent;
        border-right: 0.625em solid #fff;
        border-left: 0.5em solid transparent;
        right: 0.575em
    }

    .story .speech-bubble+.speech-bubble {
        margin-top: 1.5em
    }
}

.story--move .speech-bubble:after {
    display: none
}

.story--move .speech-bubble:before {
    content: "";
    display: block;
    background: url(../images/brand/search_i.png) no-repeat;
    width: 1.75rem;
    height: 1.6875rem;
    background-size: 100%;
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%)
}

.story--move .speech-bubble:first-of-type,
.story--move .speech-bubble:nth-of-type(3) {
    margin-left: 9.375rem
}

@media screen and (max-width:768px) {

    .story--move .speech-bubble:first-of-type,
    .story--move .speech-bubble:nth-of-type(3) {
        margin: 0.9375rem auto
    }
}

.story--move .speech-bubble:nth-of-type(2) {
    margin-right: 9.375rem
}

@media screen and (max-width:768px) {
    .story--move .speech-bubble:nth-of-type(2) {
        margin: 0.9375rem auto
    }
}

.story--1 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* background-image: url(../images/brand/story1_bg1.jpg); */
    background-image: url(../images/brand/Rectangle%20277.png);
    text-align: center;
    /* padding-top: 9.375rem */
}

.story--1 .text-box {
    margin-top: 5.3125em
}

.story--1 .text-box .text--1 {
    font-size: 3em;
    line-height: 1.3;
    font-weight: 700;
    color: #fff
}

.story--1 .img-box {
    margin-top: 5.9375em
}

.story--1 .img-box img {
    width: 100%;
    max-width: 618px
}

.story--1 .img-box--move img {
    max-width: 33.8125rem
}

.story--1 .img-box--clean img {
    max-width: 34.1875rem
}

@media screen and (max-width:1024px) {
    .story--1 .text-box {
        margin-top: 2.8333333333em
    }

    .story--1 .text-box .text--1 {
        font-size: 1.4666666667em
    }

    .story--1 .img-box {
        margin-top: 3.1666666667em
    }

    .story--1 .img-box img {
        max-width: 309px
    }
}

.story--2 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../images/brand/story2_bg1.jpg);
    padding: 28.125em 0
}

@media screen and (min-width:1024.02px) {
    .story--2 {
        background-attachment: fixed
    }
}

.story--2 .text-box .text--1 {
    font-size: 3.5em;
    line-height: 1.5;
    color: #fff;
    font-weight: 700
}

@media screen and (max-width:1024px) {
    .story--2 {
        padding: 15em 0
    }

    .story--2 .text-box .text--1 {
        font-size: 2.4888888889em
    }
}

@media screen and (max-width:576px) {
    .story--2 {
        padding: 10em 0
    }

    .story--2 .text-box .text--1 {
        font-size: 1.9047619048em
    }
}

.story--3 {
    padding: 7.1875em 0
}

.story--3 .text-box {
    text-align: center;
    margin-bottom: 4.375em
}

.story--3 .text-box .text--1 {
    font-size: 3em;
    line-height: 1.5;
    color: #010101;
    font-weight: 700
}

.story--3 .box-list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    margin: 0 -1.25em -2.5em;
    letter-spacing: -0.02em
}

.story--3 .box-list .item {
    width: 100%;
    max-width: 33.3333%;
    flex: 1 0 33.3333%;
    padding: 0 1.25em 2.5em
}

.story--3 .box-list .item .inner {
    height: 100%;
    padding: 2.8125em 2.5em;
    border-radius: 1.5625em;
    box-shadow: 0 0 0.625em rgba(0, 0, 0, 0.108)
}

.story--3 .box-list .icon img {
    height: 3.75em
}

.story--3 .box-list .title {
    font-size: 2em;
    line-height: 1.3;
    color: #010101;
    font-weight: 700;
    margin-top: 0.78125em
}

.story--3 .box-list .desc {
    font-size: 1.125em;
    line-height: 1.5;
    color: #666;
    margin-top: 1.1111111111em
}

@media screen and (max-width:1600px) {
    .story--3 .box-list .desc br {
        display: none
    }
}

@media screen and (max-width:1200px) {
    .story--3 .text-box {
        text-align: center;
        margin-bottom: 4.375em
    }

    .story--3 .text-box .text--1 {
        font-size: 3em;
        line-height: 1.5;
        color: #010101;
        font-weight: 700
    }

    .story--3 .box-list .icon img {
        height: 2.5em
    }

    .story--3 .box-list .title {
        font-size: 1.625em
    }

    .story--3 .box-list .desc {
        font-size: 1.125em
    }
}

@media screen and (max-width:1024px) {
    .story--3 {
        padding: 5.1111111111em 0
    }

    .story--3 .text-box {
        margin-bottom: 3.1111111111em
    }

    .story--3 .text-box .text--1 {
        font-size: 2.1333333333em
    }

    .story--3 .box-list .item {
        max-width: 100%;
        flex: 1 0 100%
    }
}

.story--4 {
    background-color: #f8f8f8;
    padding: 7.1875em 0
}

.story--4 .text-box {
    margin-bottom: 4.0625em
}

.story--4 .text-box .text--1 {
    font-size: 3em;
    line-height: 1.3;
    color: #010101;
    font-weight: 700
}

.story--4 .text-box .text--2 {
    font-size: 1.75em;
    line-height: 1.5;
    color: #666;
    margin-top: 0.9821428571em
}

.story--4 .img-slide {
    position: relative;
    max-width: 576px
}

.story--4 .img-slide .item {
    position: relative
}

.story--4 .img-slide .item .img-box {
    display: block;
    position: relative;
    overflow: hidden
}

.story--4 .img-slide .item .img-box:after {
    content: "";
    display: block;
    padding-bottom: 87.5%
}

.story--4 .img-slide .item .img-box>img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    min-width: 1000%;
    min-height: 1000%;
    max-width: none;
    max-height: none;
    transform: translate(-50%, -50%) scale(0.1)
}

.story--4 .img-slide .item .text {
    font-size: 1.75em;
    font-weight: medium;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3125rem 1.875rem;
    z-index: 2;
    border-radius: 50px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    text-align: center
}

.story--4 .img-slide .swiper-pagination {
    position: absolute;
    bottom: 3.5714285714%;
    left: 50%;
    transform: translateX(-50%)
}

.story--4 .img-slide .swiper-pagination-bullet {
    width: 0.875em;
    height: 0.875em;
    border-radius: 0.4375em;
    background-color: #fff;
    opacity: 1;
    margin: 0 0.375em;
    transition: all 300ms ease-out
}

.story--4 .img-slide .swiper-pagination-bullet-active {
    width: 3em;
    background-color: #FDD000
}

@media screen and (max-width:1024px) {
    .story--4 {
        padding: 5.1111111111em 0
    }

    .story--4 .text-box {
        margin-bottom: 2.8888888889em
    }

    .story--4 .text-box .text--1 {
        font-size: 2.1333333333em
    }

    .story--4 .text-box .text--2 {
        font-size: 1.2444444444em
    }

    .story--4 .img-slide {
        font-size: 0.8em
    }
}

@media screen and (max-width:576px) {
    .story--4 .img-slide {
        font-size: 0.6em
    }

    .story--4 .img-slide .item .text {
        bottom: 11%
    }
}

.story--5 {
    padding: 6.875em 0
}

.story--5 .text-box .text--1 {
    font-size: 3em;
    line-height: 1.5;
    color: #010101;
    font-weight: 700
}

.story--5 .icon-list {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    justify-content: flex-start;
    margin: 5.3125em -1.25em -2.5em
}

.story--5 .icon-list .item {
    padding: 0 1.25em;
    margin-bottom: 2.5em;
    width: 100%;
    max-width: 16.6666%;
    flex: 1 0 16.6666%
}

.story--5 .icon-list .item .inner {
    text-align: center
}

.story--5 .icon-list .img-box img {
    width: 100%;
    max-width: 10.625em
}

.story--5 .icon-list .text-box {
    margin-top: 1.625em
}

.story--5 .icon-list .text-box .text {
    font-size: 2.125em;
    line-height: 1;
    color: #010101;
    font-weight: 700
}

@media screen and (max-width:1024px) {
    .story--5 {
        padding: 4.8888888889em 0
    }

    .story--5 .text-box .text--1 {
        font-size: 1.8666666667em
    }

    .story--5 .icon-list {
        flex-wrap: wrap
    }

    .story--5 .icon-list .item {
        max-width: 33.3333%;
        flex: 1 0 33.3333%
    }

    .story--5 .icon-list .text-box {
        margin-top: 1.625em
    }

    .story--5 .icon-list .text-box .text {
        font-size: 2.125em;
        line-height: 1;
        color: #010101;
        font-weight: 700
    }
}

@media screen and (max-width:768px) {
    .story--5 .icon-list .img-box img {
        width: 100%;
        max-width: 6.0714285714em
    }

    .story--5 .icon-list .text-box .text {
        font-size: 1.7142857143em
    }
}

@media screen and (max-width:768px) {
    .story--5 .icon-list .item {
        max-width: 50%;
        flex: 1 0 50%
    }
}

.story--6 {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url(../images/brand/story6_bg1.jpg);
    padding: 18.75em 0
}

@media screen and (min-width:1024.02px) {
    .story--6 {
        background-attachment: fixed
    }
}

.story--6 .text-box {
    color: #fff
}

.story--6 .text-box .text--1 {
    font-size: 3.5em;
    line-height: 1.5;
    font-weight: 700
}

.story--6 .text-box .text--2 {
    font-size: 1.75em;
    line-height: 1.5;
    margin-top: 1.3928571429em
}

.story--6 .text-box .text--3 {
    font-size: 3em;
    line-height: 1.5;
    font-weight: 500;
    margin-top: 1.25em
}

@media screen and (max-width:1024px) {
    .story--6 {
        padding: 10em 0
    }

    .story--6 .text-box .text--1 {
        font-size: 2.4888888889em
    }

    .story--6 .text-box .text--2 {
        font-size: 1.2444444444em
    }

    .story--6 .text-box .text--3 {
        font-size: 2.1333333333em
    }
}

@media screen and (max-width:576px) {
    .story--6 {
        padding: 7.1428571429em 0
    }

    .story--6 .text-box .text--1 {
        font-size: 2em
    }

    .story--6 .text-box .text--2 {
        font-size: 1em
    }

    .story--6 .text-box .text--3 {
        font-size: 1.7142857143em
    }
}

.story--7 {
    background-color: #f8f8f8;
    padding: 7.1875em 0
}

.story--7 .text-box .text--1 {
    font-size: 3.5em;
    line-height: 1;
    color: #000;
    font-weight: 700
}

.story--7 .text-box .text--2 {
    font-size: 1.75em;
    line-height: 1.5;
    color: #666;
    margin-top: 1.0714285714em
}

.story--7 .btn-box {
    margin-top: 4.0625em
}

@media screen and (min-width:1024.02px) {
    .story--7 .btn-box {
        display: flex;
        align-items: flex-start
    }

    .story--7 .btn-box .link-btn {
        margin: 0 0.625em
    }

    .story--7 .btn-box .link-btn:first-child {
        margin-left: 0
    }

    .story--7 .btn-box .link-btn:last-child {
        margin-right: 0
    }
}

.story--7 .btn-box .link-btn {
    font-size: 1.75em;
    max-width: 22.8571428571em;
    padding: 1.0714285714em 1.0714285714em;
    border-radius: 0.4464285714em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 0.3571428571em rgba(0, 0, 0, 0.08)
}

.story--7 .btn-box .link-btn .text {
    padding-left: 2.3214285714em;
    position: relative
}

.story--7 .btn-box .link-btn .text:before {
    content: "";
    display: block;
    width: 1.5714285714em;
    height: 1.2857142857em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.story--7 .btn-box .link-btn .text.icon--1:before {
    background-image: url(../images/brand/story7_icon1.png)
}

.story--7 .btn-box .link-btn .text.icon--2:before {
    background-image: url(../images/brand/story7_icon2.png)
}

.story--7 .btn-box .link-btn .text.icon--3:before {
    background-image: url(../images/brand/story7_icon3.png)
}

@media screen and (max-width:1024px) {
    .story--7 {
        padding: 5.1111111111em 0
    }

    .story--7 .text-box .text--1 {
        font-size: 2em
    }

    .story--7 .text-box .text--2 {
        font-size: 1.4666666667em
    }

    .story--7 .btn-box {
        margin-top: 2.1666666667em
    }

    .story--7 .btn-box .link-btn {
        font-size: 1.2em;
        max-width: 23.7037037037em;
        padding: 0.8333333333em 1.6666666667em;
        border-radius: 0.3472222222em;
        box-shadow: 0 0 0.5555555556em rgba(0, 0, 0, 0.08)
    }

    .story--7 .btn-box .link-btn+.link-btn {
        margin-top: 1.0555555556em
    }

    .story--7 .btn-box .link-btn .text {
        padding-left: 1.8055555556em
    }

    .story--7 .btn-box .link-btn .text:before {
        width: 1.2222222222em;
        height: 1em
    }
}

@media screen and (max-width:576px) {
    .story--7 .text-box .text--1 {
        font-size: 1.8571428571em
    }

    .story--7 .text-box .text--2 {
        font-size: 1.2857142857em
    }

    .story--7 .btn-box .link-btn {
        font-size: 1.1428571429em;
        padding: 0.9375em 1.25em
    }

    .story--7 .btn-box .link-btn+.link-btn {
        margin-top: 1.1875em
    }

    .story--7 .btn-box .link-btn .text {
        padding-left: 2.03125em
    }

    .story--7 .btn-box .link-btn .text:before {
        width: 1.375em;
        height: 1.125em
    }
}

.story--8 {
    background-position: center;
    background-size: 400px;
    background-image: url(../images/brand/story8_bg1.jpg);
    text-align: center;
    padding: 18.75em 0
}

.story--8 .text-box {
    text-align: center
}

.story--8 .text-box .text--1 {
    font-size: 2.75em;
    line-height: 1.5;
    color: #010101;
    font-weight: 700;
    text-shadow: 0 0 0.4545454545em #fffae9
}

@media screen and (max-width:1024px) {
    .story--8 {
        background-repeat: no-repeat;
        background-size: cover;
        background-image: url(../images/brand/story8_bg1_m.jpg)
    }
}

@media screen and (max-width:576px) {
    .story--8 {
        padding: 0;
        position: relative
    }

    .story--8:before {
        content: "";
        display: block;
        padding-top: 113.3333333333%
    }

    .story--8 .text-box {
        width: 100%;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        font-size: 2vw
    }
}