/* COMMON */
.notScroll_modal {overflow: hidden; width: 100%; height: 100%; touch-action: none;}
body {touch-action: manipulation;}
#wrap { min-height: 100dvh; display: flex; flex-direction: column; width: 100%; max-width: 720px; margin: 0 auto; background-color: #f8f8f8; overflow-x: hidden; position: relative;}
.inner {padding: 0 3rem;}
.color { color: #00589f;}

header { height: 9.5rem; flex-shrink: 0;}
header .inner{display: flex; align-items: center; justify-content: space-between; height: 100%;}
header a {display: block; text-align: center;}
header .hd_logo {width: 15rem;}
header .hd_menu { display: flex; align-items: center; gap: 1rem;}
header .hd_menu a {width: 4.8rem;}

#header2 { background-color: #fff; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); position: relative;}
#header2 .title{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#header2 .title h2 { font-size: 3rem; font-weight: 700;}
#header2 .close_btn { width: 3.5rem; aspect-ratio: 1/1;}

main {padding: 2.5rem 0 10rem;}

/* splash */
#splash {display: flex; align-items: center; justify-content: center; height: 100dvh;}
#splash img {width: 90%;}

/* nav */
nav { margin-bottom: 3.2rem;}
nav ul {display: flex; align-items: center;}
nav .swiper-slide {padding-bottom: 0.5rem; position: relative;  width: auto !important; display: inline-block; margin-right: 4.6rem;}
nav .swiper-slide:first-child {margin-left: 3.3rem;}
nav .swiper-slide:last-child {margin-right: 3.3rem;}
nav .swiper-slide a { height: 100%; font-size: 3rem;} 
nav .swiper-slide.on a {font-weight: 800; color: #00589f; font-size: 3.4rem; position: relative;}
nav .swiper-slide.on::after {content:''; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); height: 1px; width: 100%; background-color: #00589f;}

/* checkbox */
.checkbox_wrap {display: flex; align-items: center; position: relative; flex-shrink: 0;}
.checkbox_wrap input[type="checkbox"],
.checkbox_wrap input[type="checkbox"] + i {width: 4rem; aspect-ratio: 1/1; flex-shrink: 0;}
.checkbox_wrap input[type="checkbox"] { position: absolute; top: 50%; left: 0; transform: translateY(-50%); cursor: pointer;}
.checkbox_wrap input[type="checkbox"] + i {background: #fff url(../img/icon-7.png) repeat center / contain; display: block; border-radius: 0.2rem;}
.checkbox_wrap input[type="checkbox"]:checked + i {background: #fff url(../img/icon-5.png) repeat center / contain;}

/* top_category category_swiper */
.top_category { margin-bottom: 3.5rem;}
.top_category .category_swiper { overflow: revert;}
.top_category .category_swiper .swiper-slide { width: auto !important;}
.top_category .category_swiper .swiper-slide button {min-width: 16rem; height: 7rem; border-radius: 500px; box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.2); background-color: #eaeaea; font-size: 2.8rem; color: #00589f; margin-right: 2.5rem; font-weight: 700;}
.top_category .category_swiper .swiper-slide button.active { background-color: #eecc13; border: 0.4rem solid #00589f;}

/* category_modal.php */
#category_modal { position: fixed; top: 0; left: 50%; transform: translateX(-50%); max-width: 720px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1; display: none;}
#category_modal .category_inner { position: relative;}
#category_modal .category_box { position: absolute; top: 0; right: 0; width: 70%; height: 100dvh; background-color: #fff; padding: 6rem 3rem 3rem;}

#category_modal .category_box .ctgr_inner { position: relative; display: flex; flex-direction: column; height: 100%;}
#category_modal .category_box .title { font-size: 3rem; font-weight: 700; flex-shrink: 0; padding-bottom: 2rem; border-bottom: 1px solid #8c8c8c;}
#category_modal .category_box .ctgr_list { display: flex; flex-direction: column; gap: 3.5rem; flex: 1; min-width: 0; overflow: auto; padding: 3.5rem 0;}
#category_modal .category_box .ctgr_item {display: flex; align-items: center; justify-content: space-between;}
#category_modal .category_box .ctgr_item label { font-size: 2.6rem; cursor: pointer;}
#category_modal .category_box button { flex-shrink: 0; width:100%; height: 7rem; font-size: 2.4rem; background-color: #00589f; border-radius: 1rem; color: #eecc13; font-weight: 600; margin-top: 0.5rem;}


/* view 공통 */
.info_area .info_item { border-bottom: 1px solid #00589f; padding: 4rem 0;}
.info_area .info_item:last-child { border-bottom: none;}
.info_area .info_title { display: flex; align-items: center; justify-content: space-between;}
.info_area .info_con {display: flex; flex-direction: column; gap: 5rem;}
.info_area .info_con span { font-size: 2.6rem; line-height: 1.4; display: block;}
.info_area .info_con p { font-size: 2.6rem; font-weight: 300; color: #777; line-height: 1.3;}
.info_area .info_con .txt_box:first-child {margin-top: 2.5rem;}

.info_area .info_item .view_btn { transition: transform 0.3s ease; width: 3.5rem;}
.info_area .info_item .view_btn.active { transform: rotate(180deg);}


/* 검색결과  no-result*/
.no-result {
    padding: 18rem 0;
    text-align: center;
    font-size: 4rem;
    color: #666;
  }

/* pagination */
.pagination { display: flex; align-items: center; justify-content: center; margin-top: 5rem; gap: 2rem;}
.pagination .page-arrow { width: 3rem; display: block;}
.pagination .page_numbers { display: flex; align-items: center; gap: 2rem;}
.pagination .page_numbers .page{ font-size: 3rem;}
.pagination .page_numbers .page.active { color: #00589f; font-weight: 700;}

/* home.php */
.search_area { display: flex; align-items: center; border-radius: 10rem; background-color: #fff; padding: 2.7rem 4rem; border: 1px solid #00589f; margin-bottom: 5rem;}
.search_area input { background-color: transparent; font-size: 3rem; outline: none; flex: 1; min-width: 0; font-weight: 300; padding-right: 4rem;}
.search_area input::placeholder { }
.search_area img{ width: 4rem; flex-shrink: 0;}

#home .sec_vis { width: 100%; height: 28rem; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 2rem; padding: 3.3rem 3rem; position: relative; margin-bottom: 7rem;}
#home .sec_vis h2 { color: #fff; font-size: 3.5rem; font-weight: 600; letter-spacing: -0.16rem;}
#home .sec_vis img { width: 18rem; position: absolute; bottom: 3rem; right: 2.8rem;}

section .sec_headline {display: flex; align-items: center; margin-bottom: 4.3rem;} 
section .sec_headline .text_wrap { display: flex; flex-direction: column; flex: 1; min-width: 0;}
section .sec_headline .text_wrap h2 { font-size: 4rem; font-weight: 600; color: #00589f; letter-spacing: -0.2rem;}
section .sec_headline .sec_btn a {font-size: 3rem;}

.category_list{ display: grid; grid-template-columns: repeat(3,1fr); gap: 8rem 6rem;}
.category_list .category_item { display: flex; flex-direction: column; align-items: center;}
.category_list .category_item a {width: 100%;}
.category_list .category_item .img_wrap { width: 100%; height: 15rem; border-radius: 2rem; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); background-color: #fff; background-position: center; background-repeat: no-repeat; background-size: 104%;}
.category_list .category_item p { font-size: 2.5rem; text-align: center; margin-top: 2.2rem; line-height: 1.2;}
#home .sec1 { margin-top: 7rem;}
#home .sec1 .category_list .category_item:last-child .img_wrap {border: 1px solid #00589f; background-size: 6rem;}

#home .sec2 { padding-top: 13rem;}
.product_list { display: grid; grid-template-columns: repeat(1, 1fr); gap: 7rem;}
.product_list .product_item a { border-radius: 2rem; background: #d2e6ed; padding: 3rem; display: flex; gap: 2rem; position: relative; box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.2);}
.product_list .product_item a .img_wrap { width: 25rem; aspect-ratio: 1/1; overflow: hidden;}
.product_list .product_item a .img_wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
.product_list .product_item a .text_wrap { display: flex; flex-direction: column;  flex: 1;}
.product_list .product_item a .text_wrap h3 { font-size: 4rem; font-weight: 700; line-height: 1.2;}
.product_list .product_item a .text_wrap h4 { font-size: 2.9rem; font-weight: 700; line-height: 1.2;}
.product_list .product_item a .text_wrap p { font-size: 2.4rem; line-height: 1.2;}
.product_list .product_item a .text_wrap .product-name { flex: 1; min-height: 0; padding-top: 2.4rem;}
.product_list .product_item a .text_wrap .product-name p { margin-top: 0.5rem;}
.product_list .product_item a .text_wrap .product-price { flex-shrink: 0; padding-bottom: 2.4rem;}
.price-won { font-size: inherit; font-weight: inherit;}
.price-won::before{content: '₩'; margin-right: 0.2rem;}
.product_list .product_item a button { position: absolute; bottom: 3rem; right: 3rem; width: 4.5rem; aspect-ratio: 1/1;}

/* discount.php */
#discount .search_area { margin-bottom: 3rem;}
#discount .product_list { gap: 4rem;}

/* store.php */
#store .sec1 .store_list { display: flex; flex-direction: column; gap: 5rem;}
#store .sec1 .store_item a { background-color: #fff; border-radius: 2rem; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); padding: 3.8rem 3.3rem; display: flex; flex-direction: column;}
#store .sec1 .store_item a h3 { font-size: 3rem; color: #00589f; font-weight: 700;}
#store .sec1 .store_item a p {font-size: 2.8rem; letter-spacing: -0.2rem; margin-top: 1rem; line-height: 1.3;}

/* store_view.php */
#store_view .info_area .info_title h4 { font-size: 3.2rem ; font-weight: 600;}

/* product.php */
#product .search_area { margin-bottom: 3rem;}

/* product_view.php */
#product_view .product_item { border-radius: 2rem; background: #d2e6ed; padding: 3rem; display: flex; gap: 2rem; position: relative; box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.2);}
#product_view .product_item .img_wrap { width: 25rem; aspect-ratio: 1/1; overflow: hidden;}
#product_view .product_item .img_wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;}
#product_view .product_item .text_wrap { display: flex; flex-direction: column; justify-content: space-between; flex: 1; gap: 2rem;}
#product_view .product_item .text_wrap h3 { font-size: 4rem; font-weight: 700; line-height: 1.2;}
#product_view .product_item .text_wrap h4 { font-size: 2.9rem; font-weight: 700; line-height: 1.2;}
#product_view .product_item .text_wrap p { font-size: 2.4rem; line-height: 1.2;}
#product_view .product_item .text_wrap .product-name p { margin-top: 0.5rem;}
#product_view .product_item .text_wrap .product-name { flex: 1; min-height: 0; padding-top: 2.4rem;}
#product_view .product_item .text_wrap .product-price { flex-shrink: 0; padding-bottom: 2.4rem;}
#product_view .product_item .text_wrap span.price-won { font-size: inherit; font-weight: inherit;}
#product_view .product_item .text_wrap span.price-won::before{content: '₩'; margin-right: 0.2rem;}
#product_view .product_item button { position: absolute; bottom: 3rem; right: 3rem; width: 4.5rem; aspect-ratio: 1/1;}
#product_view .info_area .info_item.top_item .txt_box span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
#product_view .info_area .info_title h4 { font-size: 3rem ; color: #00589f; font-weight: 600;}

/* cart.php */
#cart { padding-top: 4.5rem; }
#cart .select_all_wrap { margin-bottom: 4.5rem;}
#cart .select_all_wrap label { font-size: 3rem; font-weight: 700; margin-left: 1.8rem;}
#cart .select_all_wrap label span { font-size: inherit; font-weight: inherit;}
#cart .cart_list { display: flex; flex-direction: column; gap: 5rem;}
#cart .cart_item { background-color: #fff; border-radius: 2rem; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); padding: 3.8rem 3.3rem; display: flex; flex-direction: column;}
#cart .cart_item .top_wrap { display: flex; align-items: flex-start; gap: 2rem;}
#cart .cart_item .top_wrap  .del_btn { width: 3.2rem;}
#cart .cart_item .product_name { flex: 1; min-width: 0;}
#cart .cart_item .product_name h3 { font-size: 3rem; font-weight: 700; line-height: 1.3;}
#cart .cart_item .product_name p {font-size: 2.8rem; letter-spacing: -0.2rem; margin-top: 1rem; line-height: 1.2;}
#cart .cart_item .product_wrap { padding-left: 6rem; display: flex; align-items: flex-end; margin-top: 3rem;}
#cart .cart_item .product_wrap .product_detail { flex: 1; min-width: 0; display: flex; align-items: flex-end; gap: 2rem;}
#cart .cart_item .product_wrap .img_box { width: 12.5rem; aspect-ratio: 1/1; background-position: center; background-repeat: no-repeat; background-size: cover;}
#cart .cart_item .product_wrap .unit_price {font-size: 2.6rem;}
#cart .cart_item .product_wrap .quantity_box { flex-shrink: 0; height: 5rem; display: flex; border: 1px solid #00589f; border-radius: 1rem; overflow: hidden; gap: 1px;}
#cart .cart_item .product_wrap .quantity_box .input_quantity { width: 5.8rem; text-align: center; font-size: 2.8rem; outline: none; cursor: default;}
#cart .cart_item .product_wrap .quantity_box button { height: 100%; aspect-ratio: 1/1; background-color: #d2e6ed; border-radius: 1rem; box-shadow: 0 0 0 1px #00589f;}
#cart .cart_item .product_wrap .quantity_box button img { width: 3rem;}
#cart .cart_item .price_wrap { margin-top: 2.4rem;}
#cart .cart_item .price_wrap h5{ text-align: right; font-size: 3rem; font-weight: 700;}
#cart .cart_item .price_wrap h5 span { margin-left: 2rem;}
#cart .allproduct_wrap {  background-color: #fff; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2); padding: 3.8rem 3.3rem; display: flex; flex-direction: column; margin-top: 5rem; gap: 2rem;}
#cart .allproduct_wrap .text_item { display: flex; align-items: center; justify-content: space-between;}
#cart .allproduct_wrap .text_item h5,
#cart .allproduct_wrap .text_item p {font-size: 2.8rem;}