@charset "UTF-8";

body {
    overflow-x: auto;
    overflow-y: auto;
}

body.display #body {
    position: relative;
    width: 100%;
    height: auto;
}

body.display #body #displayCanvas {
    position: relative;
    /* width: 100%; */
    padding: 0;
    min-height: 100%;
}

body.display #ajax_ing {
    display: none;
}

body.display .body .document-background {
    display: block;
    z-index: -1;
    background-color: #000;
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity .25s cubic-bezier(.33, 0, .2, 1);
    -moz-transition: opacity .25s cubic-bezier(.33, 0, .2, 1);
    -ms-transition: opacity .25s cubic-bezier(.33, 0, .2, 1);
    -o-transition: opacity .25s cubic-bezier(.33, 0, .2, 1);
    transition: opacity .25s cubic-bezier(.33, 0, .2, 1);
}

#body > .document-background.sideMenuList-opened {
    min-height: 100vh;
    z-index: 10001;
    filter: alpha(opacity=30);
    opacity: 0.3;
}

body.display .body.document-loading .document-background {
    display: block;
    background: #fff;
    z-index: 0;
    opacity: 0;
}

body.display .body.document-loading #siteFooter {
    visibility: hidden;
}

body.display #body > .container-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
}

body.display #body.systemPage.signupComplete > .container-background {
    z-index: 1;
}

body.display #body.systemPage.signupComplete .siteHeader,
body.display #body.systemPage.signupComplete #siteFooter {
    display: none;
}

body .ckeditor-content u span {
    text-decoration: underline;
}

body .ckeditor-content iframe,
body .ckeditor-content img {
    max-width: 100%;
}

body .ckeditor-content img {
    height: auto;
}

.section-background.background-image {
    background-color: transparent;
    background-attachment: scroll;
}

.section-background.background-mask {
    background-color: black;
    z-index: 0;
    opacity: 0;
    -webkit-transition: 0s;
    -moz-transition: 0s;
    -ms-transition: 0s;
    -o-transition: 0s;
    transition: 0s;
    display: block;
}

body.mobile, body.tablet {
    -webkit-overflow-scrolling: touch;
}

body.mobile #body, body.tablet #body {
    -webkit-text-size-adjust: none;
}

body.tablet #body.tablet-off #displayCanvas .section {
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
}

body.display #body.device-mobile #displayCanvas .section-wrapper,
body.display #body.device-tablet #displayCanvas .section-wrapper {
    position: relative;
    top: 0 !important;
    display: block;
    visibility: visible;
}

body.display.mobile #body #displayCanvas .section-wrapper.prev-section,
body.display.tablet #body #displayCanvas .section-wrapper.prev-section {
    display: block;
}

body.display #body.device-mobile #displayCanvas .section-wrapper .fixed-item,
body.display #body.device-tablet #displayCanvas .section-wrapper .fixed-item {
    position: absolute !important;
    visibility: visible;
}

body.display.mobile .section-wrapper .section-background.background-color,
body.display.tablet .section-wrapper .section-background.background-color {
    height: 100% !important;
}

body.display.mobile .section-wrapper .section-background.background-image,
body.display.tablet .section-wrapper .section-background.background-image {
    height: 100% !important;
    background-attachment: scroll !important;
    background-size: cover !important;
}

body.display.mobile #body #displayCanvas .section-wrapper .section,
body.display.tablet #body #displayCanvas .section-wrapper .section {
    height: 100% !important;
    /* overflow-y:scroll; */
}

body.display.mobile .section-wrapper .section-background.background-mask,
body.display.talbet .section-wrapper .section-background.background-mask {
    display: none;
}

/* handle jquery.mobile */
body.mobile > .ui-page {
    min-height: initial !important;
}

body.mobile > .ui-loader {
    display: none;
}

