product
.detail-tab {
    display: block;
}

.followMenu {
    position: fixed;
    left: 95%;
    top: 50%;
    z-index: 99999;
    transition: all .3s;
}

.followMenu div {
    padding: 1% 0;
    border: 1px solid black;
}

.followMenu.fixed {
    top: 0;
}

.product_category {
    display: flex;
    justify-content: center;
    text-align: center;
}

.product_category div:nth-child(2) {
    margin: 0 3%
}

.product_c_menu {
    width: 8%;
    padding: 12px 20px;
    color: black;
    border: solid #e1e1e1 1px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
}

.product_c_menu:hover {
    background: black;
    color: white;
    animation: fadein 1s;
}

.product_title {
    text-align: center;
    margin-bottom: 3%;
}

.product_Skin,
.product_Peel,
.product_All {
    display: none;
}

.product_content {
    display: none;
}

.product_content.on {
    display: block;
}

.product_Skin.on,
.product_Peel.on,
.product_All.on {
    display: block;
}

.product_c_menu.on {
    display: block;
    background: black;
    color: white;
}

/* .p_factive{
    display: block;
    position:relative;
}
.p_noneactive{
    display: none;
} */
/* .p_menu_active{
    background:black;
    color:white;
} */
/* 콜렉션 페이지 */
.collec_first {
    display: flex;
}
.collec_first_m{
    display: none;
}
.collec_first img {
    width: 100%;
    height: 100%;
}

.collec_first_left,
.collec_first_right,
.first_img_left,
.first_text_right {
    width: 50%;
    text-align: center;
}

.collec_first_left,
.first_text_right {
    display: flex;
    justify-content: center;
    flex-direction: column;
    word-break: break-all;
    line-height: 2;
}

.collection_section {
    width: 100%;
    height: calc(100vh - 104px);
}

.collection_vegan {
    background: url("//gohcosmetics.com/moa/img/collection/collection_veganen.jpg")no-repeat;
    background-size: cover;
    display: flex;
}

.collection_vegan2 {
    background: url("//gohcosmetics.com/moa/img/collection/collection_vback2.jpg")no-repeat;
    background-size: cover;
    display: flex;
}

.collection_left,
.collection_right {
    width: 50%;
    position: relative;
}

.collection_left_txt {
    position: absolute;
    left: 20%;
    top: 30%;
}

.collection_left_txt2 {
    position: absolute;
    left: 40%;
    top: 20%;
    color: white;
}

.collection_left_txt2 p {
    padding: 5% 0;
    text-align: center;
    font-size: 1rem;
}

.collection_left_txt h1 {
    padding-bottom: 5%;
    font-size: 2.5rem;
}

.collection_left_txt h2 {
    padding-bottom: 5%;
    font-size: 1.5rem;
}

.collection_right_txt {
    position: absolute;
    right: 20%;
    top: 30%;
}

.collection_right_txt2 {
    position: absolute;
    right: 40%;
    top: 20%;
    color: white;
}

.collection_right_txt2 p {
    text-align: center;
}

.collection_right_txt2 h1 {
    font-size: 2rem;
    padding-bottom: 10%;
    text-align: center;
}

.collection_vegan_right {
    display: flex;
    position: absolute;
    right: 40%;
    top: 40%;
}

.collec_moist_last img {
    width: 100%;
    height: 100%;
}

.collection_vegan_right p {
    color: white;
    text-align: center;
    padding: 5% 0;
}

.collection_vegan_right div {
    width: 50%;

}

.collection_right_txt h1 {
    font-size: 2rem;
    padding-bottom: 10%;
}

.collection_right_txt a {
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
}

.collection_left_txt,
.collection_right_txt,
.collection_right_txt>a {
    color: white;
}

.collection_moist {
    background: url("//gohcosmetics.com/moa/img/collection/collection_moist_en.jpg")no-repeat;
    background-size: cover;
    display: flex;
    padding-bottom: 2%;
}

.collection_moist2 {
    background: url("//gohcosmetics.com/moa/img/collection/collection_mback.jpg")no-repeat;
    background-size: cover;
    display: flex;
}

.collection_container {
    width: 100%;
    height: 100%;
}

.collection_div {
    display: flex;
}

.collection_div img {
    width: 100%;
    height: 100%;
}

.collection_txt {
    font-size: 1.5rem;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100%;
    /* opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px); */
}

.collection_txt_s {
    padding: 0 10%;
    font-size: 1.5rem;
    line-height: 2;
    justify-content: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
}

.collection_txt_s>span {
    font-weight: bold;
    font-size: 13px;
    padding: 2% 0;
}

.collec_vegan_mob {
    display: none;
}

.s_hydrogen_txt.collection_txt_s {
    padding: 0 20%;
}

.s_hydrogen_txt a {
    padding-top: 5%;
    float: right;
    font-size: 20px;
}

.collection_conleft {
    width: 100%;
    height: 100%;
}

.collection_conright {
    width: 100%;
    height: 100%;
}

.collec_moist_mob {
    display: none;
}

.collection_txt.on,
.collection_txt_s.on {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: all 5s cubic-bezier(.32, .24, .15, 1);
    transition: all 5s cubic-bezier(.32, .24, .15, 1);
}

.collection_vegan_mid {
    text-align: center;
    height: 100%;
}

.vegan_mid_txt {
    text-align: center;
}

.vegan_mid_txt h1 {
    font-size: 2.5rem;
    padding-top: 5%;
}

.vegan_mid_txt p {
    padding: 3% 0;
    font-size: 1rem;
}

.vegan_mid_txt h4 {
    font-size: 1.2rem;
}

.vegan_mid_content {
    display: flex;
    width: 100%;
    justify-content: center;
    padding-top: 5%;
    cursor: pointer;
}

.vegan_mid_content h4 {
    padding: 5% 0;
}

.vegan_mid_content a {
    text-align: center;
    position: absolute;
    top: 40%;
    left: 38%;
    font-size: 1.5rem;
    border: solid white 1px;
    opacity: 0;
}

.vegan_content_left.on img,
.vegan_content_right.on img,
.vegan_content_right2.on img {
    opacity: 0.3;
    animation: fadeout 1s;
}

.vegan_content_left.on a,
.vegan_content_right.on a {
    text-align: center;
    position: absolute;
    top: 40%;
    left: 39%;
    font-size: 1.5rem;
    border: solid white 1px;
    opacity: 1;
    animation: fadein 2s;
}

.vegan_content_right2.on a {
    text-align: center;
    position: absolute;
    top: 60%;
    left: 39%;
    font-size: 1.5rem;
    border: solid white 1px;
    opacity: 1;
    animation: fadein 2s;
}

.vegan_bot_txt h4 {
    padding: 3% 0;
    font-size: 1.2rem;
}

.vegan_content_left {
    width: 25%;
    text-align: center;
    position: relative;
}

.vegan_content_right {
    width: 25%;
    text-align: center;
    position: relative;
}

.vegan_content_right2 {
    width: 25%;
    text-align: center;
    position: relative;
}

.moist_left_con {
    position: absolute;
    display: flex;
    left: 10%;
    top: 15%;
    color: white;
}

.moist_left_con div {
    width: 50%;
    text-align: center;
}

.moist_left_con div:first-child {
    padding-top: 4%
}

.moist_left_con h2 {
    padding-bottom: 5%;
    font-size: 1.5rem;
}

.moist_left_txt {
    position: absolute;
    bottom: 15%;
    left: 10%;
    color: white;
}

.moist_left_ktxt {
    position: absolute;
    bottom: 20%;
    left: 25%;
    color: white;
}

.moist_left_txt h2 {
    line-height: 1.5;
    margin-bottom: 5%;
}

.moist_left_ktxt h2 {
    line-height: 1.5;
    margin-bottom: 5%;
}

.moist_right_txt {
    position: absolute;
    left: 20%;
    top: 9%;
    background: white;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 5% 5%;
}

.moist_right_txt h1 {
    font-size: 3rem;
    padding-bottom: 5%;
}

.moist_right_txt p {
    font-size: 1rem;
    padding: 2% 0;
}

.moist_right_txt span {
    font-weight: bold;
}

.mosit_p {
    font-size: 1rem;
    color: black;
    font-weight: bold;
}

.fade-in {
    animation: fadein 5s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.3;
    }
}

/* 스토리페이지 */
.story_mob {
    display: none;
}

.s_ingredient hr {
    background-color: dodgerblue;
    text-align: center;
    width: 95%;
    margin-top: 2%;
    height: 1px;
}

.s_ingredient_title {
    text-align: center;
    padding: 3% 0;
}

.s_ingredient_title p {
    font-size: 1.2rem;
}

.s_ingredient_title h2 {
    font-size: 2rem;
    margin-bottom: 2%;
}

.s_ingredient_content {
    display: flex;
    padding: 2% 0;
}

.ingredient_left {
    width: 50%;
    text-align: center;
}

.ingredient_ltxt,
.ingredient_rtxt {
    padding: 15%;
    text-align: center;
}

.ingredient_ltxt h3 {
    font-size: 1.5rem;
}

.ingredient_ltxt p,
.ingredient_right {
    font-size: 1.1rem;
}

.ingredient_right {
    text-align: center;
}

.ingredient_right img {
    width: 50%;
}

.ingredient_right h3 {
    margin: 2% 0;
}

.ingredient_right {
    width: 50%;
}

/* 인스타 페이지 */

/* 어바웃 페이지 */
#wrap #contents,
#wrap .container {
    max-width: 100%;
    min-height: auto;
    padding: 0;
}

#wrap .path {
    display: none;
}

.about_rightTxt {
    font-size: 16px;
    line-height: 2;
    color: #888;
    word-break: keep-all;
}

.about__section {
    width: 100%;
    height: calc(100vh - 104px);
}

.about__section--store {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.about__column {
    width: 50%;
    height: 100%;
}

.about__align {
    padding: 0 40px;
}

.about__column--banner {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
}

.about__section.on .about__column--banner {
    opacity: 1;
    visibility: visible;
    -webkit-transition: all 2s cubic-bezier(.32, .24, .15, 1);
    transition: all 2s cubic-bezier(.32, .24, .15, 1);
}

.about__column iframe {
    width: 100% !important;
    height: 100% !important;
}

.about__content {
    width: 50%;
}

.about__title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    line-height: 2;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
}

.about__title--first {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
}

.about__info-box {
    margin-bottom: 20px;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(15px);
    transform: translateX(15px);
}

/*
.about__info-box:nth-child(2) {
    transition-delay: 0.2s !important;
}

.about__info-box:nth-child(3) {
    transition-delay: 0.35s !important;
}

.about__info-box:nth-child(4) {
    transition-delay: 0.5s !important;
}

.about__info-box:nth-child(5) {
    transition-delay: 0.75s !important;
}

.about__info-box:nth-child(6) {
    transition-delay: 0.9s !important;
}
*/
.about__txt {
    font-size: 16px;
    line-height: 2;
    color: #888;
    word-break: keep-all;
}

.about__txt--title {
    color: #000;
}

.about__txt--first {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(15px);
    transform: translateY(15px);
}

.about__section.on .about__title,
.about__section.on .about__txt--first,
.about__section.on .about__info-box {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transition: all 2s cubic-bezier(.32, .24, .15, 1);
    transition: all 2s cubic-bezier(.32, .24, .15, 1);
}

.about_mver {
    display: none;
}

.about_pcver {
    display: flex;
}

/* recommand 페이지 */
.recommand_second_pc{
    position: relative;
}
.daycare_btn{
    position: absolute;
    width: 100%;
    padding: 5%;
    text-align: center;
    top: 11.3%;
    right: 25%;
    font-size: 1.6rem;
    font-weight: bold;
}
.nightcare_woman_btn{
    position: absolute;
    width: 100%;
    padding: 5%;
    text-align: center;
    top: 53.2%;
    left: 10%;
    font-size: 1.6rem;
    font-weight: bold;
}
.daycare_man_btn{
    position: absolute;
    width: 100%;
    padding: 5%;
    text-align: center;
    bottom: 41%;
    right: 18%;
    font-size: 1.6rem;
    font-weight: bold;
}
.nightcare_man_btn{
    position: absolute;
    width: 100%;
    padding: 5%;
    text-align: center;
    top: 23.5%;
    left: 13%;
    font-size: 1.6rem;
    font-weight: bold;
}
.recommand_first {
    background: url("//gohcosmetics.com/moa/img/recommand/recommand_back2.jpg")no-repeat;
    background-size: cover;
}


.recommand_first h1 {
    font-size: 2rem;
    text-align: center;
    padding: 5% 0;
    color: white;
}

.recommand_content {
    display: flex;
}

.recommand_left,
.recommand_right {
    width: 50%;
}

.recommand_left {
    text-align: center;
    margin-bottom: 5%;
}

.recommand_left_txt {
    color: white;
}

.recommand_right {
    display: flex;
    color: white;
}

.recommand_right_ttxt {
    font-weight: bold;
}

.recommand_right_dtxt {
    text-align: center;
}

.recommand_right_dtxt a {
    display: block;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    padding-top: 5%;
}

.recommand_right_dtxt a:hover {
    color: black;
}

.recommand_right_first,
.recommand_right_second,
.recommand_right_third {
    width: 30%;
}

.recommand_right_second {
    margin: 0 1%;
}

.recommand_second img {
    width: 100%;
    height: 100%;
}

.recommand_second_mob {
    display: none;
}

.recommand_third_mob {
    display: none;
}

.discovery_left {
    background: url("//gohcosmetics.com/moa/img/discovery/discovery_left.jpg"), no-repeat;
    background-size: cover;
    border-right: solid white 10px;
}

.discovery_right {
    background: url("//gohcosmetics.com/moa/img/discovery/discovery_right.jpg"), no-repeat;
    background-size: cover;
}

.discovery_mob {
    display: none;
}

/* .recommand_second{
    background:url("//gohcosmetics.com/moa/img/recommand/recommand_second_back.jpg")no-repeat;
} */
@media (max-width: 1280px) {
 /*shim start*/
    .collec_moist_pc, .collection_left_txt2, .collection_right_txt2, .collection_vegan_right {
    display: none;
    }    
 /*shim end*/
    .about__txt {
        font-size: 14px;
    }

    .collection_txt {
        font-size: 14px;
    }

    .about__txt br {
        display: none;
    }
    .collection_section{
        height: 100%;
    }
    .collection_conleft{
        height: auto;
    }
    .collection_txt_s p{
        font-size: 1rem;
    }
}

@media (max-width: 1023px) {

    .about__section {
        height: auto;
    }

    .about__section:first-child {
        margin-bottom: 50px;
    }

    .about__column--banner,
    .about__column--map {
        height: calc(100vw * 0.8) !important;
    }

    .about__column {
        width: 100%;
    }
    .collection_section{
        height: 100%;
    }
    .about__align {
        padding: 40px 20px;
    }

    .about__column--content {
        display: block !important;
    }

    .ingredient_left img {
        width: 100%;
    }

    .s_hydrogen_txt h1 {
        font-size: 1.2rem;
    }

    .collection_txt_s {
        font-size: 1rem;
    }

    .collection_left_txt {
        position: absolute;
        left: 10%;
        top: 15%;
    }
 /*shim start*/
    .collection_left_txt2, .collection_right_txt2, .collection_vegan_right {
    display: none;
    }    
 /*shim end*/
    
}

@media (max-width: 767px) {
    /*shim start*/
    .collection_left_txt2, .collection_right_txt2, .collection_vegan_right {
    display: none;
    }    
    /*shim end*/
    .product_c_menu {
        width: auto;
    }
    .collection_vegan_right{
        position:inherit;
    }
    .instagram_pc {
        display: none;
    }

    .coco {
        padding: 0 3%;
    }

    .about_gohpc {
        display: block;
    }

    /* story */
    .collection_txt_s {
        font-size: 1rem;
    }

    .s_hydrogen_txt h1 {
        font-size: 1.2rem;
    }

    .s_ingredient_title h2 {
        font-size: 1.5rem;
    }

    .s_ingredient_title p {
        font-size: 0.7rem;
    }

    .s_ingredient_content {
        display: block;
    }

    .ingredient_left img {
        width: 100%;
    }

    .ingredient_left,
    .ingredient_right {
        width: 100%;
    }

    .s_hydrogen_pc {
        display: block;
    }

    .story_pc {
        display: none;
    }

    .story_mob {
        display: block;
    }

    .s_hydrogen_txt {
        margin: 5% 0;
    }

    .s_hydrogen_txt h1 {
        font-size: 1.5rem;
    }

    .about_mver {
        display: block;
    }

    .collection_conleft,
    {
    margin-bottom: 5%;
    }
    .collec_first_m{
        display: block;
    }
.collec_first_pc{
    display: none;
}
.about_gohtxt {
    padding: 5% 0;
    font-size: 1rem;
}

.about_gohtxt2 {
    font-size: 1rem;
    padding: 10%;
    word-break: break-all;
    width: auto;
    padding-top: 0;
    line-height: 1.5;
}

.collection_section {
    height: 100%;
}

.collec_vegan_pc {
    display: none;
}

.recommand_right_dtxt a {
    color:black;
    font-size: 1rem;
}
.first_purchase_mbtn{
    width: 100%;
    margin: 0 auto;
    border: 1px solid black;
    background: black;
    text-align: center;
    padding: 2% 0;
    margin-bottom: 5%;
}
.first_purchase_mbtn a{
    color:#fafad2;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}
.recommand_right_dtxt a{
    display: none;
}
.pc_first_purchase_btn{
    display: none;
}
.collec_vegan_mob,
.collec_moist_mob {
    display: block;
    color: black;
    height: 100%;
}
collec_first_m
.collection_vegan_right {
    position: inherit;
}

.collection_vegan_right div {
    text-align: center;
}

.collection_vegan_right p {
    padding: 15% 0;
}

.collec_vegan_mob h1,
.collec_moist_mob h1 {
    font-size: 1.5rem;
    text-align: center;
    padding: 5%;
    word-break: keep-all;
}

.vegan_mid_txt p {
    padding: 9% 0;
}

.collec_vegan_mob h2,
.collec_moist_mob h2 {
    text-align: center;
}

.collection_left p {
    text-align: center;
    padding: 0 5%;
    word-break: break-all;
    padding-bottom: 5%;
}

.moist_left_txt h2 {
    padding: 0 5%;
}

.moist_left_ktxt h2 {
    padding: 0 5%;
}

.moist_last_mob {
    width: 100%;
    height: 100%;
}

.collection_left {
    text-align: center;
}

.collec_first {
    display: block;
}

.collec_first h1 {
    padding: 20% 0;
}

.collec_first_left,
.collec_first_right,
.first_img_left,
.first_text_right {
    width: 100%;
    font-size: 0.5rem;
    word-break: keep-all;
}

.collection_left img {
    width: 70%;
    padding: 10% 0;
}

.collection_right_txt {
    padding-bottom: 5%;
}

.collec_moist_mob img {
    width: 100%;
}

.collec_moist_mob {
    display: block;
}

.collec_moist_pc {
    display: none;
}
.collec_vegan_mob{
    display: block;
}
.collec_vegan_mob .collection_left,
.collec_vegan_mob,
.collection_right,
.collec_moist_mob .collection_left,
.collec_moist_mob .collection_right,
.moist_left_txt,
.moist_left_ktxt,
.moist_left_con {
    position: inherit;
    width: 100%;
}

.vegan_mid_txt {
    text-align: center;
    padding: 0 10%;
    word-break: break-all;
    padding-bottom: 5%;
}

.vegan_mid_content {
    padding-bottom: 15%;
}

.vegan_mid_content a {
    opacity: 1;
    position: unset;
    padding: 2% 0;
    font-size: 1rem;
}

.vegan_content_left.on a,
.vegan_content_right.on a,
.vegan_content_right2.on a {
    opacity: 1;
    position: unset;
    animation: none;
    font-size: 1rem;
}

.vegan_content_left {
    width: 50%;
}

.collec_moist_mob .vegan_content_left,
.collec_moist_mob .vegan_content_right,
.collec_moist_mob .vegan_content_right2 {
    width: 30%;
}

.vegan_content_right {
    width: 50%;
}

.moist_left_ktxt {
    position: inherit;
    width: 100%;
}

.moist_left_con h2 {
    padding: 5% 0;
}

.moist_left_con {
    display: block;
    text-align: center;
}

.moist_left_con div {
    width: 100%;
}

.collec_vegan_mob .collection_left_txt,
.collec_vegan_mob .collection_right_txt,
.collec_moist_mob .collection_left_txt,
.collec_moist_mob .collection_right_txt {
    position: inherit;
    text-align: center;
}

.moist_right_txt {
    position: inherit;
    max-width: 100%;
    padding: 5%;
}

.collection_txt_s {
    opacity: 1;
    visibility: visible;
    padding: 0;
}

.recommand_first {
    background: none;
}

.recommand_first h1 {
    font-size: 1.5rem;
    color: black;
}

.recommand_content {
    display: block;
}

.recommand_content img {
    width: 100%
}

.recommand_left {
    width: 100%;
}

.recommand_left_txt {
    color: black;
}

.recommand_right {
    width: 100%;
    display: block;
    text-align: center;
    color: black;
}

.recommand_right img {
    width: 40%;
}

.recommand_second_mob {
    display: block;
    text-align: center;
}

.recommand_second_mob h1 {
    padding: 5% 0;
}

.recommand_second_mob h2 {
    padding-top: 10%;
}

.recommand_second_mob h2,
.recommand_second_mob p {
    padding-bottom: 5%;
}

.recommand_second_pc {
    display: none;

}

.recommand_day_img {
    display: flex;
}

.recommand_day_img p {
    padding: 10% 0;
}

.recommand_right_first,
.recommand_right_second,
.recommand_right_third {
    width: 100%;
    padding: 10% 0;
}

.recommand_day_img div {
    width: 50%;
}

.recommand_third_pc {
    display: none;
}

.recommand_third_mob {
    display: block;
    text-align: center;
}

.recommand_third_day h1 {
    padding: 10% 0;
}

.recommand_third_mob h2 {
    padding-top: 10%;
}

.recommand_third_mob h2,
.recommand_third_mob p {
    padding-bottom: 5%;
}
.recommand_third_first{
    display: flex;
    justify-content: center;
}
.recommand_third_first p {
    padding: 10% 0;
}

.recommand_third_second {
    display: flex;
}

.recommand_third_second div {
    width: 50%
}

.recommand_third_second p {
    padding: 10% 0;
}
.recommand_mbtn{
    padding:3% 0;
    text-align: center;
    display: block;
    font-size: 1rem;
    font-weight: bold;
}
.discovery_pc {
    display: none;
}

.discovery_mob {
    display: block;
}

.discovery_left {
    background: none;
    border: none;
}

.discovery_right {
    font-size: 1rem;
    line-height: 2;
    text-align: center;
    padding-bottom: 3%;
}

.about_pcver {
    display: none;
}

.about_leftContent {
    width: 100%;
    height: auto;
}

.about_rightContent {
    width: 100%;
}

.about__title {
    font-size: 20px;
}

.about__align {
    padding: 25px 20px;
}

.about__txt {
    font-size: 13px;
}

.product_title {
    padding: 10% 0;
}
}
/* animation test */
.box {
    width: 10rem;
    height: 10rem;
    margin: 5rem auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    background-color: #febf00;
    transition: .4s;  
  }
  .animation-test{
    opacity: 1;
  }
  .fade-in2{
    animation: fadein 5s;
  }
  @keyframes fadeout{
        from{
            opacity: 1;
        }
        to{
            opacity: 0;
        }
  }
/* story css */
.video-bg{
    position:relative;
    width:50%;
    margin: 0px auto;
    overflow: hidden;

}
#myVideo{
    width: 100%;
}
.video-text{
    position:absolute;
    top: 15%;
    left: 0;
}
/* public css */
.text_center{
    text-align: center !important;
}
.text_right{
    text-align: right !important;
}
.text_left{
    text-align: left !important;
}
.story_mob{
    display: none;
}
.story_sum{
    display: flex;
}
.story_img{
    width:50%;
    text-align: center;
    border: ridge 1px #e8e8e8;
}
.story_pc {
    max-width: 1280px;
    margin:0 auto;
}
.story_pc img{
    width: 100%;
    height: 100%;
}
.story_text{
    width:50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border: ridge 1px #e8e8e8;
}
.story_text h1{
    line-height: 2;
    font-size: 2rem;
    padding:10%;
    padding-top:0;
}
.story_text .h1_left{
    line-height: 2;
    font-size: 2rem;
    padding:0 5%; 
}
.story_text .h1_center{
    line-height: 2;
    text-align: center;
    font-size: 2rem;
    padding:0 5%; 
}
.story_text h2{
    line-height: 2;
    font-size: 1.3rem;
    padding:0 10%; 
    font-weight: 500;
}
.story_text h2 span{
    font-weight: bold;
    font-style: italic;
}
.story_text p{
    line-height: 2;
    font-size: 1rem;
    padding:0 10%; 
}
.story_text h2 b{
    font-weight: bold !important;
}
.story_text h3{
    text-align: right;
    line-height: 2;
    font-size: 1.3rem;
    padding:0 5%;
    padding-left: 50%;
    font-weight: 500;
}
.story_text h4{
    text-align: center;
    line-height: 2;
    font-size: 1.3rem;
    padding:0 5%;
    font-weight: 500;
    padding-bottom: 5%;
}
.story_btn{
    width:100%;
    text-align: center;
    padding:5% 0;
}
.story_btn a{
    font-weight: bold;
    border-radius: 50px;
    min-width: 250px;
    border: 1px solid #ffffff;
    text-align: center;
    color:#ffffff;
    padding:2% 5%;
    font-size: 1.5rem;
}
.way_btn_back{
    background:url("//gohcosmetics.com/story/img/waytolove/waytolove2.jpg");
    background-size: cover;
    padding:10% 0;
    margin: 0 auto;
    border: none;
}
.story_btn_back{
    background:url("//gohcosmetics.com/story/img/tropholove/tropholove_back.jpg");
    background-size: cover;
    padding:5% 0;
}
.story_btn_back2{
    background:url("//gohcosmetics.com/story/img/ingredient/btn_bg_blue.jpg");
    background-size: cover;
    padding:5% 0;
}
.way_btn_back .story_btn a{
    font-weight: bold;
    width: 175px;
    display: block;
    margin: 0 auto;
    border-radius: 50px;
    min-width: 100px;
    border: 1px solid black;
    text-align: center;
    color: black;
    padding: 2% 2%;
    font-size: 1.3rem;
    background-color: rgba(255,255,255,.8);
}
.story_btn_back2 .story_btn a{
    font-weight: bold;
    width: 175px;
    display: block;
    margin: 0 auto;
    border-radius: 50px;
    min-width: 100px;
    border: 1px solid #ffffff;
    text-align: center;
    color: #ffffff;
    padding: 2% 2%;
    font-size: 1.1rem;
    background-color: rgba(255,255,255,.3);
}
/* ingredient add css */
.ingredient_h2_title{
    font-style: unset !important;
    font-weight: bold !important;
    font-size: 1.8rem !important;
}
.ingredient_pc_height{
    height:819px;
}
.collec_first_left h1, .first_text_right h1{
    padding:0 5%;
    word-break: keep-all;
}
/*  */

