@charset "utf-8";

/*************** 줄바꿈 ***************/
.none_m {
    display: none;
}

/****************************************/
/************ tablet PC ver. ************/
/****************************************/
@media all and (min-width:768px) {

    #wrap {
        overflow: hidden;
    }

    /*************** 줄바꿈 ***************/
    .none_m {
        display: block;
    }

    .none_t {
        display: none;
    }

    /*************** 메뉴 ***************/
    
    #top {
        float: left;
    }

    #menu_btn {
        display: none;
    }

    #menu {
        float: right;
        display: block;
    }

    #lnb {
        float: left;
        padding-top: 3px;
    }

    #lnb > li {
        float: left;
        text-align: center;
        border: none;
        padding: 0 0 0 0;
        margin-left: 15px;
        font-weight: 700;
        letter-spacing: 0;
    }

    #lnb > li:nth-child(1) {
        width: 85px;
    }

    #lnb > li:nth-child(2) {
        width: 100px;
    }

    #lnb > li:nth-child(3) {
        width: 65px;
    }

    #lnb > li:nth-child(4) {
        width: 65px;
    }

    #lnb > li > span {
        display: none;
    }

    .sub {
        height: 145px;
    }

    .sub > li {
        font-size: 0.8em;
        line-height: 1.7;
        color: #eee;
        font-weight: 500;
        letter-spacing: -1px
    }

    .sub > li:hover {
        color: #fff;
    }

    #gnb {
        float: left;
        margin-right: 20px;
        margin-left: 10px;
    }

    #gnb > li:nth-child(n) {
        border: none;
        padding: 1px 0 0 20px;
        width: auto;
        font-size: 1em;
        font-weight: 500;
    }

    #gnb > li > span {
        display: none;
    }

    /*************** index ***************/
    #index .p2_w,
    #index .p2_k {
        font-size: 2em;
    }

    #index .p1_k,
    #index .p1_w {
        font-size: 3em
    }

    #index6,
    #index7 {
        height: 250px;
    }

    /*************** 콘텐츠 ***************/
    .main {
        height: 80vh;
    }

    .main > .frame > h2 {
        bottom: 80px;
    }

    .main > .frame > h4 {
        bottom: 150px;
    }

    #campaign1_3 {
        height: 800px;
    }

    #spa1_2 {
        padding: 50px 20px;
    }

    #best_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 40px
    }

    #best_list > li:last-child {
        grid-column: span 2;
    }

    #spa1_3 > .frame {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    #spa1_3 > .frame > .p1_w {
        border-bottom: 1px solid #fff5;
        padding-bottom: 20px;
        grid-column: span 2;
    }

    #spa1_3 > .frame > div {
        margin-top: 20px;
        border-top: none;
        padding-top: 0;
        padding-bottom: 0;
    }

    #spa_store1 {
        border-right: 1px solid #fff5;
        padding-right: 15px;
    }

    #spa1_3 > .frame > div > a {
        width: 80px;
        height: 30px;
        top: 2px;
        right: 30px;
        font-size: 1em;
        line-height: 2;
    }

    #spa1_3 > .frame > div:last-child > a {
        right: 0;
    }

    #spa2_3_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

    #spa2_3_list > li {
        margin-bottom: 0;
    }

    #spa2_4_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

    #spa2_4_list > li {
        margin-bottom: 0;
    }

    #store_list > li {
        padding-right: 30px;
    }

    .store_list_sub {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    #b2b_6_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 24px;
    }

    #b2b_6_list > li:first-child {
        grid-column: span 1;
    }

    #b2b_6_list > li:first-child > a {
        padding-right: 20px;
    }

    #b2b_6_list > li:first-child > a > span {
        right: 15px;
    }

    #b2b_7 > p {
        top: 65px;
    }

    /*************** 최하단 ***************/
    #bottom {
        width: 60%;
    }

    #service > p {
        padding-top: 10px;
        font: 500 1em/1.5 '';
    }

    #foot .info {
        float: left;
        padding-left: 20px;
    }

    #foot {
        padding-left: 0;
    }

    #service {
        width: 250px;
    }

    address {
        padding-top: 15px;
    }
}

