@charset "utf-8";

@media(max-width:1800px){
#mairGnb{padding:20px 80px}
#mairGnb .mair_nav{gap:40px}
}
@media(max-width:1740px){
#mairGnb .mair_nav{justify-content:center;gap:25px}
#mainVisual .swiper{width:calc(100% - 70px)}
#mainVisual .swiper-slide{background-position-x:left !important}
#mainVisual .nav_wrap{width:calc(100% - 20px);}
}
@media(max-width:1400px){
.header_notice{padding:10px 20px;gap:40px}
.header_notice p{position:initial;transform:none}
.pop_box{height:400px}
.pop_box .top{height:278px}
.pop_box .btm{height:148px}
.pop_box .btm .num_wrap{margin-top:20px}
.pop_box .btm .num_wrap .sale{font-size:17px}
.pop_box .btm .num_wrap .price{font-size:17px}
.pop_box .btm .num_wrap .price span{margin-right:5px;font-size:14px}
.pop_box .btm .tit{width:auto;font-size:15px;line-height:22px;word-break:keep-all}
.inc_top_area h2{font-size:26px}
.inc_top_area h2:before{display:none}
.inc_top_area a{height:46px}
.m_box_wrap{margin-top:30px;gap:20px;grid-template-columns:repeat(4,1fr)}
#toTop{bottom:12%}
#mair_top .top_banner{padding:0 20px}
#mairGnb{padding:20px}
#mairGnb .mair_nav{gap:20px;font-size:15px}
#mairGnb .mair_nav li a{white-space:pre}
#mairGnb .side-banner{width:16%}
#mairGnb .side-banner .swiper-slide img{width:55px;height:55px}
#mainVisual .swiper-slide{background-position-x:center !important;height:220px}
#mainVisual .swiper-button-prev{width:36px;height:36px}
#mainVisual .swiper-button-next{width:36px;height:36px}
#mainVisual .txt_area{left:20px;top:40px;gap:14px}
#mainVisual .txt_area p{font-size:22px}
#mainVisual .txt_area .sub{font-size:17px}
#mainVisual .txt_area .main{line-height:36px}
#m_inc01{padding:40px 20px 60px}
#m_inc01 .pop_box .btm{height:116px}
#m_inc01 .pop_box .btm .txt_wrap{padding:15px 23px}
#m_inc01 .pop_box .btm .num{right:-2px;top:-3px;background-size:84%}
#m_inc02{height:102px;padding:0 20px;font-size:22px}
#m_inc02 .rotator{width:133px}
#m_inc02 .search_area{width:390px}
#m_inc02 .search_area{padding:0 20px}
#m_inc03{padding:60px 20px 70px}
#btm_banner{width:100%}
#m_ft{padding:60px 20px}
}

@media(max-width:1024px){
.header_notice{padding:10px 20px}
.header_notice p{font-size:13px;line-height:19px;word-break:keep-all}
.inc_top_area h2{font-size:22px}
.m_box_wrap{grid-template-columns:repeat(3,1fr)}
.inc_top_area a:hover{padding:0 26px}
.inc_top_area a{width:144px;font-size:14px}
.pop_box{height:400px} 
#hamBar{display:block}
#mairGnb{height:85px}
#mairGnb .side-banner{display:none}
#mairGnb .mair_nav{display:none}
#mair_top .top_banner{display:none}
#mainVisual .swiper{margin:20px auto 0}
#mainVisual .nav_wrap{top:53%}
#popup{position:fixed;}
#m_inc02{padding:40px;flex-flow:column;justify-content:center;gap:10px;font-size:20px}
#m_inc02 .lft_area{flex-flow:column}
#m_inc02{height:210px}
#m_inc02 .search_area{margin-top:20px}
#m_inc02 .lft_area:before{right:-28px}
#m_inc03 .pop_box .btm{padding:15px 12px}
#m_inc01 .pop_box .btm .txt_wrap{padding:15px 23px 15px 10px}
#m_ft{flex-flow:column;justify-content:center;text-align:center}
#m_ft .call_place{order:1;margin:0 auto 60px}
#m_ft .call_place .top{font-size:28px;gap:10px}
#m_ft .info_wrap{order:2}
#m_ft .info ul{margin:40px 0 20px;justify-content:center}
#toTop{width:60px;height:60px}

}