.waytolove_story_text{
    width:50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border: ridge 1px #e8e8e8;
}
.way_h1{
    padding: 2% 0;
    line-height: 2;
    font-size: 2.5rem;
}
.waytolove_story_text h2{
    line-height: 1.6;
    font-size: 1.3rem;
    padding:5% 10%; 
    font-weight: bold;
}
.waytolove_story_text h3{
    text-align: left;
    line-height: 1.5;
    font-size: 1.1rem;
    padding:0 10%;
    font-weight: 500;
}
#music_btn {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 1px solid #bbb;
    background: rgba(255,255,255,.8);
    cursor: pointer;
    bottom: 17%;
    right: 40px;
    z-index: 1;
    font-size: 1rem;
    text-align: center;
    line-height: 40px;
}

/* story css end */

/* new collection css  part*/
.collection_mob{
    display: none;
}
.collection_pc{
    width: 100%;
    height: 100%;
}
.collection_pc> div>img{
    width:100%;
}
.collection_middle{
    text-align: center;
    padding: 5% 15%;
}
.collection_middle h1{
    font-size: 2.5rem;
    font-weight: bold;
}
.collection_middle h2{
    padding:3% 0 ;
    font-size: 1.5rem;
}
.collection_middle h3{
    font-size: 1.2rem;
    font-weight: 500;
    padding:5% 0;
    line-height: 2;
}
.collection_middle h4{
    padding:5% 0;
    font-weight: 500;

}
.collection_mid_product{
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    padding-top: 5%;
    cursor: pointer;
}
.vegan_left{
    width: 25%;
    text-align: center;
}
.vegan_left h4,.vegan_right h4, .vegan_right2 h4{
    font-size: 1.2rem;
    font-weight: 500;
    padding:5% 0;
}
.vegan_left a,.vegan_right a,.vegan_right2 a{
    font-size: 1.2rem;
    font-weight: bold;
    padding:5% 0;
}
.vegan_right{
    width: 25%;
    text-align: center;
}
.vegan_right2{
    width: 25%;
    text-align: center;
}
/* collection css end */
/* New collection css part */
    .peeloff--imgsize{
        width: 100% !important;
    }
    .justfy--nomal{
        justify-content: unset !important;
    }
    .border--none{
        border:none !important;
    }
    .collection-mu__5{
        margin-top:5%;
    }
    .collection-mu__10{
        margin-top:10%;
    }
    .collection-pc{
        max-width: 1280px;
        width: 100%;
        margin:0 auto;
    }
    .collection-main-img img{
        width: 100%;
    }
    .collection-group{
        display: flex;
        width: 100%;
        justify-content: space-evenly;
    }
    .collection-group__single{
        width:33%;
        /* border: ridge 1px #e8e8e8; */
    }
    .collection-group__single h2{
        font-size: 1.5rem;
        text-align: center;
    }
    .collection-group__single h3{
        font-size: 1.3rem;
        font-weight: 500;
        text-align: center;
    }
    .collection-group--block{
        display: block;
        width:100%;
        text-align: center;
        padding-top:5%;
    }
    .collection-group--block h1{
        padding:0 5%;
        padding-bottom: 2%;
        font-size: 2rem;
    }
    .collection-group--block h3{
        padding:0 5%;
        line-height: 2;
        font-size: 1rem;
    }
    .single--set h2{
        font-size: 1.3rem;
        padding:3% 0;
        padding: 1% 0 1% 0
    }
    .single--set h3{
        font-size: 1.1rem;
         padding:0 5%;
    }
    .collection-group__onesingle{
        width:33%;
        text-align: center;
    }
    .collection-group__onesingle h1{
        font-size: 2rem;
        padding: 20% 5%;
    }
    .collection-group__onesingle h3{
        font-size: 1rem;
        font-weight: 500;
        word-break: break-all;
        line-height: 2;
        padding: 0 5%;
    }
    .single__mside{
        margin: 0 0.5%;
    }
    .single__mlside{
        margin-left:1%;
    }
    .collection-group__single img{
        width:100%;
    }
    .single-tap{
        display: flex;
        justify-content: space-evenly;
        text-align: center;
        padding: 1% 0 7% 0;
    }
    .single-tap p {
        margin: 0 auto;
        font-size:1.1rem;
        margin-left: 40%;
    }
    .single-tap a {
        font-size: 1rem;
        padding: 1% 8%;
        border: ridge 2px #e8e8e8;
        border-radius: 8px;
        text-align: center;
        margin-right: 40%;
    }
    .single-tap a:hover{
        font-size: 1rem;
        padding: 1% 8%;
        border: ridge 2px #e8e8e8;
        border-radius: 8px;
        text-align: center;
        margin-right: 40%;
        color: white;
        background-color: rgba(0,0,0,1);    
    }
    .single-tap div{
        width:50%;
        /* border: ridge 1px #e8e8e8; */
        padding: 1% 0;
        border-left: 0;
        border-right: 0;
    }
    .single-tap div:first-child{
        /* border-right: 1px solid #e8e8e8; */
    }
    .collection-group__double{
        width:66%;
        text-align: center;
    }
    .collection-group__double h1{
        font-size: 2rem;
        font-weight: bold;
        padding-top:10%;
    }
    .collection-group__double h2{
        font-size: 1.5rem;
        padding-top:3%;
        padding-bottom: 3%;
    }
    .collection-group__double h3{
        font-size: 1rem;
        font-weight: 500;
        word-break: keep-all;
        line-height: 2;
        padding: 0 5%;
    }
    
    .double__bg--skincare h1,
    .double__bg--skincare h2,
    .double__bg--skincare h3,
    .double__bg--graphene h1,
    .double__bg--graphene h2,
    .double__bg--graphene h3,
    .single__bg--tropho h1,
    .single__bg--tropho h2,
    .single__bg--tropho h3,
    .single__bg--peel h1,
    .single__bg--peel h2,
    .single__bg--peel h3{
        color: white;
    }
    .single__bg--peel h1{
        padding: 10% 5%;
    }
    .collection-group__double h3{
        padding-bottom: 5%;
    }
    .double__bg--height{
        height: 503px;
    }
    .double__bg--set{
        background:url("//gohcosmetics.com/collection/img/set_main.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .double__bg--set--mob{
        background:url("//gohcosmetics.com/collection/img/set_main_mob.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .double__bg--skincare{
        background:url("//gohcosmetics.com/collection/img/skincare_bg-red.gif");
        background-size: cover;
        background-repeat: no-repeat;
        height: 503px;
        background-position: center;
        position: relative;
    } 
    .double__bg--skincare h1{
        padding-top:3%;
    }
    .double__bg--skincare h3{
        position:absolute;
        bottom:0;
    }
    .double__bg--graphene{
        background:url("//gohcosmetics.com/collection/img/skincare_bg--graphene.gif");
        background-size: cover;
        background-repeat: no-repeat;
        height: 503px;
        background-position: center;
    }
    .single__bg--tropho{
        background:url("//gohcosmetics.com/collection/img/skincare_bg.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        height: 503px;
        background-position: center;
        position: relative;
    }
   
    .single__bg--tropho h3{
        position: absolute;
        bottom: 0;
        padding-bottom: 10%;
    }
    .single__bg--peel{
        background:url("//gohcosmetics.com/collection/img/single__bg--peel.png");
        background-size: cover;
        background-repeat: no-repeat;
        height: 503px;
        background-position: center;
    }
    .collection-group__double img{
        width:100%;
        height:425.59px;
    }
    .collection-mob{
        display: none;
    }
    .collection-mob__part{
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        height: 407px;
        border:ridge 1px #e8e8e8;
        padding:0 10%;
        word-break: keep-all;
    }
    
    .collection-mob__part h1{
        font-size: 1.5rem;
        padding:5% 0;
    }
    .collection-mob__part h2{
        font-size: 1.3rem;
        padding-bottom:5%;
    }
    .collection-mob__part h3{
        font-size: 1.1rem;
        font-weight: 500;
        line-height: 2;
    }
    .part--hauto h3 {
        padding:5% 0;
    }
    .part--mbg{
        background:url("//gohcosmetics.com/collection/img/skin_mist.jpg");
        background-size: cover;
        background-position: center;
    }
    .part--sbg{
        background:url("//gohcosmetics.com/collection/img/skin_serum.jpg");
        background-size: cover;
        background-position: center;
    }
    .part--abg{
        background:url("//gohcosmetics.com/collection/img/skin_ampoule.jpg");
        background-size: cover;
        background-position: center;
    }
    .part-group{
        display: flex;
        width:100%;
    }
    
    .part-group img{
        width:50%;
        margin: 0 15% 0 auto
    }
    .part-group__product{
        width:50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .part-group__text{
        width:50%;
        padding:15% 0;
        text-align: center;
    }
    .part-group__text p{
        font-size: 1rem;
        word-break: keep-all;
        text-align: left;
    }
    .part-group__text p:first-child{
        margin-bottom: 10%;
    }
    .part-group__text--btn{
        padding:5% 0;
        text-align: left;
    }
    .part-group__text--btn a{
        font-size: 1rem;
        border:solid 1px black;
        border-radius: 25px;
        padding:3% 10%;
        background-color: rgba(255,255,255,.3);
    }
    .part-group__text--btn a:hover{
        color:white;
        border:solid 1px #e8e8e8;
        border-radius: 25px;
        padding:3% 10%;
        background-color: rgba(0,0,0,1);
    }
    .part-vegan_img{
        text-align: left;
    }
    .part-vegan_img img{
        width: 80%;
        margin: 0;
        margin-left: -10%;
    }
    .part__text--pname{
        font-size: 1.2rem !important;
    }
/* New Collection css end */
/* New Main css add */
.main-resize{
    max-width: 1280px;
    margin:0 auto;
}
.main__subtitle{
    padding:2% 0;
    font-size: 2rem;
}
.header__notice{
    text-align: center;
    background: black;
    padding: 0.5% 0;
}
.header__notice a{
    font-size: 1.2rem;
    color: white;
}
.header__notice--main{
    text-align: center;
    background: black;
    padding: 0.5% 0;
    margin-top: 4%;
}
.header__notice--main a{
    font-size: 1.2rem;
    color: white;
}
.section:not(.section--no-margin){
    margin-bottom:60px;
}
.header__notice--mob{
    display: none;
}
#main > .header{
    height: 70px;
}
.main-banner{
    height: auto;
    min-height: auto;
}
.main__review{
    padding: 10px 0;
}
.product__container{
    padding:0;
}
/* New Main css end */
/* subbanner  css part */
    .sub-banner_mob{
        display: none !important;
    }
/* subbanner css part end*/

/* product Detail css */
.goh__css--test{
    font-size: 2rem;
    color:red;
}
.product__detail{
    width:760px;
    margin:0 auto;
}
.detail__total{
    display: flex;
    width: 100%;
}
.detail__total--img{
    width:40%
}
.detail__total--img img{
    width:100%;
}
.detail__total--text{
    width:60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.detail__total--text h1{
    font-size: 1.2rem;
    font-weight: bold;
    padding:5% 0;
}
.detail__total--text h2{
    font-size: 1rem;
    font-weight: 500;
    padding:5% 0;
    padding-top:0;
}
.detail__ingredient{
    border:solid #bbb;
    border-width: 1px 0;
}
.detail__ingredient--content, .detail__addition--content{
    border:solid #bbb;
    border-width: 1px 0;
    border-top:0;
}
.detail__ingredient--content p:nth-child(even){
    padding:3% 0;
}
.detail__ingredient--content p:last-child{
    padding-bottom:0;
}
.detail__addition{
    border:solid #bbb;
    border-width: 1px 0;
    border-top:0;
}
.detail__ingredient,.detail__addition{
    display: flex;
    justify-content: space-between;
    padding:1% 0;
    cursor: pointer;
}
.detail__ingredient--title p,.detail__addition--title p{
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 2.5;
}

.detail__ingredient--btn p,.detail__addition--btn p{
    font-size: 2rem;
    font-weight: bold;
    align-items: center;
    cursor: pointer;
}
.detail__ingredient--content,.detail__addition--content{
    font-size: 1.1rem;
    padding:3% 0;
    display: none;
}
.detail__textcontent{
    padding:2% 0;
}
.detail__textcontent h1{
    font-size: 1.2rem;
    font-weight: bold;
    padding-bottom: 5%;
}
.detail__textcontent h2{
    font-size: 1rem;
    font-weight: 500;
    padding-bottom: 5%;
}
.detail__textcontent h3{
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
}
.detail__swiper:hover img{
    transform: none !important;
}
.detail__swiper{
    text-align: center;
    margin-bottom: 0 !important;
}
.detail__swiper h1{
    padding:5% 0;
    font-size: 1.2rem;
    font-weight: 500;
}
.detail__swiper h2{
    font-size: 1rem;
    font-weight: 500;
    padding:0 5% 5% 5%;
}
.detail__textcontent--second h1{
    font-size: 1.2rem;
    padding-top: 3%;
}
.detail__textcontent--second h2{
    font-size: 1rem;
    font-weight: 500;
    padding:3% 0;
}
.detail-pl__3{
    padding-left:3%;
}
.detail-pr__3{
    padding-right:3%;
}
.detail__swiper--ingredient:hover img{
    transform: none !important;
}
.detail__swiper--ingredient{
    text-align: center;
    margin-bottom: 0 !important;
}
.detail__swiper--ingredient h1{
    font-size: 1.2rem;
    font-style: italic;
    font-weight: bold;
    line-height: 1.5;
}
.detail__swiper--ingredient h2{
    font-size: 1rem;
    font-weight: 500;
    padding:5%;
}
.detail__morecontent--btn,.detail__lastcontent--btn{
    padding:3% 0;
    text-align: right;
    border: solid #bbb;
    border-width: 1px 0;
    padding: 1% 0;
    margin-top:5%;
}
.detail__morecontent--btn a,.detail__lastcontent--btn a{
    font-size: 1.2rem;
    cursor: pointer;
}
.detail__morecontent,.detail__lastcontent{
    display: block;
    padding:2% 0%;
}
.detail__morecontent h1{
    font-size: 1.2rem;
    font-weight: bold;
}
.detail__morecontent h2,.detail__lastcontent h2{
    font-size: 1rem;
    font-weight: 500;
}
.detail__swiper--tropho,.detail__swiper--advice{
    text-align: center;
    margin-bottom: 0 !important;
}
.detail__swiper--tropho h2,.detail__swiper--advice h2{
    font-size: 1.1rem;
    font-weight: 500;
    padding:5% 0;
}
.detail__swiper--tropho img{
    width: 100% !important;
    transform: none;
}

.detail__swiper--advice img{
    width: 75% !important;
    transform: none;
}
.detail__swiper--set img{
    width:90% !important;
    transform: none;
}
.detail__swiper--tropho a,.detail__swiper--set a,.detail__swiper--advice a{
    font-size: 1.1rem;
    display: block;
    width: 30%;
    margin: 0 auto;
    border-radius: 8px;
    padding: 1% 6%;
    border: ridge 2px #e8e8e8;
}
.detail__swiper--tropho a:hover,
.detail__swiper--set a:hover,
.detail__swiper--advice a:hover{
    color: white;
    background-color: rgba(0,0,0,1);
}
.detail__setcontent{
    padding:3% 0;
}
.detail__setcontent h1{
    font-size: 1.2rem;
    font-weight: bold;
}
.detail__graphe{
    padding:5% 0;
}
.detail__swiper--set{
    text-align: center;
    margin-bottom: 0 !important;
}
.detail__swiper--set h2{
    font-size: 1.1rem;
    font-weight: 500;
    padding:5% 0;
}
.detail__graphe_mob{
    display: none;
}

.detail_setslide_mob{
    display: none;
}
.detail__extream--h1{
    padding:0 !important;
}
.detail__text--through{
    text-decoration: line-through;
}
.detail_lastcontent--bold{
    font-weight: bold;
}
/* product Detail cs end */

/* mobile */
/* font - size = h1 title, h2 normal, h3 center, h4 right, h5,6 subtitle(bold)*/

@media all and (min-width:1024px) and (max-width: 1280px) {
    .collec_first_left h1, .first_text_right h1{
        font-size: 1rem;
        padding:0 5%;
        word-break: keep-all;
    }
    .story_pc img{
        height: auto;
    }
    .story_text h1{
        font-size: 1.5rem;
    }
    .story_text h2{
        font-size: 1.2rem;
    }
    .story_text .h1_left {
        font-size: 1.5rem;
    }
    .story_text h3{
        text-align: right;
        font-size: 1.2rem;
    }
    .story_text .h1_center{
        font-size: 1.5rem;
    }
    .story_text h4{
        font-size: 1.2rem;
    }
    .story_btn a {
        font-size: 1.2rem;
    }
    /* way to love you add css */
    .waytolove_story_text h3{
        padding: 5% 10%;
    }
    /* collection add css part */
    .vegan_right,.vegan_leftm,.vegan_right2{
        width:30%;
    }
   
}
@media all and (min-width:768px) and (max-width: 1023px) {
  
    .collec_first_left h1, .first_text_right h1{
        font-size: 1rem;
        padding:0 5%;
        word-break: keep-all;
    }
    .story_pc img{
        height: auto;
    }
    .story_text h1{
        font-size: 1.3rem;
    }
    .story_text h2{
        font-size: 1rem;
    }
    .story_text .h1_left {
        font-size: 1.3rem;
    }
    .story_text h3{
        text-align: right;
        font-size: 1rem;
    }
    .story_text .h1_center{
        font-size: 1.3rem;
    }
    .story_text h4{
        font-size: 1rem;
    }
    .story_btn a {
        font-size: 1.2rem;
    }
    /* way to love you add css */
    .waytolove_story_text h2{
        font-size: 1.3rem;
    }
    .waytolove_story_text h3{
        font-size: 1rem;
        padding-bottom: 5%;
    }
    .way_btn_back{
        width: 100%;
    }
    #music_btn{
        right: 16px;
    }
    /* collection add css part */
    .vegan_right,.vegan_left,.vegan_right2{
        margin:0 10%;
        width:30%;
    }
    .collection_middle h1{
        font-size: 2rem;
    }
    .collection_middle h3{
        font-size: 1rem;
    }
   /* new collection */
   .double__bg--graphene{
    height: auto;
   }
   .collection-group__onesingle{
    width:50%;
    height: auto;
   }
   .collection-group__double{
    width:50%;
   }
   .collection-group__double h3{
    line-height: 1.4;
   }
}

@media (max-width: 767px) {
    
    .scroll-btn{
        display: none !important;
    }
    .collection_mob{
        display: block;
    }
    .collection_pc{
        display: none;
    }
    .collec_first h1{
        padding:20% 0;
    }
    .story_pc{
        display: none;
    }
    .story_mob{
        display: block;
        overflow: hidden; 
    }
    .story_mob img{
        width: 100%;
    }
    .story_img {
        width: 100%;
        height: 100%;
        border: ridge 1px #e8e8e8;
    }
    .story_text {
        width:100%;
        word-break: keep-all;
        height: 407px;
        max-height: 407px !important;
        border: ridge 1px #e8e8e8;
    }
    .story_text h1{
        line-height: 2;
        font-size: 1.5rem;
        padding:10% 10%;
    }
    .story_text .h1_left{
        line-height: 2;
        font-size: 1.5rem;
        padding:0 5%; 
    }
    .story_text h2{
        line-height: 1.7;
        font-size: 1.1rem;
        padding:0 5%;
        font-weight: 500;
    }
    .story_text h2 span{
        font-weight: bold;
        font-style: italic;
    }
    .story_text h2 b{
        font-weight: bold;
    }
    .story_text h3{
        text-align: center;
        line-height: 2;
        font-size: 1.1rem;
        padding:0 5%;
        font-weight: 500;
    }

    .story_text h4{
        text-align: right;
        line-height: 2;
        font-size: 1.1rem;
        padding:0 5%;
        padding-left: 50%;
        font-weight: 500;
    }
    .story_text h5{
        text-align: center;
        line-height: 2;
        font-size: 1.3rem;
        padding:0 5%;
        font-weight: bold;
        padding-bottom: 5%;
    }
    .story_text h6{
        line-height: 2;
        font-size: 1.3rem;
        padding:0 5%;
        font-weight: bold;
        padding-bottom: 5%;
    }
    .story_text h6 span{
        font-weight: normal;
    }
    
    .story_text p{
        padding:5% 5%;
        padding-bottom: 10%;
    }
    .story_sum{
        display: block;
    }
    .story_btn{
        width:100%;
        text-align: center;
        padding:5% 0;
    }
    .story_btn a{
        font-weight: bold;
        border-radius: 25px;
        min-width: 250px;
        border: 1px solid #ffffff;
        text-align: center;
        color:#ffffff;
        padding:2% 5%;
        font-size: 1.1rem;
    }
    
    .story_btn_back{
        background:url("//gohcosmetics.com/story/img/tropholove/tropholove_back.jpg");
        background-size: cover;
        padding:10% 0;
    }
    .story_btn_back2 .story_btn a{
        font-size: 1rem;
    }
    .m_h1_center{
        text-align: center;
    }
    .h2_botpadding{
        padding-bottom: 10% !important;
    }
    /* ingredient add css */
    .ingredient_h2{
        padding:0 10% !important;
    }
    .ingredient_h1{
        padding:10% 5% !important;
        font-size: 1.2rem !important;
    }
    .ingredient_h2_title{
        font-style: unset !important;
        font-size: 1.2rem !important;
        font-weight: bold !important;
        padding-bottom: 5% !important;
    }
    .ingredient_h1_subtitle{
        padding:0 5% !important;
        padding-bottom: 5% !important;
    }
    /* about add css */
    #music_btn {
        bottom: 15%;
        right: 16px;
    }
    .waytolove_story_text{
        width:100%;
    }
    .way_h1 {
    line-height: 2;
    font-size: 1.5rem;
    font-weight: bold;
    }
    .waytolove_story_text h2 {
    line-height: 1.6;
    font-size: 1.1rem;
    padding: 5% 5% 0 5%;
    font-weight: 500;
    font-weight: bold;
    }
    .waytolove_story_text h3 {
    text-align: left;
    line-height: 1.5;
    font-size: 1rem;
    padding: 5% 5%;
    font-weight: 500;
    }
    .way_btn_back .story_btn a{
        font-size: 1rem;
    }
    /* collection add css part */
    .collection_mob{
        display: block;
    }
    .collection_mob img{
        width: 100%;
    }
    .collection_pc{
        display: none;
    }
    .collection_middle{
        padding:10% 5%;
    }
    .collection_middle h1{
        font-size:1.5rem;
        word-break: keep-all;
    }
    .collection_middle h3{
        font-size:1rem;
        padding:10% 0;
    }
    .collection_middle h2 {
        padding: 5% 0;
        font-size: 1.2rem;
    }

    .vegan_right,.vegan_left,.vegan_right2{
        width:30%;
    }
    .vegan_left h4, .vegan_right h4, .vegan_right2 h4{
        font-size: 0.8rem;
        padding-bottom: 15%;
    }
    .vegan_left a, .vegan_right a,.vegan_right2 a {
        font-size: 1rem;;
        margin-top:5%;
    }
    .collection_middle h4{
        padding:10% 0;
    }
    /* collection css end */
    /* New collection css part */
    .collection-pc{
       display: none;
    }
    .single__bg--tropho h3{
        position:unset;
    }
    .collection-mob{
        display: block;
        width: 100%;
        overflow: hidden;
    }
    .collection-mob__part{
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        height: 407px;
        border:ridge 1px #e8e8e8;
        padding: 0 5%;
        word-break: keep-all;
    }
    .collection_mob--solimg{
        width:100%;
    }
    .collection_mob--solimg img{
        width:100%;
    }
    .collection-mob__part h1{
        font-size: 1.5rem;
    }
    .collection-mob__part h2{
        font-size: 1.1rem;
        padding-bottom:5%;
        font-weight: 500;
    }
    .collection-mob__part h3{
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.3;
    }
    .single__bg--skincare{
        background:url("//gohcosmetics.com/collection/img/skincare_bg_mob-red.gif");
        background-size: cover;
        background-repeat: no-repeat;
        height: 407px;
        background-position: center;
        color: white;
        justify-content: space-between;
    }
    .single__bg--skincare h1{
        padding-top:5%
    }
    .single__bg--skincare h2{
        padding-bottom: 5%;
    }
    .single__bg--skincare2{
        background:url("//gohcosmetics.com/collection/img/skincare_bg.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        height: 407px;
        background-position: center;
        color:white;
        justify-content: end;
    }
    .single__bg--skincare2 h3{
        padding-bottom: 5%;
    }
    .part--mbg{
        background:url("//gohcosmetics.com/collection/img/skin_mist.jpg");
        background-size: cover;
        background-position: center;
    }
    .part--sbg{
        background:url("//gohcosmetics.com/collection/img/skin_serum.jpg");
        background-size: cover;
        background-position: center;
    }
    .part--abg{
        background:url("//gohcosmetics.com/collection/img/skin_ampoule.jpg");
        background-size: cover;
        background-position: center;
    }
    .part--bg{
        padding: 0 10% 0 0;
    }
    .part-group{
        display: flex;
        width:100%;
    }
    .part-group__product{
        width:50%;
    }
    .part-group__text{
        width:50%;
        padding:2% 0;
        text-align: center;
    }
    .part--hauto{
        height: auto !important;
    }
    .part-group__text p{
        font-size: 1rem;
        word-break: keep-all;
    }
    .part-group__text p:first-child{
        margin-bottom: 10%;
    }
    .part-group__text--btn{
        padding:20% 0;
    }
    .part__vegan--btn{
        padding:5% 0 !important;
    }
    .part-group__text--btn a{
        font-size: 1.1rem;
        border:solid 1px #e8e8e8;
        border-radius: 25px;
        padding:3% 10%;
    }
    .collection-group{
        display: block;
    }
    .collection-group__single{
        width: 100%;
    }
    .part-group__text--btn a{
        font-size: 1rem;
        border:solid 1px black;
        border-radius: 25px;
        padding:3% 10%;
        background-color: rgba(255,255,255,.3);
    }
    .part-vegan_img img {
        width: 50%;
        margin: 0;
        margin-left: -5%;
    }
    .set-part__title{
        height: 407px;
    }
    .video-bg{
        position:relative;
        width:50%;
        margin: 0px auto;
        overflow: hidden;
    
    }
    #myVideo{
        width: 100%;
    }
    .video-text{
        position:absolute;
    }
/* New Collection css end */
/* main css part */
    .sub-banner_pc{
        display: none !important;
    }
    .sub-banner_mob{
        display: block !important;
    }
    .main__subtitle{
        text-align: center;
        font-size: 1.5rem;
    }
    .header__notice--pc{
        display: none;
    }
    .header__notice--mob{
        display: block;
    }
    .header__notice--mob a{
        font-size: 1rem;
    }
    #main > .header{
        height: 55px;
    }
/* main css part end *
/* product detail css  */
.product__detail{
    width:100%;
}
.detail__total{
    display: block;
}
.detail__total--img{
    width: 100%;
}
.detail__total--text{
    width: 100%;
}
.detail__graphe_mob{
    display: block;
    margin:10% 0;
}
.detail__graphe{
    display: none;
}

.detail__total--text h2,.detail__total--text h1{
    padding:5% 3%;
}
.detail__ingredient, .detail__addition{
    padding:2% 3%;
}

.detail__ingredient--content, .detail__addition--content{
    padding:3% 3%;
}
.detail__textcontent{
    padding:5% 0;
}
.detail__textcontent h1,.detail__textcontent h2,
.detail__textcontent h3{
    text-align: left;
    padding-left:3%;
    padding-right: 3%;
}

.detail__textcontent--second h2{
    padding:5% 3%;
}

.detail__setcontent h1,
.detail__morecontent--btn a, .detail__lastcontent--btn a{
    padding:0 3%;
}
.detail__swiper--set img,.detail__swiper--tropho img{
    width: 80% !important;;
}
.detail__ingredient--content, .detail__addition--content{
    font-size: 1rem;
}
.detail__swiper--tropho h2,.detail__swiper--set h2{
    font-size: 1rem;
}
.detail__morecontent--btn a, .detail__lastcontent--btn a{
    font-size: 1rem;
    font-weight: 500;
    border:none;
}
.detail-pl__3,.detail-pr__3{
    padding:0;
}
.detail__morecontent, .detail__lastcontent{
    padding:2% 3%;
}
.detail_setslide_mob{
    display: block;
}
.detail_setslide_pc{
    display: none;
}
.detail__swiper--advice img{
    width:60%;
}
.detail__extream--h1{
    padding:3% 3%!important;
}
.detail__morecontent--btn, .detail__lastcontent--btn{
    padding:3% 0;
}
/* product detail css end */
}
@charset "utf-8";

/* **************************** //필수 CSS 수정 및 삭제 불가 **************************** */

/* tag reset */
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img { margin:0; padding:0; }
html { width:100%; height:100%; }
body,code { font-size:13px; font-family:'Inter', 'Noto Sans KR',"맑은 고딕","malgun gothic","돋움","dotum",sans-serif; color:#000; color:var(--font-color-base); background:#fff; }
body { min-width:320px; }
body#popup { min-width:0; }
li { list-style:none; }
img,fieldset { border:none; vertical-align:top; }
table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }
caption { display:none; }
th,td { border:0; vertical-align:top; }
input,select,textarea { font-size:100%; font-family:'Inter', 'Noto Sans KR',"맑은 고딕","malgun gothic","돋움","dotum",sans-serif; color:#000; color:var(--font-color-base); vertical-align:middle; border-radius:0; box-sizing:border-box; }
button { font-family:'Inter', 'Noto Sans KR',"맑은 고딕","malgun gothic","돋움","dotum",sans-serif; overflow:visible; padding:0; margin:0; border:0; cursor:pointer; background:none; }
strong {font-weight: 500;}
hr.layout { display:none; }
a { text-decoration:none; color:#000; color:var(--font-color-base); }
a:hover { text-decoration:underline; }
a:active { text-decoration:none; }
.objHidden { visibility:hidden; position:absolute; left:-1000px; top:-1000px; height:0; width:0; }
#content_CONTAINER table, #bi_inquire_content_CONTAINER table { border:0; margin:0 0 -1px; }
#content_CONTAINER table:before, #bi_inquire_content_CONTAINER table:before { display:none; }
#content_CONTAINER td, #bi_inquire_content_CONTAINER td { width:auto !important; padding:0; }

#progressPaybarBackground { position:absolute; z-index:99; left:0; top:0; width:100%; height:100%; filter:alpha(opacity=40); opacity:0.3; background-color:#000; }
#progressPaybarView { position:fixed; z-index:100; top:50%; left:0; right:0; transform:translateY(-50%); }
#progressPaybarView h3 { font-size:32px; color:#444b59; }
#progressPaybarView .box { width:586px; margin:0 auto; padding:67px 0; text-align:center; background:#fff; }
#progressPaybarView .box .txt { margin:8px 0 36px; font-size:15px; line-height:26px; color:#667084; }

/* contents */
#skipNavigation {position:absolute; top:0; left:0; z-index:100; width:100%; height:0;}
#skipNavigation p, #skipNavigation ul, #skipNavigation ul li {height:0;}
#skipNavigation p a {position:absolute; left:0; top:0; display:block; overflow:hidden; width:1px; height:1px; margin-left:-1px; margin-bottom:-1px; text-align:center; color:#000; white-space:nowrap;}
#skipNavigation p a:focus, #skipNavigation p a:hover, #skipNavigation p a:active {width:100%; height:auto; padding:10px 0; background:#c4122f; color:#fff; z-index:100;}

.displaynone { display:none; }
.dimmed { position:fixed; top:0; left:0; z-index:99; width:100%; height:100%; background:#fff; opacity:0.8; filter:alpha(opacity=80); }
.blind { display: block; overflow: hidden; position: absolute; font-size: 1px; line-height: 0; color: transparent; text-indent: -150%; white-space: nowrap;}

/* IE Not Supoorted */
:root {
  --font-color-base:#000;
  --font-color-heading:#000;
  --font-color-primary:#000;
  --font-color-secondary:#ef441f;
  --font-color-warn:#ec2a1d;
  --font-color-success:#0985df;
}

/* **************************** 필수 CSS 수정 및 삭제 불가 **************************** */
@charset "utf-8";

/* Layout */
#header { background:#fff; box-sizing:border-box; }
#header .topArea { position:relative; }
#header .navigation .btnNav { overflow:hidden; white-space:nowrap; font-size:1px; color:transparent; line-height:1px; width:24px; height:24px; background:none; }
#header .navigation__util .menu { display:inline-block; overflow:hidden; width:24px; height:24px; margin-left:15px; font-size:1px; line-height:1px; color:transparent; white-space:nowrap; text-indent:150%; vertical-align:top; background:none; }
#topBanner { position:relative; overflow:hidden; height:34px; text-align:center; background:#000; }
#topBanner .desc { overflow:hidden; font-size:12px; color:#fff; box-sizing:border-box; line-height: 1; }
#topBanner .btnClose { position:absolute; right:50px; top:10px; width:13px; height:13px; background:none; overflow:hidden; white-space:nowrap; text-indent:150%; font-size:1px; color:transparent; line-height:1px; }
#topBanner.hidden { display:none; }
#footer { background:#f6f6f6; }
#footer .inner { overflow:hidden; position:relative; }
.dimmed { display:none; z-index:1000; position:fixed; top:0; left:0; bottom:0; right:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }

/********************* Mobile *********************/
@media all and (max-width:767px) {
    /* responsive class */
    .RTI, .RTB, .RTIB { display:none !important; }
    .RMB { display:block !important; }
    .RMI { display:inline !important; }
    .RMIB { display:inline-block !important; }

    #header .navigation .btnNav {left:16px; }
    #header .navigation__util { right:16px; }
}

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
    /* responsive class */
	.RWI, .RW, .RWB, .RWIB { display:none !important; }
    .RTMB { display:block !important; }
    .RTMI { display:inline-block !important; }

    #capp-shop-new-product-optionselect-layer { position:fixed !important; top:0 !important; right:0 !important; left:auto !important; width:100% !important; height:100% !important; margin:0 !important; }

    #header { position:relative; height:60px; padding:20px 0 0; box-sizing:border-box; }
    #header .navigation .btnNav {position:absolute; top:18px;  }
    #header .navigation__util { position:absolute;  top:18px; }
    .bottom-nav { z-index:901; position:fixed; bottom:0; width:100%; height:52px; -webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);-webkit-transition: -webkit-transform .3s linear,padding-bottom .3s linear;transition: transform .3s linear,padding-bottom .3s linear; }
    .bottom-nav--hide { -webkit-transform: translate3d(0,60px,0); transform: translate3d(0,60px,0); }
    .bottom-nav__tabBar { display:flex;justify-content: space-between; height:52px; padding:14px 26px 0; box-sizing:border-box; background:#fff; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transition: -webkit-transform .3s linear,padding-bottom .3s linear; transition: transform .3s linear,padding-bottom .3s linear; }
    .bottom-nav__tabBar li a,
    .bottom-nav__tabBar li button { position:relative; display:block; white-space:nowrap; width:24px; height:24px; font-size:1px; line-height:1px; color:transparent; text-indent:150%; vertical-align:top; background:none; }
    .bottom-nav__tabBar li button:focus { outline:0; }
    .bottom-nav__tabBar .count { display:block; position:absolute; top:12px; right:-5px; width:16px; height:16px; font-size:11px; color:#fff; text-align:center; text-indent:0; line-height:15px; border-radius:50%; background:#000; }
    .bottom-nav__top { opacity:0; visibility:hidden; position:absolute; top: -72px; right:16px; width:54px; height:54px; padding:15px 0 0; font-size:14px; border:1px solid #e3e3e3; box-sizing:border-box; text-align:center; text-transform: uppercase; background:rgba(256,256,256,0.9); transition:.5s; }
    .bottom-nav__top a { display:block; }
    .bottom-nav__top .icon.icoArrowTop { display:block; margin:0 auto; }
    .bottom-nav__top--show { opacity:1; visibility:visible; }
    .bottom-nav__top span { display:block; margin:4px 0 0; }
    #detail .bottom-nav { z-index:401; }
    #detail .bottom-nav--hide .bottom-nav__top { opacity:0; }
    .button--fixed .bottom-nav__tabBar { display:none; }
    .button--fixed #header.fixed { overflow:hidden; position:fixed; top:0; width:100%; height:60px; z-index:1000; transition:.5s; }
	.button--fixed #header.fixed .navigation { position:absolute; top:0; left:0; right:0; background:#fff; }
    #contents { position:relative; padding-bottom:100px; }
    #footer { padding:0 0 82px; }
    #topBanner { height:auto; }
    #topBanner .desc { overflow:visible; height:auto; line-height:1.67; }
    #topBanner .btnClose { right:16px; top:12px; }
    
    .xans-layout-mobileaction { position:absolute; top:45px; left:16px; }
    .xans-layout-mobileaction a { overflow:hidden; display:block; text-indent:-150%; color:transparent; font-size:1px; line-height:1px; white-space:nowrap; }
    #detail .xans-layout-mobileaction { top:16px; }
}

/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
    /* responsive class */
    .RMI, .RMB, .RMIB { display:none !important; }
    .RTI { display:inline !important; }
    .RTB { display:block !important; }
    .RTIB { display:inline-block !important; }
    
    #header .navigation .btnNav { left:24px;  }
    #header .navigation__util { right:24px; }
}

/********************* PC *********************/
@media all and (min-width:1025px) {
    /* responsive class */
    .RMI, .RMB, .RMIB, .RTI, .RTB, .RTIB, .RTMI, .RTMB { display:none !important; }
    .RWI { display:inline !important; }
    .RWB { display:block !important; }
    .RWIB { display:inline-block !important; }
    
    #header { padding:0 49px; transition:.5s; }
    #header.fixed { overflow:hidden; position:fixed; top:0; width:100%; height:60px; z-index:1000; transition:.5s; }
	#header.fixed .navigation { position:absolute; top:0; left:49px; right:49px; background:#fff; }
    #header .navigation { position:relative; min-height:64px; }
    #header .navigation .btnNav { position:absolute; left:0; top:20px; }
	#header .navigation__util { position:absolute; right:0; top:20px; }
    #contents { max-width:1920px; min-height:800px; padding:0 80px 200px; margin:0 auto; }
    section.gInner { max-width:1240px; margin:0 auto; }

    #footer { padding:40px 0 44px; }
    #footer:before { content:""; display:block; position:absolute; bottom:100px; left:0; right:0; border-top:1px solid #e0e0e0; }
    #footer .inner { max-width:1340px; margin:0 auto; padding:0 50px; }
    
    #quick { z-index:10; position:absolute; top:284px; right:51px; width:93px; background:#fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25); }
	#quick.fixed {position:fixed; top:84px;}
	#quick .pageTop a { display:block; padding:19px 0; text-align:center; font-size:14px; text-transform:uppercase; }
    #quick .pageTop .icon { vertical-align:middle; }
}

/********************* PC *********************/
@media all and (max-width:1553px) {
	#quick { display:none; }
}

#modalBackpanel { display:none; position:absolute; top:0; left:0; z-index:10000; width:100%; height:100%; background:#000; }
#modalContainer { display:none; position:absolute; top:100px; left:100px; z-index:10001; width:975px; height:720px; border:1px solid #333; background:#fff; }
#modalContainer #modalContent { width:100%; height:100%; }
/* Font */
.txtInfo {
    color: #868686;
    font-size: 12px;
    line-height: 22px;
}

p.txtInfo,
ul.txtInfo {
    margin: 10px 0 0;
}

span.txtInfo {
    margin-left: 10px;
}

p.txtInfo.typeDot,
.txtInfo.typeDot li {
    position: relative;
    padding: 0 0 0 14px;
}

p.txtInfo.typeDot:before,
.txtInfo.typeDot li:before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #868686;
}

.txtList {
    color: #868686;
    font-size: 13px;
    line-height: 20px;
}

p.txtList,
ul.txtList {
    margin: 10px 0 0;
}

.txtWarn {
    color: var(--font-color-warn);
}

.txtEm {
    color: var(--font-color-primary);
}

.txtSecondary {
    color: var(--font-color-secondary);
}

.txtSuccess {
    color: var(--font-color-success);
}

.txtDel,
.strike,
.discount {
    text-decoration: line-through;
    font-weight: normal;
}

.strike strong,
.discount strong {
    font-weight: normal;
}

.txtNormal {
    font-weight: normal;
    font-style: normal;
}

.txtNum {
    display: inline-block;
    font-size: 11px;
    color: #939393;
    word-break: normal;
}

.txt11 {
    font-size: 11px;
}

.txt12 {
    font-size: 12px;
}

.txt13 {
    font-size: 13px;
}

.txt14 {
    font-size: 14px;
}

.txt16 {
    font-size: 16px;
}

.txt18 {
    font-size: 18px;
    letter-spacing: -1px;
}

.txtIcon {
    font-size: 12px;
    font-style: normal;
}

.txtBreak {
    word-break: break-all;
    word-wrap: break-word;
}

/* JP, TW, CN */
html:lang(ja) .txt11,
html:lang(zh) .txt11,
html:lang(zh-tw) .txt11 {
    font-size: 12px;
}

@-webkit-keyframes fadeInTitle {
    
    from {
        opacity: 0;
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
    }
    
    to {
        opacity: 1;
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
    
}
    
@keyframes fadeInTitle {
    
    from {
        opacity: 0;
        -webkit-transform: translateY(-10px);
                transform: translateY(-10px);
    }
    
    to {
        opacity: 1;
        -webkit-transform: translateY(0px);
                transform: translateY(0px);
    }
    
}

.titleArea {
    opacity: 0;
}

html.loaded .titleArea {
-webkit-animation: fadeInTitle 0.6s ease forwards;
animation: fadeInTitle 0.6s ease forwards;
-webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
}

.titleArea h2,
.titleArea h3 {
    font-weight: 500;
}

.titleArea h2,
.titleArea h2 * {
    color: #000 !important;
}

/* grid */
.gBlank5 {
    display: block;
    margin-top: 5px;
}

.gBlank10 {
    display: block;
    margin-top: 10px;
}

.gBlank15 {
    display: block;
    margin-top: 15px;
}

.gBlank20 {
    display: block;
    margin-top: 20px;
}

.gBlank30 {
    display: block;
    margin-top: 30px;
}

.gIndent10 {
    margin-left: 10px;
}

.gIndent20 {
    margin-left: 20px;
}

.gSpace10 {
    margin-right: 10px;
}

.gSpace20 {
    margin-right: 20px;
}

.gMerge {
    position: relative;
    z-index: 1;
    margin-top: -1px;
}

/* svg icon */
svg.icon {
    display: block;
}

/* css icon */
.icon.icoClose {
    display: block;
    position: relative;
    overflow: hidden;
    width: 15px;
    height: 15px;
    margin: 0 auto;
    font-size: 1px;
    line-height: 0;
    color: transparent;
    white-space: nowrap;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.icon.icoClose:before {
    content: "";
    position: absolute;
    top: 0;
    right: 7px;
    width: 1px;
    height: 15px;
    background: #000;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}

.icon.icoClose:after {
    content: "";
    position: absolute;
    top: 7px;
    right: 0;
    width: 15px;
    height: 1px;
    background: #000;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}

.icon.icoClose.white:before,
.icon.icoClose.white:after {
    background: #fff;
}

.icon[class*="icoArrow"] {
    display: inline-block;
    overflow: hidden;
    width: 8px;
    height: 8px;
    text-indent: 120%;
    white-space: nowrap;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}

.icon.icoArrowRight {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.icon.icoArrowLeft {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.icon.icoArrowTop {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.icon.icoArrowBottom {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.icon[class*="icoArrow"].white {
    border-color: #fff;
}

.icon.icoNav {
    display: block;
    width: 20px;
    height: 2px;
    color: #000;
    background: currentColor;
    box-shadow: 0 14px 0;
    margin: -8px auto 0;
    position: relative;
}

.icon.icoNav:before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 20px;
    height: 2px;
    background: currentColor;
}

.icon.icoUser {
    overflow: hidden;
    display: inline-block;
    width: 22px;
    height: 22px;
    border-bottom: 2px solid #000;
    box-sizing: border-box;
}

.icon.icoUser:before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: 0 auto 1px;
    border-radius: 50%;
    border: 2px solid #000;
}

.icon.icoUser:after {
    content: "";
    display: block;
    width: 18px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #000;
}

/* Form */
input[type=text],
input[type=password] {
    height: 40px;
    line-height: 40px;
    padding: 2px 4px 2px 15px;
    border: 1px solid #e0e0e0;
    color: var(--font-color-base);
    font-size: 13px;
    box-sizing: border-box;
    outline: 1px;
}

input[type="button"],
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="image"],
textarea,
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

select:focus {
    outline: none;
}

input[type=text]:not(:disabled):focus,
input[type=password]:not(:disabled):focus,
input[type=text]:not(:disabled):hover,
input[type=password]:not(:disabled):hover {
    border-color: #000;
    transition: .3s;
}

input[type=text]:disabled {
    background: #f9f9f9;
}

input[type=text][readonly] {
    background: #f9f9f9;
}

textarea {
    padding: 10px 15px;
    border: 1px solid #e0e0e0;
    line-height: 1.5;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #c1c1c1;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #c1c1c1;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #c1c1c1;
    opacity: 1;
}

input.gFull {
    width: 100%;
}

/* file */
input[type="file"] {
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    color: #7d7d7d;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    height: 40px;
    padding: 0 20px;
    font-size: 13px;
    color: #1c1c1c;
    border: 1px solid #bcbcbc;
    border-radius: 0;
    background: #fff;
    box-sizing: border-box;
    -webkit-appearance: none;
}

/* select */
select {
    max-width: 100%;
    height: 40px;
    padding: 0 30px 0 10px;
    font-size: 12px;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
/*    background: #fff url("//img.echosting.cafe24.com/skin/skin/common/ico_select.png") no-repeat right 10px center;*/
    background: #fff url("//gohcosmetics.com/moa/img/icon/icon_arrow_down.svg") no-repeat right 10px center;
    background-size: 11px auto;
    box-sizing: border-box;
}

select::-ms-expand {
    display: none;
}

/* radio */
input[type="radio"] {
    position: relative;
    opacity: 1;
    width: 18px;
    height: 18px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 0;
    background: url("//img.echosting.cafe24.com/skin/skin/common/bg_radio.png") no-repeat 0 0;
    background-size: 18px 18px;
    outline: 0;
}

input[type="radio"]:checked {
    background-image: url("//img.echosting.cafe24.com/skin/skin/common/bg_radio_checked.png");
    -webkit-transition: .2s ease-out;
    transition: .2s ease-out;
}

input[type="radio"]::-ms-check {
    border: 1px solid #000;
    background-color: #fff;
}

/* checkbox */
input[type="checkbox"] {
    position: relative;
    opacity: 1;
    cursor: pointer;
    width: 15px;
    height: 15px;
    vertical-align: text-top;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #000;
    background: #fff;
    outline: 0;
}

input[type="checkbox"]:checked {
    border: 0;
    background-image: url("//img.echosting.cafe24.com/skin/skin/common/bg_checkbox_checked.png");
    background-size: 15px 15px;
    -webkit-transition: .2s ease-out;
    transition: .2s ease-out;
}

/* ie support */
input[type="checkbox"]::-ms-check {
    border: 1px solid #ababab;
    background-color: #fff;
}

input[type="checkbox"]:checked::-ms-check {
    color: transparent;
    border: 0;
    background-image: url("//img.echosting.cafe24.com/skin/skin/common/bg_checkbox_checked.png");
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

label > input[type=radio],
label > input[type=checkbox] {
    margin: 0 10px 0 0;
    vertical-align: middle;
}

label + label {
    margin-left: 15px;
}

input[type=radio] + label,
input[type=checkbox] + label {
    margin: 0 15px 0 10px;
    vertical-align: middle;
}

legend {
    visibility: hidden;
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 0;
    height: 0;
    line-height: 0;
}

table tr.radioType input,
span.noBorder input {
    border: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 3px 0 0 !important;
    vertical-align: middle !important;
    background: none !important;
}

.gLabel {
    display: inline-block;
}

.gLabel label {
    margin-right: 20px;
    line-height: 22px;
}

.fWidthFull input[type=text] {
    width: 100%;
    height: 24px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fWidthFull textarea {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fWidthFull select {
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.fList.typeHor .gLabel {
    margin-right: 20px;
}

.fList.typeVer .gLabel {
    display: block;
}

/* ec-base-chk */
.ec-base-chk {
    display: inline-block;
    position: relative;
    margin: 0 8px 0 0;
    vertical-align: top;
    cursor: pointer;
}

/* path */
.path {
    overflow: hidden;
    margin: 10px 0 0;
    height: 30px;
    line-height: 30px;
}

.path span {
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    white-space: nowrap;
    text-indent: 100%;
}

.path ol {
    float: right;
}

.path li {
    display: inline-block;
}

.path li:not(:first-child):before {
    content: "/";
    display: inline-block;
    margin: 0 4px 0 2px;
    color: #7d7d7d;
    font-size: 10px;
    vertical-align: middle;
}

.path li:first-child {
    background: none;
}

.path li:first-child a {
    font-size: 0;
}

.path li:first-child a::before {
    content: 'Home';
    font-family: inherit;
    color: currentColor;
    font-size: 12px;
}

.path li a {
    font-size: 12px;
    color: #7d7d7d;
    text-decoration: none;
}

.path li.current a,
.path li:last-child a,
.path li strong,
.path li strong a {
    color: #000;
    font-size: 12px;
    font-weight: normal;
}

/* ec-base-field */
.ec-base-field {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
}

.ec-base-field input[type="text"],
.ec-base-field input[type="password"] {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.ec-base-field input ~ [class*='btn'] {
    margin-left: 5px;
}

.ec-base-field.code {
    margin: 0 -9px;
    align-items: center;
}

.ec-base-field.code input[type="text"],
.ec-base-field.code input[type="password"] {
    margin: 0 9px;
}

/* ec-base-radio */
.ec-base-radio.typeDelivery .ec-base-label {
    display: block;
}

/* ec-base-qty */
.ec-base-qty {
    position: relative;
    display: inline-block;
    width: 103px;
    padding: 0 30px;
    vertical-align: top;
    box-sizing: border-box;
}

.ec-base-qty input[type="text"] {
    width: 45px;
    height: 30px;
    padding: 0;
    line-height: 28px;
    margin-left: -1px;
    border: 1px solid #e5e5e5;
    text-align: center;
}

.ec-base-qty input[type="text"]:focus,
.ec-base-qty input[type="text"]:hover {
    border: 1px solid #e5e5e5;
}

.ec-base-qty img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: .00001;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.ec-base-qty .up {
    position: absolute;
    right: 0;
    top: 0;
}

.ec-base-qty .down {
    position: absolute;
    left: 0;
    top: 0;
}

.ec-base-qty a {
    width: 30px;
    height: 30px;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 150%;
    color: transparent;
    font-size: 1px;
    line-height: 1px;
}

.ec-base-qty a:before {
    content: '';
    position: absolute;
    left: 10px;
    top: 50%;
    width: 9px;
    height: 1px;
    background: #000;
}

.ec-base-qty .up:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 9px;
    margin: -4px 0 0 0;
    background: #000;
}

.ec-base-qty .qtyUp {
    position: absolute;
    right: 0;
    top: 0;
}

.ec-base-qty .qtyDown {
    position: absolute;
    left: 0;
    top: 0;
}

.ec-base-qty .qtyUp .up {
    position: static;
    left: auto;
    top: auto;
}

.ec-base-qty .qtyDown .down {
    position: static;
    left: auto;
    top: auto;
}

/* ec-base-step */
.ec-base-step {
    margin: 40px 0 50px;
    text-align: center;
}

.ec-base-step li {
    display: inline-block;
    font-size: 14px;
    color: #939393;
}

.ec-base-step li:not(:last-child):after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    vertical-align: middle;
    border-left: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.ec-base-step .selected {
    color: #000;
}

/********************* Mobile *********************/
@media all and (max-width:767px) {
    .gInnerMargin {
        margin: 0 16px;
    }

    .titleArea {
        margin: 40px 16px;
    }
}

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {

    /* titleArea */
    .titleArea {
        text-align: center;
    }

    .titleArea h2 {
        display: inline-block;
        color: var(--font-color-heading);
        font-size: 20px;
    }

    .titleArea h3 {
        display: inline-block;
        color: var(--font-color-heading);
        font-size: 16px;
    }

    .titleArea--middle {
        margin: 0;
        padding: 27px 16px 12px;
        text-align: left;
    }

    .titleArea--middle h2 {
        display: inline-block;
        color: var(--font-color-heading);
        font-size: 16px;
    }

    .titleArea .desc {
        font-size: 12px;
        color: #6d6d6d;
    }

    /* path */
    .path {
        margin: 0;
        opacity: 0;
        overflow: hidden;
        width: 1px;
        height: 1px;
        font-size: 1px;
        line-height: 1px;
        white-space: nowrap;
        color: transparent;
        text-indent: 150%;
    }

    .ec-base-step li:not(:last-child):after {
        margin: -2px 15px 0;
    }

}

/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
    .gInnerMargin {
        margin: 0 24px;
    }

    .titleArea {
        margin: 40px 24px 30px;
    }

    .titleArea--middle {
        margin: 0;
    }

    .path {
        margin: 0 24px;
    }
}

/********************* PC *********************/
@media all and (min-width:1025px) {
    .titleArea {
        margin: 35px 0 45px;
        text-align: center;
    }

    .titleArea h2 {
        display: inline-block;
        color: #000;
        color: var(--font-color-heading);
        font-size: 25px;
    }

    .titleArea h3 {
        color: #000;
        color: var(--font-color-heading);
        font-size: 16px;
    }

    .titleArea--middle {
        margin: 50px 0 20px;
        text-align: left;
    }

    .titleArea--middle h2 {
        color: #000;
        color: var(--font-color-heading);
        font-size: 16px;
        font-weight: normal;
    }

    .titleArea.titleArea--myshop {
        margin: 50px 0 20px;
        text-align: left;
    }

    .titleArea.titleArea--myshop h2 {
        color: #000;
        color: var(--font-color-heading);
        font-size: 16px;
        font-weight: normal;
    }

    .titleArea .desc {
        font-size: 13px;
        color: #6d6d6d;
    }

    .titleArea ul {
        padding: 5px 0;
        color: #939393;
        line-height: 18px;
    }

    .titleArea ul li {
        position: relative;
        padding: 0 0 0 9px;
    }

    .titleArea ul li:before {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        content: "";
        width: 2px;
        height: 2px;
        margin: -2px 0 0 0;
        background: #939393;
    }

    .path + .titleArea {
        margin-top: 55px;
    }

    .ec-base-step li:not(:last-child):after {
        margin: -2px 30px 0;
    }

    /* memberArea */
    .memberArea {
        max-width: 898px;
        margin: 0 auto;
    }
    
    #capp-shop-new-product-optionselect-backlayer {
        display: none !important;
    }

    #capp-shop-new-product-optionselect-layer {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
/*        width: 380px !important;*/
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
    }

    #capp-shop-new-product-optionselect-layer > iframe {
        z-index: 1111;
        position: relative;
    }

    #capp-shop-new-product-optionselect-layer:after {
        content: "";
        display: block;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        z-index: 1;
        background: #00000040;
    }

    #capp-shop-new-product-optionselect-backlayer {
        width: 100% !important;
        background: #000;
    }

    #capp-shop-new-product-optionselect-backlayer + #capp-shop-new-product-optionselect-layer:after {
        display: none;
    }
}
/* button */
[class^='btnNormal'],
a[class^='btnNormal'] {
    display: inline-block;
    padding: 12px 20px;
    height: 40px;
    font-size: 13px;
    box-sizing: border-box;
    border: 1px solid #bcbcbc;
    line-height: 1;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #000;
    background-color: #fff;
    -webkit-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
}

[class^='btnSubmit'],
a[class^='btnSubmit'] {
    display: inline-block;
    padding: 12px 20px;
    height: 40px;
    font-size: 13px;
    box-sizing: border-box;
    border: 1px solid transparent;
    line-height: 1;
    font-weight: bold;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    background-color: #000;
}

[class^='btnEm'],
a[class^='btnEm'] {
    display: inline-block;
    box-sizing: border-box;
    padding: 2px 8px;
    border: 1px solid transparent;
    font-size: 12px;
    line-height: 18px;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #fff;
    background-color: #737373;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

[class^='btnBasic'],
a[class^='btnBasic'] {
    display: inline-block;
    box-sizing: border-box;
    padding: 2px 8px;
    border: 1px solid #d1d1d1;
    font-size: 12px;
    line-height: 18px;
    font-weight: normal;
    text-decoration: none;
    vertical-align: middle;
    word-spacing: -0.5px;
    letter-spacing: 0;
    text-align: center;
    white-space: nowrap;
    color: #222;
    background-color: #f0f0f0;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}

[class^='btnNormal']:not(.disabled):hover,
[class^='btnNormal']:not(.disabled).selected {
    border-color: #000;
}

[class^='btnEm']:not(.disabled):hover {
    background-color: #77797d;
}

[class^='btnBasic']:not(.disabled):hover {
    background-color: #e5e5e5;
}

[class^='btnNormal'].disabled {
    border-color: #e3e3e3;
    color: #999;
}

[class^='btnSubmit'].disabled {
    background-color: #9297a2;
    color: #f0f0f0;
}

[class^='btnEm'].disabled {
    background-color: #b5b6b9;
    color: #f0f0f0;
}

[class^='btnBasic'].disabled {
    color: #999;
}

[class^='btn'] + [class^='btn'] {
    margin-left: 6px;
}

/* sizeQty */
[class^='btn'].sizeQty {
    padding: 9px 20px;
    height: 30px;
    margin-left: 6px;
    font-size: 12px;
    line-height: 12px;
}

/* btnText */
.btnText {
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    text-decoration: underline;
}

/* width full */
[class^='btn'].gFull {
    width: 100%;
}

[class^='btn'].gFull + [class^='btn'].gFull {
    margin: 10px 0 0;
}

/* btnMore */
.xans-product-listmore {
    text-align: center;
}

.btnMore {
    margin-top: 17px;
    display: inline-block;
    min-width: 196px;
    padding: 20px 0;
    border: 1px solid #000;
    background: #000;
    text-align: center;
    border-radius: 50px;
    font-size: 14px;
    color: #fff;
}

.btnMore .icon {
    margin: -8px 0 0 10px;
    vertical-align: middle;
    border-color: #fff;
}

/* ec-base-button */
.ec-base-button {
    margin: 20px 0;
    text-align: center;
}

.btnMore span {
    letter-spacing: 2px;
}

.ec-base-button.justify {
    position: relative;
}

.ec-base-button:after {
    display: block;
    content: "";
    clear: both;
}

.ec-base-button .gLeft {
    float: left;
    text-align: left;
}

.ec-base-button .gRight {
    float: right;
    text-align: right;
}

.ec-base-button.justify .gLeft {
    position: absolute;
    left: 0;
}

.ec-base-button.justify .gRight {
    position: absolute;
    right: 0;
}

.ec-base-button .text {
    margin: 0 6px 0 10px;
    color: #353535;
    line-height: 24px;
}

/* type */
.ec-base-button.typeBorder {
    margin-top: -1px;
    padding: 10px 20px;
    border: 1px solid #d7d5d5;
}

/* gBottom */
.ec-base-button.gBottom {
    margin: 50px 0 0;
}

.ec-base-button.gBottom [class^='btn'] + [class^='btn'] {
    margin-left: 10px;
}

/* gColumn */
.ec-base-button[class*="gColumn"] {
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

.ec-base-button[class*="gColumn"]:after {
    display: none;
}

.ec-base-button[class*="gColumn"] [class^='btn'] {
    margin: 0 5px;
    padding-left: 8px;
    padding-right: 8px;
    word-break: keep-all;
    word-wrap: break-word;
    white-space: normal;
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
}

/* gFlex */
.ec-base-button[class*="gColumn"] .gFlex2 {
    -webkit-flex: 2;
    -moz-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

.ec-base-button[class*="gColumn"] .gFlex3 {
    -webkit-flex: 3;
    -moz-flex: 3;
    -ms-flex: 3;
    flex: 3;
}

.ec-base-button[class*="gColumn"] .gFlex4 {
    -webkit-flex: 4;
    -moz-flex: 4;
    -ms-flex: 4;
    flex: 4;
}

/* gFixed */
.ec-base-button.gFixed {
    position: fixed;
/*    z-index: 990;*/
    z-index: 9;
    left: 0;
    bottom: 0;
    max-width: 100%;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    background: #fff;
}

.ec-base-button.gFixed > .ec-base-button,
.ec-base-button.gFixed > .ec-base-button[class*="gColumn"] {
    margin: 10px 11px;
}

/********************* Mobile *********************/
@media all and (max-width:767px) {
    .btnMore {
        display: block;
        min-width: auto;
        width: 180px;
        padding: 0;
        line-height: 48px;
        margin: 17px auto 0;
    }
    
    .btnMore .icon {
        margin: -6px 0 0 10px;
        width: 6px;
        height: 6px;
    }
}

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {

    /* size */
    [class^='btn'].sizeS {
        padding: 10px 20px;
        height: 32px;
        font-size: 12px;
    }

    [class^='btn'].sizeM {
        padding: 14px 20px;
        height: 45px;
        font-size: 13px;
        line-height: 18px;
    }

    [class^='btn'].sizeL {
        padding: 14px 26px;
        height: 50px;
        min-width: 80px;
        font-size: 14px;
        line-height: 21px;
        font-weight: bold;
    }

    /* width Fix */
    [class^='btn'][class*='Fix'] {
        min-width: 72px;
        word-break: keep-all;
        word-wrap: break-word;
    }

    [class^='btn'][class*='Fix'].sizeS {
        min-width: 96px;
    }

    [class^='btn'][class*='Fix'].sizeM {
        min-width: 135px;
        padding-left: 15px;
        padding-right: 15px;
    }

    [class^='btn'][class*='Fix'].sizeL {
        min-width: 160px;
        padding-left: 8px;
        padding-right: 8px;
    }

    /* ec-base-button */
    .ec-base-button {
        margin-left: 16px;
        margin-right: 16px;
    }

    .ec-base-button [class^='btn'] + [class^='btn'] {
        margin-left: 6px;
    }

    /* gBottom */
    .ec-base-button.gBottom {
        display: flex;
        margin-left: 16px;
        margin-right: 16px;
    }

    .ec-base-button.gBottom .gLeft,
    .ec-base-button.gBottom .gRight {
        display: flex;
        flex: 1;
    }

    .ec-base-button.gBottom [class^='btn'] {
        flex: 1;
    }

    .ec-base-button.gBottom [class^='btn'] + [class^='btn'] {
        margin-left: 10px;
    }

    /* gBreak */
    .ec-base-button.gBreak {
        flex-direction: column;
    }

    .ec-base-button.gBreak .gLeft + .gRight {
        margin: 10px 0 0;
    }

    .ec-base-button.gBreak .gBreak {
        flex-direction: column;
    }

    .ec-base-button.gBreak > [class^='btn'] + [class^='btn'],
    .ec-base-button.gBreak .gBreak [class^='btn'] + [class^='btn'] {
        margin: 10px 0 0;
    }

    .ec-base-button .ec-base-button[class*="gColumn"] {
        margin: 0 -5px;
    }

    /* gColumnM (mobile only flex) */
    .ec-base-button[class*="gMColumn"] {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: flex;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
        margin-left: 11px;
        margin-right: 11px;
    }

    .ec-base-button[class*="gMColumn"]:after {
        display: none;
    }

    .ec-base-button[class*="gMColumn"] [class^='btn'] {
        margin: 0 5px;
        padding-left: 8px;
        padding-right: 8px;
        word-break: keep-all;
        word-wrap: break-word;
        white-space: normal;
        -webkit-flex: 1;
        -moz-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: flex;
        -webkit-align-items: center;
        -moz-align-items: center;
        -ms-align-items: center;
        align-items: center;
        -webkit-justify-content: center;
        -moz-justify-content: center;
        -ms-justify-content: center;
        justify-content: center;
    }

    .ec-base-button[class*="gMColumn"] .gLeft,
    .ec-base-button[class*="gMColumn"] .gRight {
        float: none;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: flex;
        width: 100%;
    }

    /* reset */
    .gInnerMargin .ec-base-button,
    .gInnerMargin .ec-base-button.gBottom,
    .gInnerMargin.ec-base-button.gBottom {
        margin-left: 0;
        margin-right: 0;
    }
}

/********************* PC *********************/
@media all and (min-width:1025px) {

    /* size */
    [class^='btn'].sizeS {
        padding: 10px 20px;
        height: 32px;
        font-size: 12px;
    }

    [class^='btn'].sizeM {
        padding: 13px 20px;
        height: 40px;
        font-size: 13px;
    }

    [class^='btn'].sizeL {
        padding: 14px 26px;
        height: 50px;
        min-width: 80px;
        font-size: 15px;
        line-height: 18px;
/*        font-weight: bold;*/
        font-weight: 500;
        border-radius: 50px;
    }

    /* width Fix */
    [class^='btn'][class*='Fix'] {
        min-width: 72px;
        word-break: keep-all;
        word-wrap: break-word;
    }

    [class^='btn'][class*='Fix'].sizeS {
        min-width: 96px;
    }

    [class^='btn'][class*='Fix'].sizeM {
        min-width: 135px;
        padding-left: 15px;
        padding-right: 15px;
    }

    [class^='btn'][class*='Fix'].sizeL {
        min-width: 160px;
        padding-left: 8px;
        padding-right: 8px;
    }
}
.ec-base-tab {
    position: relative;
}

.ec-base-tab .menu {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.ec-base-tab .menu:after {
    content: "";
    display: block;
    clear: both;
}

.ec-base-tab .menu li a {
    display: inline-block;
    color: #6d6d6d;
    text-decoration: none;
    outline: 0;
    text-align: center;
}

.ec-base-tab .menu li.selected a {
    position: relative;
    color: #000;
}

.ec-base-tab > .right {
    position: absolute;
    top: 8px;
    right: 10px;
    line-height: 24px;
    color: #909090;
}

/* typeNav */
.ec-base-tab.typeNav .menu {
    margin: 0 0 20px;
    border-bottom: 1px solid #868686;
    background: #fff;
}

.ec-base-tab.typeNav .menu li {
    background: #f6f6f6;
}

.ec-base-tab.typeNav .menu li a {
    border: 1px solid #e5e5e5;
    border-bottom: 0;
    color: #545454;
    background: #f6f6f6;
}

.ec-base-tab.typeNav .menu li.selected a {
    position: relative;
    border-color: #868686;
    color: #000;
    font-weight: bold;
    background: #fff;
}

.ec-base-tab.typeNav .menu li.selected a:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background: #fff;
}

/* typeMenu */
.ec-base-tab.typeMenu {
    display: flex;
    margin: 10px 0;
}

.ec-base-tab.typeMenu ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
}

.ec-base-tab.typeMenu li {
    height: 30px;
    white-space: nowrap;
    float: none;
}

.ec-base-tab.typeMenu li a {
    line-height: 30px;
    color: #999;
}

.ec-base-tab.typeMenu .button {
    display: inline-block;
    margin: 0 30px 0 10px;
    padding-bottom: 5px;
}

.ec-base-tab.typeMenu .button.active {
    position: relative;
    font-weight: bold;
    color: #000;
}

.ec-base-tab.typeMenu .button.active::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 1px;
    background: #000;
}

.ec-base-tab.typeMenu ul > li {
    position: relative;
}

.ec-base-tab.typeMenu ul > li .iconWrap {
    display: block;
    position: relative;
}

.ec-base-tab.typeMenu ul > li .iconWrap:after {
    content: "";
    position: absolute;
    top: -24px;
    right: 15px;
    display: inline-block;
    width: 7px;
    height: 7px;
    border: 1px solid #6d6d6d;
    border-left: 0;
    border-bottom: 0;
    transform: rotate(45deg)
}

.ec-base-tab.typeMenu ul > li > ul,
.ec-base-tab.typeMenu ul > li > ul > li ul {
    position: absolute;
    top: 35px;
    left: 0;
    display: inline-block;
    border: 1px solid #e5e5e5;
    padding: 15px 0 15px 20px;
    background-color: #fff;
}

.ec-base-tab.typeMenu ul > li > ul > li {
    position: static;
    padding-right: 50px;
}

.ec-base-tab.typeMenu ul > li > ul > li .button {
    margin: 0;
}

.ec-base-tab.typeMenu ul > li > ul > li .iconWrap:after {
    top: -19px;
    right: -30px;
}

.ec-base-tab.typeMenu ul > li > ul > li ul {
    top: -1px;
    left: 100%;
}

.ec-base-tab.typeMenu ul > li > ul > li ul > li {
    padding-right: 50px;
}

.ec-base-tab.typeMenu ul > li > ul {
    display: none;
}

.ec-base-tab.typeMenu ul > li > ul > li ul {
    display: none;
}

.ec-base-tab.typeMenu ul > li > ul.active {
    display: inline-block;
}

.ec-base-tab.typeMenu ul > li > ul > li ul.active {
    display: inline-block;
}

.ec-base-tab.typeMenu .icoOpen {
    display: none;
}

/* gScroll */
.ec-base-tab.gScroll {
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
}

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {

    /* typeNav */
    .ec-base-tab.typeNav .menu {
        display: flex;
        border-bottom: 1px solid #868686;
        margin: 0 16px 20px;
    }

    .ec-base-tab.typeNav .menu li {
        flex: 1;
    }

    .ec-base-tab.typeNav .menu li a {
        height: 100%;
        padding: 16px 8px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .ec-base-tab.typeNav .menu li a .count {
        align-self: flex-end;
        padding-left: 3px;
    }

    .ec-base-tab.typeMenu {
        position: relative;
        height: 40px;
        z-index: 1;
    }

    .ec-base-tab.typeMenu .menu {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

/********************* PC *********************/
@media all and (min-width:1025px) {

    /* typeNav */
    .ec-base-tab.typeNav .menu {
        margin: 0 0 20px;
    }

    .ec-base-tab.typeNav .menu li {
        float: left;
        margin-left: -1px;
    }

    .ec-base-tab.typeNav .menu li a {
        min-width: 218px;
        padding: 16px 20px;
    }
}

/* gFlex */
.ec-base-tab.gFlex .menu {
    display: flex;
}

.ec-base-tab.gFlex .menu > li {
    display: flex;
    align-items: center;
    float: none;
    flex: 1;
    position: relative;
    margin-left: 0;
}

.ec-base-tab.gFlex .menu > li a {
    width: 100%;
    min-width: 0;
    word-break: break-all;
}
/* Align */
.ec-base-table th[scope*="row"] { text-align:left; }
.ec-base-table .left { text-align:left; }
.ec-base-table .center { text-align:center; }
.ec-base-table .right { text-align:right; }
.ec-base-table td.left { text-align:left; }
.ec-base-table td.center { text-align:center; }
.ec-base-table td.right { text-align:right; }
.ec-base-table .top th,
.ec-base-table .top td,
.ec-base-table th.top,
.ec-base-table td.top { vertical-align:top; }
.ec-base-table .middle th,
.ec-base-table .middle td,
.ec-base-table th.middle,
.ec-base-table td.middle { vertical-align:middle; }
.ec-base-table .bottom th,
.ec-base-table .bottom td,
.ec-base-table th.bottom,
.ec-base-table td.bottom { vertical-align:bottom; }

/* Table */
.ec-base-table { border-top:1px solid #000; }
.ec-base-table th {font-weight: 500; }
.ec-base-table th,
.ec-base-table td { height:29px; padding:14px 20px; line-height:22px; vertical-align:middle; }
.ec-base-table th { border-bottom:1px solid #e5e5e5; background-color:#f6f6f6; }
.ec-base-table td { border-bottom:1px solid #e5e5e5; }
.ec-base-table th img.icon,
.ec-base-table td img.icon { display:inline-block; max-width:100%; max-height:100%; vertical-align:middle; }
.ec-base-table td [class^="btn"],
.ec-base-table td a[class^="btn"]{ vertical-align:baseline; }
  /* gBorderClear */
  .ec-base-table.gBorderClear { border-top:0; }
  .ec-base-table td.gBorderClear { border-bottom:0; }

/* Table - Empty */
.ec-base-table .message { padding:56px 0; border-bottom:1px solid #e5e5e5; text-align:center; color:#6d6d6d; }

/* Table - typeWrite */
.ec-base-table.typeWrite th,
.ec-base-table.typeWrite td { height:auto; }
.ec-base-table.typeWrite td [class^="btn"],
.ec-base-table.typeWrite td a[class^="btn"] { vertical-align:middle; }
  /* formMultiple */
  .ec-base-table.typeWrite .formMultiple dl,
  .ec-base-table.typeWrite .formMultiple ul { width:100%; }
  .ec-base-table.typeWrite .formMultiple dt { margin:0 0 2px 0; }
  .ec-base-table.typeWrite .formMultiple li,
  .ec-base-table.typeWrite .formMultiple dd { margin:0 0 10px 0; }
  .ec-base-table.typeWrite .formMultiple li:last-of-type,
  .ec-base-table.typeWrite .formMultiple dd:last-of-type { margin-bottom:0; }
  /* formGroup */
  .ec-base-table.typeWrite .formGroup input[type="text"],
  .ec-base-table.typeWrite .formGroup input[type="password"],
  .ec-base-table.typeWrite .formGroup select,
  .ec-base-table.typeWrite .formGroup [class^="btn"] { min-width:0; margin:0 5px; }
  .ec-base-table.typeWrite .formGroup input[type="text"] + [class^="btn"] { margin-left:5px; }
  .ec-base-table.typeWrite .formGroup:not(td) { width:auto; margin-left:-5px; margin-right:-5px; }
  .ec-base-table.typeWrite .formGroup.code { font-size:20px; color:#7f7f7f; }
  /* txtInfo */
  .ec-base-table.typeWrite td p.txtInfo,
  .ec-base-table.typeWrite td ul.txtInfo { width:100%; }
  /* form */
  .ec-base-table.typeWrite td input[type="text"] + [class^='btn'],
  .ec-base-table.typeWrite td input[type="password"] + [class^='btn'],
  .ec-base-table.typeWrite td input[type="text"] + a[class^='btn'],
  .ec-base-table.typeWrite td input[type="password"] + a[class^='btn'] { margin-left:10px; }
  .ec-base-table.typeWrite td label { line-height:32px; }
  /* address */
  .ec-base-table.typeWrite .ec-address { width:100%; }
  .ec-base-table.typeWrite .ec-address .btnBasic { display:inline-block; padding:12px 20px; height:40px; font-size:13px; box-sizing:border-box; border:1px solid #bcbcbc; line-height:1; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#000; background-color:#fff; }
  .ec-base-table.typeWrite .ec-address-area select { display:block; margin:10px 0 0; }
  .ec-base-table.typeWrite .ec-address-area select:first-of-type { margin-top:0; }


/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
  /* gFlow */
  .ec-base-table .gFlow { display:inline-block; width:100%; margin-top:5px; }
    
   /* gBorderClear */
  .ec-base-table tr.gBorderClear td { border-bottom:0; }
  .ec-base-table.typeList tr.gBorderClear { border-bottom:0; }
    
  /* Table - typeWrite */
  .ec-base-table.typeWrite { padding:10px 0; }
  .ec-base-table.typeWrite tr { display:block; }
  .ec-base-table.typeWrite th { display:block; padding:6px 15px 0; border-bottom:0; text-align:left; background-color:transparent; }
  .ec-base-table.typeWrite td { display:block; padding:2px 15px 10px; border-bottom:0; align-items:center; }
    /* formMultiple */
    .ec-base-table.typeWrite .formMultiple { padding-top:10px; }
    /* formGroup */
    .ec-base-table.typeWrite td.formGroup { padding-left:10px; padding-right:10px; }
    .ec-base-table.typeWrite td.formGroup.date { padding-left:10px; padding-right:15px; }
    .ec-base-table.typeWrite .formGroup { display:flex; flex-flow:wrap; box-sizing:border-box; align-items:center; }
    .ec-base-table.typeWrite .formGroup input[type="text"],
    .ec-base-table.typeWrite .formGroup input[type="password"],
    .ec-base-table.typeWrite .formGroup select { flex:1; }
    /* txtInfo */
    .ec-base-table.typeWrite span.txtInfo { display:block; width:100%; margin:10px 0 0; }
    /* form */
    .ec-base-table.typeWrite td input[type="text"],
    .ec-base-table.typeWrite td input[type="password"],
    .ec-base-table.typeWrite td select { width:100%; }
    /* address */
    .ec-address .ec-address-zipcode { display:flex; flex-flow:wrap;  }
    .ec-base-table.typeWrite .ec-address .ec-address-zipcode input[type="text"] { flex:1; }
    .ec-base-table.typeWrite .ec-address .ec-address-zipcode .ec-base-label { display:block; width:100%; margin:5px 0 0; }
  
  /* Table - typeList */
  .ec-base-table.typeList thead { display:none; }
  .ec-base-table.typeList table,
  .ec-base-table.typeList tbody { display:block; }.ec-base-table.typeList tr { display:block; position:relative; padding:20px 8px 19px; border-bottom:1px solid #e5e5e5; text-align:left; }
  .ec-base-table.typeList tr:after { content:""; display:block; clear:both; }
  .ec-base-table.typeList td { height:auto; display:block; float:left; padding:3px 8px; border-bottom:0; text-align:left; color:#6d6d6d; }.ec-base-table.typeList td a { color:#6d6d6d; }
  .ec-base-table.typeList td.chk { box-sizing:border-box; padding:0; }
  .ec-base-table.typeList td.chk .boardChk { margin:5px 8px 0 8px; }
  .ec-base-table.typeList td.chk:not(.no) .boardChk { margin:5px 8px 0px 8px }
  .ec-base-table.typeList td.subject { float:none; box-sizing:border-box; }
  .ec-base-table.typeList td.subject a { color:#000; }
  .ec-base-table.typeList.gThumb td.thumb { overflow:hidden; position:absolute; top:24px; left:16px; width:65px; height:calc(100% - 45px); padding:0; }
  .ec-base-table.typeList.gThumb td.thumb a { display:block; height:100%; text-align:center; }
  .ec-base-table.typeList.gThumb td.thumb img { max-width:100%; max-height:100%; }
  .ec-base-table.typeList.gThumb tr { padding-left:90px; padding-right:20px; }
  .ec-base-table.typeList.gThumb td.chk { z-index:1; position:absolute; top:16px; right:16px; padding:0; }
  .ec-base-table.typeList.gThumb td.chk .boardChk { margin:0; }
}

/********************* PC *********************/
@media all and (min-width:1025px) {
  /* gFlow */
  .ec-base-table .gFlow { width:100%; margin-left:20px; }
  
  /* gBorderClear */
  .ec-base-table tr.gBorderClear td { border-bottom:0; }

  /* Table */
  .ec-base-table th { padding:14px 30px; }
  
  /* Table - typeWrite */
  .ec-base-table.typeWrite th { padding:10px 30px; }
  .ec-base-table.typeWrite th[scope*="row"] { padding-right:15px; }
  .ec-base-table.typeWrite td { padding:10px 20px; }
    /* formMultiple */
    .ec-base-table.typeWrite .formMultiple { padding-top:22px; padding-bottom:22px; }
    /* formGroup */
    .ec-base-table.typeWrite td.formGroup { padding-left:15px; padding-right:15px; }
    .ec-base-table.typeWrite .formGroup input[type="text"],
    .ec-base-table.typeWrite .formGroup select { width:190px; }
    /* form */
    .ec-base-table.typeWrite td input[type="text"],
    .ec-base-table.typeWrite td input[type="password"],
    .ec-base-table.typeWrite td select { width:290px; }
    .ec-base-table.typeWrite td .ec-base-qty input[type="text"] { width:45px; }
    /* address */
    .ec-base-table.typeWrite .ec-address input[type="text"],
    .ec-base-table.typeWrite .ec-address select { width:450px; }
    .ec-base-table.typeWrite .ec-address .ec-address-zipcode input[type="text"] { width:200px; }
    .ec-base-table.typeWrite .ec-address .ec-address-zipcode .ec-base-label { margin:0 0 0 15px; line-height:40px; }
  
  /* Table - typeList */
  .ec-base-table.typeList { border-top:0; }
  .ec-base-table.typeList th,
  .ec-base-table.typeList td { padding:15px 10px 16px; }
  .ec-base-table.typeList th { border-bottom:0; }
  .ec-base-table.typeList td.subject { padding-left:20px; padding-right:20px; }    
}

.ec-base-tooltip { display:none; z-index:999; position:absolute; top:inherit !important; left:0 !important; right:0 !important; padding:14px 28px 14px 14px; text-align:left; border:1px solid #ccc; border-radius:2px; letter-spacing:normal; box-sizing:border-box; background-color:#fff;
    -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
    box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
}
.ec-base-tooltip .title { display:block; padding:0 20px 0 0; font-size:15px; color:#000; line-height:43px; background:#fff; }
.ec-base-tooltip ul { color:#757575; }
.ec-base-tooltip ul li { font-size:13px; }
.ec-base-tooltip .content table + .title { margin-top:14px; }
.ec-base-tooltip p { float:none; font-size:12px; text-align:left; }
.ec-base-tooltip p strong { font-weight:normal; font-size:13px; }
.ec-base-tooltip h3 { margin:0 0 8px; font-size:13px; border-bottom:0; }
.ec-base-tooltip h3 + p { margin:0 5px 10px; }
.ec-base-tooltip h4 { margin:15px 10px 8px 5px; font-size:12px; }
.ec-base-tooltip h4:before { display:inline-block; content:""; margin:0 5px 0 0; width:3px; height:3px; background:#666; vertical-align:middle; }
.ec-base-tooltip table th,
.ec-base-tooltip table td { padding:8px 10px 7px 10px; border:1px solid #e8e8e8; line-height:1.5em; }
.ec-base-tooltip table th { padding-right:0; background:#fbf9fa; }
.ec-base-tooltip table thead th { text-align:center; }
.ec-base-tooltip table tbody th { text-align:left; }
.ec-base-tooltip table .left { text-align:left; }
.ec-base-tooltip table .center { text-align:center; }
.ec-base-tooltip table .right { text-align:right; }
.ec-base-tooltip table .info { padding:0; color:#757575; }
.ec-base-tooltip table p.info:before,
.ec-base-tooltip table ul.info li:before { display:inline-block; content:""; margin:0 3px 0 0; width:4px; height:1px; background:#757575; vertical-align:middle; }
.ec-base-tooltip .info { padding:10px 10px 0; margin:5px 0 0; }
.ec-base-tooltip p.bullet,
.ec-base-tooltip ul.bullet { margin:8px 10px; }
.ec-base-tooltip p.bullet:before,
.ec-base-tooltip ul.bullet li:before { display:inline-block; content:""; margin:-3px 3px 0 0; width:0; height:0; border:solid transparent; border-left-color:#333; border-width:2px 0 2px 2px; vertical-align:middle; }
.ec-base-tooltip ul.bullet li { line-height:1.5em; }
.ec-base-tooltip .btnClose { position:absolute; right:14px; top:14px; padding:10px; cursor:pointer; display:block; overflow:hidden; width:17px; height:17px; box-sizing:border-box; font-size:1px; line-height:0; text-indent:150%; color:transparent; white-space:nowrap; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.ec-base-tooltip .btnClose:before { content:""; position:absolute; top:0; right:8px; width:1px; height:17px; background:#000; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.ec-base-tooltip .btnClose:after { content:""; position:absolute; top:8px; right:0; width:17px; height:1px; background:#000; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.ec-base-tooltip .btnClose img { opacity:0; }
.ec-base-tooltip .edge { z-index:20; position:absolute; left:50%; top:-6px; display:block; margin:0 0 0 -5px; width:10px; height:6px; }
.ec-base-tooltip .edge:before,
.ec-base-tooltip .edge:after { display:inline-block; content:""; position:absolute; top:0; width:0; height:0; border:solid transparent; }
.ec-base-tooltip .edge:before { margin:1px 0 0; border-bottom-color:#565960; border-width:0 5px 5px 5px; }
.ec-base-tooltip .edge:after { left:1px; margin:2px 0 0; border-bottom-color:#fff; border-width:0 4px 4px 4px; }
	/* typeUpper */
    .ec-base-tooltip.typeUpper { position:absolute; left:-90px !important; bottom:33px !important; width:200px; margin:0; padding:14px 28px 14px 14px; border:1px solid #ccc; border-radius:2px;
        -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
        -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
        box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
    }
    .ec-base-tooltip.typeUpper:before { content:""; position:absolute; left:40%; bottom:-5px; display:inline-block; width:0; height:0; margin:-3px 0 0; border-left:5px solid transparent; border-top:5px solid #ccc; border-right:5px solid transparent; }
    .ec-base-tooltip.typeUpper:after { content:""; position:absolute; left:40%; bottom:-4px; display:inline-block; width:0; height:0; margin:-3px 0 0; border-left:5px solid transparent; border-top:5px solid #fff; border-right:5px solid transparent; }
    .ec-base-tooltip.typeUpper .edge { top:auto; bottom:-6px; }
    .ec-base-tooltip.typeUpper .edge:before { margin:0 0 -5px; border-top-color:#ccc; border-width:5px 5px 0 5px; }
    .ec-base-tooltip.typeUpper .edge:after { left:1px; margin:0 0 -4px; border-top-color:#fff; border-width:4px 4px 0 4px; }

/* shippingFee */
  .shippingFee { display:inline-block; vertical-align:middle; color:#000; margin-left:10px; }
  .shippingFee > a.btnNormal { margin:-3px 0 0 5px; }
  .shippingFee .wrap h3 { line-height:36px; }
  .shippingFee .wrap h4 { position:relative; margin:0 7px 7px; }
  .shippingFee .wrap h4:before { display:inline-block; content:""; margin:0 5px 0 0; width:3px; height:3px; background:#666; vertical-align:middle; }
  .shippingFee .wrap table + h4 { margin-top:14px; }
  .shippingFee .wrap p strong { font-weight:normal; font-size:13px; }
  .shippingFee .wrap table { background:#fff; }
  .shippingFee .wrap th,
  .shippingFee .wrap td { padding:7px; border:1px solid #d5d5d5; }
  .shippingFee .wrap th { width:80px; border-right-width:0; }
  .shippingFee .wrap td { white-space:normal; }
  .shippingFee .wrap .info { margin:0; color:#7d7d7d; }

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
    .ec-base-tooltip { width:88%; margin:5px auto 0; }
    .ec-base-tooltip .edge { display:none; }
    .shippingFee { position:static; }
    .shippingFee .ec-base-button { text-align:center; }
    .shippingFee .btnStrong { display:inline-block; padding:12px 20px; height:40px; font-size:13px; box-sizing:border-box; border:1px solid transparent; line-height:1; font-weight:normal; text-decoration:none; vertical-align:middle; word-spacing:-0.5px; letter-spacing:0; text-align:center; white-space:nowrap; color:#fff; background-color:#000; }  
}

/********************* PC *********************/
@media all and (min-width:1025px) {
	.shippingFee { position:relative; }
    .shippingFee .ec-base-tooltip { margin:10px 0 0 -150px; width:360px; }
}
span.ec-base-help,
p.ec-base-help,
ul.ec-base-help li { margin:2px 0; padding:1px 0 1px 22px; font-size:12px; line-height:19px; color:#6d6d6d; background:url('//img.echosting.cafe24.com/skin/skin/common/ico_info.svg') no-repeat 0 0; }

div.ec-base-help { margin:50px 0 20px; line-height:18px; }
div.ec-base-help > h2,
div.ec-base-help > h3 { display:block; margin:0 0 20px; font-size:16px; color:#000;}
div.ec-base-help .inner { padding:20px; border:1px solid #e5e5e5; border-top:1px solid #000; }
div.ec-base-help h4 { margin:22px 0 -4px; color:#000; font-size:12px; font-weight:normal; }
div.ec-base-help h4:first-child { margin-top:0; }
div.ec-base-help p,
div.ec-base-help ul,
div.ec-base-help ol { margin:15px 0 0 0; }
div.ec-base-help p,
div.ec-base-help li { color:#6d6d6d; font-size:12px; line-height:21px; }
div.ec-base-help p,
div.ec-base-help ul li { padding:0 0 0 12px; }
div.ec-base-help p:before,
div.ec-base-help ul li:before { content:""; display:inline-block; width:3px; height:3px; margin:7px 9px 0 -12px; vertical-align:top; border-radius:50%; background:#6d6d6d; }

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
    span.ec-base-help,
    p.ec-base-help,
    ul.ec-base-help li { margin:10px 0; }
    div.ec-base-help > h2,
    div.ec-base-help > h3 { padding:0 15px; }
}
.ec-base-fold {
    position: relative;
}

.ec-base-fold > .title {
    position: relative;
    z-index: 1;
    overflow: hidden;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.3;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
}

.ec-base-fold > .title h2,
.ec-base-fold > .title h3 {
    display: inline-block;
    font-size: 13px;
    line-height: 1.3;
}

.ec-base-fold > .title:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}

.ec-base-fold > .contents {
    display: none;
    background: #fff;
}

.ec-base-fold .ec-base-fold {
    border-width: 1px 0 0;
}

.ec-base-fold .ec-base-fold + .ec-base-fold {
    margin-top: 0;
}

.ec-base-fold.selected > .title:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ec-base-fold.selected > .contents {
    display: block;
}

.ec-base-fold.selected > .contents .info:not(:empty) {
    padding-bottom: 30px;
}

/* theme1 */
.ec-base-fold.theme1 {
    position: relative;
}

.ec-base-fold.theme1 > .title {
    border-top: 1px solid #000;
}

.ec-base-fold.theme1 > .title h2 {
    padding: 15px 0;
    font-weight: normal;
}

.ec-base-fold.theme1 > .title h3 {
    padding: 20px 0;
    font-size: 13px;
}

.ec-base-fold.theme1 > .title:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5px;
    overflow: hidden;
    display: inline-block;
    width: 7px;
    height: 7px;
    border-left: 1px solid #000;
    border-bottom: 1px solid #000;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    margin-top: -5px;
}

.ec-base-fold.theme1.selected > .title:after {
    margin-top: -2px;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}

.ec-base-fold.theme1.gBottomLine > .title {
    border-top: 0;
    border-bottom: 1px solid #000;
}

.ec-base-fold.theme1.gClearLine > .title {
    border-top: 0;
    border-bottom: 1px solid transparent;
}

.ec-base-fold.theme1 + .ec-base-fold.theme1 {
    margin-top: 0;
}

/* ec-base-table */
.ec-base-fold.theme1.gBottomLine > .contents .ec-base-table,
.ec-base-fold.theme1.gBottomLine .ec-base-fold > .contents .ec-base-table {
    border: 0;
}

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
    .ec-base-fold.theme1.gMargin {
        margin-left: 16px;
        margin-right: 16px;
    }

    .ec-base-fold.theme1 > .title {
        padding: 0 16px;
    }

    .ec-base-fold.theme1 > .title h2 {
        font-size: 16px;
    }

    .ec-base-fold.theme1 > .title:after {
        right: 4px;
    }


    /* ec-base-table */
    .ec-base-fold.theme1 .ec-base-table.typeList {
        border-color: #e5e5e5
    }
}

/********************* PC *********************/
@media all and (min-width:1025px) {
    .ec-base-fold.theme1 .title > h2 {
        font-size: 16px;
        font-weight: 500;
    }
}
/* base */
.ec-base-box { padding:20px; margin-left:auto; margin-right:auto; border:5px solid #e5e5e5; }
.ec-base-box.gHalf { position:relative; padding:20px 0; }
.ec-base-box.gHalf:before { position:absolute; top:0; left:50%; display:block; content:""; width:1px; height:100%; background-color:#e6e6e6; }
.ec-base-box.typeBg { background-color:#fbfafa; }
.ec-base-box.typeThin { border-width:1px; border-color:#e5e5e5; }
.ec-base-box.typeThin h3.boxTitle { margin:0 0 20px; font-size:16px; font-weight:normal; text-align:center; }
.ec-base-box.typeThinBg { border-width:1px; border-color:#d7d5d5; background-color:#fbfafa; }
.ec-base-box.center { text-align:center; }
.ec-base-box .headDesc { margin:0 0 40px; font-size:16px; line-height:22px; color:var(--font-color-heading); }
    .ec-base-box.typeThin > .agree { color:#6d6d6d; font-size:12px; line-height:20px; background:#fff; }
    .ec-base-box.typeThin > .agree p { padding:0 0 30px; }

/* typeMember */
.ec-base-box.typeMember { border-width:1px; border-color:#e5e5e5; }
.ec-base-box.typeMember h3.boxTitle { margin:0 0 20px; font-size:16px; font-weight:normal; text-align:center; }
.ec-base-box.typeMember .content { margin:0 auto; text-align:center; }
.ec-base-box.typeMember input[type="text"],
.ec-base-box.typeMember input[type="password"], 
.ec-base-box.typeMember select { width:100%; }
.ec-base-box.typeMember .info { font-size:13px; line-height:20px; color:#6d6d6d; }
.ec-base-box.typeMember .information { display:table; table-layout:fixed; padding:10px 0; width:100%; box-sizing:border-box; }
.ec-base-box.typeMember .information > .title, .ec-base-box.typeMember .information > .thumbnail { display:table-cell; padding:0 15px; width:70px; text-align:center; vertical-align:middle; }
.ec-base-box.typeMember .information > .title { vertical-align:middle; }
.ec-base-box.typeMember .information > .thumbnail img { max-width:70px; }
.ec-base-box.typeMember .information .description { display:table-cell; padding:0 10px; width:auto; line-height:1.5em; border-left:1px solid #e8e8e8; vertical-align:middle; }
    .ec-base-box.typeMember.gMessage { border-width:1px; border-color:#d7d5d5; }

/* typeProduct */
.ec-base-box.typeProduct { display:table; table-layout:fixed; padding:10px; width:100%; box-sizing:border-box; border:10px solid #f6f6f6; }
.ec-base-box.typeProduct .thumbnail, .ec-base-box.typeProduct .information { display:table-cell; vertical-align:top; position:relative; }
.ec-base-box.typeProduct .thumbnail { width:85px; }
.ec-base-box.typeProduct .thumbnail img { max-width:65px; }

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
    .ec-base-box.gPadding { padding:50px 18px 40px; }
    /* typeMember */
    .ec-base-box.typeMember { padding:50px 18px 40px; }
}

/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
   .additionalInfo { margin:0 24px; }
}

/********************* PC *********************/
@media all and (min-width:1025px) {
    .ec-base-box.gPadding { padding:74px 0; }
    /* typeMember */
	.ec-base-box.typeMember { padding:74px 0; }
    .ec-base-box.typeMember .content { width:421px; } 
}
.ec-base-desc { overflow:hidden; text-align:left; }
.ec-base-desc:after { content:""; display:block; clear:both; }
.ec-base-desc dt, .ec-base-desc .term { float:left; width:100px; margin:0 0 2px; padding:0 4px 0 0; line-height:22px;-webkit-box-sizing:border-box; -moz-webkit-box:border-box; box-sizing:border-box; font-weight:normal; }
.ec-base-desc dd, .ec-base-desc .desc { display:block; margin:0 0 2px; padding:0 5px 0 100px; min-height:22px; line-height:22px; word-wrap:break-word; word-break:break-all; }
.ec-base-desc dd:after, .ec-base-desc .desc:after { content:""; display:block; clear:left; }

/* size */
.ec-base-desc.gSmall dt, .ec-base-desc.gSmall .term { width:30%; }
.ec-base-desc.gSmall dd, .ec-base-desc.gSmall .desc { padding-left:30%; }
.ec-base-desc.gMedium dt, .ec-base-desc.gMedium .term { width:40%; }
.ec-base-desc.gMedium dd, .ec-base-desc.gMedium .desc { padding-left:40%; }
.ec-base-desc.gLarge dt, .ec-base-desc.gLarge .term { width:50%; }
.ec-base-desc.gLarge dd, .ec-base-desc.gLarge .desc { padding:0 0 0 50%; }
    /* gVer */
    .ec-base-desc.gVer dt,
    .ec-base-desc.gVer dd,
    .ec-base-desc.gVer .term,
    .ec-base-desc.gVer .desc { display:block; float:none; width:100%; }
    .ec-base-desc.gVer dd,
    .ec-base-desc.gVer .desc { margin:10px 0 20px; padding:0; }

/* align */
.ec-base-desc.centerDT dt, .ec-base-desc.centerDD dd, .ec-base-desc.centerDT .term, .ec-base-desc.centerDD .desc,
.ec-base-desc.center, .ec-base-desc .center { text-align:center; }
.ec-base-desc.rightDT dt, .ec-base-desc.rightDD dd, .ec-base-desc.rightDT .term, .ec-base-desc.rightDD .desc,
.ec-base-desc.right, .ec-base-desc .right { text-align:right; }
.ec-base-desc.rightDD dd, .ec-base-desc.rightDD .desc { padding-right:0; }

/* typeDot */
.ec-base-desc.typeDot dt,
.ec-base-desc.typeDot .term { position:relative; padding:0 4px 0 10px; }
.ec-base-desc.typeDot dt:before,
.ec-base-desc.typeDot .term:before { position:absolute; top:50%; left:0; content:""; display:block; width:2px; height:2px; margin:-2px 0 0 0; background:#383838; }

.ec-base-product .title {
    margin: 0 0 17px;
}

.ec-base-product .title h2 {
    font-weight: normal;
    font-size: 30px;
    color: #2e2e2e;
    text-align: center;
}

.ec-base-product .title h3 {
    font-weight: 500;
    color: #000;
}

.ec-base-product img {
    vertical-align: middle;
}

.ec-base-product a[href^='/product/detail.html'] > img {
    border: 1px solid #ececec;
}

.ec-base-product .prdList {
    margin: 0;
    text-align: left;
    font-size: 0;
    line-height: 0;
}

.ec-base-product .prdList.grid3 {
    width: calc(100% + 20px);
    margin-left: -10px;
}

.ec-base-product .prdList.grid4 {
    width: calc(100% + 15px);
    margin-left: -7.5px;
}

.ec-base-product .prdList > li {
    display: inline-block;
    margin: 0 0 18px;
    color: #757575;
    vertical-align: top;
    position: relative;
}

.ec-base-product .prdList--best {
    counter-reset: section;
}

.ec-base-product .prdList--best > li::after {
    counter-increment: section;
    content: "BEST " counter(section);
    font-size: 13px;
    background: #333;
    color: #fff;
    display: inline-block;
    width: 60px;
    line-height: 1;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    border-radius: 2px;
    padding: 3.5px 0px 3.5px;
}

.ec-base-product .prdList .chk {
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    display: block;
    margin: 0 0 10px;
}

.ec-base-product .prdList .thumb,
.ec-base-product .prdList .thumbnail {
    position: relative;
    text-align: center;
    width: auto;
    white-space: normal;
}

.ec-base-product .prdList .thumb {
    position: relative;
    margin: 0 0 10px;
}

.ec-base-product .prdList .thumb .img img {
    width: 100%;
    height: 100%;
}

.ec-base-product .prdList .thumbnail {
    position: relative;
    margin: 0 0 10px;
}

.ec-base-product .prdList .thumbnail a img {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.ec-base-product .prdList .thumbnail a img.hover-thumb {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

html.loaded .ec-base-product .prdList .thumbnail a img.hover-thumb {
    -webkit-transition: opacity 0.4s ease-in-out;
    transition: opacity 0.4s ease-in-out;
}

.ec-base-product .prdList .icon__box {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

html.loaded .ec-base-product .prdList .icon__box > span {
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.ec-base-product .prdList .icon__box > span {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
}

@media(hover:hover) {
    
    .ec-base-product .prdList > li:hover .thumbnail a img.hover-thumb {
        opacity: 1;
    }
    
    .ec-base-product .prdList > li:hover .icon__box > span {
        opacity: 1;
        visibility: visible;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }   
    
    .ec-base-product .prdList .wish:hover img {
        background: #fff url("//gohcosmetics.com/moa/img/icon/icon_heart_fill.svg") no-repeat center;
        background-size: 15px auto;
    }
}

.ec-base-product .prdList .wish {
    z-index: 1;
    display: block;
    width: 35px;
    cursor: pointer;
/*    transition-delay: 0.15s !important;*/
}

.ec-base-product .prdList .wish img {
    width: 0;
    height: 0;
    background: #fff url("//gohcosmetics.com/moa/img/icon/icon_heart.svg") no-repeat center;
    background-size: 15px auto;
    padding: 100% 100% 0 0;
    border-radius: 50%;
    -webkit-transition: background 0.2s ease-in-out;
    transition: background 0.2s ease-in-out;
}

.ec-base-product .prdList .wish img[icon_status="on"] {
    background: #fff url("//gohcosmetics.com/moa/img/icon/icon_heart_fill.svg") no-repeat center;
    background-size: 15px auto;
}

.ec-base-product .prdList .cart {
    z-index: 1;
    display: block;
    width: 35px;
    cursor: pointer;
    margin-bottom: 5px;
}

.ec-base-product .prdList .cart img {
    width: 0;
    height: 0;
    background: #fff url("//gohcosmetics.com/moa/img/icon/icon_cart.svg") no-repeat center;
    padding: 100% 100% 0 0;
    border-radius: 50%;
    background-size: 15px auto;
}

.ec-base-product .prdList .thumbnail .prdIcon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
}

.ec-base-product .prdList .thumbnail .icon {
    vertical-align: middle;
}

.ec-base-product .prdList .thumbnail .icon:after {
    content: "";
    display: block;
    clear: both;
}

.ec-base-product .prdList .thumbnail .benefit {
    position: absolute;
    left: 0;
    bottom: 0;
}

.ec-base-product .prdList .icon {
    margin: 14px 0 0;
    text-align: left;
}

.ec-base-product .prdList .icon:empty {
    display: none;
}

.ec-base-product .prdList .icon img {
    margin: 0 4px 0 0;
    max-height: 23px;
}

.ec-base-product .prdList .description {
    margin: 13px 20px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
    white-space: normal;
}

.ec-base-product .prdList .description .name {
    display: block;
    text-align: left;
    font-weight: 500;
}

.ec-base-product .prdList .description span.grid {
    display: block;
}

/* grid */

.ec-base-product ul.grid1 > li {
    width: 100%;
    margin-bottom: 40px;
}

.ec-base-product ul.grid2 > li {
    width: 50%;
}

.ec-base-product ul.grid3 > li {
    width: calc(33.33% - 20px);
    margin: 0 10px 50px;
}

.ec-base-product ul.grid4 > li,
.ec-base-product .jsPrdSlide:not(.swiper-container) ul.grid-slide > li {
    width: calc(25% - 15px);
    margin: 0 7.5px 50px;
}

.ec-base-product ul.grid5 > li {
    width: calc(20% - 15px);
    margin: 0 7.5px 50px;
}

/*
.ec-base-product ul.grid-slide > li {
    width: 20%;
}
*/

.ec-base-product ul.grid3 .color {
    max-width: 230px;
}

.ec-base-product ul.grid4 .color {
    max-width: 190px;
}

.ec-base-product ul.grid5 .color {
    max-width: 130px;
}

/* right display */
.ec-base-product ul.grid2 li:after {
    content: "";
    display: block;
    clear: both;
}

.ec-base-product ul.grid2 li .thumbnail {
    text-align: left;
    margin: 0;
}

.ec-base-product ul.grid2 li .description {
    padding: 0;
}

.ec-base-product ul.grid2 li .description .chk {
    position: static;
    text-align: left;
}

/* module="product_ListItem" */
.ec-base-product .spec {
    margin: 5px 0 0;
}

.ec-base-product .spec > li {
    margin: 0 0 10px;
    text-align: left;
    line-height: 19px;
}

.ec-base-product .spec > li.summary_desc {
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.ec-base-product .spec > li.price {
    margin-bottom: 14px;
    color: #000;
    font-size: 16px;
}

.ec-base-product .spec > li.product_custom,
.ec-base-product .spec > li.product_price,
.ec-base-product .spec > li.prd_price_sale,
.ec-base-product .spec > li.sale-per {
    display: inline-block;
    vertical-align: middle;
    margin-right: 3px;
}

.ec-base-product .spec > li.prd_price_sale ~ li.product_custom {
    display: none;
}

.ec-base-product .spec > li.prd_price_sale *,
.ec-base-product .spec > li.product_price * {
    font-weight: 500;
}

.ec-base-product .spec > li.prd_price_sale ~ li.product_price,
.ec-base-product .spec > li.price.sale {
    text-decoration: line-through;
}

.ec-base-product .spec > li.prd_price_sale ~ li.product_price span {
    font-weight: normal !important;
    color: #8c8c8c !important;
}

.ec-base-product .spec > li.price ~ .sale {
    margin-bottom: 14px;
    color: #000;
    font-size: 16px;
}

.ec-base-product .spec > li.sale-per {
    color: #ff4800;
    font-weight: 500;
/*    margin-left: 3px;*/
    margin-right: 6px;
    font-size: 13px;
}

.ec-base-product .spec .summary {
    color: #6d6d6d;
    font-size: 12px;
}

.ec-base-product .spec .color {
    overflow: hidden;
    display: inline-block;
    margin: 0;
    line-height: 1;
}

.ec-base-product .spec .chips {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 2px 2px 0;
    border: 1px solid #e3e3e3;
    font-size: 0;
    line-height: 0;
}

.ec-base-product .discountPeriod {
    display: inline-block;
    z-index: 10;
    position: relative;
    width: 55px;
    height: 19px;
    vertical-align: middle;
}

.ec-base-product .layerDiscountPeriod strong.title {
    display: block;
    margin: 0 0 12px;
    padding: 0 35px 0 0;
    font-weight: bold;
    color: #2e2e2e;
}

.ec-base-product .layerDiscountPeriod .content p {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 16px;
    color: #757575;
    letter-spacing: -1px;
}

.ec-base-product .layerDiscountPeriod .content p strong {
    font-weight: normal;
    font-size: 12px;
    color: #2e2e2e;
}

.ec-base-product .layerDiscountPeriod .content p strong span {
    font-size: 11px;
}

.ec-base-product .prdList .shippingFee {
    position: relative;
    display: inline-block;
}

.ec-base-product .prdList .shippingFee .button {
    display: inline-block;
    float: none;
}

.ec-base-product .prdList .shippingFee .ec-base-tooltip {
    z-index: 11;
    display: block;
    margin: 0 0 0 -170px;
    width: 360px;
}

.ec-base-product .prdList .shippingFee .ec-base-tooltip table th {
    width: 40px;
}

.ec-base-product .prdList .shippingFee .ec-base-tooltip table th,
.ec-base-product .prdList .shippingFee .ec-base-tooltip table td {
    padding: 7px 10px 8px 10px;
}

.ec-base-product .btnTooltip {
    display: inline-block;
}

.differentialShipping {
    display: none;
    overflow: hidden;
    position: absolute;
    z-index: 100;
    border: 1px solid #000;
    background: #fff;
}

.differentialShipping h3.title {
    height: 60px;
    margin: 0 20px;
    padding: 20px 0;
    font-size: 16px;
    color: #000;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
}

.differentialShipping .content {
    padding: 12px 18px 14px 18px;
    border-top: 0;
    text-align: center;
    background: #fff;
}

.differentialShipping .close {
    position: absolute;
    right: 14px;
    top: 16px;
    width: 20px;
    height: 20px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.differentialShipping .close a {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
}

.differentialShipping .close:before {
    content: "";
    position: absolute;
    top: 0;
    right: 10px;
    width: 1px;
    height: 21px;
    background: #000;
}

.differentialShipping .close:after {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    width: 21px;
    height: 1px;
    background: #000;
}

.differentialShipping .close img {
    display: none;
}

.differentialShipping .content ul {
    color: #757575;
    line-height: 25px;
}

.differentialShipping .content li {
    overflow: hidden;
}

.differentialShipping .content li strong {
    float: left;
    font-weight: normal;
}

.differentialShipping .content li span {
    float: right;
    color: #2e2e2e;
}

.differentialShipping .content .info {
    margin: 7px 0 0;
    padding: 7px 0 0;
    border-top: 1px dotted #b0b1b3;
    color: #80aeef;
    text-align: right;
}

/* Thumbnail icon position */
.ec-product-bgLT {
    background-position: left top;
}

.ec-product-bgLC {
    background-position: left center;
}

.ec-product-bgLB {
    background-position: left bottom;
}

.ec-product-bgRT {
    background-position: right top;
}

.ec-product-bgRC {
    background-position: right center;
}

.ec-product-bgRB {
    background-position: right bottom;
}

.ec-product-bgCT {
    background-position: center top;
}

.ec-product-bgCC {
    background-position: center center;
}

.ec-product-bgCB {
    background-position: center bottom;
}

.prd_price_sale span span {
    display: none;
}

/* Slide products */

.prd-nav-wrap {
    position: absolute;
    top: -9px;
    right: 0;
    opacity: 0;
}

html.loaded .prd-nav-wrap.on,
html.loaded .scroll-effect.on + .prd-nav-wrap {
    opacity: 1;
    -webkit-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.prd-nav {
    display: block;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #e5e5e5;
    margin-left: 5px;
    cursor: pointer;
    -webkit-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
}

.prd-nav:hover {
    border-color: #000;
}

.prd-nav svg {
    width: 6px;
    height: auto;
}

@media all and (max-width:1024px) {

    .ec-base-product .prdList .icon__box > span {
        opacity: 1;
        visibility: visible;
    }

    .ec-base-product .prdList .cart {
        width: 22px;
    }

    .ec-base-product .prdList .cart img {
        background-size: 14px auto;
    }
    
    .ec-base-product .prdList .wish img,
    .ec-base-product .prdList .wish img[icon_status="on"] {
        background-size: 14px auto;
        background-position: center 5px;
    }
    
    .ec-base-product .prdList .wish {
        width: 22px;
        height: 22px;
    }
    
    html.loaded .ec-base-product .prdList .icon__box > span,
    .ec-base-product .prdList .wish img {
        transition: none;
    }
    
}

/********************* Mobile *********************/
@media all and (max-width:767px) {
    .ec-base-product ul.grid5 > li {
        width: 50%;
    }

    .ec-base-product .prdList .wish {
        width: 22px;
    }


}

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
    .ec-base-product .title h3 {
        margin: 40px 0 20px;
        font-size: 16px;
    }

    

    .ec-base-product .discountPeriod {
        position: static;
    }

    .ec-base-product .btnTooltip {
        position: static;
    }

    .differentialShipping {
        left: 0;
        right: 0;
        width: 88%;
        margin: 10px auto 0;
    }
}

/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
    .ec-base-product ul.grid5 > li {
        width: 33.33%;
    }

    .ec-base-product ul.grid4 > li {
        width: calc(33.33% - 15px);
        margin: 0 7.5px 50px;
    }

}

/********************* PC *********************/
@media all and (min-width:1025px) {
    .ec-base-product .title h3 {
        margin: 50px 0 25px;
        font-size: 20px;
    }

    .ec-base-product .layerDiscountPeriod {
        left: 50%;
        top: 26px;
        width: 247px;
        margin: 0 0 0 -124px;
    }

    .ec-base-product .btnTooltip {
        position: relative;
    }

    .differentialShipping {
        left: 50%;
        top: 17px;
        width: 350px;
        margin: 0 0 0 -176px;
    }
}

@media (max-width: 767px) {
    
    .prd-nav-wrap {
        display: none !important;
    }
    
    .ec-base-product ul.grid4 {
        width: calc(100% + 10px) !important;
        margin-left: -5px !important;
    }
    
    .ec-base-product ul.grid4 > li {
        width: calc(50% - 10px);
        margin: 0 5px 30px;
    }
    
    .ec-base-product .prdList .description .name *,
    .ec-base-product .spec > li *,
    .ec-base-product .spec > li.sale-per {
        font-size: 12px !important;
        font-weight: normal !important;
    }
    
    .ec-base-product .prdList .description {
        margin: 10px 20px 0 0;
    }
    
    .ec-base-product .spec {
        margin: 2px 0 0;
    }
    
    .ec-base-product .spec > li {
        margin: 0 0 7px;
    }
    
    .ec-base-product .prdList--best > li::after {
        width: 55px;
        font-size: 12px;
    }
    
}
.ec-base-prdInfo { position:relative; border-bottom:1px solid #ddd; box-sizing:border-box; background:#fff; }
.ec-base-prdInfo .prdBox { display:-webkit-flex; display:-ms-flex; display:flex; flex:1; flex-wrap:wrap; }
.ec-base-prdInfo .check { display:inline-block; margin:0 10px 0 0; }
.ec-base-prdInfo .check label { margin:0; }
.ec-base-prdInfo .thumbnail { overflow:hidden; width:83px; height:83px; margin:0 15px 0 0; border:1px solid #d5d5d5; box-sizing:border-box; }
.ec-base-prdInfo .thumbnail img { width:100%; }
.ec-base-prdInfo .description { -webkit-flex:1; -ms-flex:1; flex:1; line-height:18px; }
.ec-base-prdInfo .description .prdName { display:block; margin:0 0 3px; font-weight:normal; }
.ec-base-prdInfo .description .prdName a { color:#000; }
.ec-base-prdInfo .description .prdName .ec-set-product-name { display:block; margin:0 0 3px; }
.ec-base-prdInfo .description .prdName img { margin:0 1px; vertical-align:middle; }
.ec-base-prdInfo .description .price,
.ec-base-prdInfo .description .price li { font-size:13px; color:#000; line-height:20px; }
.ec-base-prdInfo .description .price strong { font-weight:normal; }
.ec-base-prdInfo .description .price .refer { font-weight:normal; font-size:11px; }
.ec-base-prdInfo .description .price .discount { font-weight:normal; text-decoration:line-through; }
.ec-base-prdInfo .description .price .strike { font-weight:normal; text-decoration:line-through; }
.ec-base-prdInfo .description .price .strike strong { font-weight:normal; }
.ec-base-prdInfo .description .info { margin:5px 0 0; }
.ec-base-prdInfo .description .info li { margin:0 0 3px; font-size:12px; color:#7d7d7d; }
.ec-base-prdInfo .description .info a { color:#7d7d7d; }
.ec-base-prdInfo .description .info .mileage { display:inline-block; }
.ec-base-prdInfo .description .info .mileage img {    vertical-align: text-top;} 
.ec-base-prdInfo .description input[type="number"] { max-width:51px; }
.ec-base-prdInfo .description .info .amount button { margin:0; padding:0; border:0; }
.ec-base-prdInfo .description .info .amount { width:50px; }
.ec-base-prdInfo .description .info input.amount { text-align:right; }
.ec-base-prdInfo .description  input[type="tel"] { text-align:right; }
.ec-base-prdInfo .description .quantity input[type="tel"] { width:51px; }
.ec-base-prdInfo .sumPrice strong { font-size:16px; }
.ec-base-prdInfo .quantity { margin:20px 0 0; padding:0 0 0 98px;box-sizing:border-box; width:100%; }
	.ec-base-prdInfo.gCheck .quantity { padding:0 0 0 125px; }
.ec-base-prdInfo .btnDelete { display:block; position:absolute; top:20px; right:-5px; overflow:hidden; width:30px; height:30px; margin:0 auto; font-size:1px; line-height:0; color:transparent; white-space:nowrap; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
.ec-base-prdInfo .btnDelete:before { content:""; position:absolute; top:4px; right:14px; width:1px; height:21px; background:#b5b5b5; -webkit-transition:.3s ease-out; transition:.3s ease-out; }
.ec-base-prdInfo .btnDelete:after { content:""; position:absolute; top:14px; right:4px; width:21px; height:1px; background:#b5b5b5; -webkit-transition:.3s ease-out; transition:.3s ease-out; }

.ec-base-prdInfo .optionGroup { margin:15px 0 0; }
.ec-base-prdInfo .optionGroup:empty { margin-top:0; }
.ec-base-prdInfo .optionGroup li { margin:5px 0 0; line-height:20px; color:#7d7d7d; }
.ec-base-prdInfo .optionGroup .optionName { line-height:18px; word-break:break-all; }
.ec-base-prdInfo .optionGroup li .product { display:block; margin:8px 0 0; color:#000; }
.ec-base-prdInfo .optionGroup li .change { margin:0 0 0 5px; white-space:nowrap; }
.ec-base-prdInfo .optionGroup .product.displaynone + .optionStr { display:inline-block; margin-right:10px; color:#000; }
.ec-base-prdInfo .optionGroup .product.displaynone + .optionStr:empty { margin-right:0; }
.ec-base-prdInfo .optionGroup li br { display:none; }
.ec-base-prdInfo .optionGroup .file a { color:#07a4fd; text-decoration:underline; word-break:break-all; }

.ec-base-prdInfo .optionSelect { padding:10px 20px 20px; background:#f6f6f6; }
.ec-base-prdInfo .optionSelect li { margin:10px 0 0; }
.ec-base-prdInfo .optionSelect select, 
.ec-base-prdInfo .optionSelect input { width:calc(100% - 258px); }
.ec-base-prdInfo .optionSelect + .optionSelect { margin-top:-34px; padding-top:0; }
.ec-base-prdInfo .optionDesc { display:inline-block; width:254px; color:#545454; }

.ec-base-prdInfo .prdFoot { line-height:26px; border-top:1px solid #e5e5e5; }
.ec-base-prdInfo .prdFoot:after { content:''; display:block; clear:both; }
.ec-base-prdInfo .prdFoot .gLeft { float:left; text-align:left; line-height:32px; }
.ec-base-prdInfo .prdFoot .gRight { float:right; text-align:right; }
.ec-base-prdInfo .prdFoot .txtStatus { display:inline-block; margin-right:10px; font-size:16px; font-weight:bold; }
.ec-base-prdInfo .prdFoot .store { color:#000; font-weight:normal; }
.ec-base-prdInfo .prdFoot span span.discount { text-decoration:line-through; }
.ec-base-prdInfo .prdFoot span span.discount strong {font-weight:normal; }

.ec-base-prdInfo .optionModifyLayer { display:none; }
.ec-base-prdInfo .optionModifyLayer .dimmed {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.3); }
.ec-base-prdInfo .optionModifyLayer .title { display:block; margin:0 0 6px; font-size:13px; }
.ec-base-prdInfo .optionModifyLayer .prdInfo { font-size:13px; }
.ec-base-prdInfo .optionModifyLayer .prdInfo li { margin:0 0 20px; }
.ec-base-prdInfo .optionModifyLayer .prdInfo li:empty { margin:0; }
.ec-base-prdInfo .optionModifyLayer .prdModify li { display:flex; margin:10px 0 0; }
.ec-base-prdInfo .optionModifyLayer .prdModify li:first-child { margin-top:0; }
.ec-base-prdInfo .optionModifyLayer .prdModify .optionDesc { display:inline-block; width:89px; padding:11px 0 0; font-size:13px; color:#545454; }
.ec-base-prdInfo .optionModifyLayer .prdModify li select { flex:1; width:100%; }
.ec-base-prdInfo .optionModifyLayer .prdModify li input[type=text] { flex:1; width:100%; }

/* order_result.html > orderArea > ec-base-prdInfo */
.orderArea .ec-base-fold .ec-base-prdInfo { border-bottom:1px solid #d5d5d5; }
.orderConfirmLayer .orderArea .ec-base-prdInfo { border-bottom:0; }
.orderArea .ec-base-prdInfo + .ec-base-prdInfo { border-top:1px solid #d5d5d5; }

/* ec-base-prdEmpty */
.ec-base-prdEmpty { text-align:center; color:#6d6d6d; border-top:1px solid #000; border-bottom:1px solid #e5e5e5; }

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
    .ec-base-prdInfo .prdBox { padding:24px 16px; }
    .ec-base-prdInfo .description { padding:0 40px 0 0; }
    .ec-base-prdInfo .sumPrice { margin:20px 0 0; padding:0 0 0 98px; box-sizing:border-box; width:100%; }
    .ec-base-prdInfo .buttonGroup { margin:20px 0 0; padding:0 0 0 98px; box-sizing:border-box; width:100%; }
    	/* gCheck */
        .ec-base-prdInfo.gCheck .sumPrice,
        .ec-base-prdInfo.gCheck .quantity,
    	.ec-base-prdInfo.gCheck .buttonGroup { padding:0 0 0 125px; }
    .ec-base-prdInfo .btnDelete { right:12px; }
    .ec-base-prdInfo .optionSelect { margin:0 16px 24px; padding:10px 20px 20px; }
    .ec-base-prdInfo .optionSelect li { margin:10px 0 0; }
    .ec-base-prdInfo .optionSelect select, 
    .ec-base-prdInfo .optionSelect input { width:100%; }
    .ec-base-prdInfo .optionSelect + .optionSelect { margin-top:-34px; padding-top:0; }
    .ec-base-prdInfo .optionDesc { display:block; margin:0 0 10px; color:#545454; }
    .ec-base-prdInfo .prdFoot { padding:18px 16px; }
    .optionModifyLayer .ec-base-button { display: flex; }
    .optionModifyLayer .ec-base-button [class*='Fix'] {flex: 1; min-width: auto; }
    
    /* ec-base-prdEmpty */
    .ec-base-prdEmpty { padding:40px 0; }
}

/********************* PC *********************/
@media all and (min-width:1025px) {
    .ec-base-prdInfo .prdBox { position:relative; padding:25px 0; }
    .ec-base-prdInfo .description { margin:0 250px 0 0; }
    .ec-base-prdInfo .sumPrice { text-align:right; padding:0 42px 0 0; }
    .ec-base-prdInfo .buttonGroup { position:absolute; bottom:25px; right:0; width:300px; text-align:right; }
    .ec-base-prdInfo .btnDelete { right:-5px; }
    .ec-base-prdInfo .optionSelect { margin:0 0 24px 98px; padding:10px 20px 20px; }
    .ec-base-prdInfo .optionSelect li { margin:10px 0 0; }
    .ec-base-prdInfo .optionSelect select, 
    .ec-base-prdInfo .optionSelect input { width:calc(100% - 258px); }
    .ec-base-prdInfo .optionSelect + .optionSelect { margin-top:-34px; padding-top:0; }
    .ec-base-prdInfo .optionDesc { width:254px; }
    .ec-base-prdInfo .prdFoot { padding:18px 0; }
    .optionModifyLayer .ec-base-layer { width:485px; }
    
    /* ec-base-prdEmpty */
    .ec-base-prdEmpty { padding:56px 0; } 
}
/* typeList */
.ec-base-paginate.typeList { margin:60px 0; text-align:center; font-size:0; line-height:0; }
.ec-base-paginate.typeList > a {display: inline-block; width:40px; line-height: 40px;  text-align: center; background:#fff; box-sizing:border-box;}
.ec-base-paginate.typeList > a::after,
.ec-base-paginate.typeList > a:first-child::before,
.ec-base-paginate.typeList > a:last-child::before {content: ''; display: inline-block; width: 7px; height: 7px; border-width: 1px 1px 0 0; border-style: solid; border-color: #000; vertical-align: middle; transform: rotate(45deg); }
.ec-base-paginate.typeList > a:first-child::before,
.ec-base-paginate.typeList > a:last-child::before {margin: 0 -3px;}
.ec-base-paginate.typeList > a:first-child::after,
.ec-base-paginate.typeList > a:first-child::before,
.ec-base-paginate.typeList > a:first-child + a::after {transform: rotate(-135deg);}
.ec-base-paginate.typeList ol { display:inline-block; font-size:0; line-height:0; vertical-align:middle; }
.ec-base-paginate.typeList li { display:inline-block; margin:0 0 0 -1px; vertical-align:top; }
.ec-base-paginate.typeList li:first-child { margin-left:0; }
.ec-base-paginate.typeList img { vertical-align:top; }
.ec-base-paginate.typeList li a { display:block; width:40px; padding:12px 0; font-size:12px; color:#6d6d6d; border:1px solid #e5e5e5; line-height:14px; background:#fff; box-sizing:border-box; }
.ec-base-paginate.typeList a:hover { text-decoration:none; }
.ec-base-paginate.typeList a.this { position:relative; z-index:1; color:#000; border-color:#000; }
.ec-base-paginate.typeList a.nolink { cursor:default; }
/* typeSwipe */
.ec-base-paginate.typeSwipe { text-align: center; }
.ec-base-paginate.typeSwipe .prev, .ec-base-paginate.typeSwipe .next{ display: none; }
.ec-base-paginate.typeSwipe [id*='swipe-button'] button { display: inline-block; margin: 0 7px; width: 8px; height: 8px; overflow: hidden; font-size: 1px; line-height: 0; text-indent: -9999px; border-radius: 100%; background: #000; opacity: .2; }
.ec-base-paginate.typeSwipe [id*='swipe-button'] button.selected { opacity: 1; }
/*
.contents {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 80px;
}
*/

html:not(.basic) {
    opacity: 0;
}

html.loaded {
    opacity: 1;
    -webkit-transition: opacity 0.45s ease 0.3s;
    transition: opacity 0.45s ease 0.3s;
}

.container {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 80px;   
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.display-m {
    display: none;
}

.pull-left {
	float: left;
}

.pull-right {
	float: right;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.inline {
	font-size: 0;
}

.inline>*,
.inline .inline__block {
	display: inline-block;
	vertical-align: top;
}

.relative {
    position: relative;
}

a:hover {
	text-decoration: none;
}

.hover-opacity {
	-webkit-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
}

.hover-opacity:hover {
	opacity: 0.5;
}

.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex--v-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.flex--h-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.ui-unset {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

.hidden {
    opacity: 0;
    visibility: hidden;
}

.company-name {
    margin-right: -3px;
}
    
.company-name[data-chk="9999"] {
    font-size: 0;
}

.company-name[data-chk="9999"]::after {
    content: '모아스튜디오';
    font-size: 13px;
}

@media(max-width: 1023px) {
    .display-pc {
        display: none;
    }

    .display-m {
        display: block;
    }
}

.mCafe24Post .search {
	opacity: 1;
  display: block !important;
  top: 0;
  left: 0;
  visibility: visible;
}
html.loaded .category__link,
html.loaded .user-menu__link {
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out;
}

.top-banner {
    position: relative;
    overflow: hidden;
    height: 34px;
    text-align: center;
    display: none;
}

.top-banner.on {
    display: block;
}

.top-banner__wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 34px;
    background: #000;
}

.top-banner__link {
    overflow: hidden;
    font-size: 12px;
    color: #fff;
    box-sizing: border-box;
    line-height: 1;
}

.top-banner .btnClose {
    position: absolute;
    right: 80px;
    top: 10px;
    width: 13px;
    height: 13px;
    background: none;
    overflow: hidden;
    white-space: nowrap;
    text-indent: 150%;
    font-size: 1px;
    color: transparent;
    line-height: 1px;
}

header.header {
    width: 100%;
    height: 70px;
    z-index: 10;
}

.header__wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    box-sizing: border-box;
    background: #fff;
    border-bottom: 1px solid #ebebeb;
}

.header__wrap.fixed {
    position: fixed;
}

.top-logo {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: 124px;
    margin-left: -62px;
}

.top-logo--mobile {
    display: none;
}

.top-logo__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.top-logo__link:not(:first-child) {
    opacity: 0;
    visibility: hidden;
}

.top-logo .top-logo__link svg {
    display: none;
}

.chk-moa[data-chk="9999"] ~ .top-logo img {
    display: none;
}

.chk-moa[data-chk="9999"] ~ .top-logo .top-logo__link svg {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -22px;
}

.top-logo__link img {
    width: 100%;
    height: auto;
}

.category__item {
    position: relative;
}

.category__item:not(:last-child) {
    margin-right: 30px;
}

.category__item[data-name="이벤트"],
.aside-category__item[data-name="이벤트"] {
    display: none;
}

.category__link {
/*    font-size: 13px;*/
    font-size: 14px;
/*    font-weight: 500;*/
    display: block;
    line-height: 69px;
}

.right-menu {
    margin-left: auto;
}

.user-menu__link {
    line-height: 69px;
/*    font-weight: 500;*/
    font-size: 14px;
}

.slash {
    font-size: 14px;
    margin: 0 2px;
}

.category__item:hover .category__link,
.user-menu__link:hover {
    opacity: .4;
}

.icon-menu {
    margin-left: 5px;
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

.icon-menu__item {
    margin-left: 15px;
    cursor: pointer;
}

.icon-menu__item svg path {
    fill: #000;
}

.icon-menu__item--wish svg path {
    stroke: #000;
}

.icon-search-mobile {
    display: none;
}

.cart-count {
    display: block;
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #000;
    border: 1px solid #fff;
    box-sizing: border-box;
    color: #fff;
    font-size: 10px;
    text-align: center;
    bottom: 2px;
    right: 0;
}

.sub-category {
    position: absolute;
    background: #fff;
    width: 150px;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
    left: -20px;
    top: 72px;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

html.loaded .sub-category {
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.sub-category--depth-three {
    top: 1px;
    right: left;
    left: 0;
    -webkit-transform: translateX(calc(100% - 2px));
    transform: translateX(calc(100% - 2px));
}

.category__item:hover > .sub-category:not(.on) {
    top: 69px;
    opacity: 1;
    visibility: visible;
}

.sub-category__item:hover > .sub-category--depth-three:not(.on) {
    top: -1px;
    opacity: 1;
    visibility: visible;
}

.sub-category__list {
    padding: 10px 0;
}

.sub-category__item {
    padding: 0 10px;
}

.sub-category__link {
    display: block;
/*    font-size: 12px;*/
    font-size: 13px;
    /* text-indent: 10px; */
    line-height: 33px;
    transition: background 0.2s ease-in-out;
}

.sub-category__item:hover > .sub-category__link {
    background: #f4f4f4;
}

.search {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #ebebeb;
    background: #fff;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    height: 0;
}

html.loaded .search {
    -webkit-transition: all 0.5s cubic-bezier(0.4, 0.4, 0.000, 1.0);
    transition: all 0.5s cubic-bezier(0.4, 0.4, 0.000, 1.0);
}

.search.on {
    opacity: 1;
    visibility: visible;
    height: 71px;
}

.search__field {
    width: 40%;
    font-size: 0;
}

.search .search__input {
    border: none;
    padding: 0;
    margin: 0;
    height: 70px;
    width: 100%;
    font-size: 14px;
}

.search__hot-keyword {
    margin-left: auto;
    padding-right: 42px;
}

.search__keyword {
    font-size: 12px;
    padding: 3px 10px 4px;
    border-radius: 40px;
    border: 1px solid #ebebeb;
    margin-left: 10px;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
}

.search__keyword:empty {
    display: none;
}

.search__keyword:hover {
    border-color: #868686;
}

.search__close {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    height: 18px;
    margin-top: -9px;
    cursor: pointer;
}

.search__close svg {
    width: 18px;
    height: auto;
}

.search-bg {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,.35);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
}

html.loaded .search-bg {
    -webkit-transition: all 0.5s cubic-bezier(0.4, 0.4, 0.000, 1.0);
    transition: all 0.5s cubic-bezier(0.4, 0.4, 0.000, 1.0);
}

.search.on + .search-bg {
    opacity: 1;
    visibility: visible;
}

.footer {
    position: relative;
    padding: 60px 0;
    border-top: 1px solid #e5e5e5;
}

.footer__logo {
    width: 124px;
    margin-bottom: 25px;
}

.footer__logo-link:nth-child(2),
.footer__logo--mobile,
.footer__logo .footer__logo-link svg {
    display: none;
}

.chk-moa[data-chk="9999"] ~ .footer__logo img {
    display: none;
}

.chk-moa[data-chk="9999"] ~ .footer__logo .footer__logo-link svg {
    display: block;
}

.footer__logo img {
    width: 100%;
    height: auto;
}

.footer__column:not(:first-child) {
    margin-left: 7vw;
}

.footer__title {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 28px;
}

.footer__txt {
    display: block;
    font-size: 13px;
    line-height: 1.9;
    font-weight: 300;
}

.footer__txt--copyright br {
    display: none;
}

.policy__about,
.footer__link,
.policy__link {
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}

.policy__about:hover,
.footer__link:hover,
.policy__link:hover {
    opacity: .4;
}

.footer__txt--designby,
.footer__txt--link {
    color: #989898;
}

.footer__txt--link {
    display: inline;
}

.policy {
    width: 198px;
    height: 50px;
    margin-top: 28px;
    border: 1px solid #d9d9d9;
    cursor: pointer;
}

.policy::after {
    content: '';
    display: block;
    width: 10px;
    height: 5px;
    background: url("//gohcosmetics.com/moa/img/icon/icon_arrow_down.svg") no-repeat center;
    position: absolute;
    top: 22px;
    right: 20px;
    background-size: 100% auto;
    -webkit-transition: transform 0.2s ease-in-out;
    transition: transform 0.2s ease-in-out;
}

.policy.on::after {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

@media (hover: hover) {
    .policy:hover::after {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }   
}

.policy__list {
    position: absolute;
    top: 50px;
    left: -1px;
    background: #fff;
    width: 198px;
    border: 1px solid #d9d9d9;
    border-top: 0px;
    padding-bottom: 5px;
    display: none;
}

.policy__select {
    display: none;
}

.policy__item {
    padding-left: 20px;
    margin-bottom: 15px;
}

.policy__about,
.policy__link {
    font-size: 13px;
}

.policy__about {
    display: block;
    height: 50px;
    line-height: 48px;
    padding-left: 20px;
    width: calc(100% - 60px);
}

/* Side */

.aside,
.aside-bg {
    display: none;
}

/* Scroll btn */

.scroll-btn {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 1px solid #bbb;
    background: rgba(255,255,255,.8);
    margin-top: 7px;
    cursor: pointer;
    bottom: 0;
    right: 40px;
    margin-bottom: 100px;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

html.loaded .scroll-btn {
    -webkit-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out,visibility 0.3s ease-in-out;
}

.scroll-btn.on {
    opacity: 1;
    visibility: visible;
}

.scroll-btn svg {
    width: 15px;
    height: auto;
}

/* Cart layer */

.xans-order-layerbasketpackage.ec-base-layer-area {
    background: transparent;
    z-index: 1111;
}

#cart-layer {
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    -webkit-transition: all 0.7s cubic-bezier(0.4, 0.4, 0.000, 1.0);
    transition: all 0.7s cubic-bezier(0.4, 0.4, 0.000, 1.0);
}

#cart-layer.on {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.cart-layer-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.7s cubic-bezier(0.4, 0.4, 0.000, 1.0);
    transition: all 0.7s cubic-bezier(0.4, 0.4, 0.000, 1.0);
}

#cart-layer.on + .cart-layer-bg {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 1680px) {
    
/*
    .footer__column:not(:first-child) {
        margin-left: 100px;
    }
*/
}

@media (max-width: 1440px) {
    
    #contents,
    .container {
        padding-left: 40px;
        padding-right: 40px;
    }
    
    .footer__column:not(:first-child) {
        margin-left: 5vw;
    }
}

@media (max-width: 1280px) {
    
    .footer__column:not(:first-child) {
        margin-left: 5.5vw;
    }
    
    .footer__title {
        font-size: 13px;
    }
    
    .footer__txt {
        font-size: 12px;
    }
    
    .footer__txt--copyright br {
        display: block;
    }
    
    .policy {
        width: 148px;
        height: 40px;
    }
    
    .policy::after {
        top: 17px;
    }
    
    .policy__about {
        height: 40px;
        line-height: 38px;
    }
    
    .policy__list {
        top: 40px;
        width: 100%;
    }
    
}

@media(max-width: 1024px) {
    
    /* Cart layer */
    
    #cart-layer {
        width: 380px;
        left: auto;
    }
    
    .xans-order-layerbasketpackage .ec-base-button a {
        margin-left: 0 !important;
    }
    
    .policy {
        border: none;
    }
    
    .policy::after,
    .policy__about,
    .policy__list {
        display: none !important;
    }
    
    .policy__select {
        display: block;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        font-size: 13px;
        padding-left: 20px;
    } 
    
}

@media (max-width: 1023px) {
    
    #contents,
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    /* Top banner */
    
    .top-banner__content {
        padding: 0 46px 0 16px;
        box-sizing: border-box;
        width: 100%;
    }
    
    .top-banner__link {
        display: inline-block;
        width: 100%;
        /* margin: 0 auto; */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 36px;
    }
    
    .top-banner .btnClose {
        right: 16px;
    }
    
    /* Header */
    
    header.header {
        height: 54px;
    }
    
    .header__wrap {
        height: 55px;
    }
    
    .category,
    .icon-menu__item--wish,
    .user-menu {
        display: none;
    }
    
    .icon-search-mobile {
        display: inline-block;
    }
    
    .header__wrap,
    .right-menu {
        height: 55px;
    }
    
    .header__wrap > .container {
        padding-right: 9px;
        padding-left: 13px;
    }
    
    .header__hamburger {
        height: 24px;
    }
    
    .top-logo {
        width: 100px;
        margin-left: -50px;
    }
    
    .top-logo--pc {
        display: none;
    }
    
    .top-logo--mobile {
        display: block;
    }
    
    .chk-moa[data-chk="9999"] ~ .top-logo .top-logo__link {
        width: 100px;
        height: 100%;
    }
    
    .chk-moa[data-chk="9999"] ~ .top-logo .top-logo__link svg {
        width: 100px;
        height: auto;
        margin-top: -16px;
    }
    
    .icon-menu {
        padding-right: 3px;
    }
    
    .icon-menu__item.jsSearchOpen svg {
        width: 16px;
        height: auto;
    }
    
    .icon-menu__item.jsSearchOpen svg path {
        stroke: #fff;
        stroke-width: 0.3px;
    }
    
    /* Side */
    
    .aside {
        position: fixed;
        top: 0;
        left: 0;
        width: 295px;
        height: 100%;
        background: #fff;
        z-index: 11;
        display: block;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    
    html.loaded .aside,
    html.loaded .aside-bg {
        -webkit-transition: all 0.6s ease;
        transition: all 0.6s ease;
    }
    
    .aside.on {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    
    .membership {
        border-bottom: 10px solid #f9f9f9;
    }
    
    .membership__inner {
        padding: 28px 20px 25px;
    }
    
    .membership__txt {
        margin: 0 0 10px;
        font-size: 13.5px;
        line-height: 1.4;
        letter-spacing: -1px;
        color: #707070;
    }
    
    .membership__main {
        font-size: 20px;
        font-weight: bold;
    }
    
    .membership__arrow {
        margin-left: 5px;
        position: relative;
        top: 1.5px;
        width: 20px;
        height: 20px;
        background: #000;
        border-radius: 50%;
        -webkit-box-shadow: 2px 3px 4.5px 0.15px rgb(0 0 0 / 25%);
        box-shadow: 2px 3px 4.5px 0.15px rgb(0 0 0 / 25%);
    }
    
    .membership__arrow::after, .membership__arrow::before {
        display: block;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: 0px;
        margin-left: -0.5px;
        width: 5px;
        height: 1px;
        background: #fff;
        content: "";
    }
    
    .membership__arrow::before {
        -webkit-transform: rotate(45deg) translate(-50%,-45%);
        transform: rotate(45deg) translate(-50%,-45%);
    }
    
    .membership__arrow::after {
        -webkit-transform: rotate(-45deg) translate(-40%,-50%);
        transform: rotate(-45deg) translate(-40%,-50%);
    }
    
    .aside-category__item {
/*        margin-bottom: 10px;*/
        padding: 0;
        border-bottom: 1px solid #eee;
    }
    
    .aside-category__link {
        font-size: 18px;
/*        font-weight: 500;*/
        display: block;
        width: calc(100% - 90px);
        padding: 21px 20px;
        line-height: 1;
/*        line-height: 1.8;*/
    }
    
    .aside-category a.cate {
        position: absolute;
        top: 20px;
        right: 10px;
        width: 30px;
        height: 21px;
        text-align: center;
        z-index: 1;
        background: url("//gohcosmetics.com/moa/img/icon/icon_arrow_down.svg") no-repeat center;
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    
    .aside-category__item:not(.relative) a.cate {
        display: none;
    }
    
    .aside-category a.cate.on {
        right: 9px;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    
    .aside-child {
        display: none;
        padding: 20px 0 22px 30px;
/*        background: #f7f6f6;*/
        background: #f9f9f9;
    }
    
    .aside-child a.cate {
        top: 0;
    }
    
    .aside-child > li {
        position: relative;
        padding-bottom: 12px;
    }
    
    .aside-child > li:last-child {
        padding-bottom: 0;
    }
    
    .aside-child > li > .view {
/*        font-size: 14px;*/
        display: block;
        font-size: 16px;
        opacity: .8;
        color: #333;
    }
    
    .aside-child-third {
        display: none;
        padding: 16px 0 0 16px;
    }

    .aside-child-third > li {
        padding-bottom: 10px;
    }
    
    .aside-child-third > li > .view {
        font-size: 18px;
    }
    
    .aside-child-third > li.noChild .cate {
        display: none;
    }
    
    .aside-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.58);
        z-index: 10;
        display: block;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.5s cubic-bezier(0.4,0.4,0.000,1.0);
        transition: all 0.5s cubic-bezier(0.4,0.4,0.000,1.0);
    }
    
    .aside.on + .aside-bg {
        opacity: 1;
        visibility: visible;
    }
    
    .aside__inner {
        height: calc(100% - 50px);
        overflow: auto;
    }
    
    .user {
        position: absolute;
        left: 20px;
        bottom: 0;
        width: calc(100% - 40px);
    }
    
    .user__item {
        line-height: 50px;
        margin-right: 20px;
    }
    
    .user__item--right {
        margin-left: auto;
        margin-right: 0;
    }
    
    .user__link {
        font-size: 14px;
        text-decoration: underline;
    }
    
    .social__link svg {
        width: 14px;
        height: auto;
        vertical-align: middle;
    }
    
    .social__item--instagram svg {
        -webkit-transform: translateY(-1px);
        transform: translateY(-1px);
    }
    
    .social__item--kakao svg {
        width: 16px;
        margin-right: -2px;
    }
    
    .social__item--ss svg {
        vertical-align: top;
        margin-right: 4px;
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }
    
    /* Footer */
    
    .footer {
        padding: 40px 0 20px;
    }

    .footer__left,
    .footer__right,
    .footer__column {
        float: none;
    }
    
    .footer__left {
        margin-bottom: 40px;
    }
    
    .footer__logo {
        margin-bottom: 12px;
    }
    
    .footer__logo svg {
        width: 100px;
        height: auto;
    }
    
    .footer__logo--pc {
        display: none;
    }
    
    .footer__logo--mobile {
        display: block;
    }
    
    .policy {
        margin-top: 14px;
        width: 100%;
        height: 50px;
        box-sizing: border-box;
    }
    
    .policy__about {
        width: 80px;
        height: 50px;
        line-height: 48px;
        padding-left: 16px;
    }
    
    .policy__list {
        top: 50px;
    }
    
    .policy__item {
        padding-left: 16px;
    }
    
    .policy::after {
        top: 22px;
    }
    
    .footer__txt--copyright br,
    .footer__column--shop-menu {
        display: none;
    }
    
    .footer__column:not(:first-child) {
        margin: 30px 0 0;
    }
    
    .footer__title {
        font-size: 14px;
        padding-bottom: 20px;
        margin: 0;
    }
    
    .footer__txt {
        line-height: 1.8;
        font-size: 13px;
    }
    
    .footer__nav--sns {
        font-size: 0;
    }
    
    .footer__nav--sns > .footer__menu {
        display: inline-block;
        vertical-align: top;
        margin-right: 15px;
    }
    
    .footer__link {
        line-height: 2.1;
    }
    
    .scroll-btn {
        right: 16px;
    }
    
}

@media (max-width: 768px) {
    #contents {
        padding-left: 0;
        padding-right: 0;
    }
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .search {
        top: 55px;
    }
    
    /* Cart layer */
    .xans-order-layerbasketpackage.ec-base-layer-area .header {
        height: 54px;
    }
    
    #cart-layer.ec-base-layer.typeSide .btnClose {
        top: 7px;
        width: 40px;
        height: 40px;
        padding: 0;
        right: 0;
    }
    .m_language{
        display: none;
    }
    #cart-layer.ec-base-layer.typeSide .btnClose::before {
        right: 10px;
        height: 20px;
        top: 0px;
        height: 20px;
    }
    
    #cart-layer.ec-base-layer.typeSide .btnClose::after {
        top: 9px;
        width: 20px;
        right: 0px;
    }
}

@media (max-width: 767px) {
    
    #cart-layer {
        min-width: 320px;
        width: 60%;
    }
    
    .search,
    .search.on {
        height: auto;
    }
    
    .search-bg {
        top: 55px;
    }
    
    .search__field {
        width: 100%;
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 20px;
    }
    
    .search .search__input {
        height: 55px;
    }
    
    .search__hot-keyword {
        margin: 0;
        padding-right: 0;
    }
    
    .search__keyword {
        margin: 0 10px 20px 0;
    }
    
    .search__close {
        top: 18px;
        margin-top: 0;
    }
    
}
body { position:relative; left:0; transition:left 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
body.expand { overflow-x:hidden; }
body.expand #aside { visibility:visible; overflow-x:hidden; }
body.expand #layoutDimmed { display:block; }
body.expand #aside { left:0; }

#aside { z-index:1001; visibility:hidden; position:fixed; top:0px; bottom:0; overflow:auto; overflow-x:hidden; min-width:225px; width:458px; background-color:#fff; transition:500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);}
#aside .btnClose { position:absolute; font-size:1px; line-height:1px; color:transparent; text-indent:150%; white-space:nowrap;  }

.navigation-menu__member { border-bottom:1px solid #000; }
.navigation-menu__member a { display:inline-block; font-weight:bold; text-transform: uppercase; text-decoration:none; }
.navigation-menu__category .categoryList ul { display:none; }
.navigation-menu__category .categoryList li { position:relative; }
.navigation-menu__category .categoryList li.selected > ul { display:block; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu { padding:0 0 0 10px; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu a.view { color: #595959;  }
.navigation-menu__category .categoryList > li.selected .slideSubMenu ul { padding:0 0 0 20px; }
.navigation-menu__category .categoryList > li.selected .slideSubMenu ul a.view { color: #929292; }
.navigation-menu__category .categoryList a.cate,
.navigation-menu__project .icoCategory { position:absolute; right:0; top:0; word-wrap:break-word;overflow:hidden; width:48px; height:48px; font-size:1px; line-height:1px; color:transparent; text-indent:150%; white-space:nowrap;  }
.navigation-menu__category .categoryList a.cate:before,
.navigation-menu__project .icoCategory:before { content:""; display:block; width:10px; height:10px; margin:18px auto 0; border-left:1px solid #929292; border-bottom:1px solid #929292; -webkit-transition:.3s ease-out; transition:.3s ease-out;-webkit-transform:rotate(-45deg); transform:rotate(-45deg); }
.navigation-menu__category .categoryList li.selected > a.cate:before,
.navigation-menu__project .selected .icoCategory:before { margin-top:22px; -webkit-transform:rotate(135deg); transform:rotate(135deg); }
.navigation-menu__category .categoryList li.noChild > a.cate { display:none; }
.navigation-menu__category .icoBookmark { display:none; }
.navigation-menu__project { border-top:1px solid #ebebeb; }
.navigation-menu__project .title { position:relative; display:block; padding:15px 0; font-size:18px; }
.navigation-menu__board { border-top:1px solid #ebebeb; }

/********************* Mobile *********************/
@media all and (max-width:767px) {
    body.expand { left:292px; position:fixed; }
    #aside { left:-292px;  width:292px; }
    #aside .btnClose { top:25px; right:17px; width:18px; height:18px; }
    #aside .btnClose .icon { width:23px; height:23px; margin: -2px 0 0 -2px; }
    #aside .btnClose .icon:before { right:11px; height:23px; }
    #aside .btnClose .icon:after {top:11px; width:23px; }
    .navigation-menu__member { padding:79px 0 30px 16px; }
    .navigation-menu__member a { margin:0 10px 0 0; font-size:14px; }
    .navigation-menu__board,
    .navigation-menu__category,
    .navigation-menu__project { padding:13px 0 30px 16px; }
    .navigation-menu__board .menu a { display:block; padding:15px 0; font-size:16px; text-decoration:none;  }
    .navigation-menu__category .view,
    .navigation-menu__project .view { display:block; padding:15px 0; font-size:16px; text-decoration:none; }
    .navigation-menu .menu { margin:2px 0; }
}

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
    .navigation-menu__member .count { display:inline-block; min-width:24px; padding:3px 4px 3px; font-size:13px; text-align:center; border:1px solid #000; border-radius:20px; box-sizing:border-box; }
}

/********************* Tablet *********************/
@media all and (min-width:768px) and (max-width:1024px) {
	#aside { left:-458px;  width:458px; }
}

/********************* Tablet / PC *********************/
@media all and (min-width:768px) {
    #aside .btnClose {  top:40px; right:50px;  width:25px; height:25px; }
    #aside .btnClose .icon { width:30px; height:30px; margin: -2px 0 0 -2px;}
    #aside .btnClose .icon:before { right:15px; height:30px; }
    #aside .btnClose .icon:after {top:15px; width:30px; }
    .navigation-menu__member { padding:95px 0 39px 50px; }
    .navigation-menu__member a { margin:0 18px 0 0; font-size:18px; }
    .navigation-menu .menu { margin:2px 0; }
    .navigation-menu__category,
    .navigation-menu__project { padding:23px 38px 25px 50px; }
    .navigation-menu__category .view,
    .navigation-menu__project .view  { display:block; padding:15px 0; font-size:18px; text-decoration:none; }
    .navigation-menu__board { padding:23px 50px 25px; }
    .navigation-menu__board .menu a { display:block; padding:15px 0; font-size:18px; text-decoration:none; }
}

/********************* PC *********************/
@media all and (min-width:1025px) {
    body.expand { left:458px; }
    #aside { left:-458px;  width:458px; }
}

/**
 * Swiper 5.3.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://swiperjs.com
 *
 * Copyright 2014-2020 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 11, 2020
 */

/*@font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA") format("woff");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}*/

.swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-container-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{flex-wrap:wrap}.swiper-container-multirow-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-container-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-container-3d{perspective:1200px}.swiper-container-3d .swiper-cube-shadow,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-container-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-container-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-container-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-container-vertical.swiper-container-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(-1 * var(--swiper-navigation-size)/ 2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;text-transform:none;font-variant:initial}.swiper-button-prev,.swiper-container-rtl .swiper-button-next{left:10px;right:auto}.swiper-button-prev:after,.swiper-container-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-container-rtl .swiper-button-prev{right:10px;left:auto}.swiper-button-next:after,.swiper-container-rtl .swiper-button-prev:after{content:'next'}.swiper-button-next.swiper-button-white,.swiper-button-prev.swiper-button-white{--swiper-navigation-color:#ffffff}.swiper-button-next.swiper-button-black,.swiper-button-prev.swiper-button-black{--swiper-navigation-color:#000000}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-container-horizontal>.swiper-pagination-bullets,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:10px;left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet-active{opacity:1;background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:6px 0;display:block}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-container-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 4px}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-container-horizontal.swiper-container-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-progressbar{background:rgba(0,0,0,.25);position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progressbar,.swiper-container-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:4px;left:0;top:0}.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-container-vertical>.swiper-pagination-progressbar{width:4px;height:100%;left:0;top:0}.swiper-pagination-white{--swiper-pagination-color:#ffffff}.swiper-pagination-black{--swiper-pagination-color:#000000}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;animation:swiper-preloader-spin 1s infinite linear;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-container-fade.swiper-container-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube{overflow:visible}.swiper-container-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube.swiper-container-rtl .swiper-slide{transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-next+.swiper-slide,.swiper-container-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-flip{overflow:visible}.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-flip .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* reset */
li {
    list-style: none;
}

table {
    width: 100%;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

caption {
    display: none;
}

h1,
h3 {
    margin: 0;
}

.ec-base-layer-area {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.ec-base-layer {
    z-index: 1001;
    border: 1px solid #000;
    background: #fff;
    box-sizing: border-box;
}

.ec-base-layer .header {
    margin: 0 20px;
    padding: 20px 0;
    color: #000;
    border-bottom: 1px solid #e5e5e5;
}

.ec-base-layer > .header > h1,
.ec-base-layer > .header > h3,
.ec-base-layer > .header > h5 {
    font-size: 16px;
    font-weight: normal;
}

.ec-base-layer > .content {
    padding: 20px;
    font-size: 13px;
    line-height: 22px;
    min-height: 90px;
    box-sizing: border-box;
}

.ec-base-layer div.ec-base-help {
    margin-top: 0;
}

.ec-base-layer .btnClose {
    position: absolute;
    right: 7px;
    top: 7px;
    padding: 10px;
    cursor: pointer;
    display: block;
    overflow: hidden;
    width: 20px;
    height: 20px;
    font-size: 1px;
    line-height: 0;
    color: transparent;
    white-space: nowrap;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ec-base-layer .btnClose:before {
    content: "";
    position: absolute;
    top: 0;
    right: 10px;
    width: 1px;
    height: 21px;
    margin: 10px 10px 0 0;
    background: #000;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}

.ec-base-layer .btnClose:after {
    content: "";
    position: absolute;
    top: 10px;
    right: 0;
    width: 21px;
    height: 1px;
    margin: 10px 10px 0 0;
    background: #000;
    -webkit-transition: .3s ease-out;
    transition: .3s ease-out;
}

/* typeModal */
.ec-base-layer.typeModal {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(calc(-50% + 0.5px));
}

/* typeLayer */
.ec-base-layer.typeLayer {
    position: absolute;
    margin-top: 10px;
}

/* typeSide */
.ec-base-layer.typeSide {
    position: fixed;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 0;
}

.ec-base-layer.typeSide .header {
    padding: 74px 16px 10px;
    margin: 0;
    border: 0;
}

.ec-base-layer.typeSide .header h2 {
    font-size: 18px;
    font-weight: normal;
}

.ec-base-layer.typeSide .content {
    position: relative;
    padding: 0;
    flex: 1;
    overflow: auto;
    height: 100%;
}

.ec-base-layer.typeSide .ec-base-button[class*="gColumn"] {
    margin: 25px 16px;
}

.ec-base-layer.typeSide .btnClose {
    top: 5px;
    width: 24px;
    height: 24px;
    padding: 20px 17px;
}

.ec-base-layer.typeSide .btnClose:before {
    right: 10px;
    height: 20px;
}

.ec-base-layer.typeSide .btnClose:after {
    top: 9px;
    width: 20px;
}

/* gAlert */
.ec-base-layer.gAlert > .header {
    display: block;
    overflow: hidden;
    position: absolute;
    font-size: 1px;
    line-height: 0;
    color: transparent;
    text-indent: -150%;
    white-space: nowrap;
    padding: 0;
    color: transparent;
    border: 0;
}

.ec-base-layer.gAlert > .content {
    padding: 45px 0 25px;
    text-align: center;
}

/* gScroll */
.ec-base-layer.gScroll {
    height: auto;
}

.ec-base-layer.gScroll > .content {
    overflow: auto;
    height: auto;
    max-height: 70vh;
}

/* popup */
#popup {
    padding: 0 0 30px;
}

#popup .ec-base-layer {
    border: 0;
}

#popup .ec-base-layer .btnClose {
    top: 6px;
}

/********************* Mobile / Tablet *********************/
@media all and (max-width:1024px) {
    .ec-base-layer {
        position: fixed;
        top: 50%;
        left: 0;
        right: 0;
        min-width: 320px;
        width: calc(100% - 32px);
        margin: 0 auto;
        transform: translateY(calc(-50% + 0.5px));
    }

    .ec-base-layer.typeSide {
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        transform: initial;
    }

    #popup .ec-base-layer {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        border: 0;
        transform: initial;
    }
}

/********************* PC *********************/
@media all and (min-width:1025px) {
    .ec-base-layer {
        min-width: 308px;
    }

    .ec-base-layer.typeSide {
        top: 0;
        right: 0;
        left: auto;
        bottom: 0;
        width: 380px;
    }

    .ec-base-layer.gAlert {
        width: 360px;
    }
}
.xans-layout-multishopshipping { display:none; }
.xans-layout-multishopshipping .worldshipLayer { width:448px; }
.xans-layout-multishopshipping .worldshipLayer .content .desc { display:block; margin:4px 0 14px; }
.xans-layout-multishopshipping .worldshipLayer select { width:100%; margin:10px 0 0; }