.modal {
    width: 100 % ;
    height: 100 % ;
    display: none;
    position: fixed;
    z - index: 1;
    padding - top: 60px;
    left: 0;
    top: 0;
    overflow: auto;
    background - color: rgba(0, 0, 0, 0.4);
    z - index: 1000
}
.modal.show {
    display: block!important
}
.modal.show.independentPage {
    background - color: transparent;
    z - index: initial;
    min - height: 100vh;
    position: relative
}
.modal.show.independentPage > img {
    width: 100px;
    position: absolute;
    right: 0;
    bottom: 0
}
.modal.show.independentPage > img.mascotLeft {
    width: 150px;
    left: 0
}
.modal.invitationModal {
    padding - top: 15 %
}
.modal.paddingTop200 {
    padding - top: 200px
}
 @ media screen and(max - width: 480px) {
    .modal.paddingTop200 {
        padding - top: 150px
    }
}
.modal - content {
    position: relative;
    background - color:  # fff;
    margin: auto;
    margin - bottom: 200px;
    padding: 0;
    border: 1px solid gray;
    border - radius: 10px;
    width: 100 % ;
    max - width: 500px;
    -webkit - box - shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
    box - shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit - animation - name: animatetop;
    animation - name: animatetop;
    -webkit - animation - duration: 0.4s;
    animation - duration: 0.4s
}
 @ media screen and(max - width: 890px) {
    .modal - content {
        max - width: 90 %
    }
    .modal - content.modalCoupon {
        max - width: 500px
    }
}
 @ media screen and(max - width: 890px)and(max - width: 560px) {
    .modal - content.modalCoupon {
        max - width: 90 %
    }
}
.modal - content.shippingModal {
    max - width: 800px
}
 @ media screen and(max - width: 890px) {
    .modal - content.shippingModal {
        max - width: 90 %
    }
}
.modal - content.paddingBottom {
    padding - bottom: 50px
}
.modal - content.modalPolicy {
    max - width: 700px
}
 @ media screen and(max - width: 790px) {
    .modal - content.modalPolicy {
        max - width: 90 %
    }
}
.modal - content.independentPage {
    margin - bottom: 0;
    border: none;
    border - radius: unset;
    max - width: 100 % ;
    -webkit - box - shadow: unset;
    box - shadow: unset;
    -webkit - animation - name: unset;
    animation - name: unset
}
 @ media screen and(max - width: 790px) {
    .modal - content.showFromBottom {
        margin - bottom: 0;
        border: none;
        border - radius: 0;
        max - width: 100 % ;
        -webkit - box - shadow: none;
        box - shadow: none;
        position: fixed;
        bottom: 0;
        -webkit - animation - name: animateBottom;
        animation - name: animateBottom;
        -webkit - animation - duration: 0.4s;
        animation - duration: 0.4s
    }
}
 @ media only screen and(-webkit - device - pixel - ratio: 3)and(device - height: 812px)and(device - width: 375px) {
    .modal - content.showFromBottom {
        padding - bottom: 84px
    }
}
.modal - content.mascot {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 0;
    bottom: 0
}
.modal - content.mascot.membership {
    width: 100px;
    height: 100px;
    left: 0
}
.modal - content.layoutProduct {
    min - width: 750px
}
.modal - content.layoutProduct.modal - header {
    border - bottom: none
}
 @ -webkit - keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}
 @ keyframes animatetop {
    from {
        top: -300px;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}
 @ -webkit - keyframes animateBottom {
    from {
        bottom: -300px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}
 @ keyframes animateBottom {
    from {
        bottom: -300px;
        opacity: 0
    }
    to {
        bottom: 0;
        opacity: 1
    }
}
.modal - header {
    position: relative;
    border - radius: 10px 10px 0 0
}
.modal - header.cartDelete {
    border: none
}
.modal - header.cartDelete h2 {
    font - size: 2.4rem;
    color: crimson;
    text - align: left
}
 @ media screen and(max - width: 480px) {
    .modal - header.cartDelete h2 {
        font - size: 2rem
    }
}
.modal - header.modalSpecs {
    padding: 10px
}
.modal - header.modalSpecs.close {
    right: 5px;
    top: 0;
    color:  # B3B3B3;
    opacity: 1
}
.modal - header h2 {
    font - size: 1.8rem;
    font - weight: normal;
    color:  # 4D4D4D;
    text - align: center;
    margin: 0
}
.modal - header p {
    color: gray;
    font - size: 1.2rem
}
.modal - header.close {
    position: absolute;
    font - size: 28px;
    font - weight: bold;
    right: 20px;
    top: 10px
}
.modal - header.close: hover, .modal - header.close: focus {
    opacity: .5;
    text - decoration: none;
    cursor: pointer
}
.modal - header.grayBg {
    background - color:  # F2F2F2;
    border - radius: 10px 10px 0 0;
    -webkit - box - shadow: 0 4px 2px - 2px rgba(135, 135, 135, 0.5);
    box - shadow: 0 4px 2px - 2px rgba(135, 135, 135, 0.5)
}
.modal - header.redText {
    border - bottom: 1px solid # F2F2F2
}
.modal - header.redText h2 {
    color:  # CB2D24;
    font - weight: bold
}
.modal - header.productWrap {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center
}
.modal - header.productWrap.imgWrap {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    width: 80px;
    height: 80px;
    margin - right: 10px
}
.modal - header.productWrap.imgWrap img {
    max - width: 100 % ;
    max - height: 100 %
}
.modal - header.productWrap.productInfo {
    width: 60 %
}
.modal - header.productWrap.productInfo h3 {
    overflow: hidden;
    text - overflow: ellipsis;
    display: -webkit - box;
    -webkit - line - clamp: 2;
    -webkit - box - orient: vertical;
    font - size: 1.4rem;
    margin: 0
}
.modal - header.productWrap.productInfo p {
    color: red;
    font - size: 1.6rem;
    margin: 5px
}
.modal - header.productWrap.productInfo span {
    color: red;
    font - size: 1.2rem
}
.modal - body.cartDelete p {
    font - size: 1.6rem;
    margin: 0
}
 @ media screen and(max - width: 480px) {
    .modal - body.cartDelete p {
        font - size: 1.4rem
    }
}
.modal - body.modalSpecs {
    padding: 10px
}
.modal - body.modalSpecs h4 {
    margin: 0;
    color: gray;
    font - size: 1.4rem;
    margin - bottom: 10px
}
.modal - body.modalSpecs.specs {
    max - height: 200px;
    overflow - y: auto
}
.modal - body.modalSpecs.spec {
    border - radius: 5px;
    border: 1px solid # 4D4D4D;
    color:  # 4D4D4D;
    padding: 5px;
    text - align: center;
    font - size: 1.4rem;
    margin: 0 5px 10px 5px;
    display: inline - block;
    cursor: pointer
}
.modal - body.modalSpecs.spec.selected {
    border: 1px solid red;
    color: red;
    cursor: default
}
.modal - body.modalSpecs.spec.selected: hover {
    opacity: 1
}
.modal - body.modalSpecs.spec.soldOut {
    border: 1px solid # B3B3B3;
    color:  # B3B3B3;
    cursor: not - allowed
}
.modal - body.modalSpecs.spec.soldOut: hover {
    opacity: 1
}
.modal - body.modalShare {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center
}
.modal - body.modalShare img {
    width: 50px;
    margin: 0 10px
}
.modal - body > input[type = text], .modal - body.twzipcode input {
    width: 100 % ;
    border: 1px solid # CCCCCC;
    padding: 2 % ;
    font - size: 1.6rem;
    margin: 5px 0;
    color:  # 4D4D4D
}
.modal - body > input[type = text]::-webkit - input - placeholder, .modal - body.twzipcode input::-webkit - input - placeholder {
    color:  # CCCCCC
}
.modal - body > input[type = text]: -ms - input - placeholder, .modal - body.twzipcode input: -ms - input - placeholder {
    color:  # CCCCCC
}
.modal - body > input[type = text]::-ms - input - placeholder, .modal - body.twzipcode input::-ms - input - placeholder {
    color:  # CCCCCC
}
.modal - body > input[type = text]::placeholder, .modal - body.twzipcode input::placeholder {
    color:  # CCCCCC
}
.modal - body select {
    width: 100 % ;
    border: 1px solid # CCCCCC;
    padding: 2 % ;
    font - size: 1.6rem;
    margin: 5px 0;
    color:  # 4D4D4D
}
.modal - body h3 {
    color: gray;
    font - size: 1.6rem;
    font - weight: normal
}
.modal - body.errorText {
    color: crimson;
    font - size: 12px;
    font - size: 1.2rem;
    display: none
}
.modal - body.shippingStore {
    font - size: 1.4rem
}
 @ media screen and(max - width: 480px) {
    .modal - body.shippingStore {
        font - size: 1.2rem
    }
}
.modal - body.shippingStore.shippingName {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    position: relative;
    margin: 20px 0
}
 @ media screen and(max - width: 400px) {
    .modal - body.shippingStore.shippingName {
        -webkit - box - align: start;
        -ms - flex - align: start;
        align - items: flex - start;
        height: 50px
    }
}
.modal - body.shippingStore.shippingName h4 {
    width: 100px;
    color:  # fff;
    padding: 5px 0;
    text - align: center;
    margin: 0
}
.modal - body.shippingStore.shippingName h4.green {
    background - color:  # 39B54A
}
.modal - body.shippingStore.shippingName h4.blue {
    background - color:  # 29ABE2
}
.modal - body.shippingStore.shippingName h4.pink {
    background - color:  # FF7BAC
}
.modal - body.shippingStore.shippingName h4.yellow {
    background - color:  # FED000
}
.modal - body.shippingStore.shippingName h4.orange {
    background - color:  # F7931E
}
 @ media screen and(max - width: 790px) {
    .modal - body.shippingStore.shippingName h4 {
        width: 75px
    }
}
 @ media screen and(max - width: 480px) {
    .modal - body.shippingStore.shippingName h4 {
        font - size: 1.4rem
    }
}
.modal - body.shippingStore.shippingName.land {
    width: 50px;
    font - size: 1.6rem;
    padding: 5px 0;
    background - color:  # B3B3B3;
    color:  # fff;
    margin - right: 30px;
    text - align: center
}
 @ media screen and(max - width: 480px) {
    .modal - body.shippingStore.shippingName.land {
        margin - right: 10px;
        font - size: 1.4rem
    }
}
.modal - body.shippingStore.shippingName.feeOriginal {
    color:  # B3B3B3;
    text - decoration: line - through;
    margin - right: 5px
}
.modal - body.shippingStore.shippingName.fee {
    color: red;
    font - weight: bold
}
 @ media screen and(max - width: 400px) {
    .modal - body.shippingStore.shippingName.fee {
        margin - top: 5px
    }
}
 @ media screen and(max - width: 480px) {
    .modal - body.shippingStore.shippingName.feeOriginal,
    .modal - body.shippingStore.shippingName.fee {
        font - size: 1.4rem
    }
}
 @ media screen and(max - width: 400px) {
    .modal - body.shippingStore.shippingName.feeOriginal,
    .modal - body.shippingStore.shippingName.fee {
        margin - top: 5px
    }
}
.modal - body.shippingStore.shippingName p {
    color: gray;
    position: absolute;
    right: 0;
    margin: 0
}
 @ media screen and(max - width: 400px) {
    .modal - body.shippingStore.shippingName p {
        left: 0;
        top: 35px
    }
}
.modal - body.shippingStore.storeName {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: start;
    -ms - flex - align: start;
    align - items: flex - start;
    margin: 10px 0
}
 @ media screen and(max - width: 890px) {
    .modal - body.shippingStore.storeName {
        -webkit - box - orient: vertical;
        -webkit - box - direction: normal;
        -ms - flex - direction: column;
        flex - direction: column
    }
}
.modal - body.shippingStore.storeName.shippingRadio {
    width: 150px
}
.modal - body.shippingStore.storeName.shippingRadio.noStoreName {
    width: 20px
}
 @ media screen and(max - width: 890px) {
    .modal - body.shippingStore.storeName.shippingRadio {
        margin - bottom: 10px
    }
}
.modal - body.shippingStore.storeName.shippingRadio input[type = radio]{
    visibility: hidden;
    position: absolute
}
.modal - body.shippingStore.storeName.shippingRadio input[type = radio]: checked + label: before {
    background: red;
    border: 1px solid red
}
.modal - body.shippingStore.storeName.shippingRadio input[type = radio]: checked + label: after {
    opacity: 1
}
.modal - body.shippingStore.storeName.shippingRadio.radio {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    cursor: pointer;
    text - indent: 35px;
    overflow: visible;
    display: inline - block;
    position: relative
}
.modal - body.shippingStore.storeName.shippingRadio.radio span {
    margin - top: 5px
}
.modal - body.shippingStore.storeName.shippingRadio.radio: before {
    width: 20px;
    height: 20px;
    content: '';
    background:  # fff;
    position: absolute;
    top: 0;
    left: 0;
    border - radius: 100 % ;
    border: 1px solid # B3B3B3;
    -webkit - transition: .3s;
    transition: .3s
}
 @ media screen and(max - width: 890px) {
    .modal - body.shippingStore.storeName.shippingRadio.radio: before {
        top: 8px
    }
}
.modal - body.shippingStore.storeName.shippingRadio.radio: after {
    width: .5em;
    height: .25em;
    content: '';
    opacity: 0;
    position: absolute;
    background: transparent;
    top: 7px;
    left: 6px;
    border: 2px solid # fff;
    border - top: none;
    border - right: none;
    -webkit - transform: rotate(-45deg);
    transform: rotate(-45deg)
}
 @ media screen and(max - width: 890px) {
    .modal - body.shippingStore.storeName.shippingRadio.radio: after {
        width: .7em;
        height: .4em;
        top: 14px
    }
}
.modal - body.shippingStore.storeName p {
    margin: 0
}
.modal - body.shippingStore.storeName p.namePhone {
    width: 210px;
    margin: 0 10px
}
.modal - body.shippingStore.storeName p.address {
    width: 380px
}
 @ media screen and(max - width: 890px) {
    .modal - body.shippingStore.storeName p {
        margin: 0 0 10px 35px
    }
    .modal - body.shippingStore.storeName p.namePhone {
        margin: 0 0 10px 35px
    }
    .modal - body.shippingStore.storeName p.address {
        width: auto
    }
}
.modal - body.shippingStore.addStore {
    display: inline - block;
    color:  # B3B3B3;
    font - size: 1.2rem;
    border: 1px solid # F2F2F2;
    border - radius: 2px;
    padding: 5px;
    cursor: pointer
}
.modal - body.shippingStore.addStore: hover {
    opacity: .8
}
.modal - body.select {
    width: 100 % ;
    height: 100 % ;
    position: relative;
    margin: auto;
    border: 1px solid # CCCCCC;
    font - size: 1.6rem
}
.modal - body.select.toggle {
    position: absolute;
    z - index: 4;
    right: 20px;
    top: 22px;
    color:  # CCCCCC;
    border: 1px solid # CCCCCC;
    border - width: 0 3px 3px 0;
    display: inline - block;
    padding: 5px
}
.modal - body.select.toggle.arrowDown {
    -webkit - transform: rotate(45deg);
    transform: rotate(45deg)
}
.modal - body.select.toggle.arrowUp {
    top: 26px;
    -webkit - transform: rotate(-135deg);
    transform: rotate(-135deg)
}
 @ media screen and(max - width: 790px) {
    .modal - body.select.toggle {
        top: 17px
    }
    .modal - body.select.toggle.arrowUp {
        top: 23px
    }
}
 @ media screen and(max - width: 400px) {
    .modal - body.select.toggle {
        top: 14px
    }
    .modal - body.select.toggle.arrowUp {
        top: 20px
    }
}
.modal - body.select > input {
    width: 100 % ;
    height: 50px;
    position: absolute;
    left: 0px;
    top: 0px;
    z - index: 1;
    opacity: 0;
    cursor: pointer
}
.modal - body.select > input: checked~.toggle.arrowDown {
    display: none
}
.modal - body.select > input: checked~.toggle.arrowUp {
    display: block
}
.modal - body.select > input: checked~.options.title {
    display: none!important
}
.modal - body.select > input: not(: checked) {
    z - index: 4
}
.modal - body.select > input: not(: checked)~.option > .title {
    display: none
}
.modal - body.select > input: not(: checked)~.toggle.arrowUp {
    display: none
}
.modal - body.select > input: not(: checked)~.toggle.arrowDown {
    display: block
}
.modal - body.select span {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    position: relative;
    z - index: 0;
    width: 96 % ;
    padding: 2 % ;
    cursor: pointer;
    border - top: 1px solid # CCCCCC
}
.modal - body.select span.placeholder {
    border: none
}
 @ media screen and(max - width: 480px) {
    .modal - body.select span {
        width: 94 % ;
        padding: 3 %
    }
}
.modal - body.select span.icon {
    margin - right: 10px
}
.modal - body.select span p {
    color:  # 999;
    font - size: 1.6rem;
    margin: 0
}
.modal - body.select.option {
    z - index: 1
}
.modal - body.select.option span {
    z - index: 2
}
.modal - body.select.option input {
    display: none
}
.modal - body.select.option input: checked~.title {
    position: absolute;
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    z - index: 3;
    top: 0;
    background:  # fff;
    border: 0
}
.modal - body.selectStoreBtn {
    display: inline - block;
    color: gray;
    font - size: 1.2rem;
    border: 1px solid # B3B3B3;
    border - radius: 2px;
    padding: 5px;
    margin: 10px 0;
    cursor: pointer
}
.modal - body.selectStoreBtn: hover {
    opacity: .8
}
.modal - body h4 {
    font - size: 1.6rem;
    color:  # 333;
    font - weight: normal;
    margin: 20px 0
}
.modal - body h4.alignCenter {
    text - align: center
}
.modal - body.inputWrap {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center
}
.modal - body.inputWrap.inputBlock {
    width: 100 %
}
.modal - body.inputWrap.getCodeBtn {
    width: 150px;
    background - color: crimson;
    color:  # fff;
    font - size: 1.6rem;
    padding: 10px;
    text - align: center;
    border - radius: 8px;
    margin - left: 10px;
    cursor: pointer
}
.modal - body.inputWrap.getCodeBtn: hover {
    opacity: .8
}
 @ media screen and(max - width: 480px) {
    .modal - body.inputWrap.getCodeBtn {
        font - size: 1.4rem
    }
}
 @ media screen and(max - width: 375px) {
    .modal - body.inputWrap.getCodeBtn {
        width: 170px
    }
}
.modal - body.inputBlock {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    border: 1px solid # CCCCCC;
    border - radius: 5px;
    padding: 5px;
    margin: 10px 0
}
.modal - body.inputBlock.membership {
    border: none;
    border - bottom: 1px solid gray;
    border - radius: unset
}
.modal - body.inputBlock.membership input.phRed::-webkit - input - placeholder {
    color:  # ff6b6b
}
.modal - body.inputBlock.membership input.phRed: -ms - input - placeholder {
    color:  # ff6b6b
}
.modal - body.inputBlock.membership input.phRed::-ms - input - placeholder {
    color:  # ff6b6b
}
.modal - body.inputBlock.membership input.phRed::placeholder {
    color:  # ff6b6b
}
.modal - body.inputBlock.membership select {
    border: none;
    padding: 0 10px;
    margin: 0;
    margin - left: 5px;
    outline: none
}
.modal - body.inputBlock.membership p {
    width: 140px;
    font - size: 1.6rem;
    color:  # 4D4D4D;
    margin: 0
}
.modal - body.inputBlock.checkbox {
    -webkit - box - align: start;
    -ms - flex - align: start;
    align - items: flex - start
}
.modal - body.inputBlock.checkbox p {
    cursor: pointer
}
.modal - body.inputBlock.inputBlockIcon {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    border - right: 1px solid # CCCCCC;
    padding - right: 5px
}
.modal - body.inputBlock.inputBlockIcon span.iconPhone {
    width: 35px;
    height: 35px;
    background - size: 35px 35px;
    background - image: url("../../fimg/v2/login/i-phone.png");
    background - repeat: no - repeat;
    background - position: center center
}
.modal - body.inputBlock.inputBlockIcon span.iconSafe {
    width: 35px;
    height: 35px;
    background - size: 35px 35px;
    background - image: url("../../fimg/v2/login/i-safe.png");
    background - repeat: no - repeat;
    background - position: center center
}
.modal - body.inputBlock.inputBlockIcon span.iconPassword {
    width: 35px;
    height: 35px;
    background - size: 35px 35px;
    background - image: url("../../fimg/v2/login/i-password.png");
    background - repeat: no - repeat;
    background - position: center center
}
.modal - body.inputBlock.inputBlockIcon span.iconKey {
    width: 35px;
    height: 35px;
    background - size: 35px 35px;
    background - image: url("../../fimg/v2/login/i-key.png");
    background - repeat: no - repeat;
    background - position: center center
}
.modal - body.inputBlock.inputBlockIcon span.iconPhone, .modal - body.inputBlock.inputBlockIcon span.iconSafe, .modal - body.inputBlock.inputBlockIcon span.iconPassword, .modal - body.inputBlock.inputBlockIcon span.iconKey {
    background - size: 50px 50px
}
 @ media screen and(max - width: 480px) {
    .modal - body.inputBlock.inputBlockIcon span.iconPhone,
    .modal - body.inputBlock.inputBlockIcon span.iconSafe,
    .modal - body.inputBlock.inputBlockIcon span.iconPassword,
    .modal - body.inputBlock.inputBlockIcon span.iconKey {
        background - size: 35px 35px
    }
}
.modal - body.inputBlock input {
    width: 100 % ;
    height: 100 % ;
    border: none;
    outline: none;
    margin - left: 5px;
    font - size: 1.6rem;
    padding: 0 10px;
    color:  # 4D4D4D;
    position: relative
}
.modal - body.inputBlock input::-webkit - input - placeholder {
    color:  # B3B3B3
}
.modal - body.inputBlock input: -ms - input - placeholder {
    color:  # B3B3B3
}
.modal - body.inputBlock input::-ms - input - placeholder {
    color:  # B3B3B3
}
.modal - body.inputBlock input::placeholder {
    color:  # B3B3B3
}
 @ media screen and(max - width: 480px) {
    .modal - body.inputBlock input {
        font - size: 1.4rem;
        padding: 0 10px
    }
}
.modal - body.radioWrap {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center
}
.modal - body.radioWrap > div {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    -webkit - box - orient: vertical;
    -webkit - box - direction: normal;
    -ms - flex - direction: column;
    flex - direction: column
}
.modal - body.radioWrap label {
    display: block;
    position: relative;
    cursor: pointer;
    font - size: 22px;
    -webkit - user - select: none;
    -moz - user - select: none;
    -ms - user - select: none;
    user - select: none;
    margin: 10px
}
.modal - body.radioWrap label: hover input~.checkmark {
    background - color:  # F2F2F2
}
.modal - body.radioWrap label input {
    position: absolute;
    opacity: 0;
    cursor: pointer
}
.modal - body.radioWrap label input: checked~.checkmark {
    background - color:  # fff
}
.modal - body.radioWrap label input: checked~.checkmark: after {
    display: block
}
.modal - body.radioWrap.checkmark {
    position: absolute;
    top: 50 % ;
    left: 50 % ;
    -webkit - transform: translate(-50 % , -50 % );
    transform: translate(-50 % , -50 % );
    height: 24px;
    width: 24px;
    border - radius: 50 % ;
    border: 2px solid gray
}
.modal - body.radioWrap.checkmark: after {
    content: "";
    position: absolute;
    display: none;
    top: 50 % ;
    left: 50 % ;
    -webkit - transform: translate(-50 % , -50 % );
    transform: translate(-50 % , -50 % );
    width: 16px;
    height: 16px;
    border - radius: 50 % ;
    background:  # 000
}
.modal - body.radioWrap img {
    width: 150px
}
.modal - body.checkboxWrap {
    display: block;
    position: relative;
    padding - left: 35px;
    cursor: pointer;
    font - size: 22px;
    -webkit - user - select: none;
    -moz - user - select: none;
    -ms - user - select: none;
    user - select: none
}
.modal - body.checkboxWrap: hover input~.checkmark {
    background - color:  # ccc
}
.modal - body.checkboxWrap input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}
.modal - body.checkboxWrap input: checked~.checkmark {
    background - color:  # 2196F3
}
.modal - body.checkboxWrap input: checked~.checkmark: after {
    display: block
}
.modal - body.checkboxWrap.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background - color:  # eee
}
.modal - body.checkboxWrap.checkmark: after {
    content: "";
    position: absolute;
    display: none;
    left: 6px;
    top: 3px;
    width: 7px;
    height: 10px;
    border: solid white;
    border - width: 0 3px 3px 0;
    -webkit - transform: rotate(45deg);
    transform: rotate(45deg)
}
.modal - body.invitationInstruction {
    width: 100 % ;
    color:  # 4D4D4D;
    text - align: center;
    font - size: 16px;
    font - size: 1.6rem;
    letter - spacing: 2px;
    line - height: 1.5
}
.modal - body.getCoupon {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    margin - bottom: 20px
}
.modal - body.getCoupon.getCouponBox {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    border: 1px solid # F2F2F2;
    border - radius: 5px;
    padding: 5px 10px;
    width: 290px
}
 @ media screen and(max - width: 790px) {
    .modal - body.getCoupon.getCouponBox {
        width: 70 %
    }
}
 @ media screen and(max - width: 480px) {
    .modal - body.getCoupon.getCouponBox {
        width: 60 %
    }
}
 @ media screen and(max - width: 320px) {
    .modal - body.getCoupon.getCouponBox {
        width: 50 %
    }
}
.modal - body.getCoupon.getCouponBox input {
    width: 100 % ;
    height: 30px;
    border: none;
    outline: none;
    font - size: 1.6rem
}
.modal - body.getCoupon.getCouponBox input::-webkit - input - placeholder {
    color:  # B3B3B3
}
.modal - body.getCoupon.getCouponBox input: -ms - input - placeholder {
    color:  # B3B3B3
}
.modal - body.getCoupon.getCouponBox input::-ms - input - placeholder {
    color:  # B3B3B3
}
.modal - body.getCoupon.getCouponBox input::placeholder {
    color:  # B3B3B3
}
 @ media screen and(max - width: 320px) {
    .modal - body.getCoupon.getCouponBox input {
        font - size: 1.4rem
    }
}
.modal - body.getCoupon.getCouponBtn {
    color:  # fff;
    background - color:  # FAB243;
    padding: 5px 10px;
    font - size: 1.6rem;
    margin: 0 10px;
    border - radius: 5px;
    cursor: pointer
}
.modal - body.getCoupon.getCouponBtn: hover {
    opacity: 0.8
}
.modal - body.getCoupon img {
    width: 50px;
    -webkit - box - shadow: 0 0 5px # B3B3B3;
    box - shadow: 0 0 5px # B3B3B3
}
.modal - body.couponWrap {
    max - height: 500px;
    overflow - y: auto;
    padding - left: 10px
}
.modal - body.couponBlock {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center
}
.modal - body.couponBlock.coupon {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    -webkit - box - orient: vertical;
    -webkit - box - direction: normal;
    -ms - flex - direction: column;
    flex - direction: column;
    position: relative;
    margin - left: 10px;
    color:  # fff
}
.modal - body.couponBlock.coupon img {
    width: 360px
}
 @ media screen and(max - width: 560px) {
    .modal - body.couponBlock.coupon img {
        width: 100 % ;
        max - width: 360px
    }
}
.modal - body.couponBlock.coupon h2 {
    position: absolute;
    left: 35px;
    top: 30px;
    font - size: 2rem;
    margin: 0
}
 @ media screen and(max - width: 480px) {
    .modal - body.couponBlock.coupon h2 {
        left: 10 % ;
        top: 15 % ;
        font - size: 1.6rem
    }
}
.modal - body.couponBlock.coupon span {
    position: absolute;
    right: 55px;
    top: 25px;
    font - size: 2.4rem;
    font - weight: bold
}
 @ media screen and(max - width: 480px) {
    .modal - body.couponBlock.coupon span {
        right: 10 % ;
        top: 15 % ;
        font - size: 1.6rem
    }
}
.modal - body.couponBlock.coupon p {
    position: absolute;
    color: gray;
    left: 35px;
    font - size: 1.2rem;
    margin: 0
}
.modal - body.couponBlock.coupon p.minCharge {
    bottom: 45px
}
.modal - body.couponBlock.coupon p.expDate {
    bottom: 30px
}
 @ media screen and(max - width: 480px) {
    .modal - body.couponBlock.coupon p {
        left: 10 %
    }
    .modal - body.couponBlock.coupon p.minCharge {
        bottom: 30 %
    }
    .modal - body.couponBlock.coupon p.expDate {
        bottom: 15 %
    }
}
.modal - body.discountEvent {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    padding: 10px 0
}
.modal - body.discountEvent.hide {
    display: none
}
.modal - body.discountEvent img {
    width: 50px
}
.modal - body.discountEvent.rightContent {
    margin - left: 15px
}
.modal - body.discountEvent.rightContent h3 {
    color: gray;
    font - size: 1.8rem;
    font - weight: bold;
    margin: 0
}
.modal - body.discountEvent.rightContent p {
    font - size: 1.2rem;
    color: red;
    margin: 0
}
.modal - body.shippingBlock {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: start;
    -ms - flex - pack: start;
    justify - content: flex - start;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    width: 100 % ;
    position: relative;
    margin - bottom: 10px
}
.modal - body.shippingBlock img {
    width: 50px;
    margin - right: 20px
}
.modal - body.shippingBlock.infoWrap h4 {
    font - size: 1.4rem;
    color: gray;
    margin: 0;
    margin - bottom: 5px
}
.modal - body.shippingBlock.infoWrap p {
    font - size: 1.4rem;
    color: gray;
    margin: 0
}
.modal - body.shippingBlock.infoWrap p span: first - child {
    font - size: 1.6rem;
    color:  # 000
}
.modal - body.shippingBlock.infoWrap p span: last - child {
    font - size: 1.6rem;
    color:  # FAB243
}
.modal - body.shippingBlock > p {
    font - size: 1.4rem;
    color: gray;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0
}
.modal - body.shippingBlock h4 {
    font - size: 1.4rem;
    color: gray;
    margin: 0
}
.modal - body.waterfall {
    width: 100 % ;
    max - height: 300px;
    display: inline - block;
    overflow - y: auto
}
.modal - body.waterfall.groupBuyBlock {
    border: 2px solid # fbb03a;
    width: 49 % ;
    float: left;
    margin - bottom: 10px;
    font - size: 1.4rem
}
.modal - body.waterfall.groupBuyBlock: nth - child(2n + 1) {
    margin - right: 2 %
}
 @ media screen and(max - width: 790px) {
    .modal - body.waterfall.groupBuyBlock {
        font - size: 1.2rem
    }
}
.modal - body.waterfall.groupBuyBlock p {
    background - color:  # fbb03a;
    color:  # fff;
    margin: 0;
    padding: 5px 0;
    text - align: center
}
.modal - body.waterfall.groupBuyBlock.groupBuyPrice {
    padding: 5px;
    position: relative
}
.modal - body.waterfall.groupBuyBlock.groupBuyPrice span: last - child {
    color: red;
    position: absolute;
    right: 5px
}
.modal - body.sectionTop {
    padding: 0;
    margin: 0
}
.modal - body.sectionTop.topContent.productImageWrap {
    margin: 0;
    margin - right: 2 %
}
.modal - body.sectionTop.topContent.productInfo {
    width: 58 %
}
.modal - body.sectionTop.topContent.productInfo.block.specsBlock h3 {
    width: 70px
}
 @ media screen and(max - width: 790px) {
    .modal - body.sectionTop.topContent.productInfo.btns {
        display: none
    }
}
.modal - body.sectionTop.topContent.productInfo.btns img {
    width: 150px
}
.modal - footer {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: end;
    -ms - flex - pack: end;
    justify - content: flex - end;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    border: none
}
.modal - footer.modalLogin {
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - orient: vertical;
    -webkit - box - direction: normal;
    -ms - flex - direction: column;
    flex - direction: column;
    padding: 0
}
.modal - footer.cartDelete.cancelBtn, .modal - footer.cartDelete.okBtn {
    width: 100px;
    padding: 5px 0;
    z - index: 1
}
 @ media screen and(max - width: 400px) {
    .modal - footer.cartDelete.cancelBtn,
    .modal - footer.cartDelete.okBtn {
        width: 80px
    }
}
.modal - footer.cartDelete.mascot {
    width: 500px;
    height: auto;
    left: 0;
    bottom: -15px
}
 @ media screen and(max - width: 480px) {
    .modal - footer.cartDelete.mascot {
        width: 400px
    }
}
 @ media screen and(max - width: 400px) {
    .modal - footer.cartDelete.mascot {
        width: 300px
    }
}
.modal - footer.modalSpecs {
    position: fixed;
    bottom: 0;
    width: 100 % ;
    padding: 10px 0;
    -webkit - box - shadow: 0 0 10px # B3B3B3;
    box - shadow: 0 0 10px # B3B3B3;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    background - color:  # fff
}
 @ media only screen and(-webkit - device - pixel - ratio: 3)and(device - height: 812px)and(device - width: 375px) {
    .modal - footer.modalSpecs {
        padding: 10px 0 34px 0
    }
}
.modal - footer.modalSpecs.amount {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    width: 56 % ;
    border: 1px solid # B3B3B3;
    border - radius: 5px;
    margin: 0 2 %
}
.modal - footer.modalSpecs.amount span {
    font - size: 2.6rem;
    cursor: pointer;
    -webkit - user - select: none;
    -moz - user - select: none;
    -ms - user - select: none;
    user - select: none
}
.modal - footer.modalSpecs.amount span: nth - child(1) {
    border - right: 1px solid # B3B3B3
}
.modal - footer.modalSpecs.amount span: nth - child(3) {
    border - left: 1px solid # B3B3B3
}
.modal - footer.modalSpecs.amount p {
    width: 70 % ;
    margin: 0;
    text - align: center;
    font - size: 1.6rem
}
 @ media screen and(max - width: 1060px) {
    .modal - footer.modalSpecs.amount p {
        font - size: 1.4rem
    }
}
.modal - footer.modalSpecs img {
    width: 36 % ;
    margin: 0 2 % ;
    display: none
}
.modal - footer.modalSpecs img.layoutBtn {
    width: 30 % ;
    display: block
}
.modal - footer.modalCoupon {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center
}
.modal - footer.modalCoupon.shippingBtn.cancelBtn {
    border: none;
    color:  # fff;
    background - color:  # FAB243
}
.modal - footer.shippingBtn {
    width: 150px;
    padding: 10px 0;
    border - radius: 5px;
    background - color:  # fff;
    text - align: center;
    font - size: 1.6rem;
    cursor: pointer
}
.modal - footer.shippingBtn: hover {
    opacity: .8
}
.modal - footer.shippingBtn: nth - child(1) {
    margin - right: 10px
}
.modal - footer.shippingBtn.cancelBtn {
    border: 1px solid gray;
    color: gray
}
.modal - footer.shippingBtn.okBtn {
    border: 1px solid red;
    background - color: red;
    color:  # fff
}
 @ media screen and(max - width: 480px) {
    .modal - footer.shippingBtn {
        padding: 5px 0;
        font - size: 1.4rem
    }
}
.modal - footer.confirmBtn {
    width: 200px;
    color:  # fff;
    background: -webkit - gradient(linear, left top, right top, from( # cd2d25), color - stop(50 % ,  # eb3c5b), to( # cd2d25));
    background: linear - gradient(90deg,  # cd2d25 0 % ,  # eb3c5b 50 % ,  # cd2d25 100 % );
    border - radius: 5px;
    padding: 10px;
    font - size: 1.8rem;
    text - align: center;
    cursor: pointer
}
.modal - footer.confirmBtn: hover {
    opacity: .8
}
.modal - footer.confirmBtn.register {
    margin - bottom: 20px
}
.modal - footer.confirmBtn.forget {
    margin - bottom: 20px
}
 @ media screen and(max - width: 480px) {
    .modal - footer.confirmBtn {
        font - size: 1.6rem
    }
}
 @ media screen and(max - width: 375px) {
    .modal - footer.confirmBtn {
        width: 90 %
    }
}
.modal - footer.spanWrap {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    width: 50 % ;
    margin: 20px 0
}
.modal - footer.spanWrap span {
    -webkit - box - flex: 1;
    -ms - flex: 1;
    flex: 1;
    text - align: center;
    cursor: pointer;
    font - weight: bold;
    font - size: 16px;
    font - size: 1.6rem
}
.modal - footer.spanWrap span: hover {
    opacity: .8
}
.modal - footer.spanWrap span: last - child {
    border - left: 1px solid # CCCCCC;
    color:  # E82326
}
.modal - footer.spanWrap.independentPage {
    width: 100 %
}
.modal - footer.spanWrap.independentPage span {
    padding: 0 5 %
}
.modal - footer.spanWrap.independentPage span: first - child {
    text - align: left
}
.modal - footer.spanWrap.independentPage span: last - child {
    border: none;
    text - align: right
}
.modal - footer.loginTitle {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    margin - top: 30px
}
.modal - footer.loginTitle.hide {
    display: none
}
.modal - footer.loginTitle img {
    width: 20px
}
.modal - footer.loginTitle p {
    margin: 0 20px;
    color: gray;
    font - size: 16px;
    font - size: 1.6rem
}
.modal - footer.loginWrap {
    display: -webkit - box;
    display: -ms - flexbox;
    display: flex;
    -webkit - box - pack: center;
    -ms - flex - pack: center;
    justify - content: center;
    -webkit - box - align: center;
    -ms - flex - align: center;
    align - items: center;
    margin - top: 20px;
    width: 100 % ;
    background - color:  # F2F2F2;
    padding: 20px 0;
    border - radius: 0 0 10px 10px
}
.modal - footer.loginWrap.hide {
    display: none
}
.modal - footer.loginWrap.independentPage {
    background - color: transparent;
    border - radius: unset
}
.modal - footer.loginWrap span {
    margin: 0 20px;
    cursor: pointer;
    z - index: 2
}
.modal - footer.loginWrap span: hover {
    opacity: .8
}
.modal - footer.loginWrap span: nth - child(1) {
    width: 50px;
    height: 50px;
    background - size: 50px 50px;
    background - image: url("../../fimg/v2/login/login-line.png");
    background - repeat: no - repeat;
    background - position: center center
}
.modal - footer.loginWrap span: nth - child(2) {
    width: 50px;
    height: 50px;
    background - size: 50px 50px;
    background - image: url("../../fimg/v2/login/login-facebook.png");
    background - repeat: no - repeat;
    background - position: center center
}
.modal - footer.loginWrap span: nth - child(3) {
    width: 50px;
    height: 50px;
    background - size: 50px 50px;
    background - image: url("../../fimg/v2/login/login-gplus.png");
    background - repeat: no - repeat;
    background - position: center center
}
.modal - header, .modal - body, .modal - footer {
    padding: 20px 40px
}
 @ media screen and(max - width: 790px) {
    .modal - header,
    .modal - body,
    .modal - footer {
        padding: 20px
    }
}