/* media query for desktop */
@media screen and (min-width: 641px) {
    /* header-style-effect-type-none */
    #body.header-style-effect-type-none.logoImageWhenHeaderInHero-use.logoImageWhenHeaderInHero-loaded.hero-use #headerLogo .site-name,
    #body.header-style-effect-type-none.logoImageWhenHeaderInHero-use.logoImageWhenHeaderInHero-loaded.hero-use #headerLogo .site-logo {
        display: none !important;
    }

    #body.header-style-effect-type-none.logoImageWhenHeaderInHero-use.logoImageWhenHeaderInHero-loaded.hero-use #headerLogo .site-logoImageWhenHeaderInHero {
        display: block;
    }

    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-none #headerLogo,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-none #headerCart,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-none .headerMenuList:not(.slide-menu) .headerMenuListContents > .menu-navi > .menu-name,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-none .headerProductSearch,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-none .headerCustomer,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-none .headerSns .headerSns-icons {
        color: #222 !important;
    }

    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-none #headerLogo,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-none #headerCart,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-none .headerMenuList:not(.slide-menu) .headerMenuListContents > .menu-navi > .menu-name,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-none .headerProductSearch,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-none .headerCustomer,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-none .headerSns .headerSns-icons {
        color: #fff !important;
    }

    /* header-style-effect-type-fixedAtTop */
    #body.header-style-effect-type-fixedAtTop .siteHeader:not(.placeholder) {
        position: fixed !important;
        z-index: 1000;
    }

    #body.header-style-effect-type-fixedAtTop .siteHeader:not(.placeholder).scrolled {
        z-index: 1000;
    }

    #body.header-style-effect-type-fixedAtTop:not(.mobile) .siteHeader:not(.placeholder) {
        top: 0;
        left: 0;
    }

    #body.header-style-effect-type-fixedAtTop {
        border-top: 0 !important;
    }

    #body.header-style-effect-type-fixedAtTop.logoImageWhenHeaderInHero-use.logoImageWhenHeaderInHero-loaded.hero-use .siteHeader:not(.scrolled) #headerLogo .site-logoImageWhenHeaderInHero {
        display: block;
    }

    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) #headerLogo,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) #headerCart,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) .headerMenuList .headerMenuListContents > .menu-navi > .menu-name,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) .headerProductSearch,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) .headerCustomer,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) .headerSns .headerSns-icons {
        color: #222 !important;
    }

    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) #headerLogo,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) #headerCart,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) .headerMenuList .headerMenuListContents > .menu-navi > .menu-name,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) .headerProductSearch,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) .headerCustomer,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-type-fixedAtTop .siteHeader:not(.scrolled) .headerSns .headerSns-icons {
        color: #fff !important;
    }

    #body.hero-use.hero-header-position-headerInHero .headerMenuList .headerMenuListContents > .menu-navi.now > .menu-name,
    #body.hero-use.hero-header-position-headerInHero .headerMenuList .headerMenuListContents > .menu-navi:hover > .menu-name,
    #body.hero-use.hero-header-position-headerInHero #headerCartAndCustomer .headerProductSearch:hover,
    #body.hero-use.hero-header-position-headerInHero #headerCartAndCustomer .headerCustomer:hover,
    #body.hero-use.hero-header-position-headerInHero #headerCartAndCustomer #headerCart:hover,
    #body.hero-use.hero-header-position-headerInHero .headerSns .headerSns-icons:hover {
        opacity: 0.8;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
    }

    #body.hero-use.hero-header-position-headerInHero.header-style-effect-type-fixedAtTop .siteHeader.scrolled .headerMenuList .headerMenuListContents > .menu-navi.now > .menu-name,
    #body.hero-use.hero-header-position-headerInHero.header-style-effect-type-fixedAtTop .siteHeader.scrolled .headerMenuList .headerMenuListContents > .menu-navi:hover > .menu-name,
    #body.hero-use.hero-header-position-headerInHero.header-style-effect-type-fixedAtTop .siteHeader.scrolled #headerCartAndCustomer .headerProductSearch:hover,
    #body.hero-use.hero-header-position-headerInHero.header-style-effect-type-fixedAtTop .siteHeader.scrolled #headerCartAndCustomer .headerCustomer:hover,
    #body.hero-use.hero-header-position-headerInHero.header-style-effect-type-fixedAtTop .siteHeader.scrolled #headerCartAndCustomer #headerCart:hover,
    #body.hero-use.hero-header-position-headerInHero.header-style-effect-type-fixedAtTop .siteHeader.scrolled .headerSns .headerSns-icons:hover {
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        -khtml-opacity: 1;
    }

    .top-banner-layout ~ #body.header-style-effect-type-fixedAtTop .siteHeader:not(.placeholder) {
        position: absolute !important;
    }

    .top-banner-layout ~ #body.header-style-effect-type-fixedAtTop.desktop .siteHeader:not(.placeholder).topBanner-active-scrolled {
        position: fixed !important;
        top: 0 !important;
        left: 0;
    }
}

