@charset "utf-8";

a {
	cursor: pointer;
}

.section {position: relative;}
.section .inner {position: relative;}
/*.section .secTitle {font-size: 3.5em; font-weight: 700;}*/


.sec01 img {width: 100%; height: 100%; object-fit: cover;  transition: 1s linear;}

.sec01 .swiper-slide {cursor: pointer;}
.sec01 .swiper-slide-active img {transform: none;}
.sec01 .swiper-horizontal > .swiper-pagination-bullets, .sec01 .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 1em;}
.sec01 .swiper-pagination-bullet {background: var(--mainColor); transition: .5s ease; opacity: .3; width: .5em; height: .5em;}
.sec01 .swiper-pagination-bullet-active {width: 3.33em; background: var(--mainColor); border-radius: 2em; box-sizing: border-box; opacity: 1;}
.sec01 img.mo {display: none;}

.sec02 {padding-top: 2.22em; padding-bottom: 1.11em;}
.sec02 .inner {display: flex; gap: 2%;}
.sec02 .inner > div {width: 100%; background: #fff; border-radius: .9em; box-shadow: 0 0 .9em rgba(0, 0, 0, .05); padding: 1.1em; box-sizing: border-box;}
.sec02 .inner .top {display: flex; justify-content: space-between; gap: 1em;}
.sec02 .inner .top .plusBtn {width: 1.1em; height: 1em; background: url(/images/ico_plus.svg) no-repeat center / contain; transition: .5s ease;}
.sec02 .inner .title {font-size: 1.35em; margin-bottom: 1em; -webkit-text-stroke: .8px;}
.sec02 .inner .tt1 {overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; transition: .1s ease;}
.sec02 .inner .tt1 span {background-image: linear-gradient(#00664825, #00664825); background-repeat: no-repeat; background-position: left bottom 1px; background-size: 0 40%; transition: .5s ease; -webkit-box-sizing: border-box; display: initial;}
.sec02 .inner .listBox {display: flex; flex-direction: column; gap: 1.1em;}
.sec02 .inner .listBox li a {width: 100%; display: flex; gap: .5em;}
.sec02 .inner .listBox li a .tt1 {width: 100%;}
.sec02 .inner .newsBox li .tt2 {font-size: .7em; flex: none;}
.sec02 .inner .reviewBox li .starBox {display: flex; gap: 2px; flex: none; width: 6em; justify-content: flex-end;}
.sec02 .inner .reviewBox li .starBox.star1 .star:not(:first-child) {background-image: url(/images/ico_star_gray.svg);}
.sec02 .inner .reviewBox li .starBox.star2 .star:not(:first-child, :nth-child(2)) {background-image: url(/images/ico_star_gray.svg);}
.sec02 .inner .reviewBox li .starBox.star3 .star:not(:first-child, :nth-child(2), :nth-child(3)) {background-image: url(/images/ico_star_gray.svg);}
.sec02 .inner .reviewBox li .starBox.star4 .star:last-child {background-image: url(/images/ico_star_gray.svg);}
.sec02 .inner .reviewBox li .starBox .star {width: 1.1em; height: 1.1em; background: url(/images/ico_star_green.svg) no-repeat center / contain;}

.sec03 {padding-top: 1.11em; padding-bottom: 2.22em;}
.sec03 .inner .productBox {display: flex; flex-wrap: wrap; gap: 1.1em;}
.sec03 .inner .productBox li {width: calc(100% / 3 - .74em);}
.sec03 .inner .productBox li a {width: 100%; padding: .5em; border-radius: .9em; background: #fff; display: flex; flex-direction: column; gap: .9em; box-sizing: border-box;}
.sec03 .inner .productBox li a .imgBox {border-radius: .66em; height: 11.11em; overflow: hidden;}
.sec03 .inner .productBox li a .imgBox img {width: 100%; height: 100%; object-fit: cover; object-position: center; transition: .5s ease;}
.sec03 .inner .productBox li a .textBox {display: flex; flex-direction: column; gap: .7em}
.sec03 .inner .productBox li a .textBox .title {transition: .1s ease; font-weight: 400; line-height: 120%; height: 2.4em; overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.sec03 .inner .productBox li a .textBox .title p {background-image: linear-gradient(#00664825, #00664825); background-repeat: no-repeat; background-position: left bottom 1px; background-size: 0 40%; transition: .5s ease; -webkit-box-sizing: border-box; display: initial;}
.sec03 .inner .productBox li a .textBox .priceBox {display: flex; gap: 4px; align-items: flex-end;}
.sec03 .inner .productBox li a .textBox .priceBox .per {font-size: 1.1em;}
.sec03 .inner .productBox li a .textBox .priceBox .per span {font-size: .8em;}
.sec03 .inner .productBox li a .textBox .priceBox .price {font-size: 1.35em; font-weight: 700;}


@media screen and (min-width: 1025px) {
	.sec02 .inner .top .plusBtn:hover {transform: rotate(180deg) scale(1.5); background-image: url(/images/ico_plus_green.svg);}
	.sec02 .inner .listBox a:hover .tt1 {color: var(--mainColor)}
	.sec02 .inner .listBox a:hover .tt1 span {background-size: 100% 40%;}
	.sec03 .inner .productBox li a:hover .imgBox img {transform: scale(1.05);}
	.sec03 .inner .productBox li a:hover .textBox .title {color: var(--mainColor);}
	.sec03 .inner .productBox li a:hover .textBox .title p {background-size: 100% 40%;} 
}
@media screen and (max-width: 768px) {
	.sec01 img.mo {display: block;}
	.sec01 img.pc {display: none;}
	.sec02 {padding-top: 1.11em;}
	.sec02 .inner {flex-direction: column; gap: 1.5em;}
	.sec03 {padding-top: 0;}
	.sec03 .inner .productBox {gap: .8em}
	.sec03 .inner .productBox li {width: calc(100% / 2 - .4em);}
	.sec03 .inner .productBox li a .imgBox {padding-bottom: 100%; position: relative; height: auto;}
	.sec03 .inner .productBox li a .imgBox img {position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; top: 0; left: 0;}

}