@charset "utf-8";
/**
 * @File Name : main.css
 * @Description : 메인 레이아웃
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2023.11.08 | amy.ju | 최초 등록
 * </pre>
 * @author amy.ju
 * @since 2023.11.08
 *
 * @Copyright (C)TWOGOMS All rights reserved.
 */
/******************** Basic Layout ********************/
#visual{ position:relative; }
#wrap{ position:relative;margin:40px 0; }
#cart{ top:680px; }


/******************** head ********************/
#head-s1 h1.bh1,
#head-s1>.container>.b1.prev{ display:none; }


/******************** 슬라이드 ********************/
/* 메인 대표 슬라이드 배너 */
/* #event1-control */
#main-event1-control{ height:0; }
#main-event1-control button.b1{ position:absolute;top:50%;transform:translateY(-50%);width:60px;height:60px;border-radius:10px;z-index:10; }
#main-event1-control button.b1>i.ic1{ display:block;width:40px;height:40px;transform:translate(-50%, -50%);position:absolute;left:50%;top:50%;background-image:url('/assets/images/lib/slide1ic1@2x.png');background-repeat:no-repeat;background-size:auto 40px; }
#main-event1-control button.b1.prev{ left:50px; }
#main-event1-control button.b1.prev>i.ic1{ background-position:0 0; }
#main-event1-control button.b1.next{ right:50px; }
#main-event1-control button.b1.next>i.ic1{ background-position:-40px 0; }
/* #main-event1-menu */
#main-event1-menu{ position:absolute;left:50%;bottom:15px;transform:translateX(-50%);width:100%;z-index:10; }
#main-event1-menu button{ height:50px;line-height:50px;text-align:center; }
#main-event1-menu ul{ display:flex;flex-wrap:nowrap;width:calc(100% - 40px); }
#main-event1-menu ul>li{ flex-grow:1; }
#main-event1-menu ul>li>button{ width:100%;background-color:#fff; }
#main-event1-menu ul>li.on>button{ background-color:rgba(0, 0, 0, 0.7);color:#fff;font-weight:700; }
#main-event1-menu button.stop,
#main-event1-menu button.play{ position:absolute;right:0;top:0;width:40px;background-color:rgba(0, 0, 0, 0.7); }
#main-event1-menu button.stop:before,
#main-event1-menu button.play:before{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);content:'';display:block;width:25px;height:25px;background-size:auto 50px;background-image:url('/assets/images/lib/slide1control@2x.png');background-repeat:no-repeat; }
#main-event1-menu button.stop:before{ background-position:0 0; }
#main-event1-menu button.play:before{ background-position:0 -25px; }
/* #main-event1-number */
#main-event1-number { display:none; }