/* media query for mobile */
@media screen and (max-width: 640px) {
    /* exception for entire-style-border */
    body.display #body,
    body.display #body.hero-header-position-headerInHero #displayCanvas .productDetail.wrapper .productDetailNaviWrap.fixedTop {
        border: 0;
    }

    body.display #body.hero-header-position-headerOnHero #displayCanvas {
        border-top: 0;
        border-bottom: 0;
    }

    body.display #body.hero-header-position-headerOnHero #siteFooter {
        border-top: 0;
    }

    /* header-style-effect-mobile-type-none */
    .body .siteHeader:not(.placeholder),
    .body.header-style-effect-mobile-type-none .siteHeader:not(.placeholder) {
        z-index: 999;
    }

    #body.header-style-effect-mobile-type-none.logoImageWhenHeaderInHero-use.logoImageWhenHeaderInHero-loaded.hero-use #headerLogo .site-name,
    #body.header-style-effect-mobile-type-none.logoImageWhenHeaderInHero-use.logoImageWhenHeaderInHero-loaded.hero-use #headerLogo .site-logo {
        display: none !important;
    }

    #body.header-style-effect-mobile-type-none.logoImageWhenHeaderInHero-use.logoImageWhenHeaderInHero-loaded.hero-use #headerLogo .site-logoImageWhenHeaderInHero {
        display: block;
    }

    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-mobile-type-none #headerLogo,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-mobile-type-none #headerCart,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-mobile-type-none .headerProductSearch,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-mobile-type-none .headerCustomer,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-mobile-type-none .row.row-search.mobile {
        color: #222 !important;
    }

    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-mobile-type-none #headerLogo,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-mobile-type-none #headerCart,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-mobile-type-none .headerProductSearch,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-mobile-type-none .headerCustomer,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-mobile-type-none .row.row-search.mobile {
        color: #fff !important;
    }

    /* header-style-effect-mobile-type-fixedAtTop */
    #body.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.placeholder) {
        position: fixed !important;
        z-index: 1000;
    }

    #body.header-style-effect-mobile-type-fixedAtTop .siteHeader.scrolled:not(.placeholder) {
        z-index: 1000;
    }

    #body.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.placeholder) {
        top: 0;
        left: 0;
    }

    #body.header-style-effect-mobile-type-fixedAtTop.logoImageWhenHeaderInHero-use.logoImageWhenHeaderInHero-loaded.hero-use .siteHeader.scrolled #headerLogo .site-logo,
    #body.header-style-effect-mobile-type-fixedAtTop.logoImageWhenHeaderInHero-use.logoImageWhenHeaderInHero-loaded.hero-use .siteHeader:not(.scrolled) #headerLogo .site-logoImageWhenHeaderInHero {
        display: block;
    }

    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.scrolled) #headerLogo,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.scrolled) #headerCart,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.scrolled) .headerProductSearch,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.scrolled) .headerCustomer,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.scrolled) .row.row-search.mobile {
        color: #222 !important;
    }

    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.scrolled) #headerLogo,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.scrolled) #headerCart,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.scrolled) .headerProductSearch,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.scrolled) .headerCustomer,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.scrolled) .row.row-search.mobile {
        color: #fff !important;
    }

    .top-banner-layout ~ #body.header-style-effect-mobile-type-fixedAtTop .siteHeader:not(.placeholder) {
        position: absolute !important;
    }

    .top-banner-layout ~ #body.header-style-effect-mobile-type-fixedAtTop.mobile .siteHeader:not(.placeholder).topBanner-active-scrolled {
        position: fixed !important;
        top: 0 !important;
        left: 0;
    }

    /* mobile submenu */
    /* hero-header-position-headerInHero dark */
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark .mobileSubmenuList,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-dark .mobileSubmenuList .mobileSubmenu.now > a {
        color: #222 !important;
    }

    /* hero-header-position-headerInHero white */
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light .mobileSubmenuList,
    #body.hero-use.hero-header-position-headerInHero.hero-style-type-light .mobileSubmenuList .mobileSubmenu.now > a {
        color: #fff !important;
    }

    /* hero-header-position-headerInHero now page opacity */
    #body.hero-use.hero-header-position-headerInHero .mobileSubmenuList .mobileSubmenu.now > a {
        opacity: 0.8;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        -khtml-opacity: 0.8;
    }
}

