/* BASIC css start */ /* sec1 */ /* 메인 비쥬얼 배너 */ .visual-banner {position:relative; overflow:hidden;} .visual-banner .inner img {width:100%;} .visual-banner .swiper-horizontal .swiper-pagination-progressbar {width:90px; height:2px; top:auto; bottom:19px; left:50%; margin-left:-45px; background-color:rgba(255,255,255,0.5); } .visual-banner .swiper-horizontal .swiper-pagination-progressbar span {background: #fff;} .visual-banner .swiper-button-prev {left:11.5%; background:url('/design/purygold/img/pc/prev_arrow.png')no-repeat center; } .visual-banner .swiper-button-next {right:11.5%; background:url('/design/purygold/img/pc/next_arrow.png')no-repeat center; } .visual-banner .swiper-button-prev:after, .visual-banner .swiper-button-next:after {display:none;} .visual-banner .txtbox {display:inline-block; text-align:center; position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); opacity:0; visibility: hidden; transition:all .8s ease-in; -webkit-transition:all .8s ease-in; } .visual-banner .swiper-slide-active .txtbox {opacity:1; top:52%; visibility: visible;} .visual-banner .txtbox .txt01 {color: #5c1924; font-size: 18px; letter-spacing: 2px; font-weight:500; margin-bottom:10px;} .visual-banner .txtbox .txt02 {line-height:31px; background-color: rgba(247,247,247,.3); color: #f7f7f7; font-weight: bold; font-size: 12px; letter-spacing: 2px; padding:0 30px;} section{width:100%} section:not(:last-child){ margin-bottom:100px} .sec_inner{width: 1780px; margin: 0 auto;} section h2{margin-bottom: 25px; font-size: 32px; color: #000; font-weight: 500;} section h2.en{font-weight:600} /* sec2 */ #sec2{width: 1780px; margin: 0 auto 100px; } #sec2 .sec2_title_wrap {width:347px;} #sec2 .sec2_title_wrap h2{width: 1780px; margin: 0 0 20px;} #sec2 .sec2_title_wrap .subTit{margin-bottom:20px; font-size:16px;} #sec2 .sec2_title_wrap .sec2_tab_btn{margin-bottom:40px;} #sec2 .sec2_title_wrap .sec2_tab_btn li{margin-bottom:10px;} #sec2 .sec2_title_wrap .sec2_tab_btn li a{display:inline-block; padding:0 3px; font-size:14px; line-height:30px; color:#8d8d8d;} #sec2 .sec2_title_wrap .sec2_tab_btn li a.active{background:#f5f5f5; color:#000;} #sec2 .sec2_title_wrap > a.allViewBtn{display:block; width:160px; line-height:50px; background:#000; border-radius:25px; color:#fff; font-size:14px; text-align:center;} #sec2 .sec2_cont{width: 1433px; margin: 0 auto; } #sec2 .sec2_cont > div.sec2_conBox{display:none;} #sec2 .sec2_cont > div.sec2_conBox.open{display:block;} #sec2 .swiper{padding-bottom: 40px;} #sec2 .swiper ul li{width:280px} #sec2 .swiper .swiper-pagination-progressbar{bottom: 0; top: unset; height: 1.5px; background-color: rgba(0,0,0,.09);width:1780px} #sec2 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #222;} /* sec3 */ #sec3{} #sec3 .sec_inner{} #sec3 .sec_inner h2{} #sec3 .sec_inner .sec3_cate{margin-bottom: 35px;} #sec3 .sec_inner .sec3_cate ul{display:flex; gap:25px; } #sec3 .sec_inner .sec3_cate ul li{} #sec3 .sec_inner .sec3_cate ul li a{display:block; width:100%; text-align:center; color:#979797; font-size: 16px; font-weight: 400; letter-spacing: -.3px;transition: all .3s; display:block;} #sec3 .sec_inner .sec3_cate ul li.on>a{ color: #000 !important;font-weight: 500; } #sec3 .sec_inner .sec3_cate ul li a:hover{color:#333} #sec3 .sec3_prd{} #sec3 .sec3_prd>div{display: none; position:relative;} #sec3 .sec3_prd>div ul{display:flex; flex-wrap:wrap} #sec3 .sec3_prd>div.show{display: block;} #sec3 .sec3_prd>div .moreViewBtn{padding-top:50px; text-align:center;} #sec3 .sec3_prd>div .moreViewBtn a{display:inline-block; width:230px; font-size:14px; font-weight:500; line-height:50px; border:1px solid #000;} /* sec4 */ #sec4{} #sec4 .sec_inner{} #sec4 .sec_inner ul{display: flex; justify-content: space-between; flex-wrap: nowrap;} #sec4 .sec_inner ul li{} #sec4 .sec_inner ul li a{display: block;width: 100%;} #sec4 .sec_inner ul li a img{width: 100%;} /* sec5 */ #sec5{} #sec5 .sec_inner{} #sec5 .sec_inner h2{} #sec5 .sec5_cont{height: 865px; width: 100%;} #sec5 .sec5_cont>div{float: left; height: 100%;} #sec5 .sec5_cont .sec5_L{width: 650px;margin-right: 50px;} #sec5 .sec5_cont .sec5_L .swiper{width: 100%;} #sec5 .sec5_cont .sec5_L .swiper ul{width: 100%;} #sec5 .sec5_cont .sec5_L .swiper ul li{width: 100%;} #sec5 .sec5_cont .sec5_L .swiper ul li a{display: block;width: 100%;} #sec5 .sec5_cont .sec5_L .swiper ul li a img{width: 100%;} #sec5 .sec5_cont .sec5_L .swiper .swiper_btn_prev{ position:absolute; top:50%; left: 20px; z-index:4; cursor:pointer} #sec5 .sec5_cont .sec5_L .swiper .swiper_btn_next{position:absolute; top:50%; right: 20px; z-index:4; cursor:pointer} #sec5 .sec5_cont .sec5_L .swiper .swiper-pagination{transform:translateY(-5px)} #sec5 .sec5_cont .sec5_L .swiper .swiper-pagination-bullet{background-color:#fff !important;margin:0 5px;} #sec5 .sec5_cont .sec5_R{position:relative; width: 1080px;} #sec5 .sec5_cont .sec5_R ul{width: 100%; height: 100%;} #sec5 .sec5_cont .sec5_R .sec5_title_wrap{position:absolute; top:-50px; left:0;} #sec5 .sec5_cont .sec5_R .sec5_title_wrap ul li{width:auto;margin-right:25px;} #sec5 .sec5_cont .sec5_R .sec5_title_wrap ul li:last-child{margin-right:0;} #sec5 .sec5_cont .sec5_R .sec5_title_wrap ul li a{display:block; width:100%; text-align:center; color:#979797; font-size: 16px; font-weight: 400; letter-spacing: -.3px;transition: all .3s; display:block;} #sec5 .sec5_cont .sec5_R .sec5_title_wrap ul li a:hover{color:#333} #sec5 .sec5_cont .sec5_R .sec5_title_wrap ul li.swiper-slide-thumb-active a{color: #000 !important;font-weight: 500;} #sec5 .sec5_cont .sec5_conBox{display:none;} #sec5 .sec5_cont .sec5_conBox.open{display:block;} #sec5 .sec5_cont .sec5_cont .swiper{width:1080px; padding-bottom:80px;} #sec5 .sec5_cont .sec5_cont .swiper .swiper-pagination-progressbar { bottom: 0; top: unset; height: 1.5px; background-color: rgba(0,0,0,.09); width: 1780px; } #sec5 .sec5_cont .sec5_cont .swiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #222;} /* sec6 */ #sec6{overflow:hidden} #sec6 .sec_inner{} #sec6 .sec_inner .sec6_cont{display: flex; justify-content: space-between; flex-wrap: nowrap;gap: 80px;} #sec6 .sec_inner .sec6_cont>div{width: calc((100% - 80px) / 2);} #sec6 .sec_inner .sec6_cont>div .banner{} #sec6 .sec_inner .sec6_cont>div .banner h3{ margin-bottom: 30px;font-size: 38px; font-weight: 500; color: #000;} #sec6 .sec_inner .sec6_cont>div .banner .banner_img{} #sec6 .sec_inner .sec6_cont>div .banner .banner_img a{display: block; width: 100%;border-radius: 15px; overflow: hidden;} #sec6 .sec_inner .sec6_cont>div .banner .banner_img a img{width: 100%;} #sec6 .sec_inner .sec6_cont>div .banner p{ margin: 20px 0 40px;letter-spacing:-.7px; font-size:16px; color:#000; font-weight:400; line-height:1.7;} #sec6 .sec_inner .sec6_cont>div .swiper{padding-bottom: 20px;} #sec6 .sec_inner .sec6_cont>div .swiper ul{} #sec6 .sec_inner .sec6_cont>div .swiper ul li{} #sec6 .sec_inner .sec6_cont>div .swiper ul li.item_list .info .prdname{margin-bottom:5px} #sec6 .sec_inner .sec6_cont>div .swiper ul li.item_list .info .price{font-weight:700} #sec6 .sec_inner .sec6_cont>div .swiper .swiper-scrollbar{height:2px; } #sec6 .swiper :is(.swiper-button-next,.swiper-button-prev){ transition: filter .4s; filter: opacity(0); background-color:#222; padding: 10px; width: 35px; height: 50px; transform: translateY(-50%); color:#fff;} #sec6 .sec_inner .sec6_cont>div:hover :is(.swiper-button-next,.swiper-button-prev){ filter: opacity(1);} #sec6 .swiper .swiper-button-next{right:0px} #sec6 .swiper .swiper-button-prev{left: 0px} #sec6 .swiper .swiper-button-next:after,#sec6 .swiper .swiper-button-prev:after{font-size: 15px;} /* sec7 */ #sec7{background-color:#f8f8f8; padding:60px 0 50px} #sec7 h2{} #sec7 .sec7_review{} #sec7 .sec7_review>div{width: 100%;} #sec7 .sec7_review>div>ul{width: 100%; display:flex; justify-content:space-between; gap:20px} #sec7 .sec7_review>div>ul>li{flex-grow:1} #sec7 .li_review .rv_main{ width: 100%; border-bottom: 1px solid #e4e4e4;} #sec7 .li_review .rv_main .thumb{width:280px !important; height:280px !important; overflow:hidden;} #sec7 .li_review .rv_main .thumb a{display: block; width: 100%; height: 100%;} #sec7 .li_review .rv_main .thumb a img{width: 100%; height: 100%; object-fit: cover;} #sec7 .li_review .rv_main .rv_main_cont{width: 100%; padding: 20px 0; max-width:280px} #sec7 .li_review .rv_main .rv_main_cont .rv_cont{display:none; font-size: 13px; text-overflow: ellipsis; overflow: hidden; font-weight:500; color:#000; line-height:1.4; margin-bottom:15px} #sec7 .li_review .rv_main .rv_main_cont .rv_info{} #sec7 .li_review .rv_main .rv_main_cont .rv_info span{color:#acacac} #sec7 .li_review .rv_main .rv_main_cont .rv_info span.date{} #sec7 .li_review .rv_main .rv_main_cont .rv_info span.rv_user{} #sec7 .li_review .rv_mini{width: 100%; display: flex; align-items: center; justify-content: left; gap:15px;margin-top:20px } #sec7 .li_review .rv_mini .mini_thumb{width: 50px; height: 50px; border-radius: 50%; display: inline-block; border: 1px solid #f2f2f2; overflow: hidden;} #sec7 .li_review .rv_mini .mini_thumb a{display: block;width: 100%; height: 100%;} #sec7 .li_review .rv_mini .mini_thumb a img{width: 100%; height: 100%; object-fit: cover;} #sec7 .li_review .rv_mini ul { display:flex; flex-direction:column; gap:8px;} #sec7 .li_review .rv_mini ul li {font-size: 13px; color: #000;} #sec7 .li_review .rv_mini ul li:nth-child(2){display:flex; align-items:center} #sec7 .li_review .rv_mini ul li span {margin-right:10px;display:flex; align-items:center; color:#c7c7c7; font-size:12px; } #sec7 .li_review .rv_mini ul li span img{display:inline-block; margin-right:4px;} /* sec8 */ #sec8 h2{margin-bottom:40px; letter-spacing:9px} /* sec9 */ #sec9 .sec9_prd .moreViewBtn{padding-top:50px; text-align:center;} #sec9 .sec9_prd .moreViewBtn a{display:inline-block; width:230px; font-size:14px; font-weight:500; line-height:50px; border:1px solid #000;} /*sec10*/ #sec10 .swiper-button-prev:after,#sec10 .swiper-button-next:after{display:none} #sec10 .swiper-button-next{right:5% ; width:auto; height:auto} #sec10 .swiper-button-prev{left:5% ;width:auto; height:auto} #sec10{position:relative;} #sec10 .swiper{} #sec10 .swiper>ul.swiper-wrapper{} #sec10 .swiper>ul.swiper-wrapper>li.swiper-slide{background-color:#fff; } #sec10 li.swiper-slide .sec10_cont{display: flex; gap: 85px;justify-content: right;} #sec10 li.swiper-slide .sec10_cont .sec10_ban{flex-grow: 1;} #sec10 li.swiper-slide .sec10_cont .sec10_ban a{display: block; width: 100%; border-radius: 0 100px 0 0; overflow: hidden;} #sec10 li.swiper-slide .sec10_cont .sec10_ban a img{width: 100%;} #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap{display: flex; flex-direction: column; justify-content: space-between; width: 885px;} #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap .sec10_contTop{display: flex; flex-direction: column; gap: 25px; border-bottom: 1px solid #f6f3f1; padding-bottom: 25px;} #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap .sec10_contTop h3{color: #111; font-size: 40px; font-weight: 500;} #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap .sec10_contTop p.sec10sub{line-height: 1.6; color: #8d8d8d; font-size: 15px; font-weight: 400;} #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap ul{border-bottom: 1px solid #f6f3f1;display:flex; flex-wrap:wrap; flex-grow:1; align-items:center; } #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap ul li{width:400px; display:flex; height:135px; } #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap ul li .thumb{width:133px; height:133px} #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap ul li .thumb a{height:100%; } #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap ul li .thumb a img{height:100%; object-fit:cover; } #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap ul li .info{width:267px; padding:0 20px; display:flex; flex-direction:column;justify-content:space-between;} #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap ul li .info .prdname{font-size:16px} #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap ul li .info .prdetc{font-size:14px} #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap ul li.item_list .info .prdprice{border:none; padding-right:25px; margin:0} #sec10 li.swiper-slide .sec10_cont .sec10_itemWrap ul li.item_list .info .prdprice .percent{float:right} #sec10 .item_list .info p{margin-bottom:11px;} /* BASIC css end */