/******************** 제품 리스트 ********************/
/* main-list-control */
.main-list-control{ height:0; }
.main-list-control button.b1{ position:absolute;top:220px;width:40px;height:40px;border-radius:10px;z-index:10; }
.main-list-control button.b1>i.ic1{ display:block;width:40px;height:40px;transform:translate(-50%, -50%);position:absolute;left:50%;top:50%;background-image:url('/assets/images/lib/slide1ic1@2x.png');background-repeat:no-repeat;background-size:auto 40px; }
.main-list-control button.b1.prev{ left:-80px; }
.main-list-control button.b1.prev>i.ic1{ background-position:-80px 0; }
.main-list-control button.b1.next{ right:-80px; }
.main-list-control button.b1.next>i.ic1{ background-position:-120px 0; }
/* main-list-menu */
.main-list-number{ display:inline-block; }
.main-list-number>.total{ color:#9f9f9f; }
.main-list-number>.total:before{ content:' / '; }
.main-list-number>.current{ color:#292929;font-weight:600; }
/* main-list-gallery */
.main-list-gallery>ul{ display:flex;flex-wrap:wrap;gap:20px }
.main-list-gallery>ul>li{ width:calc((100% - 60px) / 4);padding-bottom:40px; }


/******************** .mainbody1 ********************/
.mainbody1{ position:relative; padding:40px 0; }
.mainbody1 .main-list-head{ position:relative; }
.mainbody1 .main-list-head>.main-list-number{ position:absolute;right:0;top:50%;transform:translateY(-50%); }
.mainbody1 .main-list-head>.more{ position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-block;color:#079CEF;font-weight:700;padding-right:24px; }
.mainbody1 .main-list-head>.more:before{ position:absolute;right:0;top:0;content:'';display:block;width:20px;height:20px;background:url('/assets/images/lib/more1ic1@2x.png') no-repeat -20px -20px;background-size:auto 40px; }
.mainbody1 .main-list-gallery{ margin:20px 0; }
.mainbody1 h3.bh1{ position:relative;color:#121212;font-size:1.75em;font-weight:700;display:flex;align-items:center; }
.mainbody1 h3.bh1>i{ display:none; }


/* 서브 이벤트 스라이드 배너 */
#product-banner{ position:relative;padding:40px 0 40px 0;margin-bottom:60px; }
#product-banner .event1-control button.b1{ width:48px;height:48px;border-radius:50%;background-color:#fff; }
#product-banner .event1-control button.b1>i.ic1{ width:40px;height:40px; }
#product-banner .event1-control button.b1.prev>i.ic1{ background-position:-160px 0; }
#product-banner .event1-control button.b1.next>i.ic1{ background-position:-200px 0; }
#product-banner .event1-menu{ left:50%;transform:translateX(-50%); }

/* 기획 행사 상품 */
[data-mainbody-id="special-event1"]{ position:relative;margin:60px -2000px;padding:80px 2000px 60px 2000px;background-color:#F1F4F6; }
[data-mainbody-id="special-event1"] a.more{ position:relative;display:inline-block;padding:0 50px 0 24px;background-color:#546476;height:40px;line-height:40px;font-weight:700;color:#fff;border-radius:20px;transition:background-color .3s; }
[data-mainbody-id="special-event1"] a.more:before{ position:absolute;right:20px;top:50%;transform:translateY(-50%);content:'';display:block;width:20px;height:20px;background:url('/assets/images/lib/more1ic1@2x.png') no-repeat -40px -20px;background-size:auto 40px; }
[data-mainbody-id="special-event1"] a.more:hover{ background-color:#455362; }

[data-mainbody-id="special-event1"] .main-list-head{ float:left;width:calc((100% / 4) - 30px);}
[data-mainbody-id="special-event1"] .main-list-head>h3.bh1{ color:#121212;font-size:2.125em;font-weight:700;margin:30px 0 10px 0; }
[data-mainbody-id="special-event1"] .main-list-head>.sub-title{ color:#121212;font-size:1.125em;font-weight:700; }
[data-mainbody-id="special-event1"] .main-list-head>a.more{ display:none; }

[data-mainbody-id="special-event1"] .main-list-info{ float:left;width:calc((100% / 4) - 30px); }
[data-mainbody-id="special-event1"] .main-list-info>ul.bu1{ margin:35px 0 60px 0; }
[data-mainbody-id="special-event1"] .main-list-info>ul.bu1>li{ color:#292929;margin:8px 0; }
[data-mainbody-id="special-event1"] .main-list-gallery{ float:right;width:calc(((100% / 4) * 3 ) - 20px); }
[data-mainbody-id="special-event1"] .main-list-gallery>ul>li{ width:calc((100% / 3) - 20px); }

/* 메인 하단 고정 배너 */
#main-banner1{ position:relative;margin-top:100px; }
#main-banner1>ul{ display:flex;flex-wrap:wrap;gap:20px; }
#main-banner1>ul>li{ display:flex;width:calc(50% - 10px); }
#main-banner1>ul>li>a{ display:inline-block;width:100%;border-radius:8px;overflow:hidden; }
#main-banner1>ul>li>a>img{ width:100%; }

/* RWD ◇◆◇◆◇◆◇◆◇◆◇◆ */
@media all and (min-width:1180px) {
    /* 메인 대표 슬라이드 배너 */
    /* #event1-list */
    #main-event1-list{ position:relative;height:440px; }
    #main-event1-list .main-event1-item{ position:relative;overflow:hidden; }
    #main-event1-list .main-event1-item>a{ display:block;position:absolute;top:0;left:0;width:100%;height:100%; }
    #main-event1-list .main-event1-item>a>img{ position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);display:block;width:auto;height:100%; }
    /* 기기별 */
    #main-event1-list .main-event1-item>a>.img-pc{ display:block; }
    #main-event1-list .main-event1-item>a>.img-mobile{ display:none; }

    /* 서브 이벤트 스라이드 배너 */
    #product-banner .event1-menu{ top:194px; }
}

@media all and (max-width:1179px){
    #container{ padding-top:90px; }
    #wrap{ position:relative;margin:0; }

    /* 메인 대표 슬라이드 배너 */
    #main-event1-control { display:none; }
    #main-event1-menu { display:none; }
    #main-event1-list{ position:relative; }
    #main-event1-list .main-event1-item{ width:100%; }
    #main-event1-list .main-event1-item>a{ width:100%; }
    #main-event1-list .main-event1-item>a>img{ width:100%; }
    #main-event1-list .main-event1-item>a>.img-pc{ display:none; }
    #main-event1-list .main-event1-item>a>.img-mobile{ display:block; }

    /* 서브 이벤트 스라이드 배너 */
    #main-event1-number{ position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:inline-block;z-index:2;padding:4px 12px;border-radius:20px;background: rgba(0, 0, 0, 0.60);color:#fff; }
    #main-event1-number>.current{ display:inline-block;font-weight:700; }
    #main-event1-number>.total{ position:relative;display:inline-block;opacity:.6; }
    #main-event1-number>.total:before{ content:' / '; }

    /* 메인 하단 고정 배너 */
    #product-banner{ margin-bottom:40px;padding:0 0 30px 0; }
    #product-banner .event1-menu{ bottom:0; }

    /* 기획 행사 상품 */
    [data-mainbody-id="special-event1"]{ margin: 40px -16px;padding: 40px 16px; }
    [data-mainbody-id="special-event1"] a.more{ font-size:1.142em; }
    [data-mainbody-id="special-event1"] .main-list-head{ float:unset;width:100%;text-align:center; }
    [data-mainbody-id="special-event1"] .main-list-head>h3.bh1{ margin:0 0 5px 0;font-size:1.714em; }
    [data-mainbody-id="special-event1"] .main-list-head>.sub-title{ font-size:1.285em;font-weight:400; }
    [data-mainbody-id="special-event1"] .main-list-head>a.more{ display:inline-block;margin-top:20px; }
    [data-mainbody-id="special-event1"] .main-list-info{ float:unset;width:100%; }
    [data-mainbody-id="special-event1"] .main-list-info>a.more{ display:none; }
    [data-mainbody-id="special-event1"] .main-list-info>ul.bu1{ margin:0;border-top:1px dashed #cbd2de;padding:15px 0; }
    [data-mainbody-id="special-event1"] .main-list-info>ul.bu1>li{ font-size:1em; }


}

@media (min-width:768px) and (max-width:1179px){

    /******************** 제품 리스트 ********************/

    /* 기획 행사 상품 */
    [data-mainbody-id="special-event1"]{ margin-top:40px;margin-bottom:40px;  }
    [data-mainbody-id="special-event1"] .main-list-gallery{ float:unset;width:100%;margin:30px 0; }
    [data-mainbody-id="special-event1"] .main-list-gallery>ul{ flex-direction:row; }
    [data-mainbody-id="special-event1"] .main-list-gallery>ul>li{margin:0 8px; width:calc((100% / 3) - 16px); }

    /* #main-banner1 */
    #main-banner1{ margin:40px 0; }
}

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

    /******************** 제품 리스트 ********************/
    .main-list-gallery>ul{ gap:16px; }
    .main-list-gallery>ul>li{ width:calc((100% - 16px) / 2);padding-bottom:30px; }

}

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

    /******************** .mainbody1 ********************/
    .mainbody1{ margin:40px 0;padding:0; }
    .mainbody1 .main-list-head>.more:before{ margin-top:-1px; }
    .mainbody1 .main-list-gallery{ margin:20px 0 0 0; }
    .mainbody1 .main-list-control{ display:none; }


    /* 기획 행사 상품 */
    [data-mainbody-id="special-event1"] .main-list-gallery{ float:unset;width:270px;margin:40px auto; }
    [data-mainbody-id="special-event1"] .main-list-gallery>ul{ flex-direction:column;gap:50px; }
    [data-mainbody-id="special-event1"] .main-list-gallery>ul>li{ width:100%;margin:0; }


    /* 메인 하단 고정 배너 */
    #main-banner1{ margin:60px 0 65px 0; }
    #main-banner1>ul{ flex-direction:column;gap:16px; }
    #main-banner1>ul>li{ width:100%; }


}