/* custom-select */
.custom-select-final-option {
    display: none;
}

.custom-select-wrapper {
    position: relative;
}

.custom-select-wrapper .custom-select-box {
    position: static;
    cursor: pointer;
}

.custom-select-wrapper .custom-select-box .custom-select-box-label.custom-select-selected-option-value.custom-select-selected-option-value-disabled {
    pointer-events: none;
    opacity: 0.4;
}

.custom-select-wrapper .custom-select-box .custom-select-box-list {
    position: absolute;
    top: 100%;
    margin-top: -1px;
    left: 0;
    z-index: 1001;
    background-color: white;
    border: 1px solid black;
    max-width: 100%;
}

.align_right .custom-select-wrapper .custom-select-box .custom-select-box-list {
    left: auto;
    right: 0;
}

.custom-select-wrapper .custom-select-box .custom-select-box-list[data-option-arrangement="sideways"] {
    min-width: 250px;
}

.custom-select-wrapper .custom-select-box .custom-select-box-list.custom-select-box-list-hide {
    display: none;
}

.custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-overlay {
    display: none;
}

.custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner {
    /* TODO: nested 되어도 스타일에 변형이 없도록 해줘야함 */
}

.custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 14px;
    line-height: 1.4em;
    cursor: pointer;
}

.custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option.custom-select-option-hide {
    display: none;
}

.custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option .custom-select-option-info {
    display: flex;
    flex-grow: 1;
    padding: 9px 15px 9px 15px;
    word-break: break-all;
    text-align: left;
}

.custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option .custom-select-option-price {
    padding-right: 15px;
}

.custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option[data-soldout="true"] .custom-select-option-info,
.custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option[data-soldout="true"] .custom-select-option-price {
    pointer-events: none;
    opacity: 0.4;
}

.custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option .custom-select-option-restock-action {
    cursor: pointer;
    white-space: nowrap;
    font-size: 13px;
    padding-right: 15px;
}

@media (max-width: 640px) {
    .custom-select-wrapper .custom-select-box .custom-select-box-list {
        margin-top: unset;
        z-index: unset;
        background-color: unset;
        border: unset;
        max-width: unset;
    }

    .custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-overlay,
    .together-buy-products-select .custom-select-box-list-overlay {
        display: block;
        position: fixed;
        top: -25vh;
        left: 0;
        width: 100vw;
        height: 125vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9998;
    }

    .custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner {
        width: calc(100vw - 32px);
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        border-radius: 5px;
        padding-top: 20px;
        padding-bottom: 20px;
        max-height: 480px;
        overflow-y: scroll;
        z-index: 9999;
    }

    #restockOptionsDiv .custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-overlay {
        left: -16px;
        z-index: 10002;
    }

    #restockOptionsDiv .custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner {
        z-index: 10003;
    }

    .custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option {
        background-color: #fff;
        flex-direction: column;
        padding: 1rem;
        font-size: 16px;
        color: #222;
    }

    .custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option .custom-select-option-info,
    .custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option .custom-select-option-price {
        display: block;
        text-align: center;
        padding: 0;
        width: 100%;
    }

    .custom-select-wrapper .custom-select-box .custom-select-box-list .custom-select-box-list-inner .custom-select-option .custom-select-option-restock-action {
        color: #4095f1 !important;
        padding-top: 0.5rem;
        font-size: 14px;
        padding-right: 0;
    }
}

