/* BASIC css start */ /*메인 공통*/ .section,.section :is(*){box-sizing: border-box;font-family: "Pretendard Variable", Pretendard, sans-serif;} .section:not(#sec1){margin-bottom: 35px;} /* 섹터간의 간격*/ .section .sec_inner{padding:0 5%} .section h2{font-size:25px; font-family: "Pretendard Variable", Pretendard, sans-serif; color: #111111; font-weight: 600; margin-bottom: 15px;} /*타이틀과 이미지 사이간격 */ .section .txt_area p.sub{color: #000; line-height: 1.6;font-weight: 500;transition: all .4s;font-size: 14px; } .section .txt_area p.big{ color: #000; font-weight: 500;line-height: 1.3; transition: all .4s;font-size: 23px; } .section .txt_area a.more{ width:auto; display: inline-block; font-size: 13px; transition: transform .4s, opacity .4s;border: 1px solid #000;color: #000; margin-top: 8px;font-weight: 600;padding:5px 15px; } .section :is(.sec_next,.sec_prev){position: unset;color: #000;width: 30px; background-color: #ddd; height:30px; border-radius: 50%; margin-top: 0; transition:all .1s} .section :is(.sec_next,.sec_prev)::after{font-size: 11px; font-weight:700} .section :is(.sec_next,.sec_prev):not(.swiper-button-disabled):hover{background-color:var(--main-color);color:#fff} .section .swiper-pagination-bullet-active{background-color:var(--main-color)} .section .prd_more_btn{text-align:center; margin-top:5px;} .section .prd_more_btn>a {display:inline-block;font-family: 'Noto Sans KR', sans-serif;display:inline-block; border:1px solid #e8e9ed; padding:4px 0px; width:100% } .section .prd_more_btn>a button.btn_moreGray{background-color:#fff !important; color:#000; font-size:13px; font-weight:500; width:100%; display:flex; align-items:center ;justify-content:center; gap:10px} .section .prd_more_btn>a button span{display:flex; align-items:center; justify-content:center;color:#000; } .section .prd_more_btn>a button span img{display:inline-block; transform:scale(.66); transform-origin:center center} /* 목재재단 베너 반응형*/ { margin: 0; padding: 0; box-sizing: border-box; } .banner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; /* 좌우 여백 */} .banner img { width: 100%; height: auto; display: block; } /*sec1*/ #sec1{margin-bottom: 30px} #sec1 .swiper{} #sec1 .swiper>ul{} #sec1 .swiper>ul>li{} #sec1 .swiper>ul>li>a{display:block; width:100%} #sec1 .swiper>ul>li>a>img{width: 100%;} #sec1 .swiper .btn_wrap{padding: 10px; position: absolute; z-index: 4; bottom: 0;right:0; width: max-content;display: flex; align-items: center; gap: 7px;} #sec1 .swiper .btn_wrap>*{} #sec1 .swiper .btn_wrap>ul{background-color: rgba(0,0,0,.4);display: flex; align-items: center; gap: 13px; padding: 5px 10px; border-radius: 25px;} #sec1 .swiper .btn_wrap>ul li{} #sec1 .swiper .btn_wrap>ul li>div.swiper_prev, #sec1 .swiper .btn_wrap>ul li>div.swiper_next{display: flex; align-items: center; justify-content: center;} #sec1 .swiper .btn_wrap>ul li .swiper_prev{cursor: pointer; } #sec1 .swiper .btn_wrap>ul li .swiper_prev img{} #sec1 .swiper .btn_wrap>ul li .swiper-pagination{position: unset;color: #fff;font-size: 13px;display: flex; align-items: center; gap: 1px;} #sec1 .swiper .btn_wrap>ul li .swiper-pagination span{display: inline-block; font-size: 13px;} #sec1 .swiper .btn_wrap>ul li .swiper_next{cursor: pointer; } #sec1 .swiper .btn_wrap>ul li .swiper_next img{} #sec1 .swiper .btn_wrap .control{} #sec1 .swiper .btn_wrap .control a{cursor: pointer; display: flex;transition: all .1s; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;background-color: rgba(0,0,0,.4);} #sec1 .swiper .btn_wrap .control a.clicked{opacity: .5;} #sec1 .swiper .btn_wrap .control a img{} #sec1 .swiper ul li.swiper-slide-active .txt_area p{transform: translateY(0px); opacity: 1;} #sec1 .swiper ul li.swiper-slide-active .txt_area a.more{transform: translateY(0px); opacity: 1;} #sec1 .swiper ul li .txt_area{overflow: visible; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; left:0; padding-left:6%; max-width:95%} #sec1 .swiper ul li .txt_area>*{transform: translateY(-25px);} #sec1 .swiper ul li .txt_area p{opacity: 0; line-height: 1.3;} #sec1 .swiper ul li .txt_area p.big{transition: all .6s;transition-delay: .1s;margin-bottom: 8px;} #sec1 .swiper ul li .txt_area p.sub{ font-weight: 500; transition: all .6s; margin-bottom: 17px; transition-delay: .37s;} #sec1 .swiper ul li .txt_area a.more{opacity: 0; transition-delay: .6s;} /* 메인베너 바로 아래 회원혜택 베너*/ .benefit-banner { background: linear-gradient(45deg, #000000, #910000); color: #ffffff; text-align: left; /* 좌측 정렬 */ padding: 15px; border-radius: 8px; margin: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .benefit-banner .banner-link { text-decoration: none; color: inherit; display: block; } .benefit-banner .banner-content h2 { font-size: 1.5em; margin-bottom: 10px; font-weight: bold; } .benefit-banner .banner-content p { font-size: 1em; margin: 5px 0; } .benefit-banner .banner-content strong { color: #fff; font-weight: bold; } /*sec2*/ #sec2 { } #sec2 .sec_inner { } #sec2 .sec_inner { } #sec2 .sec_inner .sec2_tit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } #sec2 .sec_inner .sec2_tit h2 { margin-bottom: 0; } #sec2 .sec_inner .sec2_tit .nav_wrap { display: flex; align-items: center; gap: 8px; } #sec2 .sec_inner .sec2_tit .nav_wrap>* { } #sec2 .sec_inner .sec2_tit .nav_wrap .swiper-button-next { } #sec2 .sec_inner .sec2_tit .nav_wrap .swiper-button-prev { } #sec2 .sec_inner .swiper { } #sec2 .sec_inner .swiper>ul { } #sec2 .sec_inner .swiper>ul>li { display: flex; flex-direction: column; gap: 10px; align-items: center; } #sec2 .sec_inner .swiper>ul>li>a { display: flex; width: 105%; transition: all .1s; overflow: hidden; border-radius: 10%; border:2px solid transparent } #sec2 .sec_inner .swiper>ul>li>a:hover { border-color:var(--main-color) } #sec2 .sec_inner .swiper>ul>li:hover>p { color:var(--main-color) } #sec2 .sec_inner .swiper>ul>li>a>img { width: 100%; transition: all .1s; } #sec2 .sec_inner .swiper>ul>li>p { text-align: center; color: #5d5d5d; font-size: 15px; font-weight: 400; } /*sec22 베스트아이템*/ #sec22 { } #sec22 .sec_inner { } #sec22 .sec_inner { } #sec22 .sec_inner .sec22_tit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } #sec22 .sec_inner .sec22_tit h2 { margin-bottom: 0; } #sec22 .sec_inner .sec22_tit .nav_wrap { display: flex; align-items: center; gap: 8px; } #sec22 .sec_inner .sec22_tit .nav_wrap>* { } #sec22 .sec_inner .sec22_tit .nav_wrap .swiper-button-next { } #sec22 .sec_inner .sec22_tit .nav_wrap .swiper-button-prev { } #sec22 .sec_inner .swiper { } #sec22 .sec_inner .swiper>ul { } #sec22 .sec_inner .swiper>ul>li { display: flex; flex-direction: column; gap: 10px; align-items: center; } #sec22 .sec_inner .swiper>ul>li>a { display: flex; width: 105%; transition: all .1s; overflow: hidden; border-radius: 10%; border:2px solid transparent } #sec22 .sec_inner .swiper>ul>li>a:hover { border-color:var(--main-color) } #sec22 .sec_inner .swiper>ul>li:hover>p { color:var(--main-color) } #sec22 .sec_inner .swiper>ul>li>a>img { width: 100%; transition: all .1s; } #sec22 .sec_inner .swiper>ul>li>p { text-align: center; color: #5d5d5d; font-size: 15px; font-weight: 400; } /*sec222 베스트반제품*/ #sec222 { } #sec222 .sec_inner { } #sec222 .sec_inner { } #sec222 .sec_inner .sec222_tit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } #sec222 .sec_inner .sec222_tit h2 { margin-bottom: 0; } #sec222 .sec_inner .sec222_tit .nav_wrap { display: flex; align-items: center; gap: 8px; } #sec222 .sec_inner .sec222_tit .nav_wrap>* { } #sec222 .sec_inner .sec222_tit .nav_wrap .swiper-button-next { } #sec222 .sec_inner .sec222_tit .nav_wrap .swiper-button-prev { } #sec222 .sec_inner .swiper { } #sec222 .sec_inner .swiper>ul { } #sec222 .sec_inner .swiper>ul>li { display: flex; flex-direction: column; gap: 10px; align-items: center; } #sec222 .sec_inner .swiper>ul>li>a { display: flex; width: 105%; transition: all .1s; overflow: hidden; border-radius: 10%; border:2px solid transparent } #sec222 .sec_inner .swiper>ul>li>a:hover { border-color:var(--main-color) } #sec222 .sec_inner .swiper>ul>li:hover>p { color:var(--main-color) } #sec222 .sec_inner .swiper>ul>li>a>img { width: 100%; transition: all .1s; } #sec222 .sec_inner .swiper>ul>li>p { text-align: center; color: #5d5d5d; font-size: 15px; font-weight: 400; } /*sec3*/ #sec3 .sec_inner{position:relative;} #sec3 .sec_inner .sec3_cont .swiper{padding-bottom:25px;} /*sec4*/ #sec4{} #sec4 .sec_inner{} #sec4 .sec_inner ul{display: flex; flex-wrap: wrap; gap: 10px;} #sec4 .sec_inner ul li{position: relative;width:100%} #sec4 .sec_inner ul li>a{display: block;width: 100%;} #sec4 .sec_inner ul li>a>img{width: 100%;} #sec4 .sec_inner ul li .txt_area{position: absolute; top: 50%;transform: translateY(-50%); left: 18px; max-width: 80% } #sec4 .sec_inner ul li .txt_area p{} #sec4 .sec_inner ul li .txt_area p.big{font-size: 20px; font-weight: 600; margin-bottom: 6px;transition-delay: .1s; color:#212121} #sec4 .sec_inner ul li .txt_area p.sub{font-size: 13px;line-height:1.4;transition-delay: .27s; color:#383838} #sec4.act .sec_inner ul li .txt_area p{transform: translateY(-15px); opacity: 1;} /*sec666*/ #sec666{} #sec666 h2{padding-left:5%} #sec666 .sec_inner{position:relative; padding:0} #sec666 .sec_inner .sec666_cont{padding-left:5%} #sec666 .sec_inner .sec666_cont .swiper{} #sec666 .sec_inner .sec666_cont .swiper ul{} #sec666 .sec_inner .sec666_cont .swiper ul li{width:33%} #sec666 .sec_inner .sec666_cont .swiper ul li a{display: block; width: 95%;overflow:hidden;} #sec666 .sec_inner .sec666_cont .swiper ul li a img{width: 95%; transition:transform .3s} #sec666 .sec_inner .sec666_cont .swiper ul li .txt_area{padding:6px 0} #sec666 .sec_inner .sec666_cont .swiper ul li .txt_area p{transition: all .3s;} #sec666 .sec_inner .sec666_cont .swiper ul li .txt_area p.big{color: #161616; font-size:15px; margin-bottom:6px} #sec666 .sec_inner .sec666_cont .swiper ul li .txt_area p.sub{color: #555555; font-size: 12px;line-height:1.4} /*sec66*/ #sec66{} #sec66 h2{padding-left:5%} #sec66 .sec_inner{position:relative; padding:0} #sec66 .sec_inner .sec66_cont{padding-left:5%} #sec66 .sec_inner .sec66_cont .swiper{} #sec66 .sec_inner .sec66_cont .swiper ul{} #sec66 .sec_inner .sec66_cont .swiper ul li{width:35%} #sec66 .sec_inner .sec66_cont .swiper ul li a{display: block; width: 100%;overflow:hidden;} #sec66 .sec_inner .sec66_cont .swiper ul li a img{width: 100%; transition:transform .3s} #sec66 .sec_inner .sec66_cont .swiper ul li .txt_area{padding:6px 0} #sec66 .sec_inner .sec66_cont .swiper ul li .txt_area p{transition: all .3s;} #sec66 .sec_inner .sec66_cont .swiper ul li .txt_area p.big{color: #161616; font-size:15px; margin-bottom:6px} #sec66 .sec_inner .sec66_cont .swiper ul li .txt_area p.sub{color: #555555; font-size: 12px;line-height:1.4} /*sec6*/ #sec6{} #sec6 h2{padding-left:5%} #sec6 .sec_inner{position:relative; padding:0} #sec6 .sec_inner .sec6_cont{padding-left:5%} #sec6 .sec_inner .sec6_cont .swiper{} #sec6 .sec_inner .sec6_cont .swiper ul{} #sec6 .sec_inner .sec6_cont .swiper ul li{width:35%} #sec6 .sec_inner .sec6_cont .swiper ul li a{display: block; width: 100%;overflow:hidden;} #sec6 .sec_inner .sec6_cont .swiper ul li a img{width: 100%; transition:transform .3s} #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area{padding:6px 0} #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p{transition: all .3s;} #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p.big{color: #161616; font-size:15px; margin-bottom:6px} #sec6 .sec_inner .sec6_cont .swiper ul li .txt_area p.sub{color: #555555; font-size: 12px;line-height:1.4} /*sec7*/ #sec7{} #sec7 .sec_inner{} #sec7 .sec_inner .sec7_cont{} #sec7 .sec_inner .sec7_cont>div{} #sec7 .sec_inner .sec7_cont .banner_area{position:relative;flex-grow:1;} #sec7 .sec_inner .sec7_cont .banner_area>a{display: block;width: 100%;} #sec7 .sec_inner .sec7_cont .banner_area>a img{width: 100%;} #sec7 .sec_inner .sec7_cont .banner_area .txt_area{position: absolute; top: 50%;transform:translateY(-50%); left:10px; max-width: 800% } #sec7 .sec_inner .sec7_cont .banner_area .txt_area>*{color: #000;} #sec7 .sec_inner .sec7_cont .banner_area .txt_area p.big{font-size: 21px; font-weight: 600; margin-bottom: 7px;} #sec7 .sec_inner .sec7_cont .banner_area .txt_area p.sub{font-size: 12px;line-height:1.3; transition-delay: .27s;} #sec7 .sec_inner .sec7_cont .item_area{height:auto; overflow-y:auto; margin-top:12px;} #sec7 .sec_inner .sec7_cont .item_area .swiper{height:100%} #sec7 .sec_inner .sec7_cont .item_area ul{} #sec7 .sec_inner .sec7_cont .item_area ul>li{display: flex; flex-wrap: nowrap; align-items: center; width:100%; height:fit-content; padding:6px 0} #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb{width:30%} #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a{display:block; width:100%} #sec7 .sec_inner .sec7_cont .item_area ul>li .thumb>a>img{object-fit: cover;} #sec7 .sec_inner .sec7_cont .item_area ul>li .info{width:80%; padding:0 10px 0 10px; max-height:100%; } #sec7 .swiper-vertical>.swiper-scrollbar{height:100%; width:2px; top:0; right:0} /* sec8 */ #sec8{} #sec8 .sec_inner{padding:0} #sec8 .sec_inner h2{padding:0 5%} #sec8 .sec_inner .sec8_cate{margin-bottom: 35px;} #sec8 .sec_inner .sec8_cate ul{} #sec8 .sec_inner .sec8_cate ul li{width:auto;} #sec8 .sec_inner .sec8_cate ul li:first-child{margin-left:5%} #sec8 .sec_inner .sec8_cate ul li a{overflow:hidden; display:block; width:100%;background-color: #f4f4f4; border-radius: 40px; padding: 8px 20px; text-align:center; color:#000;position:relative; font-size: 13px; font-weight: 500; display:block; transition:all .1s} #sec8 .sec_inner .sec8_cate ul li.on>a{ color: #fff;background-color: var(--main-color);} #sec8 .sec8_prd{padding:0 5%} #sec8 .sec8_prd>div{display: none; position:relative;opacity:0; transition:opacity .5s} #sec8 .sec8_prd>div.show{display: block;} #sec8 .sec8_prd>div.act{opacity:1} /*sec9*/ #sec9 {margin-bottom:70px !important;} #sec9 .sec_inner h2{display: flex; align-items: center; gap: 16px;} #sec9 .sec_inner h2 span{display: inline-block;color: #999999; font-size: 13px; font-weight: 500;} #footer{margin-top:0 !important} /* BASIC css end */