/*메인*/
.main{height: 100vh; padding-top: 110px; padding-bottom:100px;}
.main img{width: 100%; height: 100%; object-fit: cover;}
.main .mobile{display: none;}
.main .text-box1{position: absolute; top:150px; left: 50%; transform: translate(-50%,0);text-align: center; line-height: 65px;}
.main .text-box1 span{font-size: 25px;}

.main .text-box2{position: absolute; bottom:200px; left: 50%; transform: translate(-50%,0);text-align: center; }
.main .text-box2 h6{font-size: 15px; font-weight: 500; padding-bottom: 20px;}
.main .btn{background-color: #61403e;}
.main .btn:hover{background-color: rgb(80, 80, 80);}

@media(max-width:800px){
    .main .desk { display: none; }
    .main .mobile { display: block; }
    .main .text-box1{position: absolute; top:100px;  left: 50%; font-size: 50px;white-space: nowrap; line-height: 55px}
    .main .text-box2{position: absolute; bottom:170px; left: 50%; color: white; }
}

/*섹션1-alo ♥ jisoo*/
.section1 .item{padding-bottom: 100px;}
.section1 span{font-size: 14px;}

.section1 img{width: 100%; height: 100%; object-fit: cover;}
.section1 .text-box{margin: 80px auto; position: absolute; top: 0; right: 0; padding-right: 15%; color: white; }
.section1 .text-box h2{text-align: left; padding-bottom: 30px; font-weight: 700;}
.section1 .text-box h4{padding-bottom: 50px; font-weight: 200; line-height: 30px; }

.section1 .btn {display: inline-block;
background-color: black;
font-size: 14px;  
text-decoration: none;
text-transform: uppercase;
font-weight: 500; border-radius: 0px;
border: none; outline: none; width: 100%; height: 35px;}
.section1 .btn:hover{background-color: rgb(80, 80, 80);}

.section1 .mobile {display: none;}

@media(max-width:800px){
    .section1 .desk { display: none; }
    .section1 .mobile { display: block; }
    .section1 .text-box{ position: absolute; top: 0; right: 0; padding-right: 15%; padding-top: 60%;  }
    .section1 .text-box h2{padding-bottom: 10px; font-size: 30px;}
    .section1 .text-box h4{padding-bottom: 10px; font-size: 20px; }
}

@media(max-width:450px){
    .section1 .text-box{ position: absolute; top: 0; right: 0; padding-right: 7%; padding-top: 50%;  }
}


/*2 TRENDING NOW*/
.section2 .container{display: grid; grid-template-columns:1fr 1fr 1fr 1fr; gap: 30px; }
.section2 .item img{width: 100%; height: 100%; object-fit: cover;}
.section2  .text-box{ background-color: black;color: white; text-align: center; padding: 10px;}

@media(max-width:800px)
{.section2 .container {grid-template-columns: 1fr 1fr; gap:10px}
}

/*3 카테고리*/
.section3{padding-top: 100px; white-space: nowrap;}
.section3 .container{display: flex; justify-content: center;
text-align: center; padding-bottom: 10px; gap: 30px;}

.section3 .section-title h6{text-align: center;}

.section3 .item img{width:100px; padding-bottom: 10px;}

@media(max-width:1000px)
{.section3 .container{
overflow: auto;}}

/*섹션4-제품*/
.section4{ width: 90%; max-width: 1300px; margin: 0 auto; padding-top: 100px;}
.section4 .section-title{white-space: nowrap;}
.section4 .container{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding-bottom:10px;}
.section4 img{width: 100%; height: 100%; display: block; object-fit: cover; }
.section4 .item .text-box{line-height: 30px; padding-top: 15px;}
.section4 .item .color{background-color: rgb(80, 80, 80, 0.7);
position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; gap:10px; align-items:center; justify-content: center; opacity: 0; transform: 0.5s;}
.section4 .item i {font-size: 20px; color: white;} 

.section4 .item:hover .color{opacity: 1; 
      transition: 0.6s;}

.section4 .btn-item {padding-top: 50px;}
.section4 .btn {margin: 0 auto; display: table;}
.section4 .btn:hover {background-color: rgb(80, 80, 80);}

@media(max-width:1000px)
{.section4 .container{grid-template-columns: 1fr 1fr;}
.section4 .item .text-box{line-height: 25px;}
.section4 h5{font-size: 15px;}
.section4 h6{font-size: 13px;}
.section4 p{font-size: 13px;}
}

/*섹션 5-띠배너*/
.section5 {padding-top: 100px;}
.section5 .mobile { display: none }
.section5 img{width: 100%; height: 100%; display: block;}

@media(max-width:800px){
    .section5 .desk { display: none; }
    .section5 .mobile { display: block; }
}

/*섹션 6 샵바이컬러*/
.section6 {padding-top: 100px; padding-bottom: 100px;} 
.section6 .container {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;}
.section6 img {width: 100%; height: 100%; display: block;}

.section6 .text-box {color: white; padding: 40px; padding-bottom: 60px;}

.section6 .item1 .text-box {background-color: #453223;}
.section6 .item2 .text-box {background-color: #1e263b;}
.section6 .item3 .text-box {background-color: #b8c6e4;}
.section6 .text-box h6{border-bottom: 1px solid white; position: absolute; right:30px;}

.section6 .item2 .text-box {border-bottom: none;}

.section6 .prev-btn{width: 50px; height: 50px; border-left: 3px solid #999999; 
border-bottom: 3px solid #999999; 
transform: rotate(45deg); 
position: absolute; top: calc(50% - 35px); left: -60px;}

.section6 .next-btn{width: 50px; height: 50px;
border-right: 3px solid #999999; 
border-bottom: 3px solid #999999; 
transform: rotate(-45deg); 
top:-400px;
right: -1310px;}

@media(max-width:800px)
{.section6 .container {grid-template-columns: 1fr;}
.section6 .prev-btn{display: none;}
.section6 .next-btn{display: none;}
}

/*섹션 7 자주찾는서비스*/
.section7{background-color:#f3f3f3; padding-top: 100px;}
.section7 .section-title{text-align: center;}
.section7 .container{display: flex; justify-content: center;
text-align: center; padding-bottom: 100px; gap: 50px;}

.section7 .item img{width:100px; padding-bottom: 10px; margin: 0 auto;}
.section7 .item {text-align: center;}

@media(max-width:1000px)
{
    .section7 .container {display:grid; grid-template-columns: 1fr;}}


/*섹션 8 셀럽그리드*/
.section8 {padding-top: 100px; padding-bottom: 150px;} 
.section8 .section-title h6{text-align: left;} 
.section8 .section-title h2{text-align: left;} 
.section8 .container {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; grid-auto-rows: 280px; padding-bottom: 100px;}
.section8 img{width: 100%; height: 100%;}
.section8 .item1{ grid-row: 2 span;}
.section8 .item3{ grid-row: 2 span;}
.section8 .item4{grid-row: 2 span;}
.section8 p{position: absolute; bottom:30px; left: 15px;text-align: center; color: white; font-size: 25px; text-align: 500;}

.section8 .btn {margin: 0 auto; display: table; width: 200px; height: 30px;}
.section8 .btn:hover{background-color: rgb(80, 80, 80);}

@media(max-width:1000px)
{.section8 .container {grid-auto-rows:200px;}}

@media(max-width:700px)
{.section8 .container {grid-template-columns: 1fr; grid-auto-rows:350px;} .section9 .item{grid-row: auto;}}