/*******************************************/
/*************** web PC ver. ***************/
/*******************************************/
@media all and (min-width:1024px) {
    #wrap {
        overflow: hidden;
    }

    .none_w {
        display: none;
    }

    h3 {
        padding-right: 60px;
    }

    #index .p1_w,
    #about1 .p1_w,
    #about2 .p1_w,
    #about3 .p1_w,
    #about4 .p1_w,
    #campaign1 .p1_w,
    #campaign2 .p1_w,
    #b2b .p1_w,
    #index .p1_k,
    #about1 .p1_k,
    #about2 .p1_k,
    #about3 .p1_k,
    #about4 .p1_k,
    #campaign1 .p1_k,
    #campaign2 .p1_k,
    #b2b .p1_k {
        font-size: 3em;
    }

    #index .p2_w,
    #about1 .p2_w,
    #about2 .p2_w,
    #about3 .p2_w,
    #about4 .p2_w,
    #campaign1 .p2_w,
    #campaign2 .p2_w,
    #index .p2_k,
    #about1 .p2_k,
    #about2 .p2_k,
    #about3 .p2_k,
    #about4 .p2_k,
    #campaign1 .p2_k,
    #campaign2 .p2_k,
    #spa2_1 .p2_k {
        font-size: 2em
    }

    #index .p3_w,
    #about1 .p3_w,
    #about2 .p3_w,
    #about3 .p3_w,
    #about4 .p3_w,
    #campaign1 .p3_w,
    #campaign2 .p3_w,
    #spa1_1 .p3_w,
    #b2b .p3_w,
    #index .p3_k,
    #about1 .p3_k,
    #about2 .p3_k,
    #about3 .p3_k,
    #about4 .p3_k,
    #campaign1 .p3_k,
    #campaign2 .p3_k,
    #b2b .p3_k {
        font-size: 1.2em
    }


    #index4 > .frame > h3 {
        top: 55px;
    }

    .frame_header {
        width: 1024px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }

    .frame {
        width: 984px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }

    .frame_1024 {
        width: 1024px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }

    .frame > .h3_w {
        padding-right: 35px;
    }

    .frame > .h3_w > .go_w {
        top: 15px;
        right: 5px;
    }

    #index_main > .frame > img {
        right: 0;
    }

    #index_main > .frame > img:last-child {
        width: 60%;
    }

    #index2,
    #index5 {
        width: 1024px;
        margin: 80px auto;
        height: 650px;
        padding: 0 20px;
    }

    #img_index2,
    #img_index5 {
        height: 500px;
    }

    #index2 > h3,
    #index5 > h3 {
        bottom: 0;
    }

    #index3 {
        height: 500px;
    }

    #index6,
    #index7 {
        float: left;
        width: 50%;
        height: 300px;
    }

    #index6 > p {
        text-align: right;
        position: absolute;
        right: 30px;
    }

    #index6 > h3 {
        right: 205px;
        text-align: left;
    }

    #index6 .go_w {
        transform: rotate(-135deg);
        right: 260px;
    }

    #index7 > p {
        position: absolute;
        left: 30px
    }

    #index7 > h3 {
        left: 400px;
        right: inherit;
    }

    /*************** 콘텐츠 ***************/
    .main > .frame > h2 {
        font-size: 3.2em;
        bottom: 80px;
    }

    .main > .frame > h4 {
        font-size: 2em;
        bottom: 160px;
    }

    #about1_1 {
        width: 984px;
        margin: 0 auto;
    }

    #img_about1_2 > .frame > .p2_w {
        right: 0;
    }

    #about1_2 > .frame > .p3_k {
        margin: 30px 0;
        80px 0;
    }

    #about1_6 {
        height: 800px;
    }

    #about1_6 > .frame > img {
        right: 0;
    }

    #about2_1 {
        width: 984px;
        margin: 0 auto;
    }

    #about2_2 {
        width: 984px;
        margin: 50px auto;
    }

    #about2_3 {
        width: 984px;
        margin: 50px auto;
    }

    #about3_1 {
        width: 984px;
        margin: 0 auto;
    }

    #about3_2 {
        width: 984px;
        margin: 20px auto 50px auto;
    }

    #about3_3 {
        width: 984px;
        margin: 0 auto;
    }

    #about3_4 {
        width: 984px;
        margin: 50px auto;
    }

    #about3_5 > .frame > .p3_w {
        padding: 30px 0;
    }

    #about3_5 > .frame > .p2_w {
        padding-right: 0;
    }

    #about4_1 {
        width: 984px;
        margin: 0 auto;
    }

    #about4_2 {
        width: 984px;
        margin: 50px auto;
    }

    #about4_3 {
        width: 984px;
        margin: 0 auto;
    }

    #brand_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 30px;
    }

    #brand_list .p2_w {
        font-size: 1.5em
    }

    #campaign1_1 {
        width: 984px;
        margin: 0 auto;
    }

    #campaign1_2 {
        width: 984px;
        margin: 50px auto;
    }

    #campaign1_3 > .frame > p {
        left: 0;
        margin: 0
    }

    #campaign2_1 {
        width: 984px;
        margin: 50px auto;
    }

    #campaign2_2 > .frame > p {
        padding: 150px 0 150px 0;
    }

    #spa1_1 > p {
        width: 984px;
        margin: 20px auto;
    }

    #spa1_2 > p {
        width: 984px;
        margin: 0 auto;
    }

    #best_list {
        width: 984px;
        margin: 0 auto;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 40px
    }

    #best_list > li {
        border: none;
        padding-bottom: 0;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
    }

    #best_list > li:nth-child(1) {
        grid-column: span 3
    }

    #best_list > li:nth-child(2) {
        grid-column: span 3
    }

    #best_list > li:nth-child(3) {
        grid-column: span 2
    }

    #best_list > li:nth-child(4) {
        grid-column: span 2
    }

    #spa1_3 > .frame {
        width: 1024px;
        margin: 20px auto;
        grid-gap: 30px
    }

    #spa1_3 > .frame > div {
        width: calc(100% - 15px);
        margin-top: 0;
    }

    #spa_store1 {
        border-right: 1px solid #fff5;
    }

    #spa1_3 > .frame > div > a {
        top: 5px;
    }

    #spa1_2,
    #spa1_3 {
        margin-top: 150px;
    }

    #spa2_1 {
        width: 984px;
        margin: 50px auto;
    }

    #spa2_2 > ul {
        width: 984px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        padding: 50px 0;
    }

    #spa2_2 > ul > li {
        border-bottom: none;
        border-right: 1px solid #fff5;
        padding-top: 20px;
        padding-bottom: 30px;
        padding-right: 30px;
        padding-left: 30px;
    }

    #spa2_2 > ul > li:first-child {
        padding-left: 0;
    }

    #spa2_2 > ul > li:last-child {
        border: none;
        padding-right: 0;
    }

    #spa2_3 {
        width: 984px;
        margin: 80px auto;
    }

    #spa2_3_list > li,
    #spa2_4_list > li {
        padding: 30px
    }

    #spa2_4 {
        width: 984px;
        margin: 100px auto;
    }

    #spa2_5 {
        width: 984px;
        margin: 80px auto 0 auto;
    }

    #spa2_5_list .p2_k {
        font-size: 1.2em
    }

    #spa2_5_list .p3_k {
        font-size: 1em;
    }

    #store_contents {
        width: 1024px;
        margin: 0 auto;
    }

    #store_2 {
        width: calc(45% - 15px);
        height: 520px;
        border-bottom: 1px solid #ddd;
        float: left;
        margin-right: 10px;
    }

    .store_list_sub {
        grid-template-columns: 1fr 1fr;
        padding: 20px 0;
        border: none;
    }

    #store_3 {
        float: left;
        width: calc(55% - 15px);
        margin: 0 0 0 0;
        padding-bottom: 20px;
        border-bottom: 1px solid #ddd;
    }

    #store_3 > ul > li {
        padding-top: 15px;
    }

    #b2b_1 {
        width: 984px;
        margin: 0 auto;
    }

    #b2b_2 {
        width: 984px;
        margin: 50px auto;
    }

    #b2b_3 > .p3_k {
        width: 984px;
        margin: 30px auto;
    }

    #img_b2b_3 > .frame > p {
        bottom: 80px;
    }

    #img_b2b_4 > .frame > p {
        left: 0;
        top: 80px;
    }

    #b2b_4 > .p3_k {
        width: 984px;
        margin: 30px auto;
    }

    #b2b_5 {
        width: 984px;
        margin: 100px auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 30px;
    }

    #b2b_5 .p1_k {
        grid-column: span 2;
    }

    #b2b_5 .p2_k {
        font-size: 1.3em;
    }

    #b2b_6 {
        width: 984px;
        margin: 0 auto;
    }

    #b2b_6_list > li {
        height: 65px;
    }

    #b2b_6_list > li:first-child > a > span {
        right: 30px;
        top: 28px;
    }

    #b2b_7 {
        height: 300px;
    }

    #b2b_7 > .frame > p {
        top: 100px;
        right: 0;
    }

    #bottom {
        width: 70%;
    }

    small {
        padding: 40px 20px 20px 20px;
    }
}

/**********************************************/
/************ 최소 사이즈 줄바꿈 삭제 ************/
/**********************************************/

@media all and (max-width:374px) {
    br {
        display: none;
    }
}