/* 메인페이지 */

/* 메인슬라이드 */
#container {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: url(../images/bg.png) no-repeat;
    background-size: cover;
}

#container2 {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: url(../images/bg2.png) no-repeat;
    background-size: cover;
}

.import_slide{width: 100%; height: 600px;}

.wrap #container .slide_contents {
    position: absolute;
    /* container 보다 크기가 50% 더 크도록 설정 */
    width: 150vw;
    height: auto;
    /* 각도 조정 */
    transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
		/* 위치 조정 (선택사항) */
    top: 10%;
    left: -2%;
    overflow: hidden;
}
.main_slide{height: 600px;}
.main_slide .slick-slide {margin: 0px;}
.main_slide .slide_box .slick-slide {margin: 0 30px;}

.slide_item{width: 414px !important; box-shadow:0px 0px 10px rgba(96, 76, 129, 0.4); border-radius: 12px; pointer-events: none;}
.slide_text{  position: absolute; width: 1600px; left: 50%;  top:10%; transform: translate(-50%, -50%);}
.slide_text .ch_color{font-size: 36px; font-weight: bold; color: #8380f8; font-family: 'GmarketSansMedium';}
.slide_text div:nth-child(2){font-size: 60px; font-weight: 500; color: white; line-height: 65px; margin: 0px 0 30px; font-family: 'GmarketSansMedium';}
.slide_text p{font-size: 24px; line-height: 30px; color: white;}

.slide_text .arrow_icon{display: flex;}
.slide_text .arrow_icon .prevArrow{   
    background-image: url(../images/left-arrow.svg);
    width: 11px;
    height: 19px;
    background-size: 11px;
    margin-right: 30px;
    margin-top: 20px;
}

.slide_text .arrow_icon .nextArrow{   
    background-image: url(../images/right-arrow.svg);
    width: 11px;
    height: 19px;
    background-size: 11px;
    margin-right: 30px;
    margin-top: 20px;
}
.slide_text .arrow_icon .stop{   
    background-image: url(../images/stop.svg);
    width: 11px;
    height: 19px;
    background-size: 11px;
    margin-top: 20px;
    margin-right: 30px;
}

.slide_text .arrow_icon .play{   
    background-image: url(../images/play.svg);
    width: 21px;
    height: 26px;
    background-size: 16px;
    margin-top: 20px;
    background-repeat: no-repeat;
}



/* 띠배너 슬라이드 */
.banner_contents{ width: 100%; height: auto; margin: 80px 0 60px; overflow: hidden;}
.slick-dots{display: flex; justify-content: center; margin: 20px 0;}
.banner_contents .slick-slide{margin: 0 20px;}
.banner_contents .slick-dots li{height: 10px;}
.banner_contents .slick-dots button{  
    background-image: url(../images/dot.svg);
    background-repeat: no-repeat; 
    border: none;
    color: transparent;
    background-color: transparent;
    height: 8px;
    width: 23px;
    background-position: center;
}
.banner_contents .slick-dots .slick-active button {
    background-image: url(../images/active-dot.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 28px;
    background-size: contain;
}


/* md 콘텐츠 */
.md_contents{max-width: 1600px; margin: 0 auto;}
.md_contents .title{font-size: 30px; font-weight: bold; margin-bottom: 2rem;}
.md_contents .more_view{font-size: 16px; font-weight: 500; text-decoration: underline; margin-left: 40px;}
.md_contents .card_contents{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px 30px;}
.md_contents .card_contents .card{border: none; width: 100%; aspect-ratio: auto 1 / 1;}
.card_img{width: 100%; height: 100%; flex:1;}
.card_img img{width:100%; height:100%; object-fit: cover; border-radius: 10px; overflow: hidden;}
.md_contents .card_contents .card .text_box{padding: 20px; text-align: left;}
.md_contents .card_contents .card .text_box .category{color: #9c95f2; border: 2px solid #9c95f2; border-radius: 15px; width: 90px; height: 30px; font-size: 16px; line-height: 26px; text-align: center; font-weight: 500; margin-bottom: 20px;}
.md_contents .card_contents .card .text_box .soldout{color: #dadada; border: 2px solid #dadada; border-radius: 15px; width: 90px; height: 30px; font-size: 16px; line-height: 26px; text-align: center; font-weight: 500; margin-bottom: 20px;}
.md_contents .card_contents .card .text_box .sub_title{font-size: 18px; font-weight: 500;}
.md_contents .card_contents .card .text_box p{font-size: 20px; font-weight: 500; color: #999999;}
.md_contents .card_contents .card .text_box .price{font-size: 22px; font-weight: bold; color: black;}
.md_contents .card_contents .card .text_box .price del{font-size: 16px; font-weight: lighter; color: #999999; margin-left: 10px;}
.banner_item{width: 100%; height: 100%; object-fit: cover; overflow: hidden;}


/* bt 콘텐츠 */
.bt_contents{position: relative; max-width: 100%; width: 100%; margin: 60px auto; height: 450px;
    background-image: url(../images/banner_bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% 450px;
    background-position: top;
    overflow: hidden;
}
.bt_contents .bt_bg1{width: 1600px; position: absolute; left: 50%; top: 75px; transform: translate(-50%, 0);}
.bt_contents .bt_bg1 .bt_slide_sub_title{font-size: 16px; color: #dce5ff; font-weight: bold;}
.bt_contents .bt_bg1 .bt_slide_title{font-size: 30px; color: #fff; font-weight: bold; line-height: 50px; margin: 20px 0 40px;}
.bt_contents .bt_bg1 p .bt_view{font-size: 16px; color: #fff;}
.bt_contents .bt_bg1 .bt_slide .slick-slide{margin: 0;}
.bt_contents .bt_bg1 .banner_pagination{display: flex; position: absolute; bottom: 10px; left: 250px; align-items: center;}
.bt_contents .bt_bg1 .banner_pagination .paging{margin: 0 20px;}
.bt_contents .bt_bg2{width: 1500px; height: 400px; position: absolute; top: 55px; left: calc( 100vw - 60vw );}
.bt_contents .bt_bg2 .slide_contents2{width: 100%; overflow: hidden; position: absolute;}
.bt_contents .bt_bg2 .slide_contents2 .slide_box2{width: 100%;}
.bt_contents .bt_bg2 .slide_contents2 .slide_box2 .slick-slide{margin: 0 10px;}
.bt_contents .bt_bg2 .slide_contents2 .slide_box2 .slick-dots{display:none !important;}
.bt_contents .bt_bg1 .bannerPrev{ background-image: url(../images/o-play.svg); width: 10px; height: 12px; background-size: 10px; background-repeat: no-repeat; z-index: 2; }
.bt_contents .bt_bg1 .bannerNext{ background-image: url(../images/play.svg); width: 10px; height: 12px; background-size: 10px; background-repeat: no-repeat; z-index: 2; }

/* 공지사항 */
.notice{max-width: 1600px; margin: 50px auto;}
.notice .title{font-size: 30px; font-weight: 500; border-bottom: 2px solid black; padding-bottom: 1rem;}
.notice .qeustion{padding: 30px 0; display: flex; justify-content: space-between;}

.notice .qeustion .f-line{border: 1px solid #eaeaea;}
.notice .qeustion .f-contents1{width: 20%; display: flex; flex-direction: column; justify-content: space-between;}
.notice .f-contents1 h6{font-size: 16px; font-weight: 500; color: #666666;}

.notice .qeustion .f-contents2{ width: 30%;}
.notice .qeustion .f-contents2 .qna_list{margin: 15px 0; color: #666666; display: flex; justify-content: space-between; align-items: flex-end;}
.notice .qeustion .f-contents2 .qna_list div:nth-child(1){display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.notice .qeustion .f-contents2 .qna_list div:nth-child(2){color: #444444; font-size: 15px;}

.notice .qeustion .f-contents3{width: 30%;}
.notice .qeustion .f-contents3 .notice_list{margin: 15px 0; color: #666666; display: flex; justify-content: space-between; align-items: flex-end;}
.notice .qeustion .f-contents3 .notice_list div:nth-child(1){display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.notice .qeustion .f-contents3 .notice_list div:nth-child(2){color: #444444; font-size: 15px;}

.notice h5{font-size: 20px; font-weight: 500; margin-bottom: 0;}
.notice h5 span{font-size: 16px; text-decoration: underline; color: #444444; float: right;}
.notice .call{font-size: 30px; font-weight: bold; color: black;}
.notice p{font-size: 16px; margin-bottom: 0; color: #666666; font-weight : 400; line-height: 1.2;}


/* 팝업 */
/* 포인트 팝업 */
.pop_point{position:absolute; padding: 5px; top: 30px; right: -10px;}
.pop_point_inner{ width: 260px; height: auto; background-color: white; border: 1px solid #bebebe; position: relative; z-index: 5; padding: 20px;}

.pop_point .pop_point_inner .title{font-size: 18px; font-weight: bold;}
.pop_point .pop_point_inner table tr th{font-weight: 400; color: #666; font-size: 14px;}
.pop_point .pop_point_inner table tr td{font-weight: bold; color: #8380f8; font-size: 16px;}
.pop_point .pop_point_inner table tr td::after{content: " P"; font-size: 14px;}
.pop_point .pop_point_inner .modal_ex_btn{width: 100%; font-size: 14px; border: 1px solid #8380f8; color: #8380f8; text-align: center; margin-top: 1rem; padding: 8px 0;}


/* 장바구니 팝업 */
@keyframes fadeInRight3 {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}
@keyframes fadeInRight4 {
    0% {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translateZ(0);
    }
}

#popup_mask { animation: fadeInRight3 0s; position: fixed;  width: 100%; height: 100%; top: 0px; left: 0px;  background-color: rgb(0 0 0 / 20%); z-index: 1; display: none;}
.pop_basket{ animation: fadeInRight4 1s; width: 560px; height:  100vh; padding: 20px 35px 20px 40px; border: 1px solid #e1e1e1; background-color: white; position: fixed; z-index: 2; right: 0; top: 0;  display: none; overflow-y: auto;}
.pop_basket {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.pop_basket::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

.pop_basket .pop_basket_inner{position: relative;}
.pop_basket .pop_basket_inner.active .basket_option{display: flex;}
.pop_basket .pop_basket_inner.active .basket_option_no{display: none;}

.pop_basket .pop_basket_inner .basket_option{ height: calc( 100vh - 90px); display: none; flex-direction: column; justify-content: space-between;}
.pop_basket .pop_basket_inner .basket_option .basket_info{display: flex; flex-direction: column; justify-content: space-between;}
.pop_basket .pop_basket_inner .basket_option .basket_info h6{font-size: 17px; font-weight: 500; color: #666666;}
.pop_basket .pop_basket_inner .basket_option .basket_info .updown{border: 1px solid #e1e1e1; width: 90px; text-align: center;}
.pop_basket .pop_basket_inner .basket_option .basket_info .updown .plus{font-size: 17px; text-align: center; padding: 0 5px; color: #818181;}
.pop_basket .pop_basket_inner .basket_option .basket_info .updown .minus{font-size: 17px; text-align: center; padding: 0 7px; color: #818181;}
.pop_basket .pop_basket_inner .basket_option .basket_info .basket-price{display: flex; justify-content: space-between; flex-wrap: wrap; padding-bottom: 0.5rem; gap: 10px 0;}
.pop_basket .pop_basket_inner .basket_option .basket_info .before-price{font-size: 17px; color: #666666;  text-decoration:line-through; text-align: end;}
.pop_basket .pop_basket_inner .basket_option .basket_info .after-price{font-size: 22px; font-weight: bold; text-align: end;}
.pop_basket .pop_basket_inner .basket_option .basket_info .before-price::after{content: "원";}
.pop_basket .pop_basket_inner .basket_option .basket_info .after-price::after{content: "원";}

.pop_basket .pop_basket_inner .basket_option .basket_btn .sum_vat{width: 100%; background-color: #f6f6f6; padding: 30px 35px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 2rem;}
.pop_basket .pop_basket_inner .basket_option .basket_btn .sum_vat div:nth-child(1){font-size: 17px; font-weight: 500;}
.pop_basket .pop_basket_inner .basket_option .basket_btn .sum_vat .all_sum{font-size: 22px; font-weight: bold;}
.pop_basket .pop_basket_inner .basket_option .basket_btn .sum_vat .all_sum::after{content: "원";}

.pop_basket .pop_basket_inner .basket_option .basket_btn .basket-btn1{ width: 100%; font-size: 16px; border: 1px solid black; background-color: white; height: 47px; line-height: 40px;}
.pop_basket .pop_basket_inner .basket_option .basket_btn .basket-btn2{ width: 100%; font-size: 16px; background-color: black; color: white; height: 47px; line-height: 40px; border: 1px solid black; margin-bottom: 20px;}

.quantity{
    font-size: 18px;
    text-align: center; 
    width: 40px; 
    border-left: 1px solid #e1e1e1; 
    border-right: 1px solid #e1e1e1; 
    border-top: none; 
    border-bottom: none;
}

.pop_basket .pop_basket_inner .basket_option_no {font-size:14px; text-align: center;}
.pop_basket .pop_basket_inner .basket_option_no>p{margin:4em 0 3em 0;}
.pop_basket .pop_basket_inner .basket_option_no>div{background-color: #f7f7f7; margin:0 8%; padding:4em 0;}
.pop_basket .pop_basket_inner .basket_option_no>div p{font-size:16px; font-weight: bold; margin-bottom:3em;}



@media screen and (max-width:1920px){
    .wrap #container .slide_contents{left: 0%;}
}

@media screen and (max-width:1600px){
    .main_slide, #container, #container2, .import_slide{height: 550px;}

    .wrap .notice{margin: 50px 30px;}
    .notice .qeustion .f-contents2{width: 37%;}
    .notice .qeustion .f-contents3{width: 37%;}

    .md_contents{margin: 0 30px; }
    .bt_contents .bt_bg1{width: 100%; margin-left: 10%;}

    .slide_text{ width: 100%; position: absolute; top: 10.5%; padding-left: 30px;}
    .slide_item{width: auto !important;}

}

@media screen and (max-width:1500px){
    .slide_text .ch_color{font-size: 3vw;}
    .slide_text div:nth-child(2){font-size: 4vw; line-height: 1.2; margin: 0px 0 1rem;}
    .slide_text p{font-size: 1.6vw;}

}

@media screen and (max-width:1300px){
    .main_slide .slide_box .slick-slide{margin: 0 10px;}
    .main_slide, #container, #container2, .import_slide{height: 500px;}

    .slide_item{width: 23vw !important;}
}

@media screen and (max-width:1200px){
    .main_slide, #container, #container2, .import_slide{height: 450px;}

    .md_contents .card_contents .card .text_box{padding: 20px 20px 20px 0;}
    .md_contents .card_contents .card .text_box .sub_title{font-size: 17px;}
    .md_contents .card_contents .card .text_box p{font-size: 18px;}

    .bt_contents{ height: 370px; background-size: 100% 370px;}
    .bt_contents .bt_bg1 .bt_slide_title{margin: 20px 0 30px;}
    .bt_contents .bt_bg1 .bt_slide_title{font-size: 26px;}
    .bt_contents .bt_bg1{top: 55px;}
    .bt_contents .bt_bg1 .banner_pagination{bottom: 15px; left: 17vw;}
}

@media screen and (max-width: 1024px){
    .md_contents .card_contents{grid-template-columns: 1fr 1fr 1fr;}

    .slide_text{top: 9%;}
}


@media screen and (max-width:920px){
    .md_contents .card_contents .card .text_box{padding: 20px 0;}
    .md_contents .title{font-size: 26px;}

    .notice .title{font-size: 26px;}
    .notice .call{font-size: 24px;}

    .pop_basket{width: 70vw; padding: 20px;}

    .slide_text p{font-size: 15px; line-height: 1.8;}

}


@media screen and (max-width:768px){
    .wrap .notice{margin: 50px 20px;}

    .md_contents{margin: 0 20px; }
    .md_contents .more_view{margin-left: 0; float: right; font-size: 14px; line-height: 36px;}
    .md_contents .card_contents .card .text_box p{font-size: 16px;}
    .md_contents .card_contents .card .text_box .price{font-size: 20px;}

    #popup_mask{display: none;}
    .pop_basket{display: none;}

    .banner_contents{margin: 50px 0;}
    .banner_contents .slick-dotted.slick-slider{margin-bottom: 0;}
    .banner_contents .slick-dots{position: static;}

    .bt_contents{ height: 435px; background-size: 100% 435px; background-image: url(../images/bg_mo.png); margin: 30px 0;}
    .bt_contents .bt_bg1 .bt_slide_title{margin: 10px 0 30px;}
    .bt_contents .bt_bg1{top: 30px;}
    .bt_contents .bt_bg2{width: 1000px; left: 0; top: 190px;}

    .slide_item{width: 135px !important;}

    .main_slide, #container, #container2, .import_slide{height: 300px;}

    .slide_text .ch_color{font-size: 20px;}
    .slide_text div:nth-child(2){font-size: 24px;}
    .slide_text p{font-size: 14px;}
    .slide_text .arrow_icon .prevArrow,
    .slide_text .arrow_icon .nextArrow,
    .slide_text .arrow_icon .stop{ width: 8px; height: 14px; background-size: 8px;}
    .slide_text .arrow_icon .play{ width: 12px; height: 14px; background-size: 12px;}
    .slide_text{top: 0%; transform: translate(0); left: 0; margin-top: 80px;}

    #container2{background-image: url(../images/mo_bg1.jpg);}
    
    .wrap #container .slide_contents{left: -20px;}

    .banner_contents .banner_box .slick-slide{margin: 0 20px;}

    .bt_contents .bt_bg1 .banner_pagination{ left: calc(100vw - 50vw);}

    .notice .qeustion .f-contents2 .qna_list div:nth-child(2){font-size: 13px;}
    .notice .qeustion .f-contents3 .notice_list div:nth-child(2){font-size: 13px;}

}

@media screen and (max-width:720px){
    .md_contents .title{font-size: 20px; margin-bottom: 1rem;}

    .md_contents .card_contents .card .text_box{ padding: 20px 0 10px;}
    .md_contents .card_contents .card .text_box .category{ width: 75px; height: 28px; font-size: 14px; line-height: 23px; margin-bottom: 15px;}
    .md_contents .card_contents{grid-template-columns: 1fr 1fr;}
    .md_contents .card_contents .card .text_box .sub_title{font-size: 16px; font-weight: 400;}

    .bt_contents .bt_bg1 .bt_slide_title{line-height: normal; font-size: 22px;}
    .bt_contents .bt_bg1 .bt_slide_sub_title{font-size: 13px; font-weight: 500;}
    .bt_contents .bt_bg1 p .bt_view{font-size: 14px;}

    .notice .title{font-size: 20px;}
    .notice .qeustion{flex-direction: column; padding: 30px 0 0 0;}
    .notice h5{font-size: 17px; margin-bottom: 0.5rem;}
    .notice h5 span{font-size: 14px;}
    .notice .call{font-size: 20px;}
    .notice p{font-size: 14px;}

    .notice .qeustion .f-contents1{width: 100%; height: 150px; margin-bottom: 1rem; border-bottom: 1px solid #eaeaea;}
    .notice .qeustion .f-contents2{width: 100%; margin-bottom: 1rem; border-bottom: 1px solid #eaeaea; padding-bottom: 0.5rem;}
    .notice .qeustion .f-contents3{width: 100%;}
    .notice .qeustion .f-line{display: none;}
    .notice .qeustion .f-contents2 div, .notice .qeustion .f-contents3 div{font-size: 14px;}

    .pop_basket .pop_basket_inner .basket_option .basket_info h6{font-size: 16px;}
    .pop_basket .pop_basket_inner .basket_option .basket_info .after-price{font-size: 20px;}
    .pop_basket .pop_basket_inner .basket_option .basket_btn .sum_vat .all_sum{font-size: 20px;}
    .pop_basket .pop_basket_inner .basket_option .basket_btn .sum_vat div:nth-child(1){font-size: 16px;}

    input[id="p_num1"]{font-size: 15px;}

}


@media screen and (max-width:500px){
    .slide_text{margin-top: 110px;}
    .slide_text .ch_color{font-size: 18px;}
    .slide_text div:nth-child(2){font-size: 22px; margin: 0px 0 0.7rem;}
    .slide_text p{line-height: 1.2;}

    .md_contents .card_contents{gap: 10px;}
    .md_contents .card_contents .card .text_box .sub_title{font-size: 14px;}
    .md_contents .card_contents .card .text_box p{font-size: 12px; margin-bottom: 10px;}
    .md_contents .card_contents .card .text_box .price{font-size: 18px;}
    .md_contents .card_contents .card .text_box .price del{font-size: 14px;}
    .md_contents .card_contents .card .text_box .category{ width: 60px; height: 23px; font-size: 12px; line-height: 20px; margin-bottom: 10px; border: 1px solid #8380f8;}

    .wrap .notice{margin: 50px 20px 20px;}
    .notice h5{font-size:16px}
    .notice .qeustion{padding: 20px 0 0;}
    .notice .call{font-size: 16px;}

    .notice .qeustion .f-contents2 .qna_list, .notice .qeustion .f-contents3 .notice_list{margin: 8px 0;}
    .notice .qeustion .f-contents2 div, .notice .qeustion .f-contents3 div{font-size: 12px;}
    
    .banner_contents{margin: 30px 0 40px;}
    
}