/* customized-option */
.customizedOption:disabled {
    opacity: 0.4;
}

/* lightbox - common */
#lightbox.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 100000;
}

#lightbox.lightbox .lightboxWrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    -webkit-transition: all 350ms cubic-bezier(.25, .46, .45, .94);
    -moz-transition: all 350ms cubic-bezier(.25, .46, .45, .94);
    -o-transition: all 350ms cubic-bezier(.25, .46, .45, .94);
    transition: all 350ms cubic-bezier(.25, .46, .45, .94);
}

#lightbox.lightbox .lightboxContent {
    display: table;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

#lightbox.lightbox .contentPosition {
    display: table-cell;
    vertical-align: middle;
    position: relative;
}

#lightbox.lightbox .lightboxContent .content {
    position: relative;
    max-width: 85vw;
    max-height: 100vh;
    margin: 0 auto;
    line-height: 0;
}

#lightbox.lightbox .lightboxContent .content:hover .ligthboxInfo {
    filter: alpha(opacity=100);
    opacity: 1 !important;
}

#lightbox.lightbox .lightboxImg,
#lightbox.lightbox .lightBox-slide {
    max-width: 85vw;
    max-height: 85vh;
}

#lightbox.lightbox .content.video {
    width: 85vw;
    height: 85vh;
}

#lightbox.lightbox .content.color {
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightbox.lightbox .content.color .lightBox-slide {
    position: relative;
    width: 100%;
    padding-top: 62.5%;
}

/* lightbox - content info */
#lightbox.lightbox .ligthboxInfo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 100%;
    padding: 20px;
    opacity: 0;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
}

#lightbox.lightbox .ligthboxMobileInfo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 100%;
    padding: 20px;
    -webkit-transition: all .1s linear;
    -moz-transition: all .1s linear;
    -o-transition: all .1s linear;
    transition: all .1s linear;
}

#lightbox.lightbox .ligthboxInfo > div,
#lightbox.lightbox .ligthboxMobileInfo > div {
    text-align: left;
    line-height: 1.5em;
}

#lightbox.lightbox.dark .ligthboxMobileInfo {
    background-image: url(../../images/common/background_overlay_black.png);
    background-repeat: repeat;
}

#lightbox.lightbox.light .ligthboxMobileInfo {
    background-image: url(../../images/common/background_overlay_white.png);
    background-repeat: repeat;
}

#lightbox.lightbox .ligthboxInfo .ligthboxTitle {
    font-size: 18px !important;
    margin-bottom: 15px;
}

#lightbox.lightbox .ligthboxMobileInfo .ligthboxMobileTitle {
    font-size: 18px !important;
    margin-bottom: 15px;
}

#lightbox.lightbox .ligthboxInfo .ligthboxDescription {
    font-size: 14px !important;
    line-height: 1.25em;
}

#lightbox.lightbox .ligthboxMobileInfo .ligthboxMobileDescription {
    font-size: 14px !important;
    line-height: 1.25em;
}

#lightbox.lightbox .lightboxMobileInfoShowButton,
#lightbox.lightbox .lightboxMobileInfoHideButton {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 20px;
    height: 20px;
    padding: 10px;
    box-sizing: initial;
    border-radius: 25px;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    z-index: 10000000;
}

#lightbox.lightbox.dark .lightboxMobileInfoShowButton,
#lightbox.lightbox.dark .lightboxMobileInfoHideButton {
    background-image: url(../../images/icon/white/ic-information.png);
    background-repeat: no-repeat;
    background-position: center center;
}

#lightbox.lightbox.light .lightboxMobileInfoShowButton,
#lightbox.lightbox.light .lightboxMobileInfoHideButton {
    background-image: url(../../images/icon/black/ic-information.png);
    background-repeat: no-repeat;
    background-position: center center;
}

/* lightbox - style */
#lightbox.lightbox.dark {
    background-image: url(../../images/common/background_overlay_black.png);
    background-repeat: repeat;
}

