@charset "utf-8";

/* sub */
.sub_visual .inner { padding: 150px 0; }
.sub_visual h2 { font-size: 4rem; text-align: center; color: #FFF; }


.bg_brand { background: url('https://image.osulloc.com/kr/ko/static_cdj/others/image/stdd/osl_stdd_th1/osl_stdd_th1_2-6.jpg') no-repeat center / cover; }
.bg_product { background: url('https://image.osulloc.com/kr/ko/static_cdj/others/image/stdd/osl_stdd_th1/osl_stdd_th1_2-2.jpg') no-repeat center / cover; }
.bg_store { background: url('https://image.osulloc.com/kr/ko/static_cdj/others/image/stdd/osl_stdd_th1/osl_stdd_th1_2-5.jpg') no-repeat center / cover; }
.bg_cs { background: url('https://image.osulloc.com/kr/ko/static_cdj/others/image/stdd/osl_stdd_th1/osl_stdd_th1_1_bg_pc.jpg') no-repeat center / cover; }

.breadcrumbs { padding: 20px 0 0; display: flex; gap: 40px; justify-content: center; align-items: flex-end; }
.breadcrumbs li:not(:first-child)::before { content: ''; display: block; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: translate(-25px,15px) rotate(45deg); }
.breadcrumbs li a { color: #fff; }

.lnb { background: rgba(0,0,0,0.3); backdrop-filter: blur(10px); }
.lnb ul { display: flex; justify-content: center; }
.lnb ul li a { display: block; padding: 20px 100px; color: #fff; }
.lnb ul li a.on { background: #fff; color: #000; }

@media (max-width:1024px) {
    .sub_visual .inner { padding: 100px 0; }
    .sub_title h2 { font-size: 3rem; }
    .lnb ul li a { padding: 15px; }
}


.contents { padding: 150px 0; }
.contents h3 { display: none; }

/*intro*/
.intro{text-align: center;}
.intro .story {margin-bottom: 50px;}
.intro .story figcaption h4{margin: 50px 0; font-size: 3rem;}
.intro .story figcaption p{margin-bottom: 20px;}


@media (max-width:470px) {
  .intro .story figcaption h4{font-size: 2rem;}
  .intro .story figure img{width: 80%;}
}

/* product */
.product h3 { font-size: 3rem; padding: 10px 0 50px; }
.product .product_list { display: flex; gap: 20px; flex-wrap: wrap; }
.product .product_list li { width: calc((100% - 60px) / 4); background: #EEE; text-align: center; position: relative; padding: 0 0 50px; }
.product .product_list li img { width: 100%; }
.product .product_list li .overbox { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.9); width: 100%; height: 100%; transition: all 0.5s; }
.product .product_list li:hover .overbox { opacity: 1; }
.product .prd_name { font-size: 2rem; }
.product .price { font-size: 3rem; color: #FFF; font-weight: 700; }
.product .sale { font-size: 2rem; color: #666; text-decoration: line-through; }
.product a.cart { width: 50%; padding: 10px 0; background: #fd5d5d; color:#FFF; }
.product a.more { width: 50%; padding: 10px 0; background: #FFF; }


@media (max-width:1024px) {
    .product .product_list li { width: calc((100% - 20px) / 2); }
}



/* store */
.store .store_list { display: flex; flex-wrap: wrap; gap: 20px; }
.store .store_list li { width: calc((100% - 20px) / 2); background: #EEE; }
.store .store_list li img { width: 100%; }
.store .store_list li dl { padding: 30px 40px; }
.store .store_list li dl dt { font-size: 2.5rem; font-weight: 700; }
.store .store_list li dl dd { color:#999; padding: 10px 0 0; }

@media (max-width:1024px) {
    .store .store_list li { width: 100%; }
    .store .store_list li dl dt { font-size: 2rem; }
}


/* notice */
.notice .notice_search div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.notice .notice_search div > * { font-family: var(--main-font); font-size: 1.4rem; height: 40px; }
.notice .notice_search select { background: url('../images/sub/chevron-down.svg') no-repeat right 10px center; appearance: none; padding: 0 40px 0 10px; border: 1px solid #CCC; }
.notice .notice_search input[type="text"] { border: 1px solid #CCC; padding: 5px; border-radius: 0; }
.notice .notice_search .search_btn { padding: 10px 20px; color:#FFF; background: #758246; border: 0; }

.notice table { margin: 50px 0; }
.notice table tr > :nth-child(1) { width: 10%; }
.notice table tr > :nth-child(2) { width: 65%; }
.notice table tr > :nth-child(3) { width: 15%; }
.notice table tr > :nth-child(4) { width: 10%; }

.notice table tbody tr { transition: all 0.5s; }
.notice table tbody tr:hover { background: #eee; }

.notice table tr th { padding: 1.25em; border-top: 1px solid #666; border-bottom: 1px solid #ccc; }
.notice table tr td { padding: 1.25em; border-bottom: 1px solid #f0f0f0; text-align: center; }
.notice table tr td:nth-child(2) { text-align: left; max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.notice .paging { display: flex; justify-content: center; gap: 5px; align-items: center; }
.notice .paging li a { display: block; width: 35px; height: 35px; padding: 5px; text-align: center; border: 1px solid #ddd; }
.notice .paging .p_first a { border: 0; width: 20px; font-size: 0; background: url('../images/sub/paging_first.png') no-repeat center; }
.notice .paging .p_prev a { border: 0; width: 20px; font-size: 0; background: url('../images/sub/paging_prev.png') no-repeat center; }
.notice .paging .p_next a { border: 0; width: 20px; font-size: 0; background: url('../images/sub/paging_next.png') no-repeat center; }
.notice .paging .p_last a { border: 0; width: 20px; font-size: 0; background: url('../images/sub/paging_last.png') no-repeat center; }
.notice .paging li.on { width: 35px; height: 35px; padding: 5px; text-align: center; border: 1px solid #758246 !important; background: #758246; color: #FFF; }


@media (max-width:1024px) {
  .contents { padding: 100px 0; }
  .notice table { font-size: 1.4rem; }
  .notice table tr > :nth-child(1) { display: none; }
  .notice table tr > :nth-child(2) { width: 85%; }
  .notice table tr > :nth-child(3) { width: 15%; }
  .notice table tr > :nth-child(4) { display: none; }
}

@media (max-width:768px) {
  .notice .notice_search select { width: 100%; }
  .notice .notice_search input[type="text"] { width: calc(80% - 5px); }
  .notice .notice_search .search_btn { width: 20%; }
}