/* BASIC css start */ /* sec1 ΊρΑΦΎσ */ #sec1 { margin-bottom: 0px; width:100%; } #sec1 .swiper {position:relative; max-width:1920px; height: 100%; min-height:682px; /* height:calc(100vh); */ margin:0 auto; } #sec1 .swiper>ul { width:100%; } #sec1 .swiper>ul>li { width:100%; position:relative; } #sec1 .swiper>ul>li>a { display:block; position:relative; width:100%; max-width:1920px; height: 100%; min-height:682px; } #sec1 .swiper>ul>li>a>img { position:absolute; display:block; width:100%; height:100%; top:0; bottom:0; left:0; right:0; margin:0 auto ; text-align:center} #sec1 .swiper .btn_wrap { padding: 30px; position: absolute; z-index: 4; bottom: 50px; right: 50%; transform: translateX(600px); width: max-content; display: flex; align-items: center; gap: 12px; } #sec1 .swiper .btn_wrap>* { } #sec1 .swiper .btn_wrap>ul { background-color: rgba(0,0,0,.4); display: flex; align-items: center; gap: 20px; padding: 10px 17px; border-radius: 25px; } #sec1 .swiper .btn_wrap>ul li { } #sec1 .swiper .btn_wrap>ul li>div:has(img) { 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: 15px; display: flex; align-items: center; gap: 1px; } #sec1 .swiper .btn_wrap>ul li .swiper-pagination span { display: inline-block; font-size: 18px; } #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: 42px; height: 42px; 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%; padding-left: 230px; } #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 .5s; transition-delay: .35s; margin-bottom: 20px; } #sec1 .swiper ul li .txt_area p.sub { font-weight: 400; transition: all .5s; margin-bottom: 50px; transition-delay: .57s; } #sec1 .swiper ul li .txt_area a.more { opacity: 0; transition-delay: .7s; } #sec1 .swiper ul li .txt_area a.more:hover { background-color: #000; color: #fff; } /*sec2*/ #sec2 { } #sec2 .sec_inner { } #sec2 .sec_inner { } #sec2 .sec_inner .sec2_tit { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } #sec2 .sec_inner .sec2_tit h2 { margin-bottom: 0; } #sec2 .sec_inner .sec2_tit .nav_wrap { display: flex; align-items: center; gap: 15px; } #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: 100%; transition: all .1s; overflow: hidden; border-radius: 50%; 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: #000; font-size: 16px; font-weight: 600; } /* sec8 */ #sec8 { } #sec8 .sec_inner { } #sec8 .sec_inner h2 { } #sec8 .sec_inner .sec8_cate { margin-bottom: 45px; } #sec8 .sec_inner .sec8_cate ul { display:flex; gap:15px; flex-wrap:wrap } #sec8 .sec_inner .sec8_cate ul li { } #sec8 .sec_inner .sec8_cate ul li a { overflow:hidden; display:block; width:100%; background-color: #eeeeee; border-radius: 40px; padding: 11px 45px; text-align:center; color:#555555; position:relative; font-size: 17px; font-weight: 500; display:block; transition:all .3s } #sec8 .sec_inner .sec8_cate ul li.on>a { color: #fff; background-color: var(--main-color); } #sec8 .sec_inner .sec8_cate ul li a:hover { color: #fff; background-color: transparent } #sec8 .sec8_prd { } #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 } #sec8 .sec_inner .sec8_cate ul li a::after { position: absolute; content: ""; width: 0%; height: 100%; top: 0; right: 0; z-index: -1; background-color:var(--main-color); transition: all 0.3s ease; } #sec8 .sec_inner .sec8_cate ul li a:hover::after { right: auto; left: 0; width: 100%; } .item_list .prd-price { margin-bottom: 14px; } .item_list .prd-price .replace { color: #ff0000; font-size: 22px; font-weight: bold; } .item_list .prd-price .soldout { color: red; font-size: 22px; font-weight: bold; } .item_list .prd-price strike { color:#707070 } .item_list .prd-price .dc_per { color: #eb9595; margin-right: 9px; font-weight: bold; font-size: 22px; } .item_list .prd-price .consumer { text-decoration: line-through; color: #bbb; font-weight: bold; font-size: 14px; margin-left: 9px; } .item_list .prd-price .consumer b { font-weight: normal; display: none; } .item_list .prd-price .normal { color: #000; font-size: 22px; font-weight: 700; } .item_list .prd-price .normal b { font-weight: 700; font-size: 12px; display: none; } /* BASIC css end */