#lightbox.lightbox.dark .ligthboxInfo {
    background-color: rgba(0, 0, 0, 0.7);
}

#lightbox.lightbox.light {
    background-image: url(../../images/common/background_overlay_white.png);
    background-repeat: repeat;
}

#lightbox.lightbox.light .ligthboxInfo {
    background-color: rgba(255, 255, 255, 0.7);
}

#lightbox.lightbox .icon-close {
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 15px;
    border-radius: 25px;
    box-sizing: initial;
    width: 25px;
    height: 25px;
    display: inline-block;
    background-position: center center !important;
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: 0.8;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    z-index: 10000000;
}

#lightbox.lightbox.dark .icon-close {
    background-image: url(../../images/icon/white/ic-close.png);
}

#lightbox.lightbox.light .icon-close {
    background-image: url(../../images/icon/black/ic-close.png);
}

#lightbox.lightbox.dark .ligthboxInfo > div,
#lightbox.lightbox.dark .ligthboxMobileInfo > div {
    color: #fff;
}

#lightbox.lightbox.light .ligthboxInfo > div,
#lightbox.lightbox.light .ligthboxMobileInfo > div {
    color: #222;
}

/* lightbox - button */
.lightboxLeftButton,
.lightboxRightButton {
    cursor: pointer;
    box-sizing: content-box;
    top: 50%;
    position: absolute;
    outline: none;
    color: #fff !important;
    font-size: 48px !important;
    line-height: 30px;
    margin-top: -31px;
    display: inline-block;
    padding: 16px;
    width: 17px;
    height: 30px;
    z-index: 100001;
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: all 200ms cubic-bezier(.25, .46, .45, .94);
    -moz-transition: all 200ms cubic-bezier(.25, .46, .45, .94);
    -o-transition: all 200ms cubic-bezier(.25, .46, .45, .94);
    transition: all 200ms cubic-bezier(.25, .46, .45, .94);
}

.lightboxLeftButton {
    left: 0;
}

.lightboxRightButton {
    right: 0;
}

@media screen and (min-width: 1400px) {
    .lightboxLeftButton {
        left: 20px;
    }

    .lightboxRightButton {
        right: 20px;
    }
}

@media screen and (max-width: 640px) {
    .lightboxLeftButton,
    .lightboxRightButton {
        display: none;
    }
}

.light .lightboxLeftArea .lightboxLeftButton:hover,
.light .lightboxRightArea .lightboxRightButton:hover,
.dark .lightboxLeftArea .lightboxLeftButton:hover,
.dark .lightboxRightArea .lightboxRightButton:hover,
.light .lightboxLeftButton.lightboxLeftButtonShow,
.light .lightboxRightButton.lightboxRightButtonShow,
.dark .lightboxLeftButton.lightboxLeftButtonShow,
.dark .lightboxRightButton.lightboxRightButtonShow {
    filter: alpha(opacity=80);
    opacity: 0.8;
}

.lightboxLeftButton::after,
.lightboxRightButton::after {
    cursor: pointer;
    background-position: center center !important;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";
    width: 17px;
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
}

.dark .lightboxLeftButton::after {
    background-image: url(../../images/icon/white/ic-slide-previous.png);
    left: 50%;
    margin-left: -8.5px;
}

.dark .lightboxRightButton::after {
    background-image: url(../../images/icon/white/ic-slide-next.png);
    right: 50%;
    margin-right: -8.5px;
}

.light .lightboxLeftButton::after {
    background-image: url(../../images/icon/black/ic-slide-previous.png);
    left: 50%;
    margin-left: -8.5px;
}

.light .lightboxRightButton::after {
    background-image: url(../../images/icon/black/ic-slide-next.png);
    right: 50%;
    margin-right: -8.5px;
}

.lightboxClickArea {
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
}

.lightboxContentLeftArea,
.lightboxContentRightArea,
.lightboxContent .content.video {
    z-index: 10;
}

.lightboxLeftArea,
.lightboxContentLeftArea {
    left: 0;
}

.lightboxRightArea,
.lightboxContentRightArea {
    right: 0;
}