@media(max-width:768px){
#mainVisual{padding:106px 0 47px}
input, select{height:43px}
.m_box_wrap{grid-template-columns:repeat(2,1fr);gap:10px}
.inc_top_area a{height:42px}
.pop_box{height:385px}
.pop_box .top{height:250px}
.pop_box .btm .num_wrap{margin-top:0;display:block}
.pop_box .btm .num_wrap .price{margin-top:7px;font-size:16px;text-align:right}
.pop_box .btm .num_wrap .sale{font-size:16px}
.pop_box .btm .num_wrap .sale span{font-size:14px}
.pop_box .btm{height:auto !important}
.soldout .kor{font-size:18px}
.sub_banner{height:170px}
#popup{display:block;width:calc(100% - 20px);}
#popup .box.popup{position:absolute;}
#mainVisual .swiper{width:calc(100% - 40px);}
#mainVisual .swiper-slide{width:100% !important}
#mainVisual .txt_area{top:30px;gap:8px}
#mainVisual .txt_area p{font-size:20px;line-height:32px}
#mainVisual .txt_area .sub{font-size:15px}
#mainVisual .txt_area .s_txt{font-size:14px}
#mainVisual .nav_wrap{display:none}
#m_inc01{padding:40px 20px}
#m_menu .bg_menu{width:calc(100% / 2 + 90px)}
#m_inc01 .pop_box .btm .tit{padding-right:16px}
#m_inc01 .pop_box .btm .txt_wrap{gap:20px;padding:15px 10px}
#m_inc02 .lft_area{font-size:18px;gap:25px}
#m_inc03{padding:40px 20px}
#m_inc03 .pop_box .btm{gap:20px;padding:15px 10px}
#m_ft .call_place{width:100%}
#m_ft .copy p{margin-top:20px}
#m_ft .call_place{margin:0 auto 30px}
#m_ft{padding:40px 20px 80px}
#m_ft .call_place:after{top:17px;right:10px;background-size:80%}
#login{margin:70px auto 120px;padding:0 20px}
}

@media(max-width:480px){
#mairGnb .logo_area img{max-height:26px}
.header_notice{flex-flow:column;gap:10px;align-items:flex-start}
.pop_box{height:auto}
.pop_box .top{height:185px}
.pop_box .btm{height:auto}
.pop_box .btm .tit{font-size:13px}
#m_inc01 .pop_box .btm .txt_wrap{gap:10px}
.pop_box .btm .num_wrap .sale{font-size:15px}
.pop_box .btm .num_wrap .sale span{font-size:13px}
.pop_box .btm .num_wrap .price span{margin-right:4px}
.pop_box .btm .num_wrap .price{font-size:15px;text-align:right}
.bedge{bottom:5px;left:5px;right:initial;top:initial;text-align:center;font-size:12px}
.bedge p{padding:5px 9px;font-size:11px;border-radius:4px}
.inc_top_area a{width:115px;height:36px;padding:0 26px}
.inc_top_area h2{font-size:20px}
.m_box_wrap{margin-top:30px}
.soldout .kor{font-size:16px}
#m_menu .bg_menu{width:100%}
#m_menu .m_area a{padding:0 25px}
#m_menu .t_menu{padding:33px 15px 40px}
#toTop{filter:drop-shadow(2px 2px 6px #999)}
#mainVisual{padding:86px 0 22px}
#mainVisual .txt_area .sub{font-size:15px}
#mainVisual .txt_area p{color:#fff}
#mainVisual .txt_area p span::before{opacity:.7;}
#mainVisual .txt_area .sub{color:rgba(255, 255, 255, .8)}
#mainVisual .txt_area .s_txt{color:rgba(255, 255, 255, .8)}
#mainVisual .swiper{margin:0;width:100%}
#mainVisual .swiper-slide{height:195px;background-position-x:right !important;border-radius:0}
#mainVisual .swiper-slide .bg{display:block;position:absolute;width:100%;height:100%;left:0;top:0;background-color:rgba(0, 0, 0, 0.6)}

#mainVisual .swiper-pagination{display:none}
#mainVisual .txt_area{top:20px;text-align:center;left:0;width:100%;align-items:center}
#mainVisual .txt_area .main{line-height:33px}
#m_inc01{padding:10px 15px 40px}
#m_inc01 .pop_box .btm{height:auto;gap:10px}
#m_inc01 .pop_box .btm .tit{word-break:normal}
#m_inc02 .search_area{width:320px}
#m_inc03{padding:40px 15px}
#m_inc03 .pop_box .btm{height:auto;gap:10px}
#btm_banner{margin-bottom:0}
#btm_banner .m_img{display:block}
#btm_banner .pc_img{display:none}
#m_ft .call_place{font-size:14px}
#m_ft .call_place .top{margin-bottom:20px;font-size:26px}
#m_ft .info .site_name{font-size:20px}
#m_ft .info ul{font-size:14px}
#m_ft .info div{font-size:14px}
#m_ft .copy p{font-size:13px}
#m_ft .call_place .pre{white-space:pre-line}
#login .eng{font-size:25px}
#login .input_wrap div p{font-size:14px}
#login .input_wrap a{font-size:14px}
#login .input_wrap div input{height:55px}
#login .login_btn{height:55px;font-size:16px}
#login .btm_txt{font-size:14px}
}

@media(max-width:380px){
.bedge p{padding:5px}
.pop_box .btm .num_wrap .price{font-size:14px}
.jo_btn{font-size:14px}
.agree_checkbox label{font-size:14px}
#product_info .menu li{padding:0 18px}
#login{margin:130px auto 80px}
#login .eng{font-size:22px}
#mainVisual .txt_area .sub{font-size:14px}
#m_menu .m_area a{padding:0 15px}
#m_inc02 .search_area{width:265px}
#popup .con{padding:30px 20px;font-size:14px}
#popup .con .type{font-size:13px}
#popup .con .title{margin:6px 0 11px;font-size:16px}
#popup .btn_bk{margin-top:24px}
}