img{display: block;}

/** 메인 **/
.main-container{width:100%;}
.main-banner {position: relative;}
.main-banner .banner-img{width:100%; height: 450px; object-fit: cover; margin:0 auto;}
.main-banner .text-box{position: absolute; z-index: 4; top:0; bottom:0; left:0; right:0; display:flex; min-height:220px; flex-direction: column; justify-content: center; max-width:var(--max-frame-w); margin:0 auto; padding:80px 130px;}
.main-banner .text-box > div{min-height:220px;}
.main-banner .text-box .text{display: flex; flex-direction: column; gap:12px;}
.main-banner .text-box .title{ font-size: 48px; font-weight: 700;  line-height: var(--line-h); }
.main-banner .text-box .desc {font-size: 18px; font-weight: 500; line-height: 140%;}
.main-banner .text-box .btn_go{display: flex; height: 50px; align-items: center; gap: 12px; margin-top:20px;}
.main-banner .text-box .btn_go:hover {gap:16px;}
.main-banner .text-box.black .title,
.main-banner .text-box.black .desc{color: #2D2D2D;}
.main-banner .text-box.black .btn_go {color:#616161;}

.main-banner .text-box.white .title,
.main-banner .text-box.white .desc{color: #fff;}
.main-banner .text-box.white .btn_go {color:rgba(255,255,255,.7);}
.main-banner .text-box.white .btn_go path{fill: rgba(255,255,255,.7) !important;}

.main-banner .swiper-utils{max-width: var(--max-frame-w); padding:0 40px; margin:0 auto;}
.main-banner .swiper-utils .btn-wrap {max-width: var(--max-frame-w); margin:0 auto; display:flex; align-items: center; justify-content: space-between; position: absolute; top:0; right:0; left:0; bottom:0; }
.main-banner .swiper-utils .btn-wrap .btn{position:absolute; top:50%; z-index: 4;}
.main-banner .swiper-utils .btn-wrap .btn-prev{left:20px; transform: rotate(-180deg) translateY(+50%);}
.main-banner .swiper-utils .btn-wrap .btn-next{right:20px; transform: translateY(-50%);}
.main-banner .swiper-utils .pager {max-width: var(--max-frame-w); font-size: 13px; font-weight: 600; line-height: 150%; color: rgba(0, 0, 0, 0.40); margin:0 auto; display:block; position:absolute; left:0; right:0; bottom:30px; text-align: left;}
.main-banner .swiper-utils .pager .swiper-pagination {width:auto; display: flex; gap:4px; background-color: rgba(0, 0, 0, 0.20); margin-left: 120px; padding:1px 14px; backdrop-filter: blur(15px); border-radius: 100px;}
.main-banner .swiper-utils .swiper-pagination .swiper-pagination-current{color:#fff;}
.main-banner .swiper-utils svg path{fill: #CFCFCF;}


.public-certificate {max-width: var(--max-frame-w); padding:0 40px; margin: 100px auto 0;}
.public-certificate .title{text-align: center;}
.certificate-slide-wrap{overflow: hidden;}
.public-certificate .certification{display:flex; align-items: center;}
.public-certificate .certification li{border-radius: 10px; color: #383838; font-size: 14px;  font-style: normal; font-weight: 600; line-height: normal; display:flex; justify-content: center; gap:10px; align-items: center; aspect-ratio: 1/1; display: flex; flex-direction: column; border: 1px solid rgba(15, 141, 91, 0.40); background-color: #F2F4F1;}
.public-certificate .certification li img{mix-blend-mode: multiply;}


.order-status { max-width: var(--max-frame-w); padding:0 40px; margin:80px auto 100px; }
.order-status > .inner{padding:60px; display:flex; gap:20px; align-items: stretch; background: url('../img/main/purchase_status_bg.png') center no-repeat; background-size:cover; border-radius: var(--round-md); overflow: hidden;}
.order-status .box{background-color: #10917B; border-radius: var(--round-md); overflow: hidden; padding:30px;}
.order-status .box .sub-title{color:#fff; font-size: 18px; font-weight: 700; line-height: 150%; letter-spacing: -0.09px; padding-bottom: 15px;}

.order-status .purchase-box {width: 465px; height:100%; }
.order-status .purchase-box .title-sec{text-align: center; color:#fff; font-size: 22px; font-weight: 500; line-height: var(--line-h); letter-spacing: -0.11px; }
.order-status .purchase-box .title-sec .line{display: flex; align-items: center; justify-content: center; gap:12px; }
.order-status .purchase-box .title-sec .team{font-weight: 700; text-decoration-line: underline; text-underline-offset: 3px;}
.order-status .purchase-box .title-sec .amount{color: #FFFF07; font-size: 35px; font-weight: 700; line-height: 140%; letter-spacing: -0.175px; margin-left:8px;}


.accumulated {overflow: hidden; margin:18px auto 0; }
.accumulated .list {height:270px;}
.accumulated .list .list-item {border: 1px solid #9AC6C3; color:#fff; font-size: 16px; font-weight: 600; line-height: 150%; letter-spacing: -0.08px;  max-height:63px; display:flex; align-items: center; justify-content: space-between; padding:15px 20px; border-radius: var(--round-md);  background-color: rgba(255, 255, 255, 0.15);}
.accumulated .list .list-item strong{font-size: 22px;  font-weight: 600; line-height: 150%; letter-spacing: -0.11px;}
.accumulated .list .list-item:not(:nth-of-type(4n)){margin-bottom:6px;}
.accumulated .swiper-pagination{position:unset; margin-top:18px;}

.order-status .list-sec{flex:1; width:calc(100% - 485px); gap:20px; display:flex; flex-direction: column;}
.order-status .order-list .list-item {display:flex; height:40px; align-items: center; justify-content: center; width: 100%;}
.order-status .order-list .list-item > div {text-align: center; display: flex; align-items: center; justify-content: center;}
.order-status .order-list .list-item > div:not(:last-child) {flex: 1 0 0; }
.order-status .order-list .list-item > div:last-child {width: 140px;}

.order-status .order-list{position: relative;}
.order-status .order-list h3{display: flex; align-items: center; justify-content: space-between;}
.order-status .order-list .table-hd,
.order-status .table-list-wrap{background-color: #fff; border:1px solid var(--color-gr3);}
.order-status .order-list .table-hd{border-radius: var(--round-md) var(--round-md) 0 0; border-bottom:none; color: var(--6-b-7684, #6B7684); font-size: 13px; font-weight: 500; line-height: 150%; letter-spacing: -0.065px;}
.order-status .order-list .table-hd > div:not(:last-child){border-right: 1px solid var(--color-gr3);}
.order-status .table-list-wrap{border-radius: 0 0 var(--round-md) var(--round-md); }

.order-status .order-list .table-list {height:132px; color: var(--color-bk2); font-size: 14px; font-weight: 400; line-height: 150%; letter-spacing: -0.07px;}
.order-status .order-list .table-list .btn{display:flex; align-items:center; justify-content:center; color: #676767; text-align: center; font-size: 12px;  font-weight: 600; line-height: 135%; letter-spacing: -0.06px; border-radius: 4px;  background: #F0F0F0; padding: 5px 14px;}
.order-status .order-list .btn-navigation{ display: flex; flex-direction: column; gap:12px;}
.order-status .order-list .btn-navigation .btn{cursor: pointer;}
.order-status .order-list .btn-navigation .btn img{display: block; width:8px; }
.order-status .order-list .btn-navigation .btn.swiper-button-disabled{opacity: 0.4;}
.order-status .order-list .btn-navigation .btn-prev{transform:rotate(-180deg);}

.pending-payment-list-wrap{position: relative;}
.pending-payment-list-wrap h3{display: flex; align-items: center; justify-content: space-between;}
.pending-payment-list-wrap .list-wrap{height:58px !important;}
.pending-payment-list-wrap .list-item {display:flex; align-items: center; justify-content: space-between; height:24px !important;}
.pending-payment-list-wrap .list-item .order-info,
.pending-payment-list-wrap .list-item .order-info .prd{display:flex; align-items: center; gap:14px;}
.pending-payment-list-wrap .list-item .order-info .date{display: flex; gap:8px; font-weight: 400; align-items: center; color: rgba(255, 255, 255, 0.70); font-size: 14px; line-height: 150%;}
.pending-payment-list-wrap .list-item .order-info .date b{font-weight: 600;}
.pending-payment-list-wrap .list-item .order-info .prd::before{content:''; display:block; width: 1px; height:10px; background-color: var(--color-gr3);}

.pending-payment-list-wrap .list-item .prd,
.pending-payment-list-wrap .list-item .money{color: #fff; font-size: 16px; font-weight: 600; line-height: 150%;}
.pending-payment-list-wrap .list-item .money{letter-spacing: -0.08px;}
.pending-payment-list-wrap .btn-navigation{ display: flex; flex-direction: column; gap:12px;}
.pending-payment-list-wrap .btn-navigation .btn{cursor: pointer;}
.pending-payment-list-wrap .btn-navigation .btn img{display: block; width:8px; }
.pending-payment-list-wrap .btn-navigation .btn.swiper-button-disabled{opacity: 0.4;}
.pending-payment-list-wrap .btn-navigation .btn-prev{transform:rotate(-180deg);}


.recomend-prd-wrap{padding:80px 0; background: linear-gradient(96deg, #14B466 16.02%, #348268 106.29%), linear-gradient(96deg, #042222 16.02%, #021A1A 106.29%);}
.recomend-prd-wrap .inner-sec{display: flex; align-items: stretch; gap:30px;}
.recomend-prd-wrap .title-sec {width: 250px; display: flex; flex-direction: column; justify-content: space-between;}
.recomend-prd-wrap .prd-list {flex:1;}

.recomend-prd-wrap .title-sec h2,
.best-prd-wrap .title-sec h2{padding-top:20px; color: #fff; font-size: 32px; font-style: normal; font-weight: 700; line-height: 140%; }
.recomend-prd-wrap .title-sec h2 .name{text-decoration-line: underline; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;}
.recomend-prd-wrap .title-sec h2 .sub-title{font-weight: 500;}
.recomend-prd-wrap .btn-wrap,
.best-prd-wrap .btn-wrap { display: flex; gap:12px; align-items: center;}
.recomend-prd-wrap .btn-wrap .btn {border-color: #E9EBED;}
.recomend-prd-wrap .btn-wrap .btn path{fill:#fff;}
.recomend-prd-wrap .btn-wrap .btn:hover {border-color: #fff; background-color: #fff;}
.recomend-prd-wrap .btn-wrap .btn:hover path{fill:#0F8D5B;}

.recomend-prd-wrap .list-item,
.best-prd-wrap .list-item .img-box{border-radius: var(--round-md); overflow: hidden;}
.recomend-prd-wrap .list-item a,
.best-prd-wrap .list-item a{display: block; position: relative;}
.recomend-prd-wrap .list-item img,
.best-prd-wrap .list-item .img-box img{width: 100%; aspect-ratio: 1/1; object-position: center; object-fit: cover; transition-duration: .3s;}
.recomend-prd-wrap .list-item:hover img,
.best-prd-wrap .list-item:hover .img-box img{transform: scale(1.05);}
.recomend-prd-wrap .list-item a .product-name{ padding: 16px 14px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: center; color: #222; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(255, 255, 255, 0.50); backdrop-filter: blur(4px);}


.best-prd-wrap{padding:100px 0;}
.best-prd-wrap .title-sec {display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px;}
.best-prd-wrap .title-sec h2{color: var(--color-bk2);}
.best-prd-wrap .list-item .prd-info {display: flex; flex-direction: column; gap:20px; padding: 20px 12px; align-items: center; align-self: stretch;}
.best-prd-wrap .list-item .prd-info .title{width: 100%; display: flex; flex-direction: column; gap:4px;}
.best-prd-wrap .list-item .prd-info .name{color: var(--color-bk1); font-size: 18px; font-weight: 700; line-height: 140%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; align-self: stretch;}
.best-prd-wrap .list-item .prd-info .desc{color: var(--color-gr4); font-size: 15px; font-style: normal; font-weight: 400; line-height: 140%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; align-self: stretch;}
.best-prd-wrap .list-item .utils {display: flex; align-items: center; justify-content: space-between; width: 100%;}
.best-prd-wrap .list-item .utils .price{display: flex; align-items: flex-end; gap:4px; overflow: hidden; color: var(--color-bk2); text-overflow: ellipsis; font-size: 22px; font-style: normal; font-weight: 700; line-height: 140%; text-transform: uppercase;}
.best-prd-wrap .list-item .utils .price span{font-weight: 500; font-size: 18px;}
.best-prd-wrap .list-item .utils .zzim{width: 18px;}
.best-prd-wrap .list-item .utils .zzim img{width: 100%;}