﻿/*Share*/
.prd_detail_share_area {
    width: 1200px;
    position: absolute;
    left: 50%;
    margin-left: -600px;
    top: 150px;
    z-index: 1
}

.prd_detail_share {
    width: 209px;
    float: right;
    position: relative
}

.prd_detail_share .btn_area {
    text-align: right
}

.prd_detail_share .btn_area a {
    display: inline-block;
    font-size: 0.9em
}

.prd_detail_share .btn_area a img {
    vertical-align: middle;
    display: inline-block
}

.prd_detail_share .btn_area a img.icon {
    margin-right: 5px;
}

.prd_detail_share .btn_area a img.arrow {
    margin-left: 5px;
}

.prd_detail_share .share_list {
    width: 210px;
    height: 195px;
    position: absolute;
    right: -1px;
    top: 35px;
    border: 1px solid #dbdbdb;
    background: #fff;
    display: none
}

.prd_detail_share .share_list ul {
    padding: 0 10px
}

.prd_detail_share .share_list li.tit {
    text-align: left;
    margin: 10px 0;
    line-height: 1.4em;
    font-size: 0.9em
}

.prd_detail_share .share_list li.sns {
    padding-bottom: 10px;
    border-bottom: 1px solid #dbdbdb
}

.prd_detail_share .share_list li.sns a {
    margin: 0 3px
}

.prd_detail_share .share_list li.url input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #343434;
    color: #8e8e8e;
    background: url(../kimg/share_url.gif) no-repeat left center;
    padding-left: 15px;
    line-height: 1.6em
}

.prd_detail_share .share_list li.copy_btn {
    text-align: right;
    margin-top: 8px
}

.prd_detail_share .share_list li.copy_btn button {
    background: #8c96a0;
    color: #fff;
    border: none;
    padding: 5px 10px;
    font-size: 0.7em
}

.prd_detail_share .share_list li.copy_btn button:hover {
    background: #6f7983
}

.prd_detail_share.white_type .btn_area a {
    color: #fff
}

.prd_detail_share.black_type .btn_area a {
    color: #343434
}

@media all and (max-width:1400px) {
    .prd_detail_share_area {
        width: 100%;
        margin-left: -52%;
    }
}
@media all and (max-width:1360px) {
    .prd_detail_share_area{
        top: 90px;
    }
}
@media all and (max-width:880px) {
    .prd_detail_share_area {
        width: 68px;
        position: absolute;
        left: initial;
        margin-left: 0;
        right: 2%;
        top: 20px;
        z-index: 1
    }

    .prd_detail_share .share_list {
        width: 100%;
        height: auto;
        right: 0;
        box-sizing: content-box
    }

    .prd_detail_share .share_list ul {
        padding: 20px 0 0 0
    }

    .prd_detail_share .share_list li.sns {
        border-bottom: none
    }

    .prd_detail_share .share_list li.sns a {
        width: 100%;
        display: block;
        margin: 0;
        margin-bottom: 20px
    }

    .prd_detail_share .share_list li.tit {
        display: none
    }

    .prd_detail_share .share_list li.url {
        display: none
    }

    .prd_detail_share .share_list li.copy_btn {
        display: none
    }
}

/*Go Essencore*/
.GotoEssencore {
    background: #e0e0e0;
    padding: 70px 0
}

.GotoEssencore h3 {
    font-size: 2em;
    font-weight: 700;
    line-height: 1em;
    letter-spacing: 1px;
    margin-bottom: 80px
}

.GotoEssencore ul li {
    display: inline-block;
    position: relative;
    margin: 0 55px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
}

.GotoEssencore ul li a {
    width: 188px;
    height: 188px;
    display: table;
    table-layout: fixed;
    color: #fff
}

.GotoEssencore ul li a div.text {
    position: relative;
    vertical-align: middle;
    display: table-cell;
    width: 100%;
    line-height: 1.2;
}

.GotoEssencore ul li a span.area {
    position: absolute;
    left: 0;
    bottom: 12%;
    width: 100%
}

.GotoEssencore ul li a span.area span {
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 1px solid #fff
}

.GotoEssencore ul li a span.area span img {
    margin-left: 5px
}

.GotoEssencore ul li.go_eseen_OT {
    background-image: url(../kimg/prd_details/common/go_eseen_OT_off.png)
}

.GotoEssencore ul li.go_eseen_OT:hover {
    background-image: url(../kimg/prd_details/common/go_eseen_OT_on.png)
}

.GotoEssencore ul li.go_eseen_SC {
    background-image: url(../kimg/prd_details/common/go_eseen_SC_off.png)
}

.GotoEssencore ul li.go_eseen_SC:hover {
    background-image: url(../kimg/prd_details/common/go_eseen_SC_on.png)
}

.GotoEssencore ul li.go_eseen_QVL {
    background-image: url(../kimg/prd_details/common/go_eseen_QVL_off.png)
}

.GotoEssencore ul li.go_eseen_QVL:hover {
    background-image: url(../kimg/prd_details/common/go_eseen_QVL_on.png)
}

.GotoEssencore ul li.go_eseen_DMRGB {
    background-image: url(../kimg/prd_details/common/go_eseen_DMRGB_off.png)
}

.GotoEssencore ul li.go_eseen_DMRGB:hover {
    background-image: url(../kimg/prd_details/common/go_eseen_DMRGB_on.png)
}

.GotoEssencore ul li.go_eseen_SSDDM {
    background-image: url(../kimg/prd_details/common/go_eseen_SSDDM_off.png)
}

.GotoEssencore ul li.go_eseen_SSDDM:hover {
    background-image: url(../kimg/prd_details/common/go_eseen_SSDDM_on.png)
}

.GotoEssencore ul li.go_eseen_SSDHM {
    background-image: url(../kimg/prd_details/common/go_eseen_SSDHM_off.png)
}

.GotoEssencore ul li.go_eseen_SSDHM:hover {
    background-image: url(../kimg/prd_details/common/go_eseen_SSDHM_on.png)
}

@media all and (max-width:960px) {
    .GotoEssencore ul li {
        margin: 0 20px
    }
}

@media all and (max-width:812px) {
    .GotoEssencore {
        padding: 140px 0
    }

    .GotoEssencore h3 {
        font-size: 4.7em
    }

    .GotoEssencore ul li a {
        width: 220px;
        height: 220px;
        font-size: 2.3em
    }
}

@media all and (max-width:635px) {
    .GotoEssencore {
        padding: 120px 0
    }

    .GotoEssencore ul li {
        margin: 0 10px
    }

    .GotoEssencore ul li a {
        width: 140px;
        height: 140px;
        font-size: 0.9em
    }

    .GotoEssencore ul li a span.area {
        bottom: 16%
    }
}

@media all and (max-width:420px) {
    .GotoEssencore {
        padding: 80px 0
    }

    .GotoEssencore h3 {
        margin-bottom: 30px
    }

    .GotoEssencore ul li {
        margin: 0 5px
    }

    .GotoEssencore ul li a {
        font-size: 14px
    }
}

@media all and (max-width:330px) {
    .GotoEssencore ul li a {
        width: 120px;
        height: 120px
    }

    .GotoEssencore ul li a span.area {
        bottom: 15%
    }

    .GotoEssencore ul li a span.area span {
        padding-bottom: 3px
    }
}