@charset "utf-8";
/* 원본 */
/*.wrapper{flex-direction:column;display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%;position:absolute;left:0;top:0;right:0;overflow:hidden;word-break:keep-all;}*/
.wrapper{flex-direction:column;display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%;position:absolute;left:0;top:0;right:0;overflow:hidden;word-break:keep-all;}
/* 수정 [이거 쓰면 기능이 대체로 이상해짐] */
/*.wrapper{flex-direction:column;display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%;position:relative;left:0;top:0;right:0;overflow:hidden;word-break:keep-all;}*/
.wrapper.gray{background:#f3f3f3;}
.wrapper.black{background:#1E1E1E;}

/* header add-item-wrap [앱 설치] */
.ad-item-wrap{width:100%;height:46px;overflow:hidden;background:#F6E1D5;border-bottom:1px solid #F4D9CB;display:flex;justify-content:flex-start;align-items:center;}
.ad-item-wrap .mtit{display:flex;margin-left:16px;width:100%;flex:1;font-size:14px;color:#5C5857;}
.ad-item-wrap .mtit strong{font-size:14px;color:#5C5857;font-weight:700;}
.ad-item-wrap .btn-app-download{width:102px;height:22px;border-radius:11px;border:0;padding:0;background:#E9B397;display:flex;justify-content:center;align-items:center;}
.ad-item-wrap .btn-app-download span{display:flex;margin-right:4px;font-size:12px;color:#fff;font-weight:700;}
.ad-item-wrap .btn-app-download img{display:flex;}
.ad-item-wrap .btn-ad-close{margin:0 16px 0 9px;border:0;padding:0;width:20px;height:20px;background:transparent;display:flex;justify-content:center;align-items:center;}
.ad-item-wrap .btn-ad-close img{}

/*header*/
header{z-index:30;background:#fff;flex-direction:column;display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:auto;overflow:hidden;}
header.type01{border-bottom:0;}
header .biz{width:calc( 100% - 40px );padding:0 20px;height:auto;overflow:hidden;font-size:12px;color:#5f5f5f;margin-top:8px;}
header .rela{display:flex;justify-content:flex-start;align-items:center;width:100%;height:auto;overflow:hidden; }
header .rela .l-wrap{margin-left:8px;min-width:80px;display:flex;justify-content:flex-start;align-items:center;height:40px;overflow:hidden;}
header .rela .l-wrap a{display:flex;justify-content:center;align-items:center;}
header .rela .l-wrap a i{font-size:28px;color:#363636;font-weight:bold;}
header .rela .l-wrap a img{width:110px;}
header .rela .l-wrap a.btn-back{overflow:hidden;width:24px;height:24px;}
header .rela .l-wrap a.btn-back img{}
header .rela .l-wrap a.btn-header-allmenu{overflow:hidden;width:59px;height:59px;}
header .rela .l-wrap a.btn-header-allmenu img{width:20px;height:17px;}
header .rela .l-wrap a .mj{margin-top:-5px;margin-left:5px;}
header .rela .view-header{width:100%;height:57px;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-direction:column;}
header .rela .view-header .vtit{width:100%;height:auto;overflow:hidden;text-align:center;font-size:16px;color:#282828;font-weight:700;}
header .rela .view-header .vdate{margin-top:4px;width:100%;height:auto;overflow:hidden;text-align:center;font-size:14px;color:#2D2B2A;word-spacing:8px;}
header .rela .view-header .vdate.t01{word-spacing:0px;}
header .rela .view-header .vdate strong{font-size:14px;color:#2D2B2A;font-weight:700;}
header .rela .c-wrap{font-size:16px;color:#282828;font-weight:700;display:flex;justify-content:center;align-items:center;width:100%;height:auto;flex:1;}
header .rela .c-wrap img{display:flex;}
header .rela .c-wrap span{display:flex;margin-left:4px;font-size:18px;color:#fff;font-weight:bold;}
header .rela .r-wrap{margin-right:8px;min-width:80px;font-size:16px;color:#ee8280;font-weight:bold;display:flex;justify-content:flex-end;align-items:center;height:40px;overflow:hidden;}
header .rela .r-wrap a{width:38px;height:38px;display:flex;justify-content:center;align-items:center;position:relative;}
header .rela .r-wrap a img{width:24px;}
header .rela .r-wrap a.btn-header-close{width:24px;height:24px;}
header .rela .r-wrap a.btn-search{overflow:hidden;width:20px;height:20px;margin-right:16px;}
header .rela .r-wrap a.btn-search img{width:18px;height:18px;}
header .rela .r-wrap a.btn-home{overflow:hidden;width:20px;height:20px;margin-right:8px;}
header .rela .r-wrap a.btn-home img{width:18px;height:18px;}

/* 0623 */
header .rela .r-wrap a.btn-cart{overflow:visible;width:20px;height:20px;margin-right:8px;}
/*header .rela .r-wrap a.btn-cart{overflow:hidden;width:20px;height:20px;margin-right:8px;}*/
header .rela .r-wrap a.btn-cart img{width:18px;height:18px;}

header .rela .r-wrap a.btn-home + .btn-cart{margin-left:8px;}
header .rela .r-wrap a.btn-alarm{overflow:hidden;width:20px;height:20px;margin-right:8px;}
header .rela .r-wrap a.btn-alarm img{width:18px;height:18px;}
header .rela .r-wrap a.btn-close{overflow:hidden;width:20px;height:20px;margin-right:8px;}
header .rela .r-wrap a.btn-close img{width:18px;height:18px;}
header .logo-wrap{width:calc( 100% - 30px );padding-left:30px;height:40px;overflow:hidden;background:#5bbae0;display:flex;justify-content:flex-start;align-items:center;}
header .logo-wrap img{display:flex;}
header .logo-wrap img.x{margin:0 6px;}

header.view-type{position:absolute;left:0;top:0;border-bottom:0;background:transparent;}
header.view-type .rela .l-wrap a i{color:#fff;}
.black header{border-bottom:0;background:#1E1E1E;}
.black header .rela .c-wrap{color:#fff;}
.black header img{filter: brightness(0) saturate(100%) invert(93%) sepia(3%) saturate(3846%) hue-rotate(202deg) brightness(113%) contrast(105%);}

header.type01 .rela{}
header.type01 .rela .l-wrap{height:60px;width:100%;flex:1;}
header.type01 .rela .l-wrap a.btn-home{overflow:hidden;width:110px;height:40px;}
header.type01 .rela .r-wrap{height:60px;margin-right:0;}
header.type01 .rela .r-wrap a.btn-search{overflow:hidden;width:20px;height:20px;margin-right:15px;}
header.type01 .rela .r-wrap a.btn-search img{width:17px;height:17px;}
/* 0623 */
header.type01 .rela .r-wrap a.btn-cart{overflow:visible;width:20px;height:20px;margin-right:15px;}
/*header.type01 .rela .r-wrap a.btn-cart{overflow:hidden;width:20px;height:20px;margin-right:15px;}*/
header.type01 .rela .r-wrap a.btn-cart img{width:17px;height:17px;}

header .search-item-wrap{width:calc( 100% - 2px + 88px );height:38px;border:1px solid #ccc;border-radius:20px;overflow:hidden;display:flex;justify-content:flex-start;align-items:center;margin-left:-44px;margin-right:-30px;position:relative;margin-top:12px;margin-bottom:12px;}
header .search-item-wrap button{outline:none;margin-left:6px;width:28px;height:28px;border-radius:50%;border:0;background:#E9B397;display:flex;justify-content:flex-start;align-items:center;}
header .search-item-wrap button.btn-keyword-remove{display:none;background: url(../../asset/image/ico/ico-keyword-remove01.svg) no-repeat center center;width: 20px;height: 20px;margin-left:0;top:10px;background-size:20px 20px;}
header .search-item-wrap button.btn-keyword-remove.on{display:flex;}
header .search-item-wrap .inp{outline:none;border:0;padding-left:8px;height:40px;padding-right:40px;}

.header-slide-menu{width:100%;height:40px;overflow:hidden;position:relative;}
.header-slide-menu.type01{border-top:0;}

.header-slide-menu .swiper-container{width:100%;}
.header-slide-menu .swiper-container .swiper-wrapper{}
.header-slide-menu .swiper-container .swiper-wrapper .swiper-slide{width:100%;}
.header-slide-menu .swiper-container .swiper-wrapper .swiper-slide a{width:100%;font-size:14px;color:#ccc;display:flex;height:40px;justify-content:center;align-items:center;position:relative;}
.header-slide-menu .swiper-container .swiper-wrapper .swiper-slide a:before{content:"";width:100%;height:1px;overflow:hidden;display:block;position:absolute;left:0;bottom:0;background:#EBEBEB;}
.header-slide-menu .swiper-container .swiper-wrapper .swiper-slide a.on{color:#4BBFCE;font-weight:700;}
.header-slide-menu .swiper-container .swiper-wrapper .swiper-slide a.on:before{height:5px;background:#4BBFCE;}

.myp-slide-menu{width:100%;height:50px;overflow:hidden;position:relative;}
.myp-slide-menu.type01{border-top:0;}
.myp-slide-menu:before{content:"";width:100%;height:1px;overflow:hidden;display:block;position:absolute;left:0;bottom:0;background:#EBEBEB;}
.myp-slide-menu .swiper-container{width:calc( 100% - 52px );padding-left:26px;padding-right:26px;}
.myp-slide-menu .swiper-container .swiper-wrapper{}
.myp-slide-menu .swiper-container .swiper-wrapper .swiper-slide{width:auto;}
.myp-slide-menu .swiper-container .swiper-wrapper .swiper-slide a{font-size:16px;color:#5C5857;display:inline-flex;height:56px;justify-content:center;align-items:center;position:relative;}
.myp-slide-menu .swiper-container .swiper-wrapper .swiper-slide a.on{color:#111;}
.myp-slide-menu .swiper-container .swiper-wrapper .swiper-slide a.active{color:#5C5857;font-weight:700;}

/*container*/
.container{
    /*position:absolute;width:100%;height:100%;flex:1;overflow:hidden;overflow-y:auto;*/
    position:relative;width:100%;height:100%;flex:1;overflow:hidden;overflow-y:auto;

    /* IOS 때문에 추가 */
    padding-bottom: calc(72px + env(safe-area-inset-bottom)); /* 지원되면 이 값이 적용 */
}

body.form-active .wrapper{position:static;height:auto;}
body.form-active header{position:fixed;left:0;top:0;}
body.form-active .container{padding-top:60px;height:auto;}
body.form-active .fixed-wrap{position:fixed;left:0;bottom:0;}

footer{ position: fixed; left: 0; right: 0; bottom: 0; background: #fff; z-index: 60;}
/*footer{width:100%;height:auto;overflow:hidden;}*/
footer ul{width:100%;height:auto;overflow:hidden;display:flex;justify-content:center;align-items:center;}
footer ul li{width:100%;height:auto;overflow:hidden;flex:1;display:flex;justify-content:center;align-items:center;}
footer ul li a{ width:100%;height:72px;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative; }
/*footer ul li a{width:100%;height:72px;overflow:hidden;display:flex;justify-content:center;align-items:center;position:relative;}*/
/*footer ul li a img{filter: brightness(0) saturate(100%) invert(30%) sepia(17%) saturate(661%) hue-rotate(336deg) brightness(98%) contrast(87%);}*/
footer ul li a.on{position:relative;}
footer ul li a:before{content:"";width:100%;height:1px;overflow:hidden;display:block;background:#F7F7F7;position:absolute;left:0;top:0;}
footer ul li a.on:before{height:2px;background:#4BBFCE;}
footer ul li a.on img{filter: brightness(0) saturate(100%) invert(75%) sepia(45%) saturate(531%) hue-rotate(138deg) brightness(82%) contrast(96%);}