@charset "utf-8";

body {background-color: #fff;}

/* about us (인사말) */

.about-us-wrap {display: flex; gap: 3.5rem; align-items: center;}
.about-img-box img {border-radius: 20px; width: 100%; flex: 1;}
.about-us-text {flex: 1;}
.about-us-text p:first-child {margin-bottom: 2rem;}

@media screen and (max-width:1280px){
	.about-us-wrap {gap: 1.5rem;}
	.about-img-box {width: 100%;}
	.about-img-box img {height: 25vw; object-fit: cover;}
	.about-us-wrap {flex-direction: column;}
	.about-us-text {text-align: center;}
}

@media screen and (max-width:767px) {
	.about-img-box img {height: 45vw;}
}

/* about-point-title(강점) */

.about-point-inner { padding-bottom :9.5rem; }
.about-point-title {text-align: left; margin-bottom: 0}

.swiper{overflow: hidden; padding-bottom: 20px}
.swiper-wrapper{display: flex}
.swiper-slide{flex-shrink: 0}
.swiper-slide:last-child{margin-right: 0}
.about-point-title-swiper-btn{display: flex; max-width: 1621px; justify-content: flex-end; align-items: center;  margin-bottom: 2rem;}
.about-point-sub{color: var(--color-text-4); display: block}
.about-point-swiper-btn{display: flex; gap: 15px; justify-content: flex-end}
.swiper-button-prev, .swiper-button-next{border: 1px solid var(--color-border); border-radius: 50px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: all .25s ease-in-out;}
.swiper-button-prev:hover, .swiper-button-next:hover {background: var(--color-primary)}
.swiper-button-prev svg, .swiper-button-next svg{width: 9px; fill: #222;}
.swiper-button-prev:hover svg, .swiper-button-next:hover svg {fill: #fff;}

.about-point-info-top{border-top-left-radius: 25px; border-top-right-radius: 25px}
.about-point-info-top img{display: block; width: 100%; object-fit: cover; border-top-left-radius: 25px; border-top-right-radius: 25px; max-height: 351px}
.about-point-info-bottom{border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 4px 4px 18px rgba(0, 0, 0, 0.1)}
.about-point-info-bottom-title{font-weight: 600}
.about-point-info-bottom-desc{font-size: 15px; }

@media screen and (min-width:1281px){
	.sec-about-about-point{padding: 0 1rem}
	.about-point-txt{margin-bottom: 2.5rem}
	.about-point-sub{font-size: 16px; margin-top: 1.25rem; display: block}
	.swiper-button-prev, .swiper-button-next{width: 49px; height: 49px}
	
	.about-point-info{max-width: 520px}
	.about-point-info-bottom{padding: 2rem 2.5rem 3rem 2.5rem;}
	.about-point-info-bottom-title{font-size: 1.56rem}
	.about-point-info-bottom-desc{line-height: 200%; margin: 1.56rem 0 0}
}

@media screen and (max-width:1280px){
	.sec-about-about-point{padding: 0 3vw}
	.about-point-title-swiper-btn{margin-bottom: 1rem; flex-direction: column; gap: 1.2rem}
	.about-point-txt{text-align: center;}
	.about-point-sub{font-size: 1.5rem; margin-top: 1.25rem}
	.about-point-swiper-btn{width: 100%; }
	.swiper-button-prev, .swiper-button-next{width: 40px; height: 40px}
	
	.about-point-info{max-width: 100%}
	.about-point-info-bottom{padding: 2.5rem 2rem}
	.about-point-info-bottom-title{font-size: 1.3rem}
	.about-point-info-bottom-desc{line-height: 170%; margin: 1rem 0 0}
}

@media screen and (max-width:1021px){
	.about-point-title-swiper-btn{margin-bottom: 1.8rem}
	.about-point-sub{font-size: 15px}
}

@media screen and (max-width:767px){
	.about-point-title {padding-top: 0;}
	.about-point-swiper-btn{display: none}
	.about-point-info-top img{max-height: 275px;}
	
}
/*about-banner (배송서비스 배너)*/

.about-banner-inner{padding-top: 0;}
.about-banner-title {text-align: left;}

.contact-banner-list { display: flex; gap: 30px; }
.contact-banner-item { position: relative; flex: 1; height: 185px; border-radius: 20px; overflow: hidden; display: block; text-decoration: none; }

.banner-bg-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.banner-bg-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.contact-banner-item:hover .banner-bg-box img { transform: scale(1.05); }

.banner-txt-box { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); z-index: 2; color: #fff; }
.banner-title { font-size: 1.7rem; margin-bottom: 12px; }
.banner-desc { font-weight: 300; }

.banner-arrow { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; border: 1px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all 0.3s ease; }
.banner-arrow svg { width: 24px; height: 24px;  }
.contact-banner-item:hover .banner-arrow { background-color: rgba(255, 255, 255, 0.2); border-color: #fff; }

@media (max-width: 1280px) {
	 .contact-banner-list {display: flex !important; flex-direction: column !important; gap: 15px !important; height: auto !important; min-height: 1px;}
	.contact-banner-item {display: block !important; width: 100% !important; height: 180px !important; position: relative !important; flex: none !important; }
    .banner-title { font-size: 24px; }
    .banner-txt-box { left: 30px; }
    .banner-arrow { right: 30px; width: 50px; height: 50px; }
}

@media (max-width: 767px) {
    .banner-bg-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
}